Button Design System for a Tech Platform
Button Design System Summary
1.Button Types
The system offers a variety of button types, including Primary, Secondary, and Tertiary buttons, each designed for specific actions. Primary buttons are used for the most important calls to action, while secondary buttons handle less critical actions. Tertiary buttons are used for subtle, less prominent actions, maintaining functionality without overwhelming the user.
2. Button Sizes
Multiple button sizes, such as Small, Medium, and Large, accommodate different use cases. Small buttons suit compact spaces, while Medium is the standard size for general use, and Large buttons are ideal for touch interfaces or when emphasis is needed.
3. Accessibility & Color Contrast
Accessibility is a core focus, ensuring all buttons meet or exceed WCAG color contrast guidelines (minimum contrast ratio of 4.5:1). This guarantees buttons are easily distinguishable, even for users with visual impairments, enhancing usability and inclusivity.
4. Button States
The design includes clearly defined states for buttons: Default, Hover, Active, Disabled, and Focused. Each state is distinct, with subtle transitions and changes in color or shadow to provide immediate feedback and guide user interactions effectively.
Tools used
From brief
Topics
Share
Reviews
2 reviews
Your design document is clean and easy to read. In addition, your design has taken into considerations of various button states. Great job!
To be more advanced, would be nice to improve as Nicole suggested.
The difference between the states are very clear and this is great for the user to understand what to expect from the button. The colour changes and subtle changes on hover and focus for example make each state super simple and easy to keep track of. Although the subtlety makes the design quite minimal and clean, I would boost the difference in states by adding some shadows, bolder borders, or even try out some animations. I feel the opacity on the disabled state is really low and might get lose in an actual ui, so my tip here is to use a muted version of the button's colour to keep the visibility but still show its disabled. I like that you drew inspiration from Atlassian and the colour coding for the button purpose was well thought out. Good job!
You might also like
Sojo NFT Marketplace
From Idea to Full-Stack Web App
Docto
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
Fundraising Website
NEWFASHON™ - Landing page
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
