Design system
One stylesheet for every web tool in the project. Flat fills, tight corners, and borders that are meant to be seen — the line does the work a shadow or a gradient would do elsewhere.
Two blues carry the whole system: azure is the ink, cyan is the drawn line. Everything else is a status colour and appears nowhere decorative.
Azure — the ink brand, fills, links, focus rings
Cyan — the line eyebrows, active tabs, corner ticks, anything that reads as live
Neutrals tilted cool — 300 and 400 are the borders you see everywhere
Status light value, then dark — never used decoratively
The outline button is the default voice here — on a drawing, most things are an edge rather than a fill. Keep the solid one for the single action a page is actually for.
Sizes, cells and a slider
The <label> wrapper is what makes each
caption the input's accessible name, with no id/for
pair to generate. The row above it shows a .col-row holding a
check and a switch without either one's stacked-form bottom margin.
| Colony | Founded | Pop | Status | Warehouse |
|---|---|---|---|---|
| Jamestown | 1607 | 8 | growing | |
| Plymouth | 1620 | 5 | stable | |
| Roanoke | 1585 | 3 | short of food | |
| Fort Nassau | 1614 | 2 | starving | |
| New Amsterdam | — | 0 | not founded |
A vertical index on the left, the record it selects on the right — the shape of a tool that edits one thing out of many.
Colonies
Colony record, +0x0e
The fields nothing has claimed yet. Opened by the people who are mapping the format, folded away for everyone else.
Status as text, for the one-word verdict inside a sentence: the checksum is valid, two fields are unmapped, and the colony count is out of range. All three clear 4.5:1 on every surface in both themes — the same bar the contrast suite holds the rest of the palette to.
Warehouse, New Amsterdam
Add --ticks when a card
should read as a detail drawing rather than a container.
The edge brightens instead of the card lifting. Nothing here floats.
Default. A neutral aside in the ink colour.
Ready. The warehouse has room for this turn's production.
Careful. Food stores fall below zero in three turns at this rate.
Blocked. A colony cannot be founded on water.
Inline code, a highlighted phrase,
and a shortcut: press D to flip the theme.
npm install
npm run dev # watch + serve on :8000
npm run check # build, lint, test