Apple

Identity

Media & Consumer

Bundled OpenDesign package for Apple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

SF Pro DisplayDisplay

SF Pro TextBody

Ag

SF MonoMono

--text-4xl · 80pxThe quick brown fox

--text-3xl · 56pxThe quick brown fox

--text-2xl · 40pxThe quick brown fox

--text-xl · 28pxThe quick brown fox

--text-lg · 21pxThe quick brown fox

--text-base · 17pxThe quick brown fox

--text-sm · 14pxThe quick brown fox

--text-xs · 12pxThe quick brown fox

Palette

--bg#ffffffPage background — defines the brand canvas.

--surface#f5f5f7Card / lifted container background.

--surface-warm#fbfbfdTertiary surface tier (kami warm-sand).

--fg#1d1d1fPrimary text color.

--fg-2#424245Secondary text tier (kami dark-warm).

--muted#6e6e73Subtext / captions.

--meta#86868bTertiary FG / metadata tier (kami stone).

--border#d2d2d7Default border / card edge.

--border-soft#e8e8edInner row separator that should not visually compete.

--accent#0071e3Brand accent. ≤2 visible uses per screen (lint enforced).

--accent-on#ffffffFG when --accent is the bg.

--success#16a34aSuccess state.

--warn#eab308Warning state.

--danger#dc2626Danger state.

Also named in DESIGN.md

Absolute Black#000000Immersive hero canvases, high-drama product chapters, deep UI anchors.

Body Link Blue#0066ccInline link color optimized for long-form readability.

High Luminance Link Blue#2997ffBright link treatment on darker scenes where stronger contrast is required.

Graphite Surface A#272729Dark card and media-control context layer.

Graphite Surface B#262629Slightly deeper dark utility layer for control groupings.

Graphite Surface C#28282bElevated dark supporting surfaces.

Graphite Surface D#2a2a2cDarkest elevated step used for separation in richer dark scenes.

Imagery & layout

Radius

--radius-sm8px

--radius-md12px

--radius-lg18px

--radius-pill980px

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

Elevation

--elev-raised

Layout

Layout rules

Base unit is effectively 8px, but the system supports dense micro-steps for precision alignment.
Frequently reused spacing values across pages: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
Universal rhythm constants visible across both marketing and retail flows: 8px unit scaffolding with 14-20px utility intervals for component padding and list spacing.
Showcase pages: large central columns with broad horizontal breathing room and full-width color chapters.
Commerce pages: tighter multi-column product and control grids with frequent modular stacking.
Container behavior: constrained readable core with generous outer margins at desktop widths.

Component kit

Light Dark