Apple Design (family hub)
The reference for designing the way Apple does — and the index to the rest of the family. Apple's whole system rests on three HIG themes:
- Clarity — legibility at every size, precise icons, deference of decoration to function.
- Deference — fluid motion and crisp, mostly-translucent UI that lets content lead; chrome recedes.
- Depth — distinct layers and realistic motion convey hierarchy and a sense of place.
The 2025 Liquid Glass era unifies all platforms around one adaptive, translucent material; the design goal is hierarchy, harmony, consistency. Read references/philosophy-and-evolution.md for the full "why" (skeuomorphism → flat → depth → glass) — imitate the reasoning, not just the blur.
⚠ Restraint first — but restraint is two-sided
Apple's identity is deference: it withholds far more than it applies. The #1 way "make it Apple" goes wrong is too many effects — but the equal and opposite failure is too few on the wrong surface.
Two-axis decision — pick both before reaching for any effect:
| Axis | Question | Rule |
|---|---|---|
| Restraint axis | Am I adding decoration, or meaning? | Remove anything that only adds decoration. Light-first, one accent, type+space carries hierarchy, glass = chrome only. |
| Surface axis | Is this a utility screen or a flagship/marketing page? | Utility (app/dashboard/form): motion near-invisible, springs ≤300ms, cinematic effects OFF. Flagship (landing/hero/product): motion IS the substance — continuous scroll-driven choreography required; a static page is the failure. |
Same restraint discipline, opposite motion budget — the surface sets the budget.
- Light is the default; dark is the exception. Do not default to a dark hero.
- Show the real product — a real screenshot inside a real device frame. A placeholder/abstract blob is a failure, not a stand-in.
- One accent color, lots of neutral + whitespace. Type + space carry hierarchy — not boxes, borders, or glow.
- Glass = chrome only (nav / sheets / sidebars), not every card. Gradient-text 0–1×, not every heading. Bento once, where it earns it.
- Before calling anything "Apple-grade", for each effect ask: "Remove it — does the design lose meaning, or just decoration?" If decoration, remove it. On a flagship page also ask: "Is there at least one continuous scroll-driven cinematic scene, or is this a dead template?"
Restraint exemplar: frontend/css/landing.css (deference, light-first, one accent).
Aliveness exemplar: apple.com/iphone (continuous scroll-progress transforms, pinned scenes, theme morph, ambient float — the cinematic benchmark).
Full guide + slop-trap table + dead-template guard + restraint checklist: references/restraint-and-antislop.md — read it before the effect recipes in the child skills.
When to use this hub
- The task is "make it feel Apple / premium" and you're not sure which sub-skill applies → start here, then route.
- You want the philosophy/principles, the era history, or the cross-cutting rules.
Route to the right child
This family is weighted toward the technical & functional substance — layout/grid systems, motion mechanics, and interaction logic (how things behave and why). Color/theming is the light, replaceable part (one reference); don't over-index on it.
| Need | Skill |
|---|---|
| Layout/grid/spacing + adaptive/responsive logic · typography (+ color) | apple-design-foundations |
| Interaction logic — navigation models, state/loading/empty/error behavior, perceived performance, input/focus | apple-design-interaction |
| Animation/springs + timing & choreography, gestures, haptics, micro-interactions | apple-design-motion |
| iOS/iPadOS/macOS/visionOS/watchOS surfaces + component anatomy | apple-design-os |
| Glass/vibrancy materials, app icons, SF Symbols | apple-design-materials |
| apple.com marketing pages, scrollytelling, front-end engineering | apple-design-web |
| CDN/image/video delivery + (reverse-engineered) backend architecture | apple-design-backend |
| Accessibility/inclusive design + marketing/persuasion/brand tactics | apple-design-tactics |
| "Make this landing/marketing page feel alive" / apple.com/iphone-style scrollytelling | apple-design-web (interaction inventory, scrollytelling recipes) + apple-design-motion (continuous scroll-progress section, damped lerp primitive, pinned scenes) |
Universal Apple rules (apply everywhere)
- Defer to content: chrome is quiet, translucent, and gets out of the way.
- Use the system type stack and semantic colors, not hardcoded hex (adapts to light/dark/contrast).
- Motion is spring-based, interruptible, and respects
prefers-reduced-motion. - Minimum 44pt touch target; layouts must reflow for Dynamic Type, never truncate.
- Materials must degrade gracefully under Reduce Transparency / Increase Contrast.
Confidence labels (used across all references)
Every non-trivial claim in the reference files is tagged [observed] (verifiable in the product), [documented] (Apple HIG/WWDC/docs), [inferred] (reasoned, unconfirmed), or [speculative] (educated guess). Treat [inferred]/[speculative] as analysis, never fact — this matters most in apple-design-backend.
References
references/restraint-and-antislop.md— read first. Apple's real defaults (light-first, real product, one accent) + the AI-slop traps + the restraint checklist.references/philosophy-and-evolution.md— HIG principles, the era evolution, and the why behind each shift.
