Colour palette

Every colour role: HSL triple, hex, role and reach. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.

Core roles

The shadcn/ui roles. Values are bare HSL triples, used as hsl(var(--x)) or hsl(var(--x) / .12).

A triple drops straight into a shadcn globals.css. Write hsl(var(--primary)) for a solid and hsl(var(--primary) / .12) for a tint; the copy button on a token gives you hsl(var(--token)). Hex is for reference only: never write hex in product code. Renders as is what the browser paints from the triple; Authored hex is the board value where the triple rounds one step away from it. Direct refs counts the surface folders (of 64) whose own CSS, JS or HTML writes the token; every surface also uses it through the kit.

TokenValue (HSL triple)Renders asAuthored hexRoleDirect refs
--background0 0% 100%#FFFFFFsamepage surface (clean white canvas)64
--foreground222 43% 10%#0F1524#0F1626body text, headings64
--card0 0% 100%#FFFFFFsame—61
--card-foreground222 43% 10%#0F1524#0F1626text and icons on --card0
--popover0 0% 100%#FFFFFFsamemenus, sheets, dialogs, toasts10
--popover-foreground222 43% 10%#0F1524#0F1626text and icons on --popover0
--primary220 49% 11%#0E172A#0E1729RJ midnight navy (--rj-ink): every primary action61
--primary-foreground60 17% 98%#FBFBF9#FAFAF8text and icons on --primary42
--primary-hover223 42% 18%#1B2641#1A2540--rj-ink-hover0
--secondary0 0% 100%#FFFFFFsameoutlined secondary button ground0
--secondary-foreground220 49% 11%#0E172A#0E1729text and icons on --secondary0
--muted225 22% 96%#F3F4F7#F4F5F8table header, wells, hover64
--muted-foreground221 17% 38%#505B71#505A70quiet text (>= 5.9:1 on white)64
--accent224 38% 94%#EAEDF6#EBEEF6selection, active filter55
--accent-foreground220 49% 11%#0E172A#0E1729text and icons on --accent5
--destructive353 53% 42%#A43240#A2323F—63
--destructive-foreground0 0% 100%#FFFFFFsametext and icons on --destructive0
--border220 20% 91%#E3E7ED#E4E7EDhairlines64
--input219 14% 59%#8892A5samecontrol borders: 3.1:1 on white (WCAG 1.4.11); was #C6CCD7 at 1.6:163
--input-hover223 17% 45%#5F6A86samefield / checkbox / select border on hover19
--secondary-border219 14% 79%#C2C7D1sameoutlined secondary button edge (board 3, text-labelled so exempt from 3:1)59
--secondary-border-hover220 10% 70%#ABB0BAsame—0
--ring221 45% 45%#3F60A6#3F5FA6focus33

Status roles

Success, warning, info and neutral, plus the catalogue lifecycle names that alias them.

Each status has a -foreground for text on a solid fill. Chips use the soft fill: the status at --status-soft-alpha (.12) on white, with the text in the full status colour.

TokenValue (HSL triple)Renders asAuthored hexRoleDirect refs
--success158 51% 26%#20644B#21654C—49
--success-foreground0 0% 100%#FFFFFFsametext and icons on --success0
--warning36 79% 29%#845610#83550Falso the STAGING badge52
--warning-foreground0 0% 100%#FFFFFFsametext and icons on --warning0
--info218 49% 39%#335694#335794—38
--info-foreground0 0% 100%#FFFFFFsametext and icons on --info0
--neutral222 13% 39%#575E70#575F72—1
--neutral-foreground0 0% 100%#FFFFFFsametext and icons on --neutral0
--draftvar(--info)#335694—Alias of --info. Draft = info blue1
--availablevar(--success)#20644B—Alias of --success. Available = green2
--retiredvar(--neutral)#575E70—Alias of --neutral. Retired = slate1
--lockedvar(--neutral)#575E70—Alias of --neutral. "locked" banner + lock chip5
--not-wiredvar(--warning)#845610—Alias of --warning. "not wired" banner (feature exists, backend not connected)5
TokenValueRole
--status-soft-alpha.12soft fills: status at 12% on white; text stays the status colour (all >= 4.5:1)
DraftAvailableRetiredShippedAwaiting paymentPayment failedLockedEndedNot wired
Uses.chip.draft.chip.available.chip.retired.chip.info.chip.warning.chip.danger.chip.locked.chip.ended.chip.unmapped

Charts

Five categorical series, assigned in order and never cycled, plus one muted comparison colour.

Categorical order, assigned in this order and never cycled. Validated with the dataviz validator on white: lightness band, chroma floor, adjacent CVD >= 10.6, normal-vision >= 15.9, all >= 3:1; slots 1-3 also pass --pairs all. None of them is a status colour. A single series uses --chart-1; a comparison / previous period uses --chart-muted (dotted).

TokenValue (HSL triple)Renders asAuthored hexRoleDirect refs
--chart-1219 61% 47%#2F62C1#2F62C0blue7
--chart-2166 76% 36%#16A281#16A07Fteal0
--chart-320 70% 53%#DB6B33#DB6B35coral0
--chart-4229 62% 68%#7B8DE0#7C8FE0periwinkle0
--chart-5334 58% 58%#D2568C#D2588Crose0
--chart-muted221 25% 58%#798AAF#7A8BB0steel: previous period, reference lines, never a category0
--chart-1
--chart-2
--chart-3
--chart-4
--chart-5
--chart-muted
Uses--chart-1--chart-2--chart-3--chart-4--chart-5--chart-muted