Appearance
Color ​
mono-helper paints with Basecoat's token set — --background, --primary, --destructive, --ring … in OKLCH, with a .dark twin for every one — plus seven extension roles Basecoat does not have: success, warning, info, teal, purple, neutral and dark, each with its own -foreground ink. This page lists every value the library ships, per colour preset, in both modes.
Pick a palette with a class on <html> (or the theme API): theme-color-one, theme-color-basecoat. Basecoat is the default — it is what :root already declares, so its class is optional. Dark mode is class="dark" on <html> (or <body>, or a .mono-theme wrapper).
The role names below are also what a component's color prop accepts (danger paints --destructive).
Brand ​
ONE · light
Basecoat (neutral) · light
Basecoat (neutral) · dark
--primary
oklch(0.304 0.108 273.2)oklch(0.205 0 0)oklch(0.922 0 0)--primary-foreground
oklch(1 0 0)oklch(0.985 0 0)oklch(0.205 0 0)--secondary
oklch(0.98 0.005 274.97)oklch(0.97 0 0)oklch(0.269 0 0)--secondary-foreground
oklch(0.278 0.03 256.85)oklch(0.205 0 0)oklch(0.985 0 0)--accent
oklch(0.965 0.014 272.69)oklch(0.97 0 0)oklch(0.371 0 0)--accent-foreground
oklch(0.278 0.03 256.85)oklch(0.205 0 0)oklch(0.985 0 0)--ring
oklch(0.304 0.108 273.2)oklch(0.708 0 0)oklch(0.556 0 0)secondary and accent follow shadcn's meaning: secondary is a muted surface (a grey button, a soft chip), accent is the hover surface. Neither is a second brand hue — the blue that used to sit in secondary is info.
Status ​
ONE · light
Basecoat (neutral) · light
Basecoat (neutral) · dark
--destructive
oklch(0.577 0.215 27.33)oklch(0.577 0.245 27.325)oklch(0.704 0.191 22.216)--destructive-foreground
oklch(1 0 0)oklch(1 0 0)oklch(0 0 0 / 87%)--success
oklch(0.527 0.137 150.07)oklch(0.627 0.17 149.21)oklch(0.8 0.182 151.71)--success-foreground
oklch(1 0 0)oklch(1 0 0)oklch(0 0 0 / 87%)--warning
oklch(0.5553 0.1455 48.998)oklch(0.6806 0.1423 75.834)oklch(0.8606 0.1731 91.936)--warning-foreground
oklch(1 0 0)oklch(0 0 0 / 87%)oklch(0 0 0 / 87%)--info
oklch(0.482 0.123 262.67)oklch(0.546 0.215 262.88)oklch(0.714 0.143 254.62)--info-foreground
oklch(1 0 0)oklch(1 0 0)oklch(0 0 0 / 87%)Extended ​
ONE · light
Basecoat (neutral) · light
Basecoat (neutral) · dark
--teal
oklch(0.5239 0.0917 180.004)oklch(0.6002 0.1038 184.704)oklch(0.7845 0.1325 181.912)--teal-foreground
oklch(1 0 0)oklch(0 0 0 / 87%)oklch(0 0 0 / 87%)--purple
oklch(0.355 0.141 267.87)oklch(0.541 0.247 293.01)oklch(0.709 0.159 293.54)--purple-foreground
oklch(1 0 0)oklch(1 0 0)oklch(0 0 0 / 87%)--neutral
oklch(0.554 0.041 257.42)oklch(0.556 0 0)oklch(0.6 0 0)--neutral-foreground
oklch(1 0 0)oklch(1 0 0)oklch(1 0 0)--dark
oklch(0.208 0.04 265.75)oklch(0.205 0 0)oklch(0.87 0 0)--dark-foreground
oklch(1 0 0)oklch(1 0 0)oklch(0.205 0 0)Surfaces, ink and lines ​
ONE · light
Basecoat (neutral) · light
Basecoat (neutral) · dark
--background
oklch(0.973 0.007 268.55)oklch(1 0 0)oklch(0.145 0 0)--foreground
oklch(0.278 0.03 256.85)oklch(0.145 0 0)oklch(0.985 0 0)--card
oklch(1 0 0)oklch(1 0 0)oklch(0.205 0 0)--card-foreground
oklch(0.278 0.03 256.85)oklch(0.145 0 0)oklch(0.985 0 0)--popover
oklch(1 0 0)oklch(1 0 0)oklch(0.205 0 0)--popover-foreground
oklch(0.278 0.03 256.85)oklch(0.145 0 0)oklch(0.985 0 0)--muted
oklch(0.98 0.005 274.97)oklch(0.97 0 0)oklch(0.269 0 0)--muted-foreground
oklch(0.551 0.023 264.36)oklch(0.556 0 0)oklch(0.708 0 0)--border
oklch(0.928 0.011 269.54)oklch(0.922 0 0)oklch(1 0 0 / 10%)--input
oklch(0.891 0.014 268.48)oklch(0.922 0 0)oklch(1 0 0 / 15%)Charts ​
ONE · light
Basecoat (neutral) · light
Basecoat (neutral) · dark
--chart-1
oklch(0.304 0.108 273.2)oklch(0.809 0.096 251.81)oklch(0.809 0.096 251.81)--chart-2
oklch(0.673 0.103 269.05)oklch(0.623 0.188 259.81)oklch(0.623 0.188 259.81)--chart-3
oklch(0.749 0.142 76.49)oklch(0.546 0.215 262.88)oklch(0.546 0.215 262.88)--chart-4
oklch(0.928 0.011 269.54)oklch(0.488 0.217 264.38)oklch(0.488 0.217 264.38)--chart-5
oklch(0.361 0.108 273.02)oklch(0.424 0.181 265.64)oklch(0.424 0.181 265.64)Light only
ONE has no dark palette: under html.dark it keeps its light values (and light mode tokens), so a page can use the dark toggle everywhere else while this preset stays as designed.
Using the colors ​
Set a role with the color prop, or read the tokens directly in your own CSS:
css
.my-panel {
background: var(--card);
color: var(--card-foreground);
border: 1px solid var(--border);
}
.my-panel--flagged {
background: color-mix(in oklab, var(--destructive) 10%, transparent);
color: var(--destructive);
}Alpha is color-mix(in oklab, var(--x) N%, transparent) — the same recipe every ported component uses. (The pre-Basecoat --theme-<slot>-rgb triplets still exist in ui/theme/legacy.css until 3.0.)
A color prop also takes a raw CSS colour, and works out a readable ink for it automatically:
html
<mono-sidebar color="#7c3aed"></mono-sidebar>To re-skin globally, override the tokens — a TweakCN theme pastes in as-is, and the extension roles follow the same shape:
css
:root {
--primary: oklch(0.541 0.247 293.01);
--primary-foreground: oklch(1 0 0);
}
.dark {
--primary: oklch(0.7 0.174 293.05);
}ONE's pillar colors ​
The ONE palette carries five extra brand tokens for the EJI pillars. No mono component reads them; they exist for application code that needs those colours by name.
#152568--theme-pillar-commercial#2a44a8--theme-pillar-operasional#0f7b6c--theme-pillar-fat#b7791f--theme-pillar-budgeting#1d3184--theme-pillar-distributorFor the control ladder, radii, shadows and everything that is not a colour, see Theme.