+ Visual language in context. +
+
+ Every token, type step, and component rendered from design/colors_and_type.css.
+ Human review required before any real page is built.
+
+ Wordmark · on light
+ 
+ Wordmark · on dark
+ 
+ Icon · on light
+ 
+ Icon · on dark
+ + Minimum sizes: icon 24×36px · wordmark 96×36px. + Clear space equal to the spear-head height on all sides. + Never distort, recolour, or place on a competing textured background. +
+Surface tiers
++ Depth is tonal, not shadowed. Stack these tiers; never use a 1px solid border for layout separation. +
+Text colours
+Archival Pigments
++ Flat, matte inks — extracted from historical manuscripts. + Never gradient, never glossy. At 20–40% opacity for data overlaps. +
+Ghost border
+--outline-variant at 15% opacity — the only permissible border for accessibility fallbacks.
+ Never a solid 100% line for layout.
+
+ + Two families: Newsreader (serif) for intent and editorial authority; + Manrope (sans) for execution and precision. + Headlines always left-aligned. Body line-height 1.6. +
+ +Archive of work in progress.
+Archive of work in progress.
+Archive of work in progress.
+Navigation · structural label
+Navigation · structural label
++ Data remains under absolute, localised control while we deliver the robust security and traceability demanded by the market. +
++ Data remains under absolute, localised control while we deliver the robust security and traceability demanded by the market. +
++ Data remains under absolute, localised control while we deliver the robust security and traceability demanded by the market. +
++ An interface that breathes, inviting contemplation rather than consumption. +
++ The terminal keyword or phrase of every product headline is set in Newsreader Bold Italic. + Everything before it stays in regular weight. Every headline ends with a period. +
+
+ Editorial, generous. Desktop lateral margin is --space-20 (7rem / 112px).
+ List separation defaults to --space-6 (2rem). Hero-card padding is --space-8.
+
{s.token}
+
+ {s.rem}rem · {s.px}px{s.note ? ` — ${s.note}` : ''}
+
+ --radius-md (12px) is the primary radius — used on buttons, cards, and inputs.
+ Fully-rounded pills (--radius-full) are reserved for avatars and state dots only.
+
{r.label}
+ {r.value}
+ {r.note}
+
+ Depth comes from tonal layering, not shadow. Shadows are available only when a floating effect is truly needed —
+ blur 32–64px, opacity 4–6%, color --on-surface (warm, never pure black).
+
Tonal lift only. A surface-container-lowest card on a surface-container-low section — zero shadow needed.
For floating cards. 0 12px 32px −12px rgba(56,56,49,.06)
For popovers and command palettes. Two-layer warm shadow.
+For overlays and modals. Deepest elevation in the system.
+
+ Forgo the box. surface-variant background, bottom-only ghost border. No rounded box.
+ Labels: all-caps, +0.08em tracking, secondary-fixed-dim colour.
+ Focus: bottom border thickens to --secondary.
+
+ No borders. No shadows on standard cards. Elevation is tonal — place a lighter tier card on a darker tier section.
+ Hero cards: --space-8 (44px) padding. Standard cards: --space-5 to --space-6.
+
+ Pilot infrastructure is live. +
++ The Hetzner CAX11 is provisioned, Caddy is routing HTTPS, and the first migrations are applied. + We are ready to issue the first wave of invite links. +
+ +Authentication system
+Session cookies, bcrypt password hashing, and signed one-time invite tokens.
+Contribution feed
+Ideas, inspiration, and questions from all pilot participants in one shared stream.
+Calendar view
+CAB meetings and milestones. Big, typographic, unrushed. One month per view.
+
+ Custom runic/graphite icon set is aspirational — not yet produced. Current substitution: Lucide at 1.5px stroke weight.
+ Stroke colour: --on-surface (#383831). No fills on main silhouette. No emoji. No rounded Material icons.
+
+ One easing. Three durations. No bounces, no springs, no overshoots. The system moves with confidence — not enthusiasm. +
+ +cubic-bezier(0.2, 0.0, 0, 1)
+ All transitions. Decelerating — fast start, slow finish.
+ cubic-bezier(0, 0, 0, 1)
+ Elements entering the viewport. Maximum deceleration.
+ cubic-bezier(0.3, 0, 1, 1)
+ Elements leaving. Accelerating — quick and unobtrusive.
+ 140ms
+ Micro-interactions: hover colour shifts, focus rings.
+ 240ms
+ All standard component transitions.
+ 420ms
+ Layout changes, page entrances (fade + 4px translate-up).
+