W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Apple
Apple Inc. is a global technology company whose product portfolio spans personal computers (Mac), mobile devices (iPhone, iPad, Apple Watch, Apple TV, Vision Pro), services (App Store, iCloud, Apple Music, Apple TV+), and the software platforms that bind them (macOS, iOS, iPadOS, watchOS, tvOS, visionOS). The visual identity is built around restraint: the monochrome Apple mark, the SF type family, and the twelve System Colors that the Human Interface Guidelines releases as a coordinated set. The voice is precise, considered, and human-centered — clarity and deference to content over decoration.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/apple/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/apple/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Apple
Apple Inc. is a global technology company whose product portfolio spans personal computers (Mac), mobile devices (iPhone, iPad, Apple Watch, Apple TV, Vision Pro), services (App Store, iCloud, Apple Music, Apple TV+), and the software platforms that bind them (macOS, iOS, iPadOS, watchOS, tvOS, visionOS). The visual identity is built around restraint: the monochrome Apple mark, the SF type family, and the twelve System Colors that the Human Interface Guidelines releases as a coordinated set. The voice is precise, considered, and human-centered — clarity and deference to content over decoration.
Tags: tech, apple, hardware, hig, premium
Atoms
Palette
Apple · [email protected] · Proprietary — All Rights Reserved
Apple system palette drawn from the iOS / macOS Human Interface Guidelines. Anchored on Apple Blue (#007AFF) — the canonical iOS tint color used for interactive affordance across the platform — and the twelve named System Colors (Blue, Brown, Gray, Green, Indigo, Mint, Orange, Pink, Purple, Red, Teal, Yellow) plus the light- and dark-mode system background ramps.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
SF Pro ([email protected]) |
Proprietary — Apple Inc., distributed with Apple operating systems | sans-serif |
body |
SF Pro ([email protected]) |
Proprietary — Apple Inc., distributed with Apple operating systems | sans-serif |
mono |
SF Pro ([email protected]) |
Proprietary — Apple Inc., distributed with Apple operating systems | sans-serif |
Swatches
| ID | Name | Value |
|---|---|---|
system-blue |
System Blue | #007AFF |
system-brown |
System Brown | #A2845E |
system-gray |
System Gray | #8E8E93 |
system-green |
System Green | #34C759 |
system-indigo |
System Indigo | #5856D6 |
system-mint |
System Mint | #00C7BE |
system-orange |
System Orange | #FF9500 |
system-pink |
System Pink | #FF2D55 |
system-purple |
System Purple | #AF52DE |
system-red |
System Red | #FF3B30 |
system-teal |
System Teal | #30B0C7 |
system-yellow |
System Yellow | #FFCC00 |
label |
Label | #000000 |
secondary-label |
Secondary Label | #3C3C43 |
tertiary-label |
Tertiary Label | #3C3C434D |
system-background |
System Background | #FFFFFF |
secondary-system-background |
Secondary System Background | #F2F2F7 |
tertiary-system-background |
Tertiary System Background | #FFFFFF |
system-background-dark |
System Background (Dark) | #000000 |
secondary-system-background-dark |
Secondary System Background (Dark) | #1C1C1E |
tertiary-system-background-dark |
Tertiary System Background (Dark) | #2C2C2E |
label-dark |
Label (Dark) | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
system-background |
#FFFFFF |
surface |
secondary-system-background |
#F2F2F7 |
surface-elevated |
tertiary-system-background |
#FFFFFF |
text-primary |
label |
#000000 |
text-secondary |
secondary-label |
#3C3C43 |
text-tertiary |
system-gray |
#8E8E93 |
primary |
system-blue |
#007AFF |
primary-hover |
system-blue |
#007AFF |
accent |
system-indigo |
#5856D6 |
accent-hover |
system-purple |
#AF52DE |
warning |
system-orange |
#FF9500 |
warning-hover |
system-yellow |
#FFCC00 |
error |
system-red |
#FF3B30 |
success |
system-green |
#34C759 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
system-background-dark |
#000000 |
surface |
secondary-system-background-dark |
#1C1C1E |
surface-elevated |
tertiary-system-background-dark |
#2C2C2E |
text-primary |
label-dark |
#FFFFFF |
text-secondary |
system-gray |
#8E8E93 |
text-tertiary |
system-gray |
#8E8E93 |
primary |
system-blue |
#007AFF |
primary-hover |
system-blue |
#007AFF |
accent |
system-indigo |
#5856D6 |
accent-hover |
system-purple |
#AF52DE |
warning |
system-orange |
#FF9500 |
warning-hover |
system-yellow |
#FFCC00 |
error |
system-red |
#FF3B30 |
success |
system-green |
#34C759 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
label |
#000000 |
on-identity |
system-background |
#FFFFFF |
primary |
system-blue |
#007AFF |
primary-hover |
system-blue |
#007AFF |
accent |
system-indigo |
#5856D6 |
background |
system-background |
#FFFFFF |
surface |
secondary-system-background |
#F2F2F7 |
surface-elevated |
tertiary-system-background |
#FFFFFF |
text-primary |
label |
#000000 |
text-secondary |
secondary-label |
#3C3C43 |
text-tertiary |
system-gray |
#8E8E93 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, outlined
The Apple Identity Guidelines explicitly prohibit altering the proportions, color, orientation, or surrounding clearspace of the Apple logo. Only the approved monochrome variants (black, white, or single-color silver / gray) are permitted, and only on backgrounds that meet the documented contrast threshold.
colorChoice → logo.mark.fill
- allowed: label, label-dark, system-gray
- forbidden: system-blue, system-red, system-green, system-yellow, system-orange, system-purple
The Apple mark is monochrome. The Identity Guidelines prohibit filling the logo with any of the System Colors — the chromatic System Colors are reserved for product UI tint, not for the corporate mark.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast requirement for body text. The HIG Accessibility section calls out 4.5:1 as the floor for body text and 3:1 for large text on a typical iOS surface; Label on System Background clears AA at ~21:1.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
System Blue on System Background must remain perceptible at interactive-control size. The HIG specifies that tint colors need at least 3:1 contrast against the underlying surface to preserve the "tappable" affordance.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The HIG Accessibility section aligns Apple's platform guidance with WCAG AA contrast as the floor for legible text-on-surface pairings.
⚠️ warning (1)
contextRestriction → roles.colors.system-red
- forbiddenContexts: marketing-headline, hero-background
System Red is semantically reserved for destructive actions and error / recording indicators in the HIG. Using it as a marketing accent dilutes the platform-wide affordance that "red means destructive."
💡 recommendation (2)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.3
Apple's HIG uses SF Pro for both heading and body, distinguished by the SF Pro Display vs SF Pro Text optical-size cuts and a meaningful size differential. Maintain at least a 1.3× ratio between heading and body to preserve hierarchy when one family does both jobs.
enumMembership → typography.body.fontWeight
- allowed: 400, 500, 600
The HIG type ramp uses SF Pro Regular (400) for body, Medium (500) for emphasis, and Semibold (600) for headings and controls. Lighter weights (100–300) are reserved for very large display sizes; bolder weights (700+) are rare in iOS UI.
Provenance
- Source: https://developer.apple.com/design/human-interface-guidelines/
- License:
Proprietary — All Rights Reserved - Attribution: Apple, the Apple logo, iPhone, iPad, Mac, iOS, macOS, iPadOS, watchOS, tvOS, visionOS, Human Interface Guidelines, and related names and marks are trademarks of Apple Inc. Brand colors and identity guidance documented here are derived from the Human Interface Guidelines at developer.apple.com/design/human-interface-guidelines/ and the Apple Identity Guidelines distributed to platform partners.
- Imported:
2026-05-17 - Notes: Brand-atoms' read of Apple's public HIG. This file is not an official Apple brand document. Apple's logo is among the most- protected trademarks on the internet; no asset files are bundled here and any reference to "the Apple logo" must respect the Identity Guidelines.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Apple
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Apple
A clear hierarchy in Apple's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ system-indigo #5856D6 background
→ system-background #FFFFFF identity
→ label #000000 on-identity
→ system-background #FFFFFF primary
→ system-blue #007AFF primary-hover
→ system-blue #007AFF surface
→ secondary-system-background #F2F2F7 surface-elevated
→ tertiary-system-background #FFFFFF text-primary
→ label #000000 text-secondary
→ secondary-label #3C3C43 text-tertiary
→ system-gray #8E8E93 Typography
code
→ mono SF Pro display
→ heading SF Pro prose
→ body SF Pro Palette mode mappings (from apple)
Light mode (14 roles)
accent
→ system-indigo accent-hover
→ system-purple background
→ system-background error
→ system-red primary
→ system-blue primary-hover
→ system-blue success
→ system-green surface
→ secondary-system-background surface-elevated
→ tertiary-system-background text-primary
→ label text-secondary
→ secondary-label text-tertiary
→ system-gray warning
→ system-orange warning-hover
→ system-yellow Dark mode (14 roles)
accent
→ system-indigo accent-hover
→ system-purple background
→ system-background-dark error
→ system-red primary
→ system-blue primary-hover
→ system-blue success
→ system-green surface
→ secondary-system-background-dark surface-elevated
→ tertiary-system-background-dark text-primary
→ label-dark text-secondary
→ system-gray text-tertiary
→ system-gray warning
→ system-orange warning-hover
→ system-yellow Rules (8 typed constraints)
error · 5 rules
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, outlined The Apple Identity Guidelines explicitly prohibit altering the proportions, color, orientation, or surrounding clearspace of the Apple logo. Only the approved monochrome variants (black, white, or single-color silver / gray) are permitted, and only on backgrounds that meet the documented contrast threshold.
colorChoice logo.mark.fill allowed label, label-dark, system-gray forbidden system-blue, system-red, system-green, system-yellow, system-orange, system-purple The Apple mark is monochrome. The Identity Guidelines prohibit filling the logo with any of the System Colors — the chromatic System Colors are reserved for product UI tint, not for the corporate mark.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast requirement for body text. The HIG Accessibility section calls out 4.5:1 as the floor for body text and 3:1 for large text on a typical iOS surface; Label on System Background clears AA at ~21:1.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large System Blue on System Background must remain perceptible at interactive-control size. The HIG specifies that tint colors need at least 3:1 contrast against the underlying surface to preserve the "tappable" affordance.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The HIG Accessibility section aligns Apple's platform guidance with WCAG AA contrast as the floor for legible text-on-surface pairings.
warning · 1 rule
contextRestriction roles.colors.system-red forbiddenContexts marketing-headline, hero-background System Red is semantically reserved for destructive actions and error / recording indicators in the HIG. Using it as a marketing accent dilutes the platform-wide affordance that "red means destructive."
recommendation · 2 rules
fontPairing typography.heading requires body minSizeRatio 1.3 Apple's HIG uses SF Pro for both heading and body, distinguished by the SF Pro Display vs SF Pro Text optical-size cuts and a meaningful size differential. Maintain at least a 1.3× ratio between heading and body to preserve hierarchy when one family does both jobs.
enumMembership typography.body.fontWeight allowed 400, 500, 600 The HIG type ramp uses SF Pro Regular (400) for body, Medium (500) for emphasis, and Semibold (600) for headings and controls. Lighter weights (100–300) are reserved for very large display sizes; bolder weights (700+) are rare in iOS UI.
Provenance
- Source
- https://developer.apple.com/design/human-interface-guidelines/
- License
Proprietary — All Rights Reserved- Attribution
- Apple, the Apple logo, iPhone, iPad, Mac, iOS, macOS, iPadOS, watchOS, tvOS, visionOS, Human Interface Guidelines, and related names and marks are trademarks of Apple Inc. Brand colors and identity guidance documented here are derived from the Human Interface Guidelines at developer.apple.com/design/human-interface-guidelines/ and the Apple Identity Guidelines distributed to platform partners.
- Imported
2026-05-17- Notes
- Brand-atoms' read of Apple's public HIG. This file is not an official Apple brand document. Apple's logo is among the most- protected trademarks on the internet; no asset files are bundled here and any reference to "the Apple logo" must respect the Identity Guidelines.