Colors

The approved palette (exhaustive)

Role	Hex / Value	CSS variable
Primary Blue	#0077FF	--shumoul-blue
Primary Teal	#00B39F	--shumoul-teal
Dark Background	#0D1117	--shumoul-bg (dark mode)
Surface	#1A1F2E	--shumoul-surface (dark mode)
Border	rgba(255,255,255,.08)	--shumoul-border (dark mode)
Primary Text	#FFFFFF	--shumoul-text (dark mode)
Secondary Text	#A9A5A6	--shumoul-text-secondary (dark mode)

No other hue exists anywhere on this site. No purple, no orange, no red accents, no green theme, no Docusaurus default palette. Every additional value below is a shade or tint of one of the two brand hues above — never a new color.

AA-safe text shades

Two darker shades of the brand hues exist specifically so body-sized text and button labels clear WCAG AA (4.5:1), while the pure brand hexes stay reserved for large text, icons, borders, and decorative accents (WCAG AA-large, 3:1):

Token	Value	CSS variable	Used for
Blue (text-safe)	#0065D8	--shumoul-blue-text	Body links, primary button background, light-mode accent
Teal (text-safe)	#007D6F	--shumoul-teal-text	Secondary button background, success/tip accents

Why these exact shades

The pure brand hexes fail AA-normal (4.5:1) in exactly three places where text sits directly on a colored background:

Pairing	Ratio	AA-normal (4.5)
White text on #0077FF (button)	4.13	FAIL
White text on #00B39F (button)	2.64	FAIL
#0077FF on #FFFFFF (light-mode link)	4.13	FAIL

Darkening each hue (same hue, lower lightness — not a new color) resolves this:

Pairing	Ratio	AA-normal (4.5)
White text on #0065D8	5.45	PASS
White text on #007D6F	5.04	PASS
#0065D8 on #FFFFFF	5.45	PASS

Every other approved combination already clears AA-normal directly with the pure hex — see the full contrast table in Theme Rules § Accessibility.

Dark mode (primary experience)

:root {
  --shumoul-bg: #0d1117;
  --shumoul-surface: #1a1f2e;
  --shumoul-surface-raised: #202638;
  --shumoul-border: rgba(255, 255, 255, 0.08);
  --shumoul-border-strong: rgba(255, 255, 255, 0.16);
  --shumoul-text: #ffffff;
  --shumoul-text-secondary: #a9a5a6;
}

Light mode (fully supported, same identity)

No new hues — only inverted neutrals derived from the same approved colors:

[data-theme='light'] {
  --shumoul-bg: #ffffff;
  --shumoul-surface: #f3f5f8;
  --shumoul-surface-raised: #ffffff;
  --shumoul-border: rgba(13, 17, 23, 0.08); /* same dark-bg hex, used as a tint source */
  --shumoul-border-strong: rgba(13, 17, 23, 0.16);
  --shumoul-text: #0d1117; /* reuses the approved Dark Background hex as light-mode ink */
  --shumoul-text-secondary: #565058; /* darkened for AA on white — see contrast table */
}

Semantic mapping (admonitions, badges) — no red/orange/green

Docusaurus's default theme maps success→green, info→blue, warning→orange, danger→red. All four are remapped to only the two brand hues:

Semantic role	Color used	Rationale
info / note	Blue (--shumoul-blue-text)	Closest semantic match to the brand's primary hue
success / tip	Teal (--shumoul-teal-text)	Teal reads as "positive" without using green
warning / caution	Teal, heavier weight + thicker accent border	No orange available — severity conveyed by weight, not hue
danger	Darkest blue (--ifm-color-primary-darkest / #004da5), heaviest weight	No red available — severity conveyed by weight + icon, not hue

This is a deliberate, accepted tradeoff: conventional red/orange severity signaling is not available under these brand rules, so warning/danger states are differentiated by border weight, background tint intensity, and icon, not by a distinct alarming hue. See Theme Rules for the full reasoning.

Where these are defined

src/css/custom.css — :root (dark, primary) and [data-theme='light'] (light mode override). Never redefine a color in a component file; reference the CSS variable.