Design Language System

Button Components · 2026

Tokens sourced from Primitives.json + Semantic.json

Token Sync

Token Changes

Values corrected from updated Primitives.json + Semantic.json. 3 primitive values updated.

TokenOldNewNote
--color-blue-700#245090#255090Hover state (Blue-Brand 1/Blue-700)
--color-neutral-300#C4C4C4#C5C5C5Disabled bg / border
--color-success#248832#24882DFeedback/success (Green-900)
--btn-solid-hover#245090#255090Button hover (inherits Blue-700)

Design Tokens

Color

Primitive palette extracted from Primitives.json. Semantic mappings from Semantic.json.

Blue Scale

Blue-100

#E4EAF4

Solid/Focus-Fill, Outline/Focus-Fill

Blue-200

#BDC9DD

Inverted Active

Blue-300

#90A5C3

Focus Ring

Blue-400

#5A84BC

Blue-500

#2F71D4

Active / Pressed

Blue-600

#2A60B2

Blue-700

#255090

Hover

Blue-800

#1C3E70

Blue-900

#142D51

Default (Navy)

Neutral Scale

Neutral-100

#FBFBFB

Neutral-200

#EAEAEA

Neutral-300

#C5C5C5

Disabled BG / Border

Neutral-400

#9B9B9B

Disabled Text

Neutral-500

#7C7C7C

Neutral-600

#686868

Neutral-700

#4A4A4A

Neutral-800

#333333

Neutral-900

#181818

Brand & Feedback

Navy

#142D51

Maroon

#8E2231

Success

#24882D

Error

#C02321

Typography

Font: Proxima Nova · Weights: Regular 400, Medium 500, Semibold 600

Headers

H1
Shop the Collection
H2
New Arrivals
H3
Featured Styles
H4
Product Details
H5
Size & Fit

Body Text

Body XL
Our shirts are designed to be worn untucked.
Body L
Our shirts are designed to be worn untucked.
Body M
Our shirts are designed to be worn untucked.
Body S
Our shirts are designed to be worn untucked.
Body XS
Our shirts are designed to be worn untucked.

Spacing Scale

15-step scale derived from Scale/* primitive tokens.

Scale/100
4px
Scale/200
8px
Scale/300
12px
Scale/400
16px
Scale/500
20px
Scale/600
24px
Scale/700
28px
Scale/800
32px
Scale/900
40px
Scale/1000
48px
Scale/1100
64px
Scale/1200
80px
Scale/1300
96px
Scale/1400
120px

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
CTA
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
CTA
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
CTA
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
CTA
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.