Design System
Inspired by Apple

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Learn more View Documentation
01 / Colors

Color Palette

Primary
Pure Black
#000000
Hero backgrounds
Light Gray
#f5f5f7
Alternate sections
Near Black
#1d1d1f
Primary text, dark buttons
White
#ffffff
Text on dark, button text
Interactive
Apple Blue
#0071e3
Primary CTA, focus ring
Link Blue
#0066cc
Inline text links
Bright Blue
#2997ff
Links on dark bg
Text & Surface
Black 80%
rgba(0,0,0,0.8)
Secondary text
Black 48%
rgba(0,0,0,0.48)
Tertiary text
Filter BG
#fafafc
Search/filter buttons
Button Active
#ededf2
Pressed state
Dark Surfaces
Surface 1
#272729
Dark section cards
Surface 2
#28282a
Dark elevated cards
Surface 3
#2a2a2d
Highest dark elevation
Surface 4
#242426
Deepest dark tone
02 / Typography

Typography Scale

Display Hero
Display Hero -- 56px / 600 / 1.07 / -0.28px / SF Pro Display
Section Heading
Section Heading -- 40px / 600 / 1.10 / normal / SF Pro Display
Tile Heading
Tile Heading -- 28px / 400 / 1.14 / 0.196px / SF Pro Display
Card Title Bold
Card Title Bold -- 21px / 700 / 1.19 / 0.231px / SF Pro Display
Card Title Regular
Card Title Regular -- 21px / 400 / 1.19 / 0.231px / SF Pro Display
Body -- The all-new design brings incredible capability. Powerful features let you do more than ever.
Body -- 17px / 400 / 1.47 / -0.374px / SF Pro Text
Body Emphasis -- Featured highlights
Body Emphasis -- 17px / 600 / 1.24 / -0.374px / SF Pro Text
Link / Caption -- Learn more about the latest features
Link / Caption -- 14px / 400 / 1.43 / -0.224px / SF Pro Text
Micro -- Legal text, footnotes, and fine print
Micro -- 12px / 400 / 1.33 / -0.12px / SF Pro Text
Nano -- smallest size, regulatory labels
Nano -- 10px / 400 / 1.47 / -0.08px / SF Pro Text
03 / Buttons

Button Variants

Buy
Primary Blue
Learn more
Outline Pill
Shop iPhone
Dark Fill
Search
Filter
Media
Learn more >
Link Pill
04 / Cards (Dark)

Cards on Dark Background

iPhone

Designed to be extraordinary. Featuring the most advanced chip, an incredible camera system, and all-day battery life.

Learn more >

MacBook Neo

Supercharged for pros. The most powerful MacBook ever with the M-series chip delivers unprecedented performance.

Learn more >

iPad Air

Powerful and colorful. With the latest chip, stunning Liquid Retina display, and Apple Pencil support.

Learn more >
04 / Cards (Light)

Cards on Light Background

AirPods Max

High-fidelity audio with active noise cancellation, spatial audio, and computational audio for immersive listening.

Learn more >

Apple Watch

The ultimate device for a healthy life. Advanced health sensors, fitness metrics, and seamless connectivity.

Learn more >

Apple TV+

Original shows and movies from the world's greatest storytellers. Stream on all your favorite devices.

Learn more >
05 / Forms

Form Elements

Default
Focus (blue ring)
Error (red ring)
06 / Spacing

Spacing Scale

2
4
6
8
10
14
17
20
24
07 / Radius

Border Radius Scale

5px
Micro
8px
Buttons, Cards
11px
Search
12px
Features
980px
Pills
50%
Media
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow, solid bg
Nav Glass
Translucent + blur
Card Shadow
3px 5px 30px 0.22
Focus
2px solid Apple Blue
Dark Surface
#272729