Color
GeneratedFull palette and semantic tokens
Every semantic role, light and dark, generated from packages/tokens/src/tokens.json. A fill that carries text takes its text-bearing row; the plain row is for marks only. Each ratio below is computed on the rendered hex pair for that mode, so a role whose counterpart flips between modes shows two different figures.
| Role | Light | Dark | CSS var | Tailwind | Contrast pair | Ratio, light | Ratio, dark |
|---|---|---|---|---|---|---|---|
| Canvas | #F1F1F1 | #0A0A0A | --canvas | bg-canvas | Label on Canvas | 15.84:1 | 17.68:1 |
| Elevated surface | #FFFFFF | #1C1C1E | --surface | bg-surface | Label on Surface | 17.89:1 | 15.20:1 |
| Label (primary text) | #17171A | #F2F2F2 | --label | bg-label | Label on Surface | 17.89:1 | 15.20:1 |
| Secondary label | #6B6B70 | #98989D | --label2 | bg-label2 | Secondary label on Surface | 5.30:1 | 5.93:1 |
| Accent (signature default) | #007AFF | #0A84FF | --accent | bg-accent | On accent on Accent | 4.02:1 | 3.65:1 |
| On accent | #FFFFFF | #FFFFFF | --on-accent | bg-on-accent | On accent on Accent | 4.02:1 | 3.65:1 |
| Inverse surface | #17171A | #F2F2F2 | --inverse | bg-inverse | On inverse on Inverse | 17.89:1 | 15.98:1 |
| On inverse | #FFFFFF | #17171A | --on-inverse | bg-on-inverse | On inverse on Inverse | 17.89:1 | 15.98:1 |
| Success | #34C759 | #30D158 | --success | bg-success | White on Success (marks only, not text) | 2.22:1 | 2.02:1 |
| Danger | #FF3B30 | #FF453A | --danger | bg-danger | White on Danger (marks only, not text) | 3.55:1 | 3.41:1 |
| Warning | #FF9F0A | #FF9F0A | --warning | bg-warning | Label on Warning | 8.70:1 | 1.84:1 |
| Success tint | #E8F8EC | #16281B | --success-tint | bg-success-tint | Success on its tint | 2.02:1 | 7.67:1 |
| Danger tint | #FDEAE8 | #2B1917 | --danger-tint | bg-danger-tint | Danger on its tint | 3.06:1 | 4.92:1 |
| Warning tint | #FEF3E2 | #2A2015 | --warning-tint | bg-warning-tint | Warning on its tint | 1.87:1 | 7.76:1 |
| Divider (hairline) | #DEDEDE | #343436 | --divider | bg-divider | Divider on Surface | 1.35:1 | 1.37:1 |
| Hover fill (on an elevated surface) | #F6F6F6 | #232325 | --hover-fill | bg-hover-fill | Hover fill on Surface | 1.08:1 | 1.08:1 |
| Pressed fill (on an elevated surface) | #ECECEC | #29292B | --pressed-fill | bg-pressed-fill | Pressed fill on Surface | 1.18:1 | 1.17:1 |
| Scrim (behind a sheet or modal) | #00000066 | #00000099 | --scrim | bg-scrim | n/a (translucent, not a text pair) | n/a | n/a |
| Accent, text-bearing fill | #006FF2 | #006FF2 | --accent-text | bg-accent-text | White on Accent (text-bearing) | 4.61:1 | 4.61:1 |
| Danger, text-bearing fill | #E71913 | #E71913 | --danger-text | bg-danger-text | White on Danger (text-bearing) | 4.62:1 | 4.62:1 |
| Success, text-bearing fill | #008912 | #008912 | --success-text | bg-success-text | White on Success (text-bearing) | 4.58:1 | 4.58:1 |
Spacing
4px grid. 44 is the tap-target floor, an accessibility minimum rather than a spacing step.
4
8
12
16
20
24
32
40
48
64
80
96
120
Radius
Small (8px)
Base (16px)
Large (28px)
Pill (999px)