Digital era · 1984–present
Apple HIG
Apple's Human Interface Guidelines: clarity, deference and depth — interfaces that get out of the way and let content lead.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(95.5% 0.006 265) - --fg
oklch(13% 0 0) - --muted
oklch(56% 0.005 265) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.004 265) - --border
oklch(76% 0.006 265) - --accent
oklch(57% 0.24 254) - --accent-fg
oklch(100% 0 0) - --focus
oklch(57% 0.24 254)
| Token | Value |
|---|---|
| --font-body | -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif |
| --font-display | -apple-system, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif |
| --font-mono | 'SF Mono', ui-monospace, 'Courier New', monospace |
| --radius | 13px |
| --radius-sm | 10px |
| --shadow | 0 1px 1px oklch(0% 0 0 / 0.06) |
| --shadow-lg | 0 12px 40px -8px oklch(0% 0 0 / 0.18) |
:root {
--bg: oklch(95.5% 0.006 265);
--fg: oklch(13% 0 0);
--muted: oklch(56% 0.005 265);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.004 265);
--border: oklch(76% 0.006 265);
--accent: oklch(57% 0.24 254);
--accent-fg: oklch(100% 0 0);
--focus: oklch(57% 0.24 254);
--font-body: -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
--font-display: -apple-system, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
--font-mono: 'SF Mono', ui-monospace, 'Courier New', monospace;
--radius: 13px;
--radius-sm: 10px;
--shadow: 0 1px 1px oklch(0% 0 0 / 0.06);
--shadow-lg: 0 12px 40px -8px oklch(0% 0 0 / 0.18);
}Where it came from
Origin: Apple Inc., Cupertino, USA
Apple's HIG traces its lineage to the original Macintosh in 1984, codifying the desktop metaphor for a mass audience. It evolved through Aqua's gel buttons (Mac OS X 2001), iOS's touch-first affordances (2007), iOS 7's flat redesign (2013), and today's Liquid Glass material (2025). Its best-known principles — clarity, deference and depth — were articulated with iOS 7; with Liquid Glass, Apple reframed its goals as hierarchy, harmony and consistency. The HIG is one of the most influential design documents in computing history.
How to spot it
- System fonts (San Francisco / New York) at optical sizes
- Platform-native controls that feel physically correct on the device
- System blue for interactive elements; large clear touch targets
- Large corner radii, generous padding, content over chrome
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Native controls are already familiar to every Apple user | Rigidly tied to Apple platforms — cannot be truly recreated on Android or web |
| Accessibility built in from the start (Dynamic Type, VoiceOver) | Frequent redesigns can break established UI patterns |
| Hardware and software are designed together | Very prescriptive: creativity within the system, not against it |
In the wild
- iOS Messages app
- macOS Finder
- Safari across platforms
Use it when
iOS or macOS native apps — or a web product targeting Apple users that wants to feel at home on their devices.