Dark Mode

# 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
Light 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 Gray 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

Apple ID
Default
Password
Focus (blue ring)
Email
Error (red ring)
Feedback

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.5
Focus
2px solid Bright Blue
Dark Surface
#2a2a2d