DocsFoundations

Colors

Palette, roles and category pairs.

One file, roles only

Every raw colour lives in one token file. Components never read a hex value or a palette step: they read a role such as primary, muted-foreground or destructive. Tailwind’s default palette is switched off, so a colour outside the system cannot be used by accident. Changing a role is one line, and an end-to-end test checks that the change reaches the navbar, sidebar and bottom navigation.

Palette

A cool slate neutral scale, a deep electric blue for every hover and focus, and chartreuse as the brand fill.

slate

50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617

deep-blue

50#f3f3ff
100#e6e6ff
300#b5b5ff
400#6c6cff
500#0a0aff
700#040466

chartreuse

500#e1ff01

Roles

Role	Token	Use
`background`	`deep-blue-50` #f3f3ff	Page background (lilac). Cards sit on it in white.
`foreground`	`slate-950` #020617	Headings and main text: 18.3:1 on the page.
`foreground-alt`	`slate-700` #334155	Body copy: 9.4:1 on the page.
`muted-foreground`	`slate-600` #475569	Meta and hints: 7.6:1 on white, 6.9:1 on the page.
`primary`	`chartreuse-500` #e1ff01	Main action fill, always with slate-900 text (15.7:1).
`primary-hover`	`deep-blue-500` #0a0aff	The single hover accent of the whole system.
`ring`	`deep-blue-400` #6c6cff	Focus ring; 3.65:1 against the page (WCAG 1.4.11 needs 3:1).
`destructive`	`red-600` #dc2626	Errors and destructive actions; text 4.8:1 on white.
`border`	`slate-200` #e2e8f0	Dividers inside surfaces, always 1 px.
`card`	`white` #ffffff	Surfaces: cards, tiles, dialogs.

Status tones

Toasts and alerts use one recipe per tone: background 50, border 200–300, icon 500–600, text 800. The text keeps at least 6.8:1 on its own background.

successtext 6.8:1

warningtext 6.8:1

errortext 7.6:1

infotext 15.7:1

Category pairs

Each main category has its own background and ink. The colour follows the category into every control that picks it: tabs, tiles and chips. Hover and selection use the category colour, never the blue accent: a coloured border plus an 8 % / 12 % tint, not a full fill.

All activities #e1ff01 / #4e58006.8:1
Events #ff004d / #1f010a5.0:1
Places #1ee47a / #0e3f157.1:1
Education #00cbd8 / #0833446.7:1
Sport #44a1ff / #0202337.4:1
Food #ff8a2f / #3616047.0:1
Art #c978ff / #5007245.5:1
Health #b0ccf5 / #08234c9.4:1

The main text roles (foreground, foreground-alt, muted-foreground) pass WCAG AA on white and on the lilac page.
Two pairs sit just below 4.5:1 on the lilac page: destructive text (4.4:1) and the link-button grey (4.3:1). Both pass on white, so they belong on cards. My recommendation: move them one step darker (red-700, slate-600) when the system is next revised; that keeps the look and clears AA everywhere.
Category inks reach 5.0–9.4:1 on their backgrounds, so labels on coloured chips stay readable.
Colour never carries meaning alone: errors also get an icon and a message, the active tab also gets aria-current.