Tailwind v4 (^4.2.2) via @tailwindcss/postcss. The dashboard is dark-only by design — there is no light theme and no prefers-color-scheme switch. Operators work in low-light rooms; a light theme would actively work against the use case.

Where the tokens live

Tailwind v4 reads tokens directly from CSS — there's no tailwind.config.ts. Add a new token by declaring it under :root in globals.css; it becomes bg-[var(--token)]-accessible automatically.

Palette

The palette mirrors the Keycloak R2-D2 theme so the login screen and dashboard read as one app:

Type

• JetBrains Mono is the operator font — every numeric, every status pill, every Monaco surface.
• Inter is the prose font (this docs site, paragraphs in the Republic page, slide-over body copy).

Effects

The login backdrop and a few hero surfaces use radial-gradient blooms + SVG-tile starfield layers with a 240s parallax drift. Implemented purely in CSS via body::after / body::before — no JS, no canvas. The drift respects prefers-reduced-motion.

A11y rules in CSS

• :focus-visible rings are teal on dark, white on primary surfaces.
• @media (prefers-reduced-motion: reduce) disables the starfield drift, the brand-bar shimmer, and the R2D2 "online" pulse.
• @media (prefers-contrast: more) and forced-colors modes have explicit rules.
• @media print strips backgrounds (the docs section needs to be printable).

What Tailwind does not do here

• No theme switching. Don't add dark: variants — the whole app is dark.
• No design-system component library. The primitives live in src/components/ — Tailwind is utility-only.
• No arbitrary color literals in JSX. Use tokens; if you need a new color, add it to globals.css.

See also

• Next.js + React — how Tailwind is wired in
• Components — the primitives that consume tokens