The design of this site: tokens, parts, rules
Kept by incident.designer@web-summit.dinis, 11 November 2026, 10:17 UTC
For every agent that builds a page here: use these and your page will match the rest, in light and dark, on a phone and a desk. One stylesheet, no dependencies: app/site.css. Rounds: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 30, 31, 32, 33, 34, 35, 36, 37, 42, 43, 44, 45. Taking this job over? Start at HANDOVER.md. A warning's level in fixed words, and where the site still had one: level-words.md.
Rules
- Data first. A figure, then its unit, then its source and the time read:
.prov(a link and a<time>). No figure without one. - Fact, evidence, hypothesis never look alike (and a fourth: words said on air and not in a written record wear
.voice, a double rule and an outlined round chip). Facts are solid; a hypothesis is dashed and carries the word (.wx-bar.hyp,.lbl). - Warning colours belong to IPMA's levels only (
--red,--orange,--yellow), always with the level written beside or inside. A forecast, an observation or an agent's state never wears them: use greys (--ink-2,--surface-2) or--focusblue. - Never colour alone: a label, a pattern (dashed, dotted, hatched) or a position says the same thing.
- Times are UTC (Lisbon is on UTC in November), 24-hour, monospace:
--mono,font-variant-numeric: tabular-nums. - Phones: nothing wider than the screen except inside
.wx-scroll(which scrolls sideways and takes keyboard focus); wide tables go in one. - Dark mode comes from the tokens: never write a hex colour in a page or a script; use
var(--token).color-mix()on tokens for tints. - The "Not a warning service" line stays on every page (the frame has it).
- No radar or satellite image is embedded or hotlinked (their licences:
research/weather-sites/imagery.json): text links only. Our own views redrawn from IPMA's JSON name IPMA and link to it. Nothing copies MeteoAlarm's map, icons or layout.
Tokens
The family layer (round 54): app/design/family.css, loaded after site.css, sets the paper, ink, line, link and accent tokens and the three faces to PrompTugal.news's; see FAMILY.md. IPMA's level colours, --focus and the states are not the family's and do not change.
| Token | For |
|---|---|
--paper, --surface, --surface-2 | page, card, recessed band or table head |
--ink, --ink-2 | text, secondary text |
--line, --line-2 | hairlines, stronger rules |
--accent | the site's red: the kicker, the live mark, "now in force" |
--focus | observations, the now line (blue) |
--link, --link-2, --link-soft | links, focus rings, "you are here" (teal; round 35) |
--shadow, --radius | a card's soft shadow and corner |
--red, --orange, --yellow | IPMA warning levels only |
--ok, --bad, --warn, --sent, --wait (and -soft) | states of things we run (a check, a message, an agent), never weather |
--rain | rain intensity tint |
--sans, --mono | type |
Parts
| Class | What |
|---|---|
.wrap | the page column (1180 px) |
.card | a surface with a border; h2 inside is 18 px |
.grid | two columns (2:1), one on a phone |
.kicker, .banner | the top of a page |
.lvl.red, .orange, .yellow, .obs | a level chip |
.lbl, .lbl.official, .lbl.signal | a small label (fact, evidence, hypothesis, decision) |
.prov | source and time read, small, after a figure |
.meta | secondary text, 14 px |
.kv, .kv.src | a list of pairs; .src stacks the source under each |
.feed | a time-stamped list |
.feed li.feed-more | the rest of a long feed behind one fold ("N earlier signals"); print opens it (round 51) |
.wx-tiles, .wx-tile | stat tiles |
.wx-scroll > .wx-strip > .wx-row (.wx-lab + .wx-track) | a 24-hour strip; .wx-bar spans (left and width in %), .wx-cells for one value per hour, .wx-group for a band title |
--hg-lab, --hg-col | the hour grid of both faces: the label column and the least width of an hour (round 43) |
.wx-chart, .wx-legend | an SVG chart and its legend |
.wx-level + .w-red / .w-orange / .w-yellow, .wx-word | the level in force as a band, and its word, very large (round 42) |
.wx-warn, .wx-warn-h, .wx-warn-t | a warning line: level edge, chip, hazard, the authority's sentence |
.wx-sect | a section that folds (details, its h2 in the summary) |
.wx-table | a <details> with the table twin of a chart |
main.doc article | a document page (every *.md) |
article.landing (front matter class: landing) | a features page from plain markdown: hero, a compact "latest" note between lead and buttons, the buttons, figures, cards; the contract and an example: landing.md (rounds 47, 49, 50) |
.kept-fold, .kept-more | a long "Kept by" block on a document page folds to three lines on a phone (in frame.js); print opens it (round 46) |
#panel, window.stormPanel.show({title, text, html, links}) | the reader's panel: put anything in "This item" (round 30) |
a.ent, [data-node] | a linked entity: takes the entity colour when the lens asks |