colours
Graphite surfaces and one green. Dark is the default and follows the system; light is "day paper". Green marks the one primary action, focus, and live/ok, and is never body text on light (use accent there).
semantic tokens
| token | css variable | dark | light |
|---|---|---|---|
| bg | --c-bg | #0a0a0b | #e9e8e4 |
| bgElev | --c-bg-elev | #111113 | #f1f0ec |
| surface | --c-surface | #151517 | #dfded9 |
| surfaceRaised | --c-surface-raised | #1a1a1d | #f7f6f3 |
| line | --c-line | #232326 | #cfcec8 |
| lineStrong | --c-line-strong | #404044 | #a9a8a2 |
| lineInput | --c-line-input | #6a6a70 | #7a7973 |
| fg | --c-fg | #ededeb | #1a1a1c |
| fgMuted | --c-fg-muted | #b3b3af | #46464a |
| fgSubtle | --c-fg-subtle | #8c8c88 | #5e5e5b |
| accent | --c-accent | #00ff82 | #0a6e3c |
| accentFill | --c-accent-fill | #00ff82 | #00ff82 |
| onAccent | --c-on-accent | #06170d | #06170d |
| warn | --c-warn | #ffb454 | #8a5200 |
| danger | --c-danger | #ff6b63 | #b42318 |
| onDanger | --c-on-danger | #1a0605 | #ffffff |
| dangerTint | --c-danger-tint | #2a1513 | #f6dcd8 |
| ok | --c-ok | #3ddc84 | #11652f |
| info | --c-info | #7cc4ff | #1d5fa8 |
| focus | --c-focus | #00ff82 | #0a6e3c |
| scrim | --c-scrim | rgba(0, 0, 0, 0.6) | rgba(20, 20, 22, 0.4) |
contrast
Every pair the components put text or a boundary on, checked in both themes by the token test. AA needs 4.5:1 for text and 3:1 for the focus ring and input borders.
| text | on | theme | ratio | needs |
|---|---|---|---|---|
fg | bg | dark | ok: 16.88:1 | 4.5:1 |
fg | bg | light | ok: 14.17:1 | 4.5:1 |
fg | bgElev | dark | ok: 16.09:1 | 4.5:1 |
fg | bgElev | light | ok: 15.24:1 | 4.5:1 |
fg | surface | dark | ok: 15.56:1 | 4.5:1 |
fg | surface | light | ok: 12.90:1 | 4.5:1 |
fg | surfaceRaised | dark | ok: 14.81:1 | 4.5:1 |
fg | surfaceRaised | light | ok: 16.08:1 | 4.5:1 |
fgMuted | bg | dark | ok: 9.41:1 | 4.5:1 |
fgMuted | bg | light | ok: 7.66:1 | 4.5:1 |
fgMuted | surface | dark | ok: 8.67:1 | 4.5:1 |
fgMuted | surface | light | ok: 6.97:1 | 4.5:1 |
fgMuted | bgElev | dark | ok: 8.97:1 | 4.5:1 |
fgMuted | bgElev | light | ok: 8.24:1 | 4.5:1 |
fgMuted | surfaceRaised | dark | ok: 8.26:1 | 4.5:1 |
fgMuted | surfaceRaised | light | ok: 8.69:1 | 4.5:1 |
fgSubtle | bg | dark | ok: 5.86:1 | 4.5:1 |
fgSubtle | bg | light | ok: 5.31:1 | 4.5:1 |
fgSubtle | surface | dark | ok: 5.40:1 | 4.5:1 |
fgSubtle | surface | light | ok: 4.83:1 | 4.5:1 |
accent | bg | dark | ok: 14.73:1 | 4.5:1 |
accent | bg | light | ok: 5.18:1 | 4.5:1 |
accent | surface | dark | ok: 13.57:1 | 4.5:1 |
accent | surface | light | ok: 4.71:1 | 4.5:1 |
onAccent | accentFill | dark | ok: 13.75:1 | 4.5:1 |
onAccent | accentFill | light | ok: 13.75:1 | 4.5:1 |
danger | bg | dark | ok: 7.10:1 | 4.5:1 |
danger | bg | light | ok: 5.36:1 | 4.5:1 |
danger | bgElev | dark | ok: 6.77:1 | 4.5:1 |
danger | bgElev | light | ok: 5.77:1 | 4.5:1 |
danger | surface | dark | ok: 6.54:1 | 4.5:1 |
danger | surface | light | ok: 4.88:1 | 4.5:1 |
danger | surfaceRaised | dark | ok: 6.23:1 | 4.5:1 |
danger | surfaceRaised | light | ok: 6.08:1 | 4.5:1 |
danger | dangerTint | dark | ok: 6.20:1 | 4.5:1 |
danger | dangerTint | light | ok: 5.06:1 | 4.5:1 |
onDanger | danger | dark | ok: 7.03:1 | 4.5:1 |
onDanger | danger | light | ok: 6.57:1 | 4.5:1 |
ok | bg | dark | ok: 11.09:1 | 4.5:1 |
ok | bg | light | ok: 5.85:1 | 4.5:1 |
ok | surface | dark | ok: 10.22:1 | 4.5:1 |
ok | surface | light | ok: 5.33:1 | 4.5:1 |
info | bg | dark | ok: 10.55:1 | 4.5:1 |
info | bg | light | ok: 5.26:1 | 4.5:1 |
warn | bg | dark | ok: 11.22:1 | 4.5:1 |
warn | bg | light | ok: 5.21:1 | 4.5:1 |
focus | bg | dark | ok: 14.73:1 | 3:1 |
focus | bg | light | ok: 5.18:1 | 3:1 |
lineInput | bg | dark | ok: 3.68:1 | 3:1 |
lineInput | bg | light | ok: 3.56:1 | 3:1 |
lineInput | bgElev | dark | ok: 3.51:1 | 3:1 |
lineInput | bgElev | light | ok: 3.83:1 | 3:1 |
brand primitives
Raw colours behind the semantic tokens. Use the semantic tokens in components; these are listed for reference (the cat colours feed Cat3D).
green#00ff82greenInk#0a6e3camber#ffb454red#ff5f56cat#14995acatEdge#63d396
terminal (ansi) palette
For glyphs inside dark code and terminal surfaces only. Several of these fail contrast on light backgrounds, so StatusLine and every other component use the theme tokens instead.
--ansi-bg#050506--ansi-fg#d8d8d6--ansi-muted#a3a39f--ansi-dim#7b7b77--ansi-white#f2f2f0--ansi-black#0a0a0b--ansi-red#ff6b63--ansi-green#00ff82--ansi-amber#ffb454--ansi-blue#7cb2ff--ansi-magenta#c792ea--ansi-cyan#7fdbca