Color
Ink and paper with greys as ink at alphas, and colour only for status.
Ink and paper
- page
- paper
- shell
- field
- ink
Greys
- ink-80ink at 80%
- ink-60ink at 60%
- ink-45ink at 45%
- ink-32ink at 32%
- ink-15ink at 15%
- ink-10ink at 10%
- ink-06ink at 6%
- ink-03ink at 3%
Status colors
- ok
- ok-text
- ok-tint
- warn
- warn-text
- warn-tint
- fail
- fail-text
- fail-tint
Text
Refund agent, text-1
Answers billing questions and issues refunds under $50, text-2.
Search agents, text-3, a placeholder
Archived, text-disabled
Status in use
PassedSlowFailed
Contrast
| Weakest pair, needs 4.5:1 unless marked | Light | Dark |
|---|---|---|
| text-1, text-2 on paper, page, shell, field | 5.3:1 | 5.7:1 |
| ok-text, warn-text, fail-text on paper, page, shell | 5.0:1 | 7.2:1 |
| ok-text on ok-tint | 5.0:1 | 8.9:1 |
| warn-text on warn-tint | 5.2:1 | 9.6:1 |
| fail-text on fail-tint | 5.0:1 | 7.4:1 |
| glass-ink-text on glass-ink-base | 6.3:1 | 7.8:1 |
| flat-text on flat-bg, flat-hover | 11.4:1 | 13.8:1 |
| glass-coral-text on glass-coral-base | 5.6:1 | 6.2:1 |
| glass-green-text on glass-green-base | 5.6:1 | 7.9:1 |
| text-1 on hover, pressed | 10.3:1 | 11.3:1 |
| line-strong, focus on paper, page, needs 3:1 | 3.2:1 | 4.1:1 |
| fail on paper, needs 3:1 | 3.5:1 | 5.5:1 |
Light and dark values
| Role | Light | Dark |
|---|---|---|
--page | #fbfbfa | #0c0c0c |
--paper | #ffffff | #1f1f1f |
--shell | #f1f1f0 | #161616 |
--field | #efefef | #2a2a2a |
--ink | #050505 | #f4f4f3 |
--text-2 | rgb(5 5 5 / 0.60) | rgb(244 244 243 / 0.60) |
--line-faint | rgb(5 5 5 / 0.06) | rgb(244 244 243 / 0.06) |
--ok | #2c9a59 | #3fbf75 |
--warn | #d98a0b | #f0a531 |
--fail | #e35e49 | #ec6f5a |
Tokens
32 tokens
--page- #fbfbfa
--paper- #ffffff
--shell- #f1f1f0
--field- #efefef
--code-surface- var(--paper)
--hover- rgb(5 5 5 / 0.06)
--hover-row- rgb(5 5 5 / 0.035)
--pressed- rgb(5 5 5 / 0.10)
--scrim- rgb(5 5 5 / 0.24)
--ink- #050505
--ink-80- rgb(5 5 5 / 0.80)
--ink-60- rgb(5 5 5 / 0.60)
--ink-45- rgb(5 5 5 / 0.45)
--ink-32- rgb(5 5 5 / 0.32)
--ink-15- rgb(5 5 5 / 0.15)
--ink-10- rgb(5 5 5 / 0.10)
--ink-06- rgb(5 5 5 / 0.06)
--ink-03- rgb(5 5 5 / 0.03)
--text-1- rgb(5 5 5 / 0.80)
--text-2- rgb(5 5 5 / 0.60)
--text-3- rgb(5 5 5 / 0.45)
--text-disabled- rgb(5 5 5 / 0.32)
--text-inverse- #ffffff
--ok- #2c9a59
--ok-text- #1a7640
--ok-tint- #e6f4ea
--warn- #d98a0b
--warn-text- #8a5a00
--warn-tint- #fbf0d9
--fail- #e35e49
--fail-text- #b23c29
--fail-tint- #fbe9e5