<?xml version="1.0" encoding="utf-8"?>

I created a button design system that has three sizes Small, Medium, and Large. The system contains Primary, Secondary, Ghost, Text, and Icon only. Also available in Dark and Light mode.

Tools used

Figma

From brief

Share

Share your insights — leave a project review and help others grow their skills

Reviews

1 review


Great work on this button design system! I really like how you structured the different sizes and made sure to include both Light and Dark modes. The color palette has a nice fall vibe, which makes the buttons feel warm and inviting.

I’d love to see more of your thought process behind the color choices and button specs—what led you to these decisions? Also, it would be great to see some examples of the buttons in an actual UI to get a better sense of how they work in context.

One thing to tweak is the spacing between the icons and text labels. Right now, it feels a bit too tight, making the buttons look cluttered, especially since the padding around them is more generous. You might also consider adding variations with an icon only on the left, one only on the right, and one with just a text label for more flexibility.

This is a solid foundation, and with a few small refinements, it’ll be even stronger!


7 Claps
Average 3.5 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>