Color

This page lists every colour on the website, what each one is for, and the contrast ratios that show it is readable. Use it when choosing a colour for a component, a diagram or a brand image; the values are defined once on Design Tokens.

Rules

1. Monochrome by default. Cool greys with a slight blue-ink bias. Colour carries meaning, never decoration.
2. Amber has five uses, nothing else: the due marker in the demo and diagrams (with its label), the active tab underline, the current page bar in the sidebar, the logo dot, and warning callouts. Amber anywhere else is a bug.
3. accent for graphics, accent-text for words. Light accent (#C27C00) is 3.40:1 on white: enough for a marker, not for text. Amber text uses accent-text (#8F5A00, 5.78:1).
4. Links are ink and underlined. Link text is text, underlined in rule-strong 4 px below the baseline; on hover the underline turns accent. Never blue.
5. Status colours are semantic. success, danger and info mean only that. Warnings use the amber pair.
6. Colour is never the only signal. Every coloured state also has a shape, an icon or a word (Colour vision).
7. No raw values in components. Use var(--wc-*) or the Tailwind utilities (Design Tokens).

Neutrals

Token	Light	Dark	Role
bg	#FFFFFF	#0B0E14	Page background, sidebar
surface	#F6F7F9	#121620	Active sidebar item, code blocks, callouts, cards, demo frame
raised	#FFFFFF	#1A1F2B	Popovers, search dialog; in light mode set apart by border and shadow
rule	#E3E6EB	#242B37	Hairlines, dividers, table and diagram grid lines
rule-strong	#CDD2DA	#343C4A	Focused table rows, link underlines, hover borders, holiday hatching
text	#0F1729	#E8ECF2	Body, headings, link text
text-2	#4A5363	#A3ACBA	Secondary text, navigation, table of contents
text-3	#6B7484	#8A93A3	Captions and placeholders (light mode: on bg or raised only); borders of form controls

Diagram colours

Diagrams and the landing demo use their own tokens, so a change to borders or text never changes a diagram by accident.

Token	Light	Dark	Role
work	#DBE2EC	#1D2532	Working-hour bars: time the schedule counts
used	#0F1729	#E8ECF2	Working time a calculation has consumed (same value as text)
accent	#C27C00	#FFB224	The due marker: the instant add returns

Time outside working hours is not drawn; it is bg.

Amber

Token	Light	Dark	Use
accent	#C27C00	#FFB224	Due marker, active tab underline, current page bar, warning callout bar and icon. Graphics only.
accent-text	#8F5A00	#FFB224	Amber that must be read: the due label, the warning callout title
logo-dot	#D98A00	#FFB224	The dot in the logo files. Never in CSS.

Why the site's amber is darker than the one the owner picked

The owner chose amber from a mockup at #D98A00. On white that is 2.77:1, below the 3:1 that WCAG 2.2 requires for graphics and parts of controls such as the due marker and the tab underline (SC 1.4.11). So the site darkens it, keeping the hue:

Value	Where	On bg	On surface	Meets
#D98A00	The mockup; the logo dot	2.77	2.58	Nothing (logos are exempt)
#C27C00	accent, light	3.40	3.17	3:1 for graphics
#8F5A00	accent-text, light	5.78	5.40	4.5:1 for text
#FFB224	accent and accent-text, dark	10.71 on #0B0E14	10.03 on #121620	Both

The logo keeps #D98A00: "Logos are exempted from contrast requirements" (Understanding 1.4.11), and text in a logo is exempt under SC 1.4.3. The header logo is also the link home, but the wordmark identifies it (text on bg, 17.87:1), not the dot.

Status colours

Token	Light	Dark	Use
success	#0E7A55	#4CC38A	Success callouts, a passing check
danger	#C8331F	#FF6B5A	Errors, danger callouts, demo error messages
info	#1F5BD8	#7AA2FF	Note callouts
warning	= accent	= accent	Warning callout bar and icon
warning-text	= accent-text	= accent-text	Warning callout title
focus	#1F5BD8	#7AA2FF	Focus ring. The only blue besides note callouts.
overlay	rgb(15 23 41 / .2)	rgb(0 0 0 / .5)	Behind dialogs

Contrast

Ratios use the WCAG 2.x formula: relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B on linearised sRGB channels (c ≤ 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055)^2.4), ratio = (L1 + 0.05) / (L2 + 0.05) with L1 the lighter (WCAG 2.2 definitions). Rounded to two decimals; no pass is within 0.15 of its threshold.

Thresholds at AA: text below 24 px (or 18.66 px bold) 4.5:1 and large text 3:1 (1.4.3); graphics and control boundaries 3:1 (1.4.11). Weight 600 is not counted as bold (WCAG's examples use 700), so a 20 px H3 is normal text.

Text

Pair	Where	Light	Dark
text on bg	Body, headings	17.87	16.29
text on surface	Code, active sidebar item	16.67	15.25
text on raised	Popovers, search	17.87	13.89
text-2 on bg	Navigation, secondary text	7.75	8.43
text-2 on surface	Code block titles, callout text	7.23	7.89
text-2 on raised	Search result details	7.75	7.19
text-3 on bg	Captions, placeholders	4.71	6.24
text-3 on surface	Captions in code blocks or the demo frame	4.40, fails (passes as large text)	5.84
text-3 on raised	Placeholder in the search dialog	4.71	5.32
accent-text on bg	Due label, warning title	5.78	10.71
accent-text on surface	Due label in the demo, warning title in a callout	5.40	10.03
success on bg / surface	Success text	5.34 / 4.98	8.72 / 8.16
danger on bg / surface	Error text	5.32 / 4.96	6.90 / 6.46
info on bg / surface	Note text	5.92 / 5.52	7.76 / 7.27
bg on text	Primary button label	17.87	16.29

Every pair passes except text-3 on surface in light mode. That is why text-3 is not used on surface there, and why Fumadocs' --color-fd-muted-foreground maps to text-2 (Design Tokens).

Graphics and controls

Pair	Where	Light	Dark
accent against bg	Due marker, active tab underline	3.40	10.71
accent against surface	Current page bar, due marker in the demo frame, warning callout icon	3.17	10.03
accent against work	Due marker on a working-hour bar	2.61, fails	8.54
accent against used	Due marker touching counted time	5.26	1.52, fails
focus against bg / surface / raised	Focus ring	5.92 / 5.52 / 5.92	7.76 / 7.27 / 6.62
used against work	Counted against remaining working time	13.70	13.00
work against bg / surface	Working-hour bars	1.30 / 1.22, fail	1.25 / 1.17, fail
text-3 against bg / surface	Form-control borders	4.71 / 4.40	6.24 / 5.84
rule-strong against bg	Link underline, hover border	1.52	1.74
rule against bg	Hairlines (decorative, not required)	1.25	1.36
info, danger, success against surface	Callout icons	5.52, 4.96, 4.98	7.27, 6.46, 8.16

How each failure is handled:

Failure	Handling
Due marker on work (light) and next to used (dark)	The marker's line and dot carry a 2 px bg outline, so their edge always meets bg: 3.40:1 light, 10.71:1 dark. The due time is also printed as text beside it.
Working-hour bars against the page	WCAG does not require 3:1 when text conveys the same information (Understanding 1.4.11). Every week-strip row has a text label (its day, or "Holiday", "Weekend"), the caption states the working hours, and the result is a sentence. The bars stay quiet.
Form-control borders	rule-strong is below 3:1, and a border that shows a field exists must reach 3:1. Text inputs, number fields, selects and checkboxes use text-3. Buttons whose label identifies them (the search trigger, page actions) may keep rule-strong.
Link underline in rule-strong	The underline is the non-colour cue SC 1.4.1 asks for; WCAG sets no contrast for it. Faint by design.

Colour vision

Amber, green and red are hard to tell apart with red-green colour vision deficiency, and amber against ink differs only in lightness. So:

Thing	Colour	Also shown by
Due time	accent marker	A line-and-dot shape, and the label "Due Wed 30 Dec, 09:30"
Current page	accent bar	Medium weight, surface background, aria-current
Active tab	accent underline	text instead of text-2, aria-selected="true"
Callout type	info, accent, danger, success	Its own icon and a title word ("Note", "Warning", "Danger")
Links	none (ink)	Underline
Counted versus remaining time	used versus work	13:1 lightness difference, and totals as text

Check new diagrams with Chrome DevTools, Rendering panel, "Emulate vision deficiencies".

Code syntax highlighting

Fumadocs highlights code with Shiki at build time, defaulting to github-light and github-dark (fumadocs-core 16.17.8). Code blocks are drawn on --color-fd-card, our surface, not on the theme's background (fumadocs-ui 16.17.8, components/codeblock.js). Measured against surface:

Theme pair	Lowest text colour on surface	Failing scopes
github-light / github-dark (default)	3.26 light, 3.76 dark	Light: list markers #E36209 3.26, keywords #D73A49 4.27, tags #22863A 4.32, comments #6A737D 4.49. Dark: comments 3.76.
github-light-default / github-dark-default	4.24 light, 5.88 dark	Light comments #6E7781 4.24
github-light-high-contrast / github-dark-default	4.70 light, 5.88 dark	None
min-light / min-dark	1.65, 3.76	Comments, parameters, numbers
vitesse-light / vitesse-dark	2.18, 3.95	Comments, regex, variables, types

Ratios were computed for every tokenColors foreground in the theme files against #F6F7F9 and #121620, ignoring diff and "ignored" scopes.

The site uses github-light-high-contrast (light) and github-dark-default (dark): every syntax colour passes 4.5:1 on surface, and both are bundled with Shiki, so no new package.

// website/source.config.ts
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: {
      themes: {
        light: 'github-light-high-contrast',
        dark: 'github-dark-default',
      },
    },
  },
});

rehypeCodeOptions.themes is documented in Fumadocs: Rehype Code and present in fumadocs-mdx 15.4.10's types.

Open items

• github-dark-default colours type and class names #FFA657, close to dark amber. Code is not a marker, so rule 2 holds; if it reads as amber, the owner may ask to copy the theme JSON to website/lib/shiki-dark.json and change #ffa657 to the theme foreground #e6edf3.
• If testing shows readers miss links, the resting underline could move from rule-strong to text-3 (owner's choice; visible change).