Aura Button System

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.