Identity
Brand guidelines
“Deep space / amber pupil”: the look of science-fiction cinema, with restraint. A deep black, a slightly warm lunar white, a single amber accent used sparingly, and an even rarer glacier blue. No neon, no gradients. All colors are CSS variables (src/app/globals.css), available in a dark theme (the default) and a light theme.
Emblem
“Iris”: two thin rings and an amber pupil. A sensor that observes and measures, with no face or robot silhouette. The rings take the text color and the pupil the brand color, so the emblem adapts to both themes. Minimum size: 16 px (favicon src/app/icon.svg).
Wordmark: “embodied” in Geist Sans Light, “rank” in Semibold, all lowercase with wide letter spacing (0.14 em), like film credits. Eyebrow headings follow the same logic: spaced small caps (class .eyebrow).
Brand
Actions, links, markers, gradients. Never used to encode data.
--brand--brand-2--on-brandNeutrals
Three elevation levels, one border. The page background stays the darkest.
--bg--surface--surface-2--border--controlText
Text never borrows the color of a chart series.
--text--muted--faintStates
Always paired with a label or an icon.
--good--warn--badData (charts)
A validated categorical palette (color-blind legibility and contrast), in a fixed order: a series keeps its color even when others are hidden. Neutral dotted line = reference (average, ideal robot).
--series-1--series-2--series-3--series-4--series-5--series-allLayout
- Full-width bands (headers, featured sections, footer): a background that runs edge to edge, with the brand glow and a technical grid.
- Containers: 1,280 px for reading, 1,600 px for large tables, 768 px for long-form text. Side margins from 16 to 40 px.
- Components:
Section,PageBandinsrc/components/layout/Section.tsx.