Design documentation preview

Apple design system with product-gallery rhythm, SF Pro typography, and a single blue action color.

A Stripe v2.0 style documentation preview corrected for Apple: sticky black nav, frosted sub-nav behavior, alternating product tiles, white and parchment canvases, near-black ink, and no decorative gradients.

Explore tokens View product patterns
Primary action#0066cc
Ink#1d1d1f
Display faceSF Pro Display 600
Only true shadowproduct imagery

01 / Colors

White, parchment, near-black tiles, and one action blue.

Apple's palette is intentionally narrow. Surface alternation does the structural work, while #0066cc carries every interactive cue on light surfaces and #2997ff handles links on dark tiles.

Action Blue
#0066cc
Primary CTAs, links, focus root, selected actions.
Focus Blue
#0071e3
Keyboard focus ring and hovered primary button tone.
Sky Link Blue
#2997ff
Links and callouts on dark product tiles.
Near-Black Ink
#1d1d1f
Headlines, body text, and dark utility button fill.
Muted Copy
#6e6e73
Secondary descriptions and quiet system notes.
Pure White
#ffffff
Dominant canvas, utility cards, light product tiles.
Parchment
#f5f5f7
Alternating light tile, store canvas, footer surface.
Pearl Button
#fafafc
Subtle secondary capsule fill on product cards.
Near-Black Tile 1
#272729
Primary dark product tile surface.
Near-Black Tile 2
#2a2a2c
Micro-step dark variant for adjacent tiles.
Pure Black
#000000
Global nav, video void, true black product contexts.
Hairline
#e0e0e0
Store cards, configurator chips, subtle separators.

02 / Typography

SF Pro hierarchy with tight display tracking.

The preview preserves Apple's documented type ladder: 56px hero display, 40px tile display, 17px body copy, 14px captions, and ultra-thin 12px global navigation labels.

hero-display
The product is the page.
56px / 600 / 1.07 / -0.28px
SF Pro Display
display-lg
A gallery rhythm of light and dark tiles.
40px / 600 / 1.10 / 0
SF Pro Display
display-md
Section heads stay precise, not loud.
34px / 600 / 1.47 / -0.374px
SF Pro Text
lead
A one-line product promise.
28px / 400 / 1.14 / 0.196px
SF Pro Display
body
Body copy runs at 17px, with editorial leading and tight tracking that feels native to macOS and iOS.
17px / 400 / 1.47 / -0.374px
SF Pro Text
caption
Secondary captions and product-card metadata.
14px / 400 / 1.43 / -0.224px
SF Pro Text
nav-link
Store Mac iPad iPhone Watch AirPods TV
12px / 400 / 1.0 / -0.12px
SF Pro Text

03 / Buttons

Capsule actions, restrained utility controls, and blue links.

Apple's action grammar is simple: full-pill blue CTAs for conversion, blue outline pills for companion actions, small dark utility buttons in navigation, and circular translucent chips over photography.

Primary and secondary pills

The pill silhouette is the action signal. Active state scales to 0.95 instead of adding visual noise.

Learn moreBuyPressed
background #0066cc / radius 9999px / padding 11px 22px

Utility and image controls

Small rectangular utilities stay near-invisible. Circular translucent chips float over photography.

Text link
8px utility radius / 44px circular target / no button shadows

04 / Cards and surfaces

Full-bleed product tiles plus quiet utility cards.

This section keeps the Stripe documentation-preview density while demonstrating Apple's actual surface system: rectangular edge-to-edge tiles and rounded store utility cards with hairline borders.

Store utility card

White, 18px radius, 1px hairline, product imagery carries the only depth.

Buy

Accessory grid card

Square 1:1 crop, centered product, quiet copy and price metadata.

Learn more

Configurator card

Round chips inside a white grid surface with selection via focus blue border.

Configure

05 / Brand-specific product patterns

Navigation, configurators, gallery tiles, and environmental editorial surfaces.

Apple's brand feeling comes from repeated product page patterns rather than decoration: a black global nav, a frosted product sub-nav, large tile stacks, option chips, and a parchment footer.

Two-row navigation

Black global nav at 44px height, followed by a 52px frosted sub-nav with product name, links, and a persistent Buy CTA.

iPhoneOverview Buy
global-nav + sub-nav-frosted

Configurator option chips

Pill cells are large enough for touch, label, and price delta. Selected state uses a focus-blue 2px border.

Natural Titanium $0Blue Titanium $0256GB $0512GB +$200
rounded.pill / padding 12px 16px

Environment quote card

Dark photographic fallback surface, centered white display copy, blue action beneath. Atmosphere comes from content imagery, not CSS gradients.

Apple 2030
surface-tile-1 / display-lg / 80px padding

Product gallery stack

Light tile, dark tile, parchment tile, dark tile. Color alternation is the separator; tiles do not need borders or rounded corners.

white -> #272729 -> #f5f5f7 -> #2a2a2c

06 / Forms

Search is the documented neutral form pattern.

Analyzed Apple pages surface a neutral pill search input rather than a broad enterprise form system. The preview includes the neutral state and focus behavior; validation states are intentionally not invented.

44px height, full-pill radius, white canvas, subtle hairline.
Same restrained construction for store utility capture.

07 / Spacing

Large tile air with compact utility internals.

The structural rhythm is 80px product-tile padding, 24px utility card padding, and 8px-based supporting increments. Product imagery is never crowded.

xxs
4px
xs
8px
sm
12px
md
17px
lg
24px
xl
32px
xxl
48px
section
80px

08 / Radius

Rectangular tiles, rounded cards, and full pills.

Apple uses a small set of shape grammars. Full-bleed product tiles have no radius. Store cards are 18px. CTAs, search inputs, and option chips are pills.

none
0px product tiles
xs
5px rare chips
sm
8px utilities
md
11px pearl button
lg
18px utility cards
pill
9999px CTAs
full
44px circular chips

09 / Elevation

Flat UI, hairlines, backdrop blur, and one product shadow.

Cards, buttons, and chrome remain flat. Depth appears through surface alternation, frosted sticky bars, and the single shadow under product imagery.

Flat
no shadow
Tiles, nav, footer.
Hairline
1px rgba(0,0,0,.08)
Utility cards and chips.
Backdrop blur
saturate(180%) blur(20px)
Sub-nav and sticky buy bar.
Product shadow
rgba(0,0,0,.22) 3px 5px 30px
Product renders only.

10 / Extracted component tokens

Canonical Apple component tokens rendered in Stripe documentation format.

This table mirrors the approved documentation-preview rhythm: token name, primary values, and intended usage without generic renderer shortcuts.

ComponentKey tokensUsage
global-nav#000 / 44px / 12pxUltra-thin black top navigation with quiet white labels.
sub-nav-frosted#f5f5f7 / 52px / blurProduct-specific sticky nav with category title and Buy CTA.
button-primary#0066cc / pill / 11x22Default blue action capsule for Learn more, Buy, and Add to Bag.
button-secondary-pilltransparent / #0066cc / pillCompanion CTA that stays visually quiet beside primary action.
product-tile-light#fff / 0 radius / 80pxFull-bleed rectangular product gallery tile.
product-tile-dark#272729 / #fff / 80pxAlternating dark gallery tile with Sky Link Blue on dark.
store-utility-card#fff / 18px / hairlineRounded store card with no UI shadow and centered product imagery.
configurator-option-chippill / 12x16 / selected blueSelectable product options in buy flows.
search-input44px / pill / whiteNeutral accessories search field; validation states not invented.
product-shadowrgba(0,0,0,.22) 3px 5px 30pxReserved exclusively for product renders resting on a surface.
Source: www.designmd-store.com