Apple Blue
#0071e3Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight
Apple
apple.comWebsite preview
The design language
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.
Color palette
brand
Link Blue
#0066ccOutlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud
Signal Blue
#2997ffDecorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction
neutral
Carbon
#1d1d1fPrimary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth
Frost
#f5f5f7Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white
Ice
#f4f8fbElevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it
Smoke
#333333Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray
Graphite
#474747Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy
Ash
#707070Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet
Mist
#858585Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces
Onyx
#000000Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts
Pebble
#e2e2e5Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas
Typography
Type scale
Major Second (1.125) · 17px basedisplay
56px · 600 · 1.07 · 0.616px trackingThe quick brown fox jumps
heading-lg
44px · 400 · 1.18 · -0.44px trackingThe quick brown fox jumps
heading
40px · 600 · 1.14 · 0.44px trackingThe quick brown fox jumps
text-34
34px · 600 · 1.47The quick brown fox jumps
heading-sm
28px · 400 · 1.18 · 0.196px trackingThe quick brown fox jumps
text-26
26px · 600 · 1.47The quick brown fox jumps
text-24
24px · 300 · 1.5The quick brown fox jumps
subheading
21px · 400 · 1.24 · -0.105px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SF Pro Display
- Weights
- 400, 600, 700
- Sizes
- 21px, 28px, 40px, 56px
- Line height
- 1.07, 1.10, 1.14, 1.19
- Letter spacing
- -0.005em at 21px, 0.007em at 28px, 0.011em at 40px+
- Fallback
- Inter, system-ui
- Features
- "numr"
Display headlines and large feature text — sizes 40px+ use the display cut for tighter aperture and stronger negative tracking; 700 reserved for promotional lockups, 400 for editorial product names
Additional typeface
SF Pro Text
- Weights
- 300, 400, 600
- Sizes
- 12px, 14px, 17px, 18px, 24px, 26px, 34px, 44px
- Line height
- 1.18, 1.24, 1.29, 1.33, 1.47, 1.50, 2.12, 2.41
- Letter spacing
- -0.022em at 12px, -0.016em at 17px, -0.011em at 24px, -0.01em at 44px
- Fallback
- Inter, system-ui
Body, navigation, buttons, subheads — the working typeface; 400 for body copy, 300 for subheads and refined labels, 600 for nav items and button text; negative tracking tightens proportionally with size (-0.022em at 12px down to -0.01em at 44px)
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
980pxcards
8pximages
8pxinputs
8pxbuttons
980pxSpacing scale
4px5px6px8px9px10px11px12px13px14px15px16px17px18px19px20px21px22px24px29px30px40px48px53px56px59px201pxGuidelines
Do
- Use #0071e3 only for filled action buttons and selected/active states — one color, one job.
- Pair every filled blue button with an outlined blue secondary action, never stack two filled buttons.
- Set body text at 17px with -0.016em letter-spacing — the negative tracking is what makes Apple type feel precise, not the size alone.
- Let product photography fill the full viewport width — never constrain hero images to a max-width container.
- Use 980px border-radius for every interactive button, tag, and pill — the fully rounded shape is non-negotiable.
- Set section backgrounds to full-bleed #f5f5f7 or a single product color wash — never use card containers inside a section.
- Weight 300 for subheads and editorial descriptors creates the signature Apple whisper-voice — 400 is for body, 600 is for nav.
Don’t
- Never use #0071e3 for text, borders, or decoration — it is exclusively a button fill color.
- Never add drop shadows to cards, buttons, or nav — the system uses hairline borders and surface shifts, not elevation.
- Never set headlines at 700 weight for product names — 600 is the maximum; 700 only appears in editorial lockups or promotional art.
- Never use a card or panel inside a #f5f5f7 section — the canvas itself is the surface; containers break the spatial logic.
- Never constrain the main content to a narrow column — Apple pages breathe at 100% width with internal max-widths only for text-heavy blocks.
- Never use radius below 980px for buttons or above 8px for cards/images — these are the only two radius values in the system.
- Never mix the three blues in one interactive element — #0071e3 is fill, #0066cc is outlined action, #2997ff is decorative.
Components
Filled Pill Button
Primary action — Buy, Learn more, Shop980px border-radius, #0071e3 background, white (#f4f8fb) text at 17px weight 400, padding 11px 15px, no border, no shadow. The single filled interactive element in the system.
Outlined Pill Button
Secondary action — pair with filled primary980px border-radius, 1px solid #0066cc border, #0066cc text at 17px weight 400, transparent fill, padding 11px 15px. Used as the second action next to a filled blue button.
Ghost Link
Tertiary action or inline text linkNo background, no border, #0066cc text at inherit size, underline on hover only. Weight 400, same family as body.
Global Nav Bar
Top-level site navigationFull-width, #1d1d1f or white background, 8px vertical padding, horizontal links at 12px weight 400 in #1d1d1f or #f5f5f7. Apple logo on left, product categories centered, search and bag icons on right. 1px hairline bottom border in #1d1d1f or #333.
Sticky Mini-Nav
Product page sub-navigation that pins below global navWhite background, product name in 21px weight 600 + colored wordmark, action links at 14px weight 400. 1px bottom border in #d2d2d7.
Product Hero Section
Full-bleed product showcase#f5f5f7 background, centered product name at 56px weight 600 in #1d1d1f, tagline at 26px weight 300, two action buttons centered below. Large product render fills the section with generous bottom padding.
Feature Banner
Full-bleed promotional or service contentFull-width photographic or color-washed background, overlay text and CTA. Can be dark with white text, or a pastel wash with dark text. No card surface — the image IS the surface.
Service Card Grid
Multi-service promotional row (Apple TV+, Fitness+, Music, Arcade)Horizontal scroll or grid of cards, each full-bleed photographic background, 8px radius, white text overlay. Card title 24-28px weight 600, genre label in 12-14px, pill action button (Listen now, Play now, Watch now) at bottom.
Typography-Only CTA Block
Compact product call-out within a sectionCentered stack: product name at 40-56px weight 600, one-line descriptor at 21px weight 300, optional italic product variant (e.g. 'iPad air') at 28px in #2997ff. Two pill buttons below, generous vertical breathing room.
Footer
Site-wide legal and link directory#f5f5f7 or #1d1d1f background, multi-column link grid at 12px weight 400 in #707070 or #f5f5f7, 1px hairline dividers in #333 or #d2d2d7, fine print at 12px. No card surfaces — flat, typographic, structural.
Form Input
Search, email capture, configuration inputs8px radius, 1px border in #d2d2d7 or #707070, 14-17px text, #f5f5f7 fill. Focus ring in #0071e3 at 2px.
Surfaces & elevation
Level 0
Canvas
#f5f5f7Page background, section default
Level 1
Elevated Wash
#f4f8fbLight blue-tinted section background for featured products
Level 2
Pebble
#e2e2e5Button fills, disabled states, surface differentiation
Layout & imagery
Layout
Full-bleed page model with no fixed max-width container — sections stretch edge-to-edge while text blocks center internally at roughly 980px. Navigation is a single sticky global bar with a secondary product-specific sub-nav that appears on scroll. Hero pattern is always centered: large product name, one-line tagline, two pill buttons, then the product render filling the remaining viewport. Sections stack vertically with generous vertical rhythm (64px+ between sections), alternating between #f5f5f7 and color-wash backgrounds. The lower page is a single horizontal row of full-bleed service cards (Apple TV+, Fitness+, Music, Arcade), each a photographic tile with overlaid text and a pill action. No sidebars, no multi-column content layouts, no asymmetric compositions — everything is centered, stacked, and symmetrical.
Imagery
Photography is the dominant visual language. Product shots are rendered on pure white or soft gray backgrounds with no environmental context — the device IS the hero, isolated and lit. Lifestyle photography appears in feature banners at full-bleed width, often with subjects cropped tightly. Color washes (pastel blue, pink, green) serve as section backgrounds for product highlights, not as decoration. Iconography is minimal and line-based, weight 1-2px, in the same gray scale as text. No illustrations, no abstract graphics, no 3D renders beyond the product photography itself.
Design notes
Agent Guide
**Quick Color Reference** - text: #1d1d1f - background: #f5f5f7 - border: #d2d2d7 / #333333 - accent: #2997ff (decorative only) - primary action: #0071e3 (filled action) - outlined action border: #0066cc **3-5 Example Component Prompts** 1. Create a product hero section: #f5f5f7 full-bleed background. Headline 'iPhone' at 56px SF Pro Display weight 600, #1d1d1f, letter-spacing 0.616px. Tagline 'Meet the latest iPhone lineup.' at 26px SF Pro Text weight 300, #1d1d1f. Two pill buttons centered below: filled #0071e3 with white text 'Learn more' (980px radius, 11px 15px padding), and outlined #0066cc with 1px border and #0066cc text 'Shop iPhone' (same radius and padding). Product render fills the lower portion. 2. Create a service card tile: full-bleed photographic background, 8px radius. Title 'Fitness+' at 28px weight 600 white, genre label at 12px weight 400 white with 70% opacity. Pill button at bottom: 980px radius, #0071e3 background, white text 'Watch now' at 14px weight 400, 8px 15px padding. 3. Create a global nav bar: full-width, #1d1d1f background, 8px vertical padding. Apple logo SVG on left at 14px height. Nav links centered: Store, Mac, iPad, iPhone, Watch, Vision, AirPods, TV & Home, Entertainment, Accessories, Support — all 12px weight 400, #f5f5f7 color, 1px #333333 bottom border on the bar. Search icon and bag icon on right. 4. Create a typographic CTA block: centered, 64px vertical padding. Product name 'iPad' at 40px SF Pro Display weight 600 #1d1d1f, followed by 'air' inline at 28px weight 400 italic #2997ff. Subtitle 'Now supercharged by M4.' at 21px weight 300 #1d1d1f. Two pill buttons below: filled #0071e3 'Learn more' and outlined #0066cc 'Buy' (both 980px radius, 11px 15px padding). 5. Create a footer block: #f5f5f7 background, four-column link grid. Each link 12px weight 400 #707070, 10px vertical gap. Column headers at 12px weight 600 #1d1d1f. 1px #d2d2d7 hairline divider above fine print. Fine print at 12px weight 400 #707070.
Elevation Philosophy
This system intentionally avoids elevation as a visual tool. Instead of shadows, hierarchy is built through surface color shifts (#f5f5f7 canvas, #f4f8fb elevated wash, #e2e2e5 filled surfaces) and 1px hairline borders in #d2d2d7 or #333333. The only shadow present is a subtle rgba(0,0,0,0.22) 3px 5px 30px on product images to ground them against the white canvas — never on cards, buttons, or panels. Flatness is the signature; depth comes from scale and photography, not from CSS shadows.
Similar brands
Bang & Olufsen
Same product-as-hero isolation photography on white canvas, same generous whitespace, same whisper-thin typography for product names
Teenage Engineering
Same near-monochrome product pages with generous spacing, though TE adds more personality through type and color accents
Nothing (tech)
Similar minimal product showcase layout, though Nothing uses more dot-matrix texture and dark surfaces
Dyson
Same centered product hero with large render, minimal copy, and paired pill action buttons on a light gray canvas
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
