Colors
Color in the kit is two layers. The palette is a fixed set of hex values. Semantic tokens (--k-surface, --k-primary, --k-danger) point at those values and flip when you set data-theme on the document root.
Orange for buttons, fields, borders, and the focus ring is set once. It doesn’t flip in dark mode, so a dark page doesn’t turn the controls blue. Dark page backgrounds use the steel scale. Steel 950 is black.
<html data-theme="k-light">k-light or k-dark. Utilities like bg-k-primary and text-k-fg emit var(--k-…), so a theme switch doesn’t need a rebuild.
Components should use the semantic tokens, not the palette steps. The palette is the source. Semantic names are what you override if the defaults aren’t what you want.
Surfaces and type
Section titled “Surfaces and type”The page background, raised panels, and text. Switch the docs theme in the header to see these move.
--k-surface--k-surface-raised--k-surface-hard--k-surface-soft--k-fg--k-fg-muted
| Token | Role |
|---|---|
--k-surface |
Page background |
--k-surface-raised |
Cards, menus, raised panels |
--k-surface-hard |
A stronger fill on top of the page |
--k-surface-soft |
A wash, usually the same as the page |
--k-fg |
Body text |
--k-fg-muted |
Secondary text, captions |
Brand and fields
Section titled “Brand and fields”Most of these stay orange in both themes. --k-field is the fill on inputs. --k-primary is the main action. --k-ring is the focus color. --k-border-hard is the exception: black in light, orange-500 in dark.
- Aa
--k-field --k-field-fg--k-border--k-border-hard- Aa
--k-primary --k-primary-fg--k-primary-hover--k-ring- Aa
--k-accent --k-accent-fg--k-accent-hover
Where a swatch shows Aa, that is the matching foreground token on top of the fill.
| Token | Role |
|---|---|
--k-field / --k-field-fg |
Input fill and type |
--k-border |
Borders. Orange in both themes. |
--k-border-hard |
High-contrast frames. Black in light, orange-500 in dark. |
--k-primary / --k-primary-fg / --k-primary-hover |
Primary actions |
--k-ring |
Focus ring color |
--k-accent / --k-accent-fg / --k-accent-hover |
Inverse fill (dark type on light, or the reverse in dark mode) |
Status
Section titled “Status”Danger, info, success, and warning. Warning reuses the orange scale. Red, blue, and green exist only for these roles.
- Aa
--k-danger --k-danger-fg- Aa
--k-info --k-info-fg- Aa
--k-success --k-success-fg- Aa
--k-warning --k-warning-fg
Palette
Section titled “Palette”Hex values. Semantic tokens point here. You usually don’t use these in component CSS.
Orange
Section titled “Orange”Brand. Light page wash, fields, actions, borders, and focus.
orange-50orange-100orange-200orange-300orange-400orange-500orange-600orange-700orange-800orange-900orange-950
Dark page backgrounds. 950 is black. Raised panels sit on 900. Stronger fills sit on 800.
steel-50steel-100steel-200steel-300steel-400steel-500steel-600steel-700steel-800steel-900steel-950
Neutral
Section titled “Neutral”A cool gray scale. Nothing in the current themes points at it. It’s there if you need a gray that isn’t steel.
neutral-50neutral-100neutral-200neutral-300neutral-400neutral-500neutral-600neutral-700neutral-800neutral-900neutral-950
Yellow
Section titled “Yellow”A true yellow. Nothing in the current themes points at it either. Warning stays on the orange scale, so a warning still reads as kit chrome. These docs use yellow-300 for the JS badge next to a page title.
yellow-50yellow-100yellow-200yellow-300yellow-400yellow-500yellow-600yellow-700yellow-800yellow-900yellow-950
Status ramps
Section titled “Status ramps”Only the steps the themes actually use.
red-400red-600red-950green-400green-700green-950blue-400blue-600blue-950whiteblack
Utilities
Section titled “Utilities”Same names as the semantic tokens: bg-k-primary, text-k-fg, border-k-border, bg-k-surface-raised. They are available when you compile from source, and the published stylesheet safelists the set above.