53 lines
3.0 KiB
Markdown
53 lines
3.0 KiB
Markdown
# 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 `#D2D2D7` dividers 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`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)
|
||
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)
|