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

Overview

Aura is a calm mood journal. Buttons should feel gentle, clear, and fast. The system stays quiet most of the time and becomes obvious when it matters.

Look and feel

Purple to lavender feels reflective and safe. Pill shapes reduce visual aggression. Primary is bold. Secondary is soft. Tertiary stays in the background. Destructive uses red and appears only for risky actions.

Sizes

Large 56 for key CTAs. Medium 40 for forms. Small 32 for dense areas. Widths are fluid. Touch targets meet 44 px on mobile.

States

One model everywhere. Default, hover, pressed, focus, disabled, loading, success. Pressed gives a slight darken and tiny scale. Focus uses a 2 px ring with 2 px offset.

Accessibility

Labels pass AA. Focus is visible on white and tinted surfaces. Keyboard and screen reader friendly. Icon-only buttons have accessible names.

Content rules

Short action verbs. Sentence case. Leading icons for object actions. Trailing icons for progression.

Use in product

Log mood. Start breathing. Turn on reminders. Confirm delete. Each scene shows clear hierarchy.

Handoff

Everything is tokenized. Fewer decisions. Faster shipping.

Tools used

Figma
ChatGPT

From brief

Topics

Share

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

Reviews

5 reviews


Your Aura button system design is awesome. You state well reasons why you select the colors. They are valid regarding the App's value proposition. The button shapes and layouts are well structured.

And, the design would be more polished if considering to make the saturations of different state more prominent. Additionally, the disabled state could be a bit dimmer.

All in all, you have created an impressive button system. Well done.

Thanks this helps a lot. I'll apply your suggestions :)

I really like the thought you’ve put into this project! You’ve applied colour theory and best practices nicely to create a button system that works perfectly for a mood journal app. Awesome job, Panchali!

Thank you!

Nice efforts on this one!

Thank you!

Awosome Panchali, This is a perfect Button System Keep Moving

Thank you.

Nice work, i really love the colours they bring out the personality of the product quite well

Thanks :)

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