Design Language System

Button Components · 2026

Tokens sourced from Primitives.json + Semantic.json

Design Tokens

Token Reference

All values sourced from Primitives.json + Semantic.json. Component uses 3-layer token architecture: Primitives → Semantic → Component (--btn-*). Switch tabs to view tokens for Solid (Light Mode Blue + Dark Mode Inverted) or Outline (Light Mode Blue + Dark Mode White) variants. Foundation rows (sizing, typography, radius) apply to all variants.

PropertyCSS TokenValueNotes
Foundation — applies to all variants
Size — sm--btn-w-sm × --btn-h-sm144px × 40px / px 16pxButtons/Width+Height/Small
Size — md--btn-w-md × --btn-h-md172px × 48px / px 20pxButtons/Width+Height/Medium/Regular
Size — lg--btn-w-lg × --btn-h-lg366px × 48px / px 20pxButtons/Width+Height/CTA/Large
Size — full--btn-w-full × --btn-h-full100% × 48px / px 20pxButtons/Width+Height/Full Width
Label font--btn-font-familyProxima NovaMedium 500
Label type--btn-font-size / line-height16px / 20px · 0.02em · capitalizeButtons/Font
Border radius--btn-radius4pxButtons/Radius/Default
Light Mode — Solid Blue (Primary)
Default--btn-solid-default#142D51Buttons/Solid/Default → Blue-900
Hover--btn-solid-hover#255090Buttons/Solid/Hover → Blue-700
Active--btn-solid-active#2F71D4Buttons/Solid/Active-Pressed
Focus bg--btn-solid-focus-fill#E4EAF4Buttons/Solid/Focus-Fill → Blue-100
Focus ring--btn-solid-focus-ring#90A5C3Buttons/Solid/Focus-Ring
Disabled--btn-solid-disabled#C5C5C5Buttons/Solid/Disabled → Neutral-300
Dark Mode — Inverted / White Solid (Primary on dark)
Default--btn-inverted-default#FFFFFF · text #142D51Buttons-Solid/Dark Mode → Inverted_Primary
Hover--btn-inverted-hover#E4EAF4Blue-100 fill on dark bg
Active--btn-inverted-active#BDC9DDBlue-200 fill on dark bg
Focus bg--btn-inverted-focus-fill#FFFFFFStays white — relies on focus ring
Focus ring--btn-inverted-focus-ring#90A5C3Same ring as Light Mode
Disabled--btn-inverted-disabled#C5C5C5 · text #9B9B9BNeutral-300 bg, Neutral-400 text

Button Components

Button

4 variants · 4 sizes · 5 interactive states. Typography: Proxima Nova Medium 16/20 · tracking 0.02em · capitalize. Border radius: 4px (Buttons/Radius/Default).

Sizing tokens

sm144px × 40pxpx 16px·Buttons/Width+Height/Small
md172px × 48pxpx 20px·Buttons/Width+Height/Medium/Regular
lg366px × 48pxpx 20px·Buttons/Width+Height/CTA/Large
full100% × 48pxpx 20px·Buttons/Width+Height/Full Width

Semantic color tokens (Solid)

Default#142D51Buttons/Solid/Default
Hover#255090Buttons/Solid/Hover
Active#2F71D4Buttons/Solid/Active-Pressed
Focus bg#E4EAF4Buttons/Solid/Focus-Fill
Focus ring#90A5C3Buttons/Solid/Focus-Ring
Disabled#C5C5C5Buttons/Solid/Disabled

Solid

Light Mode · Primary

Figma: Buttons-Solid/Light Mode → Buttons/Solid Blue · Default bg: #142D51 (Buttons/Solid/Default → Color/Blue/Blue-900)

Interactive — hover & click to preview states

Size
Default
Hover
Active
Focus
Disabled
Small
144 × 40
Regular
172 × 48
Large
366 × 48

Outline

Light Mode · Secondary

Figma: Button/Outlined → Buttons_CTA/Outlined (Border=Blue) · Border: #142D51 (Buttons/Outline/Default → Color/Blue/Blue-900)

Interactive

Size
Default
Hover
Active
Focus
Disabled
Small
144 × 40
Regular
172 × 48
Large
366 × 48

Dark Mode

Dark Background · Navy #142D51

Figma: Buttons-Solid/Dark Mode · Use on images, hero banners, or dark-surface sections.

Inverted

White Solid · Dark Mode Primary

Figma: Size=Regular, Border=No, Use=Inverted_Primary · BG: #FFFFFF · Text: #142D51

Interactive

Size
Default
Hover
Active
Focus
Disabled
Small
144 × 40
Regular
172 × 48
Large
366 × 48

Outline White

White Border · Dark Mode Secondary

Figma: Size=Regular, Border=Yes, Use=Secondary · Border/Text: #FFFFFF

Interactive

Size
Default
Hover
Active
Focus
Disabled
Small
144 × 40
Regular
172 × 48
Large
366 × 48

Composition Examples

Hero Banner

New Arrivals

Untucked. Always.

Button-Down

Classic Oxford Shirt

Find Your Fit

Answer 3 questions for a personalised recommendation.