Buttons
Variants and sizes that keep calls-to-action consistent in every context.
Variants
| Style name | Treatment | Use cases | Live pages |
|---|---|---|---|
Primary (orange) | Orange background, white text and icons, subtle drop shadow. | Hero and section CTAs on light backgrounds. | |
Alternate primary | Near-black fill with white text; in dark mode, flips to white fill with dark text. | Dark hero areas or neutral emphasis where orange would compete with the palette. | |
Neutral outline | Border-only pill with neutral fill, foreground text, and subtle hover state. | Low-emphasis utility actions and inline links. |
Sizes
Hero CTAs use size L, section CTAs use size M, and compact utilities (including global header CTAs) use size S.
| Style name | Dimensions | Use cases | Live pages |
|---|---|---|---|
Large (hero) | 48px height, 24px horizontal padding, 12px uppercase text. | Primary CTAs in hero bands and marquee sections. | |
Medium (sections) | 40px height, 20px horizontal padding, 11px uppercase text. | Default size for section CTAs and feature cards. | |
Small (utility) | 36px height, 16px horizontal padding, 10px uppercase text. | Compact utilities like filters, chips, and inline actions. |