3.0 KiB
apple-hig — Apple Human Interface
- School: Editorial / Minimalist
- Vibe: Generous space, hero product on white, one thought per screen
- Best for: Premium hardware, premium software, "this product deserves a stage" feel
- Touchstone: apple.com product pages, Apple keynote slides, HIG documentation
Palette
- Ground:
#FFFFFF(paper-pure white) or#000000(deep black, hero film moments only) - Ink:
#1D1D1F(Apple's not-quite-black) - Soft surface:
#F5F5F7 - Muted text:
#86868B - Accent (sparingly): system-blue
#0071E3
Typography
- Display: SF Pro Display (weight 600 for headlines, 400 for sub-display) — fall back to Inter Tight only when SF Pro is unreachable
- Body: SF Pro Text at 17px, line-height ~1.47
- Captions: SF Pro at 12–14px, weight 400, color
#86868B
Spacing: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 160. Section breaks are large (160px+ vertical). Headlines breathe.
Radius: 12 (small components) / 18 (cards) / 22 (large panels). Apple is rarely sharp-cornered, never gummy-bear rounded.
Shadow: barely visible. 0 1px 2px rgba(0,0,0,0.04) at most. Elevation through whitespace and color contrast, not shadow.
Motion: cubic-bezier expo-out; durations 350–650ms for layout moves, 150–250ms for hover. Never bouncy. Often a slow Ken Burns on hero imagery.
Signature moves
- One product photograph centered on whitespace, occupying ~40% of the hero
- Hero headline in big display weight, body line below in muted gray (
#86868B), single CTA in system-blue text-link form (no chunky button on hero — that comes later) - Section anatomy: tiny eyebrow label → big headline → one paragraph → one product shot → repeat. No tabs, no cards, no bento.
- Hairline
#D2D2D7dividers between sections, never anything heavier - Numbers are display-weight characters (e.g., a stat reads
12.9″, with the″set in a smaller weight)
Avoid
- Any gradient mesh, glow, or "tech atmosphere" — Apple's gradients are almost always subtle silver-to-charcoal on a product surface, not background decoration
- Stacking multiple CTAs in the hero
- Card grids of features (Apple uses long vertical sections, one idea each)
- Emoji of any kind on marketing pages
AI prompt seed (for hero imagery)
Studio-lit product photograph, single object centered on pure-white #FFFFFF ground, soft top-down diffused light, subtle floor reflection, 16:9, no text, no people, no shadow drama, color grading neutral.
Don't use when
- The product is software-only and doesn't have a "hero object" to photograph — you'll end up with a blank stage
- The brand wants to feel scrappy / startup / accessible — Apple HIG reads as expensive and serious
- Audience is anti-tech-corporate — it'll feel "stale Apple cosplay"
Same school — Editorial / Minimalist:
muji-kenya-hara·aesop·dieter-rams-braun·monocle-magazine
Browse all 25 recipes: INDEX.md