What is Apple's primary brand color?

Action Blue #0066cc — the single interactive color across the entire system. Every link, every pill CTA, every focus signal uses it. There is no secondary brand accent. On dark tiles it shifts to a brighter sibling at #2997ff (Sky Link Blue) because the standard Action Blue would disappear against the #272729 tile background. The focus-ring variant nudges to #0071e3.

What typography does Apple use, and what should I use if SF Pro isn't available?

SF Pro Display (Apple's proprietary display face, optimized for ≥19px) and SF Pro Text (optimized for body and UI below 20px). The fallback walks 'system-ui, -apple-system' — on Apple platforms this resolves to the real SF Pro. For non-Apple platforms, Inter is the closest open-source substitute. Nudge letter-spacing down by -0.01em on display sizes to re-create the Apple-tight headline feel.

Why does Apple use 17px body text instead of 16px?

That single extra pixel defines the brand's reading pace. SF Pro Text at 17px / 400 / 1.47 line-height with -0.374px letter-spacing reads as 'an article, not a SaaS marketing page.' It's small enough to feel professional, large enough to feel slowed-down. Apple breaks the 16px SaaS convention deliberately — copying their body styling without the 17px misses the voice entirely.

How does Apple structure its long marketing pages?

As a stack of edge-to-edge product tiles. Each tile occupies roughly one viewport, alternating between white, parchment (#f5f5f7), and near-black (#272729 with two micro-step variants for stacked dark tiles). The color change itself is the section divider — no borders, no shadows, no rules. Inside each tile: a centered headline at 40px/600 SF Pro Display, a one-line tagline, two tiny blue pill CTAs, and the product render.

What's Apple's shadow philosophy?

Exactly one shadow exists in the entire system: rgba(0, 0, 0, 0.22) 3px 5px 30px, applied only to product photography resting on a surface. No shadow on cards. No shadow on buttons. No shadow on text. Elevation comes from surface-color change between tiles and from backdrop-filter blur on sticky bars. The single shadow is about giving the product visual weight, not about UI hierarchy.

Can I use this DESIGN.md to build my own product page?

Yes — feed it to Claude, Cursor, or GitHub Copilot. The agent will reproduce Apple's restraint (single accent, edge-to-edge tile alternation, museum-grade whitespace) rather than a generic SaaS theme. You can also reference the tokens directly — every color, type style, radius, and spacing value is a quoted value ready to paste into Tailwind config, CSS variables, or your own component library. Pair with high-quality product photography to get the full effect.

Apple Design System

Apple's design system as a DESIGN.md file.

About Apple DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source apple.com

Consumer Electronics
Mobile Platforms

Apple's web presence is a masterclass in reverent product photography framed by near-invisible UI. Every page is a stack of edge-to-edge product tiles — alternating light and dark canvases, each centered on a hero headline, a one-line tagline, two tiny blue pill CTAs, and an impossibly crisp product render. Nothing competes with the product. Typography is confident but quiet; color is either pure white, an off-white parchment, or a near-black tile; interactive elements are a single, quiet Action Blue at #0066cc. Density is unusually low even by contemporary SaaS standards.

This page captures Apple's marketing system as a DESIGN.md file — Google Labs' open spec for machine-readable design tokens. Inside: 21 color tokens covering the one signature blue, three near-black tile variants, white and parchment canvases, and a muted text ladder; 16 typography tokens running entirely on SF Pro Display (for display sizes) and SF Pro Text (for body and UI), with weight 500 deliberately absent from the ladder; seven radius tokens that hierarchically split between zero (full-bleed tiles) and pill (every interactive element); and 24 component definitions covering buttons, product tiles, the two-row navigation, store utility cards, the iPhone configurator, and a floating sticky purchase bar.

Drop the file into Claude, Cursor, GitHub Copilot, or any AI assistant that reads structured design tokens. The agent will produce React components and Tailwind classes that match Apple's actual voice — museum-grade reverence for product, not a generic SaaS template. Use it as a reference for design audits, a starting point for your own product-led marketing surface, or a teaching artifact for talking about restraint, single-accent systems, and the discipline of letting photography do the framing.

What makes it distinct

Single interactive colorAction Blue #0066cc is every link, every pill CTA, every focus signal; no secondary brand accent exists
Photography-first chromeUI recedes so the product can speak; exactly one drop-shadow in the system, reserved for product imagery
Alternating tile rhythmfull-bleed light and dark canvases stack edge-to-edge; the color change itself is the section divider
Body at 17px, not 16pxdisplay headlines carry negative letter-spacing for the signature Apple-tight cadence
Weight 500 is absentthe type ladder runs 300/400/600/700, with the rare weight 300 reserved for airy moments

Live at apple.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

apple.com

Explore Apple

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Apple design system FAQ

Common questions about Apple's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Apple in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→