Three variants × two surfaces, side by side
The full button vocabulary - primary, secondary, ghost - rendered on both paper and navy so you can see how each one translates across surfaces. Primary inverts (navy CTA on paper, white CTA on navy); secondary + ghost keep the same voice with swapped colours.
On paper
On navy
Interactive states — default → hover → focus → disabled
The four states every primary button cycles through, shown on paper. Hover darkens; focus adds the universal 2-px white + 2-px peak ring; disabled drops opacity and changes the cursor.
When to use which variant
The placement rules behind primary / secondary / ghost. One primary per surface, never compete CTAs side-by-side - these constraints are what keep the call-to-action voice singular across the site.
- One primary per surface - never two competing CTAs in the same band.
- Ghost / link CTAs carry the secondary action ("Learn more →").
- Hero + CTA bands inherit the matching primary recipe automatically.