205
Pelorous
--hue-pelorous
Action and link hue. Not Mongoose (75).
Design · Color
Color
Light theme kina is the default. kina-dark is opt-in from the masthead. These swatches follow the active theme. The action hue is Pelorous (205).
Hues
The four seeds
Tokens are OKLCH / OKLAB mixes from these hues. P3 and Rec.2020 lift Pelorous chroma where the display allows it. Do not add a fifth seed without a new role.
330
Mountbatten
--hue-mountbatten
Secondary. Rare on the public pages.
200
Edward
--hue-edward
Muted ink and captions.
260
Spine
--hue-spine
Neutral paper, lines, and abbey ink.
Roles
Paint the page, not the palette
Prefer these roles over raw palette steps. Switch to Dark in the masthead to see the same roles on kina-dark.
Canvas
--color-canvas
Page ground.
Elevated
--color-elev
Tiles, panels, and specimen wells.
Ink
--color-ink
Primary text.
Muted
--color-muted
Ledes, captions, and idle nav.
Line
--color-line
Hairline borders.
Code well
--color-code
Inline code and fences.
Primary
--color-primary
Links, kickers, and the action fill.
Primary soft
--color-primary-soft
A quiet Pelorous wash.
Secondary
--color-secondary
Mountbatten. Do not use for actions.
Action fill
--action-primary-bg
Primary button ground.
Action ink
--action-primary-fg
Primary button label.
Warning
--lch-warning
LCH warning, not an action hue.
Themes
kina, then kina-dark
The root is data-theme="kina". Dark is stored in localStorage as kina-theme. Do not invert by prefers-color-scheme — visitors opt in.
Default
kina
Graynurse paper, abbey ink, Pelorous 500 actions. This is the shipping theme.
Opt-in
kina-dark
Abbey paper, light ink, Pelorous 400 actions. Same roles, different lightnesses.