Brand and theme
The brand kit (version 1.0, copied into shared/brand/ on 2026-09-13) fixes seven colours, two type
families, light and dark semantic tokens, four status pairs and a 4/8 px geometry. forge.config.json
carries the palette as CSS custom-property names; web/app/globals.css, docs/app/globals.css and
deck/src/tokens.css are generated from it and are identical (check-tokens: ok (80 token values match),
repo-derived 2026-09-13).
The seven brand colours
| Name | Hex | Where it is used |
|---|---|---|
| Midnight | #121C38 | text on light surfaces, dark surface, the rail |
| Cobalt | #2347F2 | action colour in the light theme, Evidence accent |
| Ice | #E8EEFF | muted surface in light, action colour and text in dark |
| Canvas | #F7F9FD | light page background |
| Slate | #515F77 | muted text, dark border, Review accent |
| Silver | #D8E0ED | light border and divider, Progress tint |
| White | #FFFFFF | cards in light, text on Midnight and Cobalt |
Cobalt is a brand accent on Midnight (2.61:1), never text or an icon in the dark theme; the dark action colour is Ice with Midnight labels.
Token mapping
| Token | Light | Dark |
|---|---|---|
--background | Canvas #F7F9FD | Midnight #121C38 |
--foreground | Midnight #121C38 | White #FFFFFF |
--card | White #FFFFFF | Midnight #121C38 |
--muted | Ice #E8EEFF | #1C2848 (lifted Midnight) |
--muted-foreground | Slate #515F77 | Ice #E8EEFF |
--border | Silver #D8E0ED | Slate #515F77 |
--primary | Cobalt #2347F2 | Ice #E8EEFF |
--primary-hover | #1B39C4 (hover step of Cobalt) | White #FFFFFF |
--primary-foreground | White #FFFFFF | Midnight #121C38 |
--destructive | #A32E3B | #A32E3B |
--sidebar | White #FFFFFF | Midnight #121C38 |
--sidebar-accent | Ice #E8EEFF | #1C2848 |
--rail-bg | Midnight #121C38 | #0C1329 (one step below Midnight) |
--rail-fg | White #FFFFFF | White #FFFFFF |
--rail-hover, --rail-active | #1C2848, #26345C | #1C2848, #26345C |
The four kit status pairs are identical in both themes: pass #166B4F on #E7F3EB, review #825600 on
#FFF3D6, fail #A32E3B on #FCECEE and info #245F93 on #EAF2FA. The fifth token pair, neutral, is
Slate #515F77 on Ice #E8EEFF from the brand palette. A status colour always carries a text label; the
action colour is never the fail colour.
Product accents are tonal steps of the palette (no new hues, ADR 0007):
| Product | Light accent / tint / text | Dark accent / tint / text |
|---|---|---|
| Evidence | #2347F2 / #E8EEFF / #1B39C4 | #7D94FF / #2A3664 / #E8EEFF |
| Plans | #1B39C4 / #DDE4FB / #14289A | #A9B8FF / #333E64 / #E8EEFF |
| Review | #515F77 / #E6EAF1 / #3F4B60 | #A7B4CC / #333D59 / #E8EEFF |
| Progress | #121C38 / #D8E0ED / #121C38 | #D8E0ED / #3E4760 / #E8EEFF |
Dark tints are 22 % mixes of the dark accent over Midnight, stored as hex. Product accents never carry status meaning; product identity rests on the kit icon and the label.
Measured contrast
Kit ratios (WCAG sRGB relative luminance, shared/brand/tokens/contrast-ratios.json, verified
2026-09-13) and the token measurement (web/scripts/check-contrast.mjs --verbose, repo-derived
2026-09-13: check-contrast: ok (90 pairs across 2 themes; text >= 4.5:1, icons >= 3:1; lowest 5.57:1 for "status neutral on its background" in light)). Thresholds: 4.5:1 for ordinary text, 3:1 for large text
and essential non-text.
| Pair | Ratio | Use |
|---|---|---|
| Midnight on White | 16.81:1 | ordinary text |
| Midnight on Canvas | 15.95:1 | ordinary text |
| Midnight on Ice | 14.50:1 | ordinary text |
| Ice on Midnight | 14.50:1 | ordinary text (dark theme) |
| White on Cobalt | 6.45:1 | action label |
| Cobalt on White | 6.45:1 | ordinary text |
| Cobalt on Canvas | 6.12:1 | ordinary text |
| Cobalt on Ice | 5.56:1 | ordinary text, Evidence icon on its tint |
| Slate on Ice | 5.57:1 | status neutral on its background (lowest token pair) |
#1B39C4 on Canvas | 8.20:1 | Evidence text token |
#7D94FF on Midnight | 6.05:1 | dark Evidence icon |
#A7B4CC on Midnight | 8.04:1 | dark Review icon |
| Cobalt on Midnight | 2.61:1 | decorative only |
| Silver on White | 1.33:1 | decorative divider only |
| Slate on Midnight | 2.60:1 | decorative only |
Logo rules
From shared/brand/README.md:
- Horizontal primary lockup by default on White, Canvas or Ice; reversed lockup on Midnight; white on Cobalt; single-colour assets for one-ink contexts. This site shows the primary lockup in light mode and the reversed lockup in dark mode.
- Preserve the open aperture, the detached square, the square corners and the proportions. No stretching, rotation, rounding, outlines, shadows or gradients.
- Clear space at least one quarter of the symbol width around the whole lockup.
- Minimum digital sizes: horizontal 140 px wide, symbol 24 px, tagline lockup 320 px; the supplied favicon at 16 px.
- Product icons:
sourceEvidence,modulesPlans,reviewReview,programProgress;connectconnections,historyaudit,permissionroles,focusquestions.
The brand origin line is “A precise open frame and an offset focal square: evidence coming into focus.”
Typography and geometry
| Aspect | Value |
|---|---|
| Heading family | IBM Plex Sans (variable, OFL), --font-heading; display 64/72 500, h1 40/48 500 (-2 % tracking), h2 28/36 600 (-1 %) |
| Body family | Inter (variable, OFL), --font-body; body 16/24 400, label 14/21 500, caption 12/18 500; tabular numerals on tables |
| Control radius | --shape-radius: 4px |
| Card radius | --radius-panel: 8px |
| Graphic radius | --radius-graphic: 0 |
| Motion | --motion-fast 120 ms, --motion-normal 180 ms, --motion-slow 240 ms, --ease: cubic-bezier(0.2, 0, 0, 1); reduced motion sets all three to 0 |
| Focus | --focus-ring: 2px solid var(--primary), --focus-offset: 3px |
| Spacing | 4 px increments, 8 px primary rhythm |
Source: forge.config.json, docs/app/globals.css, web/app/globals.css, shared/brand/README.md, shared/brand/tokens/accessibility.md, shared/brand/tokens/contrast-ratios.json, decisions/0007-theme-tokens-and-geometry.md, CLAIMS-REGISTER.md