Components
Buttons
One primary action per screen. Use secondary for the most common alternative, ghost for low-emphasis, destructive for irreversible actions.
Variants
primary
secondary
ghost
outline
destructive
Sizes
sm · 32px
md · 40px
lg · 48px
States
Every interactive state pairs a darker background with white text to clear WCAG AA at small sizes.
Default
Hover
Active
Focus
Accessibility & contrast
The brand cyan #21CDEC is reserved for accents (links, charts, focus rings, dot indicators). Filled action buttons use the deep teal so white labels stay legible at every state.
| Token | Sample | Foreground | Contrast | WCAG |
|---|---|---|---|---|
| primary · #0E7A8D | White | 5.6 : 1 | AA | |
| primary-hover · #0C6A7A | White | 6.7 : 1 | AA | |
| primary-active · #095866 | White | 8.4 : 1 | AAA | |
| destructive · #D64545 | White | 4.6 : 1 | AA | |
| brand cyan · #21CDEC (accent only) | Neutral 900 | 9.1 : 1 | AAA |
Usage
✓ Do
One primary button per view. It should map to the most likely user action.
✓ Do
Use sentence-case verb labels: "Save changes", "Send campaign", "Add contact".
✕ Don't
Don't stack two primary buttons side by side. Pair primary + secondary instead.
✕ Don't
Don't fill buttons with the bright brand cyan — its low contrast with white text fails WCAG.