Actions
Button
Primary CTA. Pill radius at every size — Default (42px tall) and Big (60px tall).
Button triggers a single, immediate action — submitting a form, starting checkout, confirming a dialog. Seven visual styles cover a hierarchy of emphasis, from a single page-level Primary action down to low-emphasis Text and Tertiary actions.
Choosing a variant
- Primary — the one main action on a screen. Solid orange fill.
- Secondary — a supporting action next to a Primary, or the main action when nothing needs full Primary emphasis. White fill with a border that appears on hover/active.
- Tertiary — low-emphasis action, no border, transparent until hovered.
- Text — the lowest-emphasis action, tighter vertical padding, reads almost like a link.
- Outline Orange — an orange-bordered alternative to Secondary, for contexts that want brand color without full Primary weight.
- Text Dark BG / Tertiary Dark BG — the Text and Tertiary treatments, recolored for use on dark or saturated backgrounds (footer, hero panels).
Sizing
Default (42px tall) is the standard size for nearly all contexts. Big (60px tall) exists for high-emphasis moments — hero CTAs, checkout confirmation — and today is only defined in Figma for the Primary variant.
Do
- Use Primary for the single most important action on a screen — avoid more than one per view.
- Use the "-dark-bg" variants only on dark or saturated-color surfaces (e.g. the dark footer, hero panels).
- Keep labels short and action-oriented ("Save changes", not "Click here to save your changes").
Don't
- Don't override the label color on Primary — it is color/text/primary (#1A1A1A) at rest and switches to color/text/inverse (white) on hover/active. White on the resting orange fill is 1.86:1 and dark text on the hover fill is ~3.7:1; both fail WCAG AA.
- Don't use Big size on non-Primary variants without checking with design first — it isn't verified in the source file.
- Don't stack more than one Primary button in the same view; use Secondary or Tertiary for supporting actions.