Apple · scrub to study layout
Apple
> Apple
white room with a single blue switch. Apple's design language is a study in restraint: near-white canvas, generous breathing room, and one vivid blue accent that makes every action feel deliberate. Typography is the primary voice — SF Pro set with negative tracking that tightens as size grows, giving headlines architectural clarity without weight. The product IS the design: large product photography and lifestyle imagery dominate, while chrome recedes into thin borders, ghost navigation, and hairline rules. Sections alternate on a light gray canvas with full-bleed color washes for promotional blocks, creating rhythm through scale shifts rather than decoration.
↗ https://www.apple.comColor Palette
BRAND
Apple Blue
#0071e3
Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight
Link Blue
#0066cc
Outlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud
Signal Blue
#2997ff
Decorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction
NEUTRALS
Onyx
#000000
Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts
Carbon
#1d1d1f
Primary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth
Smoke
#333333
Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray
Graphite
#474747
Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy
Ash
#707070
Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet
Mist
#858585
Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces
Pebble
#e2e2e5
Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas
Frost
#f5f5f7
Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white
Ice
#f4f8fb
Elevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.