Color
Frost: cold navy ink on icy paper, cards on a cool fog canvas. Five cold hues name the kind of thing, and amber and red mean trouble.
Kinds
- Agent
- Key
- Run
- Deploy
- Model
Trouble
- Warn
- Fail
2 retryingFailed
Text and ink
- text-1Primary
- text-2Secondary
- text-3Captions
- text-disabledDisabled
- inkPrimary button
Surfaces
- surface-canvasThe fog behind cards
- surface-pagePaper: cards and frames
- surface-cardGrey field
- surface-raisedPaper in a card
- surface-hoverHover
- surface-selectedSelected
Lines
- border-faintIn a grey card
- border-hairOn paper
- border-strongStrongest hairline
- border-controlEmpty control
- border-focusFocus
Kind contrast
| Kind | Label | Ink on mark | Ink on wash | Line on paper |
|---|---|---|---|---|
| Agent | Agent | 12.4:1 | 16.6:1 | 3.7:1 |
| Key | Key | 10.1:1 | 16.0:1 | 4.4:1 |
| Run | Run | 7.3:1 | 15.4:1 | 5.5:1 |
| Deploy | Deploy | 7.1:1 | 15.6:1 | 5.3:1 |
| Model | Model | 8.5:1 | 16.3:1 | 5.2:1 |
| Warn | Warning | 9.4:1 | 16.1:1 | 3.7:1 |
| Fail | Failed | 5.1:1 | 15.3:1 | 4.4:1 |
Contrast
| Weakest pair, needs 4.5:1 unless marked | Light | Dark |
|---|---|---|
| text-1, text-2, text-3 on surface-page, surface-card, surface-raised | 5.5:1 | 7.2:1 |
| text-1, text-2, text-3 on surface-hover, surface-selected over surface-page, surface-card | 5.1:1 | 6.1:1 |
| text-1 on surface-pressed over surface-page, surface-card | 13.6:1 | 6.3:1 |
| text-inverse on surface-inverse, button-primary, button-primary-hover over surface-page | 11.9:1 | 12.6:1 |
| warn-text, fail-text on surface-page, surface-card | 5.6:1 | 7.3:1 |
| warn-text, fail-text on surface-hover, surface-selected over surface-page, surface-card | 4.6:1 | 5.7:1 |
| text-on-field on every mark, needs 5:1 | 5.1:1 | 5.1:1 |
| text-on-field on every field, needs 7.5:1 | 10.2:1 | 10.2:1 |
| text-1 on every wash, needs 7.5:1 | 15.3:1 | 11.5:1 |
| each kind label on its tint | 7.1:1 | 9.5:1 |
| code-text, code-string, code-comment on surface-card, surface-page | 5.5:1 | 5.3:1 |
| border-control, border-focus, fail-mark on surface-page, surface-card, needs 3:1 | 3.1:1 | 4.7:1 |
| every line step on surface-page, surface-card, needs 3:1 | 3.3:1 | 4.7:1 |
| chart-ink-2 on surface-page, surface-card, needs 3:1 | 5.5:1 | 7.2:1 |
| each line step on its own wash, needs 3:1 | 3.3:1 | 4.1:1 |
| paper on ink, button-primary-hover over surface-page, needs 3:1 | 11.9:1 | 12.6:1 |
| border-focus on line-control over surface-page, needs 3:1 | 12.8:1 | 10.8:1 |
| fail-line on surface-page, surface-card, fail-wash, needs 3:1 | 3.7:1 | 4.1:1 |
| fail-text on fail-wash | 5.3:1 | 6.4:1 |
Tokens
71 tokens
--hue-1-mark- oklch(86% 0.120 195)
--hue-1-field- oklch(92% 0.090 195)
--hue-1-wash- oklch(96.5% 0.040 195)
--hue-1-line- oklch(60% 0.100 195)
--hue-1-tint- oklch(89% 0.050 195)
--hue-1-label- oklch(38% 0.062 195)
--hue-2-mark- oklch(82% 0.080 320)
--hue-2-field- oklch(90% 0.060 320)
--hue-2-wash- oklch(96% 0.030 320)
--hue-2-line- oklch(58% 0.075 320)
--hue-2-tint- oklch(89% 0.050 320)
--hue-2-label- oklch(38% 0.062 320)
--hue-3-mark- oklch(72% 0.100 250)
--hue-3-field- oklch(82% 0.060 250)
--hue-3-wash- oklch(94.5% 0.020 250)
--hue-3-line- oklch(52% 0.150 250)
--hue-3-tint- oklch(89% 0.050 250)
--hue-3-label- oklch(38% 0.062 250)
--hue-4-mark- oklch(72% 0.110 290)
--hue-4-field- oklch(83% 0.065 290)
--hue-4-wash- oklch(95% 0.025 290)
--hue-4-line- oklch(54% 0.150 290)
--hue-4-tint- oklch(89% 0.050 290)
--hue-4-label- oklch(38% 0.062 290)
--hue-5-mark- oklch(75% 0.100 160)
--hue-5-field- oklch(90% 0.070 160)
--hue-5-wash- oklch(96% 0.035 160)
--hue-5-line- oklch(52% 0.090 160)
--hue-5-tint- oklch(89% 0.050 160)
--hue-5-label- oklch(38% 0.062 160)
--warn-mark- oklch(80% 0.152 68)
--warn-field- oklch(89% 0.056 68)
--warn-wash- oklch(96% 0.028 68)
--warn-line- oklch(62% 0.132 68)
--fail-mark- oklch(65.2% 0.219 26)
--fail-field- oklch(82% 0.055 26)
--fail-wash- oklch(94.5% 0.027 26)
--fail-line- oklch(60% 0.236 26)
--warn-text- oklch(49% 0.100 68)
--fail-text- oklch(51% 0.180 26)
--text-1- var(--ink)
--text-2- oklch(var(--ink-c) / 0.80)
--text-3- oklch(var(--ink-c) / 0.66)
--text-disabled- oklch(var(--ink-c) / 0.40)
--text-inverse- var(--paper)
--text-on-field- oklch(var(--text-on-field-c))
--accent-mark- var(--ink)
--accent-field- var(--surface-card)
--accent-wash- var(--surface-selected)
--accent-tint- var(--surface-selected)
--accent-label- var(--text-1)
--accent-line- var(--ink)
--accent-on-field- var(--text-1)
--button-primary- var(--ink)
--key-primary-body- linear-gradient(180deg, color-mix(in oklch, var(--ink) 84%, white), color-mix(in oklch, var(--ink) 94%, black))
--key-primary-body-hover- linear-gradient(180deg, color-mix(in oklch, var(--ink) 76%, white), color-mix(in oklch, var(--ink) 90%, white))
--key-primary-edge- inset 0 2px 0 -1px oklch(1 0 0 / 0.2), inset 0 -2px 0 -1px oklch(0 0 0 / 0.3), inset 0 0 0 1px color-mix(in oklch, var(--ink) 88%, black), 0 1px 1px oklch(var(--text-on-field-c) / calc(var(--shadow-alpha) * 1.1)), 0 2px 5px -2px oklch(var(--text-on-field-c) / calc(var(--shadow-alpha) * 1.5))
--key-primary-edge-press- inset 0 0 0 1px color-mix(in oklch, var(--ink) 88%, black), inset 0 1px 2px oklch(0 0 0 / 0.42)
--key-primary-sheen- linear-gradient(90deg, transparent 14%, oklch(1 0 0 / 0.42) 50%, transparent 86%) top / 100% 1px no-repeat, linear-gradient(180deg, oklch(1 0 0 / 0.1), oklch(1 0 0 / 0) 55%)
--key-secondary-body- var(--paper)
--key-secondary-body-hover- oklch(var(--ink-c) / 0.03)
--key-secondary-edge- var(--elev-control)
--key-secondary-edge-press- inset 0 1px 2px oklch(var(--ink-c) / 0.12)
--key-secondary-sheen- none
--button-primary-hover- oklch(var(--ink-c) / 0.86)
--button-secondary- oklch(var(--grey-c))
--button-secondary-hover- color-mix(in oklch, oklch(var(--grey-c)), oklch(var(--ink-c)) 7%)
--button-ghost- transparent
--button-ghost-hover- oklch(var(--ink-c) / 0.05)
--surface-disabled- color-mix(in oklch, var(--paper), var(--ink) 8%)
--ring-thumb- 0 0 0 2px var(--paper)