Apple design

Apple Design (HIG + Liquid Glass edition)

This skill makes output actually feel Apple — not "generic minimal with more whitespace". The difference lives in specific numbers (type scales, radii, hit targets, easing) and in a philosophy of restraint. Specs here are synthesized from Apple's Human Interface Guidelines as of mid-2026, which means the current Liquid Glass design language, not the pre-2025 flat look.

The one thing to know first: Liquid Glass

Since 2025, Apple platforms separate every screen into two layers:

1. Content layer — the app's actual content. Extends edge-to-edge, scrolls under everything, uses opaque backgrounds and standard materials.
2. Functional layer (Liquid Glass) — controls and navigation (tab bars, toolbars, sidebars, buttons) that float above content on a dynamic glass material. It has no color of its own; it refracts what's beneath, adapts light/dark from the underlying content, and keeps symbols monochrome by default.

Practical rules: bars are floating rounded/capsule islands, not full-width strips glued to edges. Content visibly scrolls beneath them. A scroll edge effect (progressive blur/fade) separates floating controls from content — never a hard hairline by default. Color on glass is reserved: tint the background of at most one prominent action (e.g. Done); everything else stays monochrome. Don't build content-layer cards out of glass — glass is for interactive chrome only.

Route to the right reference

Deliverable	Read
App UI — any screen, component, or flow	references/hig-foundations.md + references/hig-components.md
UX flows, copy, empty/error/loading states, onboarding, settings, search	references/hig-patterns.md
Marketing/landing/product page	references/marketing-pages.md
HTML/CSS/JS or React+Tailwind build (tokens, glass recipes, motion code)	references/code-implementation.md (in addition to the above)
Figma work (frames, variables, text styles, effects)	references/figma-workflow.md (in addition to the above)

Mixed requests (landing page showing app screenshots): marketing rules govern the page; HIG rules govern anything depicted as an app.

Core philosophy (applies to everything)

Apple's stated principles — purpose, agency, responsibility, familiarity, flexibility, simplicity, craft, delight — cash out in practice as:

• One idea per screen/section. Each view makes one point with one hero element. If it feels busy, cut elements; don't shrink them.
• Content first, chrome recedes. Controls float above and stay minimal; content owns the screen edge-to-edge.
• Typography carries hierarchy — dramatic size/weight jumps, not boxes and borders. Body 17pt (iOS) / 13pt (macOS); headlines are several steps up, never one.
• Near-monochrome chrome. Tint marks interactivity — anything tinted looks tappable, so never tint static decoration. One or two tinted elements per view, maximum.
• Depth through material, not shadow stacks. Glass, background-level steps (system → secondary → tertiary), and hairlines at 8–30% opacity. Shadows only for genuinely floating things, soft and low-opacity.
• Motion is physics, tied to input. Springs and scroll-linked transforms that settle fast; direction of dismissal mirrors direction of arrival; always honor Reduce Motion.
• Forgiveness. Easy undo, obvious dismiss, confirmation only for non-undoable destruction.

Font strategy (read before choosing fonts)

Apple's SF Pro / SF Compact / New York fonts are licensed for Apple-platform design and development only:

• Prototypes viewed on Apple devices: use the system stack — -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif — which renders true SF on Mac/iPhone.
• Client production work / non-Apple distribution: recommend Inter (with font-feature-settings: "cv05", "cv11" for SF-like letterforms) and tell the client why. Never embed SF font files in deliverables.
• In Figma: SF Pro is fine (free for design), Inter as fallback.
• SF is a variable font with dynamic optical sizing; mimic it by tightening tracking as size grows: ~-0.003em at 17px → -0.015em at 48px → -0.022em at 80px+.

Quality bar — self-check before delivering

1. Could one more element be removed? (Usually yes — do it.)
2. Do bars/controls float over content with a scroll edge effect, or are they opaque strips? (Strips = pre-2025.)
3. Is anything tinted that isn't interactive? Is more than one control's background tinted?
4. Are hit targets ≥ 44×44pt (28×28 macOS) with breathing room?
5. Do buttons read as Apple capsules/rounded-rects — not 1px-outlined rectangles (Material) and no ripple effects (Android)?
6. Dark surfaces: #000 base with elevated #1c1c1e-family steps, text #f5f5f7-family — never pure white text?
7. Does every gesture have an on-screen alternative, and every destructive action a Cancel?
8. Would a casual observer accept a screenshot of this as an Apple app / apple.com?

If the user's brand conflicts with strict Apple rules (e.g., a gold hotel accent), keep the structure and restraint and swap only the tint color — and say you're doing this.