Buttons
One pill shape, regular weight, three sizes. Hover changes the fill (black to dark grey, white to light grey), nothing moves. The secondary button has no border: a half-pixel ring plus two soft shadows. Every section imports these from the Base, so a change here reaches all of them.
Pill buttons
Primary and secondary in every size. Both become a Next Link when given an href.
lg · 44px · 16px text · padding 20px · hero and section CTAs (default)
md · 40px · 15px text · padding 16px · tab bars, inline actions
sm · 36px · 14px text · padding 14px · navigation
disabled · 50% opacity, no pointer
On dark backgrounds
primary-on-dark is white with the shadow; secondary-on-dark is transparent with a light ring. HeroCta switches to them with onDark.
Hero pair
HeroCta: primary + secondary, 44px, 8px apart. Wraps on narrow screens.
HeroCta · lg
Navigation pair
Secondary before primary, 36px. The secondary one hides on phones.
sm · secondary + primary
Navigation links
NavLink: 14px regular in a 36px pill (padding 0 12px), grey fill on hover, no permanent fill for the current page. The round 36px control is the hamburger / menu button. Bar height 64px.
links 14px · pill 36px · hamburger 36px
Icon buttons
Round, icon only, same fills and shadow. 16px icons with a 2px stroke. Always pass aria-label.
sm · 32px · carousel arrows
md · 40px
lg · 44px · primary
pause / play · autoplay control
Switch tabs
Segmented: the white indicator slides to the chosen item; inactive items get a light grey hover layer. Arrow keys move the selection.
md · 40px
sm · 36px
Pagination
PaginationDots between two icon buttons: 4px dots, the active one a 24px line that slides along. Used under carousels and testimonials.
arrows 32px · dots 4px · active line 24 × 4px
Specs
| Size | Height | Padding | Text | Icon gap | Where |
|---|---|---|---|---|---|
| lg | 44px | 0 20px | 16px / 24px | 8px | Hero CTAs, section CTAs, Read all stories |
| md | 40px | 0 16px | 15px / 22px | 6px | Switch tabs, inline actions |
| sm | 36px | 0 14px | 14px / 21px | 6px | Navigation, newsletter submit |
| Icon sm / md / lg | 32 / 40 / 44px | — | 16px icon, 2px stroke | — | Carousel arrows, pause, close |
Weight 400, radius 9999px, hover 150ms with the standard ease, focus ring 2px interactive blue, pair gap 8px.
Tokens: button-primary, button-primary-hover, button-secondary, button-secondary-hover, surface-pressed, pagination-dot, pagination-active, shadow-button.