Color
White and warm near-black, rules for structure, and one sodium yellow that changes how it shows by theme.
Surfaces
- page
#ffffff - panel
#fafaf7 - well
#f4f3ee - selected
#fff4bf - selected-strong
#ffec99
Text
- text-1
#161512 - text-2
#55524a - text-3
#6b675e - text-disabled
#a8a499 - accent-text
#7a5d00
Lines
- line-faint
#efede6 - line
#e2dfd5 - line-control
#8a8478 - mark
#8a8478 - dot
#dedad0
Sodium
- accent
#ffd400 - accent-edge
#c9a700 - primary-bg
#ffd400 - primary-hover
#ffdf3d - focus
#7a5d00
Status
- ok-text
#2c6a3a - ok-tint
#e8f2ea - warn-text
#a14b00 - warn-tint
#fdeee0 - fail-text
#b3261e - fail-tint
#fdecea
Data series
- data-1
#ffd400 - data-2
#8c7a3c - data-3
#9a937c - data-4
#5b4a1a - data-5
#2e3a4a - data-6
#d9cfae
Sodium in use
Where sodium goes
The selected row takes the wash: run_8f2a90
Run pipelineView logs
02 Runtime
| Where | Light | Dark |
|---|---|---|
| The primary button | Solid sodium slab, ink label | Dark yellow tint, 1px yellow line, yellow label |
| A highlighted line, a selected row | The pale wash under ink | The dark tint under ink |
| Yellow-family text | Dark gold, accent-text | Yellow, accent-text |
| A ticked box, a chosen radio | Sodium yellow, a gold edge, an ink mark | The dark tint, a yellow line and mark |
| The focus ring | Dark gold, 2px | Yellow, 2px |
| The caret while text types | Ink | Yellow |
Status in use
PassedOver budgetFailedRunning
Contrast
| Weakest pair, needs 4.5:1 unless marked | Light | Dark |
|---|---|---|
| text-1, text-2, text-3 on page, panel, well, selected | 5.1:1 | 4.7:1 |
| text-1 on hover, pressed, selected-strong | 15.4:1 | 9.4:1 |
| accent-text on page, panel, selected | 5.6:1 | 9.0:1 |
| primary-text on primary-bg, primary-hover, primary-pressed | 12.8:1 | 7.3:1 |
| text-1 on secondary-bg, secondary-hover, secondary-pressed | 17.0:1 | 13.1:1 |
| text-2 on check-off, secondary-bg | 7.3:1 | 9.9:1 |
| ok-text, warn-text, fail-text on page, panel, well | 5.4:1 | 5.7:1 |
| ok-text on ok-tint | 5.7:1 | 8.0:1 |
| warn-text on warn-tint | 5.2:1 | 7.4:1 |
| fail-text on fail-tint | 5.7:1 | 5.6:1 |
| check-mark on check-bg | 12.8:1 | 9.0:1 |
| line-control, focus on page, panel, well, needs 3:1 | 3.3:1 | 3.1:1 |
| fail on page, needs 3:1 | 6.5:1 | 6.6:1 |
| line-control on check-off, check-off-hover, needs 3:1 | 3.5:1 | 3.2:1 |
| check-range on well, needs 3:1 | 5.6:1 | 11.2:1 |
Light and dark values
| Role | Light | Dark |
|---|---|---|
--page | #ffffff | #141412 |
--panel | #fafaf7 | #1c1b19 |
--well | #f4f3ee | #22211e |
--line | #e2dfd5 | #2c2a25 |
--line-control | #8a8478 | #736d61 |
--text-1 | #161512 | #f5f3ee |
--text-2 | #55524a | #c4c0b6 |
--text-3 | #6b675e | #a19c90 |
--accent-text | #7a5d00 | #ffd400 |
--primary-bg | #ffd400 | #3a3107 |
--primary-text | #161512 | #ffd400 |
--selected | #fff4bf | #3a3107 |
--focus | #7a5d00 | #ffd400 |
--warn-text | #a14b00 | #ff9a52 |
--fail-text | #b3261e | #ff6b57 |
Tokens
35 tokens
--page- #ffffff
--panel- #fafaf7
--well- #f4f3ee
--code-surface- var(--well)
--hover- rgb(22 21 18 / 0.04)
--pressed- rgb(22 21 18 / 0.08)
--selected- #fff4bf
--selected-strong- #ffec99
--scrim- rgb(22 21 18 / 0.32)
--text-1- #161512
--text-2- #55524a
--text-3- #6b675e
--text-disabled- #a8a499
--text-inverse- #ffffff
--accent- #ffd400
--accent-text- #7a5d00
--accent-edge- #c9a700
--primary-bg- #ffd400
--primary-text- #161512
--primary-edge- #d9b400
--primary-hover- #ffdf3d
--primary-edge-hover- #f0cf2c
--primary-pressed- #ffd400
--primary-light- rgb(255 255 255 / 0.55)
--primary-light-hover- rgb(255 255 255 / 0.85)
--primary-ring- #fff9df
--ok- #2c6a3a
--ok-text- #2c6a3a
--ok-tint- #e8f2ea
--warn- #c25e00
--warn-text- #a14b00
--warn-tint- #fdeee0
--fail- #b3261e
--fail-text- #b3261e
--fail-tint- #fdecea