Fire Maps by José DA COSTA
Design system
One visual world, stated once and used everywhere: an incident command post at night. This page is the reference sheet — every color, control and state below is imported from the code the workspace runs, not restated.
The world
This interface is written in the hand of the room the data comes from. A wildfire command post is ruled paper and card: ICS forms whose every field is a boxed region with a numbered label in its corner, a T-card rack where each resource is a card with a colored spine that slides between status columns, a status board ruled into timestamped cells, and a wall map under acetate annotated in grease pencil.
That room is dark at night, and its equipment supplies the material palette: black hardware, the navy of French turnout clothing, matte nickel and white appliance markings. The identity is the RAL 3000 red everyone already knows without being taught it: fire engines, extinguishers and alarm panels.
What it refuses: generic blue-slate with one decorative cyan accent, rounded translucent cards floating over a map, and red scattered everywhere without a job. Nothing here glows.
Ground — equipment black, turnout navy
The scale begins below equipment black and rises through the two navy references worn by French firefighters. This is not category-default slate: the hue comes from the subject, and it lets red stay rare.
- board#08090BBehind everything. The board itself.
- panel#11161DSidebar and docked surfaces.
- card#171E27T-cards, form blocks, floating chrome.
- raised#1F2630Hover and pressed; polo navy.
- rule#2D3137Hairline; intervention-uniform navy.
- rule-strong#46515DBox borders that must read as a frame.
Ink — screen-print ivory
Anything a visitor must read uses ink, ink-2 or ink-3. ink-stamp is decorative only: it identifies rules and disabled glyphs, never essential copy.
| Token | Value | On panel | Use |
|---|---|---|---|
| ink | #F7F4EE | 16.5:1 | Primary text and values. |
| ink-2 | #BAC1C8 | 10.0:1 | Secondary text, field labels. |
| ink-3 | #858F9A | 5.5:1 | Repeated annotation. |
| ink-stamp | #5D6874 | 3.2:1 | Rules and disabled glyphs. |
Color — French references, then notation
Physical paint, textile, fluorescence and metal have no legally equivalent HEX value. The values below are named screen conversions or approximations. One red carries the identity. Beyond it, color belongs to the data, because the map is the product. Every hue pairs with a second channel, so color is never the only carrier of meaning.
Reference-derived primitives
RAL 3000
Screen approximation
Textile CIELAB
sRGB conversion
Uniform CIELAB
sRGB conversion
Polo CIELAB
sRGB conversion
RAL 1016
Screen approximation
Nickel material
Flat approximation
Equipment
Digital convention
Markings
Digital convention
Operational notation
Fire, danger, fire zone
+ Halo weight
Drop, retardant
+ Filled dot
Caution, unverified
+ Dashed rule
Water, scoop
+ Filled dot
Held, unburned, available
+ Filled dot
Parked, inactive
+ Hollow dot
mark · #EA514D · accessible screen red
The RAL 3000 screen approximation #AB2524 fills the primary action and supports ivory text at 6.3:1. It reaches only 2.7:1 against equipment black, so this brighter derived red carries focus rings and small accents above the 3:1 UI threshold.
The response bandMostly RAL 3000 red, interrupted by sulfur yellow, nickel and textile red. It signs a masthead as a 3px appliance-livery rule and never sits behind content.
The flame rampDeep red through orange to sulfur yellow. It illustrates heat only; it is never text, a content background or a glow.
Type — three hands
Three registers, matching the three hands in the room: the stencilled placard, the typed form, the written note.
Stencil
Barlow Condensed · 600 · +0.08em · uppercase
Section headers, box labels, tabs, stamps. The utilitarian public-signage lettering the world is written in. Never prose.
Body
Geist Sans · 400/600
Everything a person reads as a sentence. Measure capped at 68ch.
Data
Geist Mono · tabular-nums
Coordinates, timestamps, counts, altitudes — any number that must align in a column. Measurement, not costume.
Boxes, cards and stamps
The ruled box is the unit: regions separate with a 1px rule, never with a shadow or a nested card. Rounding stops at 2px — this is card stock, not a pill.
Fire aviation trails
Aircraft tracks · 1,728 ft
Hydrography
Vector features · 4,102 ft
Esri World Imagery
Imagery
The 3px spine is the only colored edge in the system, and it always encodes the card's kind. Selecting slides the card proud of the rack; it does not tint the row.
Stencilled label over a monospaced reading, hairlines between cells. Floating chrome carries one hairline and one offset shadow — never a glow.
Controls
Every control names its action. Selection is carried by an inset grease-pencil rule and by weight, so it survives without color.
Segmented rack
Icon stamps · pressed state
States
Every state has a second channel: confidence is opacity and label, kind is hue and shape, measured versus assumed is solid and dashed.
Measured
Solid. Positions were received.
Assumed
Dashed. The line is an assumption.
Confidence
Opacity and a written tier.
Empty
Drop a file anywhere on the map.
Named, with the recovery.
Legends the map ships
These are not samples: the workspace imports the same two arrays. If a hue changes here, it changed on the map.
- Water scoop#3E9BC3
- Drop#E46F2D
- Hover refill#43A59A
- Ground stop#929BA4
- Observation orbit#68A05A
- Amphibious bombers#F04A3E
- Air tankers#E46F2D
- Helicopter bombers#F1DD38
- Rescue helicopters#3E9BC3
- Lead & observation#68A05A
The one palette this system did not author. It is reproduced verbatim from Flightradar24 so a reader of that tracker reads our trails without a legend — and it is barometric, sea-level-referenced, which the interface says out loud.
Motion
The room's motion is physical: a card slides in its rack, a stamp presses, a line draws on. One orchestrated moment per interaction — 120–180ms on cubic-bezier(0.2, 0, 0, 1). Nothing animates in on load, and prefers-reduced-motion removes the transform, never the content.
Hover the rack in block 12 and the stamps in block 07 to feel it.