Design system reference — the tokens, type scale, and components used to build the drone flight prototype, now flying 3 selectable custom tracks.
A muted, low-contrast tactical palette: desaturated sage, tan, and brick accents on a near-black panel background. Only two tones are needed for the play surface itself — flyable, and not.
Colors only the game canvas draws with. The game reads these from CSS at startup, so editing a token recolors the world as well as the HUD.
A single monospace family carries the whole interface — telemetry, labels, and headings alike — to keep everything reading like instrument output. Base size is 16px; overlay headings step up, and a few dense labels (map descriptions, thumbnails, the in-flight map button) step down.
Consistent small radii and a tight padding scale keep panels feeling like instrument bezels, not cards.
| Token | Value | Used for |
|---|
Every value on this page comes from tokens/tokens.json. Running npm run tokens compiles it into assets/css/tokens.css (the custom properties both pages style with) and assets/js/tokens.js (the list this page renders from). Never edit the generated files by hand.
Each track is hand-drawn as an SVG: streets are stroked lines/paths, and each stroke's endpoints and width are baked into assets/js/maps.js as a flyable "corridor" — a capsule the drone must stay inside. There are no buildings; the corridors are the entire flyable surface, and anything outside them (the --color-offlimits fill) ends the flight instantly. The drone always spawns facing up. Landing pads spawn offset toward a corridor's edge rather than dead-center, on any corridor wide enough for the landing ring.
| Rule | Value | Used for |
|---|---|---|
| source | 3 hand-drawn SVGs (stroked lines / bezier paths) | Corridor centerlines & widths |
| map scale | 3× the source SVG's units | SVG px → game px, tuned to drone physics |
| spawn heading | 0° (always up) | Consistent orientation on launch, any map |
| landing ring | 22px radius | Only spawns on corridors ≥40px half-width |
Live components using the same classes and stylesheet as the game, not illustrations. The map thumbnails are drawn from the game's actual track data.