Colors

Quick reference

• The site's palette comes from coolors.co/73d3c3-202b49-bed4e6-5f93c7-a6dcf7-f1b753-5e7893-93bcdf-d06e6a, a 9-color palette.
• All nine are defined as CSS custom properties (--palette-*) in src/css/custom.css so components can reference them by name instead of hex.
• The primary color is slate blue #5e7893 in light mode and sky blue #a6dcf7 in dark mode — these drive Infima's --ifm-color-primary family (buttons, active sidebar items). Links have their own color; see Link colors.
• Navy #202b49 is the secondary/structural color — used for the hero background and as the dark "hub" fill in diagrams.
• The rest (teal, pale blue, blue, gold, periwinkle, terracotta) are accents, used mostly to color-code nodes in the architecture diagrams under src/components/*Diagrams.

Primary colors

Swatch	Name	Hex	Role
🟦	Slate blue	#5e7893	Primary (light mode). --ifm-color-primary; buttons, active sidebar items.
🟦	Sky blue	#a6dcf7	Primary (dark mode). --ifm-color-primary under [data-theme='dark']; lighter so it reads on a dark background.
🟪	Navy	#202b49	Secondary/structural. Hero background (.hero--primary), and the dark hub fill in diagrams.

Docusaurus (via Infima) only needs one primary color per theme, so slate blue and sky blue are the two colors that actually count as "primary" for the site — everything else is an accent layered on top.

Accent colors

These round out the palette and are used for accents and data-viz-style color-coding (e.g. distinguishing node types in the diagram components), not for primary UI chrome:

Swatch	Name	Hex
🟩	Teal	#73d3c3
🟦	Pale blue	#bed4e6
🟦	Blue	#5f93c7
🟨	Gold	#f1b753
🟪	Periwinkle	#93bcdf
🟥	Terracotta	#d06e6a

Where it's defined

All nine colors, plus the Infima primary-color scale derived from them, live in one place:

src/css/custom.css

/*
 * Palette: https://coolors.co/73d3c3-202b49-bed4e6-5f93c7-a6dcf7-f1b753-5e7893-93bcdf-d06e6a
 */
:root {
  --ifm-color-primary: #5e7893; /* slate blue */
  --palette-teal: #73d3c3;
  --palette-navy: #202b49;
  --palette-pale-blue: #bed4e6;
  --palette-blue: #5f93c7;
  --palette-sky-blue: #a6dcf7;
  --palette-gold: #f1b753;
  --palette-slate-blue: #5e7893;
  --palette-periwinkle: #93bcdf;
  --palette-terracotta: #d06e6a;
}

[data-theme='dark'] {
  --ifm-color-primary: #a6dcf7; /* sky blue */
}

To change the site's primary color, update --ifm-color-primary (and its -dark/-darker/-light/etc. shades) in both the light and dark blocks. To reuse a palette color elsewhere, reference the matching --palette-* variable rather than hard-coding the hex again.