Button System - Tech App

Hi, Shivani

You've come up with a really thoughtful approach to building a button system.

- You have a solid and consistent approach to your work, and that really stands out.

- It’s especially great that you took the time to design both light and dark themes — that shows attention to detail.

- You’ve also structured and organized components into layouts. which is a smart and scalable approach.

- And most importantly, you demonstrated how the system performs through clear, practical examples.

Good job!

Now, let’s look a bit closer at some aspects.

Try reflecting on the following questions:

1. What guidelines are you using when choosing color variations for different button states?

-- Designing with accessibility in mind is essential. It’s not just about aesthetics, it’s also about ensuring usability for everyone, across different environments and screen types.

Make it a habit to check the contrast ratio.

-- Right now, buttons in the disabled state are barely visible. Similarly, the hover background color for secondary and tertiary buttons is hard to distinguish. You can find helpful information on this in the WCAG guidelines.

Also, if you’re working in Figma, it has built-in tools and plugins that can help you check contrast and accessibility directly in your designs.

2. This also applies to the shadows in your dialog examples.

-- Right now, it’s difficult to see the edges of those blocks clearly. AndsSome refinement here could really elevate the clarity.

3. What rules do you follow when placing elements like buttons and other components inside interface blocks?

-- You’re already doing a great job with layouts and padding inside the buttons themselves.

So when placing them inside modal windows, try to maintain the hug sizing property for consistency.

This will help keep the interface consistent and will reduce layout issues during development and implementation.

-- I noticed that many of the buttons in your examples have a fixed width, which breaks that consistency a bit.

4. It might also be a good time to refresh your knowledge of spacing rules — internal and external — using your modal examples as a reference.

All in all, you’ve done an excellent job.

This is a strong piece of work that reflects both your skills and thoughtful design approach.

Keep going!