Skip to content

D233 — The Atlas wears the Cartographer brand

Decision. The Atlas UI takes the brand of D232: the paper/ink/pine palette with clay as a thin graphic mark, Georgia for concept titles and bodies, system sans for everything operative, the Coordinate mark in the top bar and as favicon. The brand's values are mapped onto the Atlas's existing token names in web/src/styles/tokens.css rather than renaming them; hues 1–6 of the graph wheel are the brand's graphCategories, and a test holds the two files together. Neither theme is the default any more: the system decides until the viewer picks one, and the resolved theme is applied before first paint by a same-origin theme-init.js.

Amended after review: flat, and green only where it means something. The first pass kept the old shell's floating cards, hover lifts and shadows, and filled every pressed toggle with brand green; in the dark theme the page read green. Now controls answer with colour and border only, a pressed toggle is a quiet surface with full-strength text, overlays are flat with a hairline edge, the reading panel docks to the right edge full height, and the navigation starts open above 1,200 px — the composition of the kit's Studio 01. Pine is kept for focus, links and the selection.

Why. The earlier "nautical" direction (navy, teal, amber, dark as the signature) predates the brand and shared nothing with the README or the slides. Keeping the token names made the change a values-only edit that tokens.test.ts and contrast.test.ts keep guarding; every component kept working untouched. The pre-paint script is an external file because the CSP allows no inline script (internal/webui/webui.go), and a hash would have to be recomputed on every edit.

Two defects surfaced on paper and were fixed where they bite. Sigma writes an rgba() colour unpremultiplied into a premultiplied canvas, so a faded node is added to the page: on dark it passed for transparency, on paper every faded node and edge turned white. Fading is now a mix towards the canvas colour (encoding.fade), opaque, identical in both themes. The border program draws transparent as black, so a faded node's outline takes the faded fill.

Alternatives rejected. - Renaming the tokens after the brand (--paper, --pine, …) — touches every component for no visual gain, and the role names (--surface-0, --accent) are what components should depend on. - Clay as --accent — the brand reserves it for graphic marks; as small text it falls under 4.5:1. --accent is the brand's focus colour, --clay and --clay-text are separate tokens. - An inline pre-paint script with a CSP hash — a second place to update on every edit, for one saved request. - Dark as the default — the brand has no signature theme.

Consequences. A brand colour change lands in docs/brand/ first and then in tokens.css; the hue test fails until both agree. The mark is the master SVG copied into web/public/brand/, never redrawn in CSS. theme-init.js and lib/theme.ts share the storage key and the resolution rule, and a unit test runs the script to hold them to it.