Design System

A three-mode system (light = working surface; dark = Arena/play & brand; theatre = rare cinematic). Marketing uses CSS custom properties (tokens.css); the app uses parallel JS theme objects (DARK_T/LIGHT_T in app-shell.jsx). Brand accent: #1F9D74 (light) / #62E1B6 (dark).

Type

• Display — Fraunces (serif), weight 400, letter-spacing −0.022em, line-height 1.05, balanced wrap. Used for H1–H4 and large numerics.
• Body — Inter Tight (sans), 16px base, line-height 1.55, pretty wrap.
• Mono — JetBrains Mono — used heavily for chrome: labels, eyebrows, IDs, stats, chips (tabular nums + ss01). This monospace-for-chrome treatment is the platform's signature.

Type scale: --text-display-xl clamp(3rem,7vw,6.5rem) · display-l clamp(2rem,3.5vw,3.2rem) · display-m clamp(1.5rem,2.2vw,2rem) · body-l 1.125rem · body 1rem · body-s 0.875rem · mono 0.8125rem · mono-s 0.6875rem.

Color (semantic tokens)

Dark (default): void #06080C · base #0B1018 · raised #141A24 · overlay #1A2230 · line #1F2733 · line-strong #2A3445 · text #F2F4F7 · muted #8B95A7 · faint #5A6271.

Light: void #FAFAF8 · base #F3F4F1 · raised #FFFFFF · line #E5E5E0 · line-strong #C9C9C2 · text #0A0E14 · muted #5A6271 · faint #9098A6.

Accents (both modes, hue-matched): signal/accent (green) · warn (amber) · alert (red) · cool (blue).

• Dark: signal #62E1B6 · warn #F5B764 · alert #F26B6B · cool #7AA8FF.
• Light: signal #1F9D74 · warn #C77B14 · alert #C84545 · cool #3A6FD8.

Team identity (invariant across themes): NATO #5B8FF5 · Hybrid #E59A50 · Civil #7DD6A1 · Faculty #D6D8DD.

Usage: signal = primary action / live / success; warn = pending/draft/attention; alert = destructive/error; cool = info/secondary entities.

Spacing

A rem scale --s-1…--s-11: 0.25 · 0.5 · 0.75 · 1 · 1.5 · 2 · 3 · 4 · 6 · 8 · 12 rem.

Motion

Easing: --ease-out cubic-bezier(0.16,1,0.3,1) (primary), --ease-standard cubic-bezier(0.22,1,0.36,1). Durations: tap 100ms · reveal 240ms · surface 460ms · phase 1100ms · brand 2200ms. All ambient animation is disabled under prefers-reduced-motion.

Surface & texture

--shadow-card (dark only: subtle inset highlight + soft drop); light mode is shadow-free / flat with hairline borders. A faint SVG film-grain overlay (.grain) is reserved for theatre/brand surfaces only.

Component vocabulary

• Buttons — PrimaryBtn (filled accent), GhostBtn (outlined, transparent), each with a small variant; mono label, letter-spaced, uppercase. Destructive buttons are outlined in alert/red.
• Chips / badges — mono, letter-spaced, bordered; status dots (● filled = active/enforced, ◐ = partial, ○ = not configured/used).
• Eyebrows — mono smallcaps (uppercase, tracked, muted) above section titles, often with a leading accent rule.
• Tables — mono headers (faint, tracked), 13–14px body rows, hairline row borders, hover-raise; action buttons right-aligned.
• Cards — bordered (line), base/raised fill, often with a 3px left accent border to denote type/status.
• Modals — centered, min(WIDTH,92vw), header (mono eyebrow + serif title), body, footer (Cancel ghost + primary action); data-mobile-tight for mobile sizing.
• Toasts — see 09; bordered with a 3px left accent, icon disc, title + detail.
• Section heads — a two-column grid: a mono /NN index + a serif H2 + a muted lead.

Imagery

Reference imagery (images/ref-*.png) is used for hero/data-viz/diagram backgrounds (Baltic data, agent triad, arena, data sculpture). The app map is a live MapLibre + Carto basemap, theme-styled. No hand-drawn SVG illustration beyond simple glyphs/diagrams.

Anti-slop guardrails (observed throughout)

No gratuitous gradients; emoji avoided in app chrome (SVG icons instead — the bell, theme glyphs, etc.); restrained palette (accents share chroma/lightness, vary hue); generous type scale (slide/screen text large); monospace reserved for chrome/data, serif for display, sans for reading.