10 System Colors
—
—
—
Color System
Color.
Adaptive by design.
Apple's color system is built on semantic meaning, adaptive behaviour across modes, and an unwavering commitment to accessibility. Color communicates — it is never merely decorative.
System Colors
Apple defines ten universal system colors, each with light and dark mode values. Click any swatch to see its CSS variable and copy details.
Dark Mode Pairs
Every colour in the system has a paired value for dark mode. These are not simply inverted — they are independently tuned for legibility and vibrancy in each context.
Light Mode
Get Started
Dark Mode
Get Started
Light
#007AFF
Standard blue
Dark
#409CFF
Lightened for dark bg
Light
#34C759
Vivid green
Dark
#30D158
Brighter on black
Light
#FF3B30
Bold red
Dark
#FF453A
Slightly lighter
Light
#1d1d1f
Near-black
Dark
#f5f5f7
Off-white (not pure)
Light
#ffffff
Pure white canvas
Dark
#000000
True black
Light
#AF52DE
Medium purple
Dark
#BF5AF2
Higher vibrancy
Semantic Color Roles
Instead of referencing raw hex values, always use semantic roles. This ensures correct adaptive behaviour in both light and dark modes.
Background Colors
| Token Name | Light Value | Dark Value | CSS Variable | When to Use |
|---|---|---|---|---|
BG Primary |
#ffffff | #000000 | --color-bg-primary | Main page background, primary card fill |
BG Secondary |
#f5f5f7 | #1c1c1e | --color-bg-secondary | Sidebar, grouped sections, inset surfaces |
BG Tertiary |
#ebebf0 | #2c2c2e | --color-bg-tertiary | Deeply nested surfaces, pressed states |
BG Grouped |
#f2f2f7 | #1c1c1e | --color-bg-grouped | Table views, list-style grouped UI |
Text Colors
| Token Name | Light Value | Dark Value | CSS Variable | When to Use |
|---|---|---|---|---|
Text Primary |
#1d1d1f | #f5f5f7 | --color-text-primary | Headlines, body text, primary labels |
Text Secondary |
#6e6e73 | #98989d | --color-text-secondary | Descriptions, captions, supporting copy |
Text Tertiary |
#aeaeb2 | #636366 | --color-text-tertiary | Hints, metadata, disabled labels |
Text Placeholder |
#c7c7cc | #48484a | --color-text-placeholder | Form placeholders, empty state labels |
Text Link |
#0066cc | #409cff | --color-text-link | Inline links, tappable text elements |
Border & Fill Colors
| Token Name | Light Value | Dark Value | CSS Variable | When to Use |
|---|---|---|---|---|
Border |
rgba(0,0,0,0.1) | rgba(255,255,255,0.1) | --color-border | Card borders, dividers, input outlines |
Fill Primary |
rgba(60,60,67,.36) | rgba(235,235,245,.3) | --color-fill-primary | Pressed / active state fills |
Fill Tertiary |
rgba(118,118,128,.12) | rgba(118,118,128,.24) | --color-fill-tertiary | Search bars, secondary buttons, tags |
Status Colors
| Token Name | Value | Background Tint | CSS Variable | When to Use |
|---|---|---|---|---|
Success |
#34C759 | --color-success | Completed actions, positive states | |
Warning |
#FF9500 | --color-warning | Caution states, pending alerts | |
Danger |
#FF3B30 | --color-danger | Errors, destructive actions | |
Info |
#32ADE6 | --color-info | Informational callouts, tips |
Functional vs. Decorative
Color in Apple's system always communicates something. It signals status, guides attention, or denotes interactivity — it is never applied purely for visual variety.
DO — Color as communication
Upload complete
3 files synced successfully
Low storage
2.1 GB remaining
Connection failed
Check your network settings
New feature available
Try the redesigned editor
DON'T — Color for decoration only
Upload complete
Low storage
Connection failed
Red dot used for "complete", green for "low storage" — the colour contradicts the message. This trains users to ignore colour signals entirely.
Glass Colors
When a glass surface is placed over different coloured backgrounds, the same CSS produces visually distinct — and harmonious — results. The glass adapts; you don't need to change it.
Glass over Purple
Purple gradient
Glass over Orange
Orange gradient
Glass over Dark
Dark navy gradient
Glass over Light
Light green gradient
All four chips use identical CSS
background: rgba(255,255,255,0.2); backdrop-filter: blur(20px) saturate(160%); — the background colour is "sampled" from whatever is behind, producing adaptive tints automatically.Color in Hierarchy
Text colour is the primary tool for establishing information hierarchy. Each step down uses a lighter, less saturated value — creating clear visual weight without changing font size alone.
Primary Text
Secondary text for descriptions, subtitles, and supporting context that elaborates on the primary content.
Tertiary — metadata, timestamps, minor labels
Enter a description…
Contrast & Accessibility
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for AAA. Apple's system colors are designed to meet or exceed AA at all times.
Contrast ratios are calculated against the paired background in both light and dark mode. Always test your specific combinations — especially when using glass surfaces, which reduce effective contrast.
| Combination | Preview | Ratio | Normal Text | Large Text |
|---|---|---|---|---|
| #1d1d1f on #ffffff | Sample text |
16.0:1 | AAA | AAA |
| #f5f5f7 on #000000 | Sample text |
15.3:1 | AAA | AAA |
| #007AFF on #ffffff | Link text |
4.58:1 | AA | AAA |
| #ffffff on #007AFF | Button label |
4.58:1 | AA | AAA |
| #6e6e73 on #ffffff | Secondary text |
5.74:1 | AA | AAA |
| #aeaeb2 on #ffffff | Tertiary text |
2.64:1 | Fail | Fail |
| #aeaeb2 on #ffffff ⚠ Tertiary is not for critical content |
Tertiary text is intentionally low-contrast — it is only appropriate for supplemental metadata that is never the sole conveyor of critical information. Always pair with context. | |||
| #34C759 on #000000 (dark) | Success dark |
9.85:1 | AAA | AAA |
CSS Implementation
The complete color system is implemented as CSS custom properties. Use the semantic variable names — never hardcode hex values in your components.
All variables are already defined in
css/design-system.css. This code block shows the complete structure for reference or for porting into your own project.
/* ==========================================================
APPLE HIG COLOR SYSTEM — CSS CUSTOM PROPERTIES
========================================================== */
:root {
/* ── System Colors ── */
--sys-blue: #007AFF; /* → #409CFF dark */
--sys-green: #34C759; /* → #30D158 dark */
--sys-red: #FF3B30; /* → #FF453A dark */
--sys-orange: #FF9500; /* → #FF9F0A dark */
--sys-yellow: #FFCC00; /* → #FFD60A dark */
--sys-pink: #FF2D55; /* → #FF375F dark */
--sys-purple: #AF52DE; /* → #BF5AF2 dark */
--sys-teal: #30B0C7; /* → #40CBE0 dark */
--sys-indigo: #5856D6; /* → #6E6CF6 dark */
--sys-gray: #8E8E93; /* → #98989D dark */
/* ── Background Levels ── */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f5f5f7;
--color-bg-tertiary: #ebebf0;
--color-bg-grouped: #f2f2f7;
/* ── Text Hierarchy ── */
--color-text-primary: #1d1d1f;
--color-text-secondary: #6e6e73;
--color-text-tertiary: #aeaeb2;
--color-text-placeholder: #c7c7cc;
--color-text-link: #0066cc;
--color-text-inverted: #ffffff;
/* ── Semantic Accent ── */
--color-accent: #0066cc;
--color-accent-hover: #004f9e;
--color-accent-tint: rgba(0, 102, 204, 0.10);
/* ── Fills (adaptive opacity) ── */
--color-fill-primary: rgba(60, 60, 67, 0.36);
--color-fill-secondary: rgba(60, 60, 67, 0.20);
--color-fill-tertiary: rgba(118, 118, 128, 0.12);
--color-fill-quaternary: rgba(118, 118, 128, 0.08);
/* ── Borders & Separators ── */
--color-border: rgba(0, 0, 0, 0.10);
--color-separator: rgba(60, 60, 67, 0.12);
/* ── Glass Material ── */
--color-glass: rgba(255, 255, 255, 0.72);
--color-glass-border: rgba(255, 255, 255, 0.60);
--color-glass-shadow: rgba(0, 0, 0, 0.10);
/* ── Status Colors ── */
--color-success: #34c759;
--color-warning: #ff9500;
--color-danger: #ff3b30;
--color-info: #32ade6;
/* ── Status Tints ── */
--color-success-bg: rgba(52, 199, 89, 0.10);
--color-warning-bg: rgba(255, 149, 0, 0.10);
--color-danger-bg: rgba(255, 59, 48, 0.10);
--color-info-bg: rgba(50, 173, 230, 0.10);
}
/* ── Dark Mode Overrides ── */
[data-theme="dark"] {
--color-bg-primary: #000000;
--color-bg-secondary: #1c1c1e;
--color-bg-tertiary: #2c2c2e;
--color-bg-grouped: #1c1c1e;
--color-text-primary: #f5f5f7;
--color-text-secondary: #98989d;
--color-text-tertiary: #636366;
--color-text-placeholder: #48484a;
--color-text-link: #409cff;
--color-accent: #409cff;
--color-accent-hover: #6eb5ff;
--color-accent-tint: rgba(64, 156, 255, 0.15);
--color-fill-primary: rgba(235, 235, 245, 0.30);
--color-fill-secondary: rgba(235, 235, 245, 0.16);
--color-fill-tertiary: rgba(118, 118, 128, 0.24);
--color-fill-quaternary: rgba(118, 118, 128, 0.18);
--color-border: rgba(255, 255, 255, 0.10);
--color-separator: rgba(84, 84, 88, 0.65);
--color-glass: rgba(28, 28, 30, 0.78);
--color-glass-border: rgba(255, 255, 255, 0.12);
--color-glass-shadow: rgba(0, 0, 0, 0.30);
--color-success: #30d158;
--color-warning: #ff9f0a;
--color-danger: #ff453a;
--color-info: #64d2ff;
}