One navy, a working ramp
Sky-blue brand steps for surfaces and headlines, a slate ink scale for text, and one cyan accent that always means “look here”. The codes are read back from the rendered page — switch your OS theme and they follow.
Twelve documents, twelve hues
Every document type owns three shades — a 50 tint for fills, a 500 main, a 700 deep for text on the tint. Hues are spaced to stay tellable at a glance; saturation stays on a professional leash.
Two weights, one voice
Semibold 600 carries the message, light 300 carries the rest — nothing renders bolder than 600. Hierarchy comes from case, tracking and space, not from weight.
submittal
log
Section symbols, as surfaces
The nine patterns an architect draws through a section cut — concrete, earth, brick, steel — redrawn as seamless SVG tiles. Ink and wash are tokens, so dark mode re-inks every tile from one place. Never hand-roll a texture; use the class.
Carbon, drawn to size
IBM’s Carbon set (@carbon/icons-react) — engineered strokes that sit naturally beside drafting patterns. Four sizes, each with a fixed job; colour rides on currentColor.
Soft corners, shallow light
Corners stay between 4 and 16px, shadows stay barely-there slate, and every gap sits on a 4px grid — the quiet defaults that keep a dense document screen calm.
Built once, used everywhere
These tokens render this page, the product and its dark theme alike. Keep reading the system — the next chapter is how you move around it.