Fundamentals

Colour tokens

Every colour in Kern is a CSS custom property with a value per theme. The source is tokens/tokens.json; kern.css is generated from it.

Roles

Surfaces: canvas (page), surface (cards, tables), surface-raised (dialogs, popovers), surface-sunken (fields, code), hover
Lines: line for separators, line-strong for field borders
Text: text, text-muted (secondary), text-faint (placeholders, disabled)
Accent: accent (primary buttons, selection), accent-soft (backgrounds), accent-text (links, active text), on-accent (text on accent)
Status: ok, warn, danger and their -soft backgrounds
Other: focus (focus rings), scrim (behind modals), json-* (code highlighting), chart-* (data series)

All colours

The swatches show both themes at once, independent of the theme you are viewing.

Token	Dark	Light
`--canvas`	`#0d1012`	`#f2f4f5`
`--surface`	`#14181b`	`#ffffff`
`--surface-raised`	`#1b2024`	`#ffffff`
`--surface-sunken`	`#101316`	`#f6f8f9`
`--hover`	`#1f2529`	`#eaeff1`
`--line`	`#262d32`	`#e0e5e8`
`--line-strong`	`#6a767f`	`#7f8c93`
`--text`	`#e6ebed`	`#10191e`
`--text-muted`	`#9ba7ad`	`#4c5a62`
`--text-faint`	`#7c8990`	`#65737b`
`--accent`	`#3cc8cc`	`#0a7a7e`
`--accent-hover`	`#6dd8db`	`#086569`
`--on-accent`	`#04201f`	`#ffffff`
`--accent-soft`	`#0f2b2d`	`#ddf1f1`
`--accent-text`	`#5fd3d6`	`#08696d`
`--ok`	`#58c98a`	`#1b7a45`
`--ok-soft`	`#12281c`	`#e2f3e8`
`--warn`	`#e8b450`	`#8a5a00`
`--warn-soft`	`#2c2311`	`#fbf0d6`
`--danger`	`#f0766a`	`#b8261b`
`--danger-hover`	`#f4958b`	`#9c1f16`
`--on-danger`	`#2a0b08`	`#ffffff`
`--danger-soft`	`#301614`	`#fbe6e3`
`--focus`	`#7ce4e6`	`#0a7a7e`
`--scrim`	`rgba(5, 7, 8, 0.72)`	`rgba(16, 25, 30, 0.45)`
`--json-key`	`{text-muted}`	`{text-muted}`
`--json-string`	`#86dca8`	`#1a7f37`
`--json-number`	`#7fb8ff`	`#0550ae`
`--json-literal`	`#e0a6f0`	`#8250df`
`--chart-1`	`#3cc8cc`	`#0a7a7e`
`--chart-2`	`#e8b450`	`#a86d00`
`--chart-3`	`#7fa8ff`	`#2f67d0`
`--chart-4`	`#e58bbf`	`#b5407f`
`--chart-grid`	`#232a2f`	`#e6eaec`

Shadows

--shadow-overlay is used for popovers, menus, toasts and dialogs.