Components
Buttons
Three voices: a coral pill that glows for the one main action, a glass outline for alternatives, and a quiet text link for everything else.
Primary is the one warm signal — at most one per view. Secondary supports it. Tertiary steps back.
| State | Primary | Secondary | Tertiary |
|---|---|---|---|
| Default | |||
| Hover | |||
| Pressed | |||
| Disabled | |||
| Loading | — |
Hover lightens and strengthens the glow; pressed deepens to rose and settles. Rows here are frozen visuals — hover the top row to feel the real thing.
md is the default. lg for hero moments and full-width mobile actions; sm for dense rows. All meet the 44px touch rule via hit area.
Icons sit at text size. Icon-only buttons always carry an accessible label.
On phones the primary action spans the card, exactly like the reference Deep Focus cards.