Design System

Designed by Apple
in California.

Minimal elegance with precision-crafted clarity. Clean lines, generous whitespace, and a disciplined palette where content takes center stage.

13 color tokens 10 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a single blue accent for all interactive elements. 13 tokens spanning surfaces, text hierarchy, and semantic states.

Pure White
#ffffff
Primary page background
Snow
#fbfbfd
Alternate sections
Whisper Gray
#f5f5f7
Section backgrounds
Silver
#e8e8ed
Borders, dividers
Platinum
#d2d2d7
Inactive states
Graphite
#86868b
Secondary text
Charcoal
#6e6e73
Tertiary text
Jet Black
#1d1d1f
Primary text
True Black
#000000
Maximum emphasis
Apple Blue
#0071e3
Links, primary buttons
Success Green
#34c759
Confirmation states
Alert Red
#ff3b30
Error states
Typography

Type Scale

SF Pro as primary typeface (Inter substitute). Precise optical sizing with tight tracking on display sizes and generous leading on body text.

Hero Think different 64px / 1.08 / −0.025em
Display Designed by Apple 48px / 1.10 / −0.025em
Heading-lg Pro. Beyond. 40px / 1.15 / −0.022em
Heading MacBook Pro 28px / 1.29 / −0.016em
Heading-sm Get the highlights 24px / 1.33 / −0.012em
Body The most powerful MacBook Pro ever 17px / 1.47 / −0.01em
Footnote Trade-in values will vary 14px / 1.43 / —
Caption Legal · Fine print · Labels 12px / 1.33 / 0.007px

Fonts

Display SF Pro Display 400–700 · 28–64px
Text SF Pro Text 400–600 · 12–24px
Mono SF Mono 400, 600 · Code only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Spacious density with generous breathing room. 15-step spacing scale, fully rounded buttons and pill elements.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

default 12px
xl 16px
cards 20px
pill 980px

Shadows

Border 1px silver ring
Subtle cards, elevation
Medium modals, popovers
Heavy dialogs, sheets
Elevation

Surface System

Shadows over borders. Subtle elevation through diffused light. 4 distinct surface levels on a light canvas.

Pure White #ffffff — Level 0
Snow #fbfbfd — Level 1
Whisper Gray #f5f5f7 — Level 2
Card + Shadow #ffffff — Level 3
Components

Button Variants

Primary action (Apple Blue), secondary outline, and ghost text link. Fully rounded pill buttons are the default.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Apple Blue (#0071e3) background, white text, fully rounded pill shape. Use for the single most important action on the page.
Secondary Action Button
Supporting actions
.btn-secondary
Apple Blue text with blue border, fully rounded. Fills to solid blue on hover for clear feedback.
Ghost Text Link
Inline links, tertiary actions
.btn-ghost
Watch the film Hover state
Apple Blue text, no border, no background. Underline appears on hover. The lightest interactive treatment.
Card Surface
Content containers, product showcases
.card
MacBook Pro
Pro. Beyond.
Buy >
White background, 20px radius, subtle shadow (0 2px 12px rgba(0,0,0,0.08)). Content bleeds to edges — no internal padding.
Input Field
User text input
input
White background, Platinum border, 12px radius. Focus state transitions border to Apple Blue (#0071e3).
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as the primary canvas
  • Jet Black (#1d1d1f) for all primary text
  • Apple Blue (#0071e3) exclusively for interactive elements
  • Whisper Gray (#f5f5f7) for section separation
  • Fully rounded (980px) pill buttons
  • 20px radius for cards and containers
  • Generous whitespace — 64px minimum between sections
  • Subtle shadows over hard borders
Don't — Avoid
  • Apple Blue for non-interactive decorative elements
  • Heavy drop shadows — keep them diffused and light
  • More than two text colors in a single block
  • Tight, cramped spacing without breathing room
  • Colored button backgrounds except Apple Blue for CTAs
  • Decorative or ornamental fonts
  • Hard-edged borders — prefer shadows or whitespace
  • Mono fonts for non-code content