Skip to content
Browse
Library

Apple AirPods Pro. Gallery vitrine in morning fog.

  • Commerce
  • Light theme
  • 12 colors
  • 2 typefaces

Apple's product page visual system is a near-monochrome cathedral of negative space where a single product floats centered under enormous display type. The canvas is fog-gray #f5f5f7 with pure white surfaces layered above, and the entire chromatic range is reduced to one precise blue (#0071e3) that exists only to make the buy button switch on. Typography carries the design: SF Pro Display at weight 600 with aggressive negative tracking at 56–96px creates headlines that feel carved rather than typed, while body copy at 17–21px stays whisper-thin to let the product breathe. Components are reduced to essential geometry — pill buttons at 980px radius, rounded cards at 28px, no shadows, no decorative borders — so the imagery and type do all the emotional work.

Visit apple.com
Screenshot of Apple (España)
Captured from apple.com on October 11, 2026

Apple AirPods Pro design system

Apple AirPods Pro

Brand2

  • Buy button fill, primary action background — the only chromatic surface in the system, reserved exclusively for conversion

  • Inline text links, Learn more arrows, navigational text accents

Accent1

  • Decorative imagery gradient spanning cyan, violet, magenta, amber — appears only in the product's light-ring visual, never in UI controls

Neutrals9

  • Primary text, card borders, structural outlines — near-black with a hint of warmth prevents harshness against the fog canvas

  • Nav bar elements, button borders on dark surfaces, structural strokes

  • Nav text and borders, link borders in secondary contexts

  • Body text in lower-emphasis contexts, subtle borders

  • Secondary text, subdued borders, nav dividers

  • Muted helper text, tertiary metadata, de-emphasized labels

  • Ghost button backgrounds, inactive chip surfaces, soft separators

  • Page background, badge fills, secondary surfaces — the signature Apple light gray that defines the gallery atmosphere

  • Card surfaces, icon fills, elevated layers above fog canvas

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure White on Electric Blue

4.70 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.