R / Styles / Apple
Apple PlatformSolutionsUse CasesResources Schedule a Demo
White room with a
#0071e3
System Blue
#1d1d1f
Ink
#6e6e73
Slate

Apple

Visit ↗

White room with a single blue accent

A precise, near-monochrome canvas that lets product photography carry the emotional weight. Type is a neutral sans set at generous line-height. Motion, spacing, and photography — never color — do the storytelling. The single accent is a saturated system blue used only for interactive affordances.

https://www.apple.com

Color Palette

ACCENT
System Blue
#0071e3
--color-system-blue

Links, primary CTA, focus state

NEUTRALS
Ink
#1d1d1f
--color-ink

Body text, headlines

Slate
#6e6e73
--color-slate

Secondary text, meta

Hairline
#d2d2d7
--color-hairline

Divider, subtle border

Fog
#f5f5f7
--color-fog

Section background alternate

Paper
#ffffff
--color-paper

Primary page background

Typography

Type Scale
Minor Third (1.2) from 17px base
display-xl
96px · 600 · 1.05
The quick brown fox jumps
display
56px · 600 · 1.08
The quick brown fox jumps
heading
32px · 600 · 1.15
The quick brown fox jumps
subheading
21px · 500 · 1.3
The quick brown fox jumps
body-lg
19px · 400 · 1.5
The quick brown fox jumps
body
17px · 400 · 1.5
The quick brown fox jumps
Fonts
display SF Pro Display
Weights 500, 600, 700
Sizes 21–96px
Line-height 1.05–1.3
Letter-spacing -0.02em
Fallback -apple-system, BlinkMacSystemFont, Inter

System-native for pixel-perfect rendering.

body SF Pro Text
Weights 400, 500
Sizes 13–19px
Line-height 1.4–1.55
Letter-spacing -0.01em
Fallback -apple-system, Segoe UI, Inter

Optimized for smaller reading sizes.

Spacing & Shape

Spacing
space-2
8px
Inline gap
space-4
16px
Component padding
space-8
32px
Block padding
space-16
64px
Section gap
space-24
96px
Hero vertical rhythm
Radii
radius-md
12px
Cards
radius-lg
18px
Feature panels, product tiles
radius-full
9999px
Pill buttons

Guidelines

  • Photography and product renders are the color. UI stays chromatically silent.
  • Blue (#0071e3) is used only for interactive affordances — never decoration.
  • Line-height on body is always ≥1.5; reading comfort is non-negotiable.
  • Sections separate with 96px of space on desktop, not with borders.

More like this

AI for Business
Brutalist editorial showroom on warm gray
Reflect Notes
Starlit violet cosmos — a dark editorial notebook
dope.security
Midnight terminal with violet phosphor accents
Hungry Tiger
Turmeric-bright graffiti on a warm cream wall
Vercel
Typeset terminal on white paper
Notion
Warm paper notebook under morning light