Design system & build skills
The design system and the tooling that applies it. The aim is a Jony-Ive-inspired product: deference to content, precision, restraint, purposeful motion — held consistently across every screen, not improvised per page.
What it is
Two parts, both developer-facing — there is no end-user UI for this feature. Its output is every other UI.
- The design system —
.claude/brain/design.mdis the engineering source of truth: color tokens, the type and spacing scale, the class-based light/dark mechanic, motion, accessibility, performance.docs/brand.mdcarries the brand intent, voice, and color meaning. - The build-accelerator skills —
design-system(applies the system to all UI work),ship-pillar(the capability-pillar build loop), andpreview-check(pre-PR deploy preflight), pluscomponents.md, the reuse-first component registry.
The principles
- Deference to content — the UI is a quiet frame around evidence.
- Reuse before reinvent —
components.mdis checked before any new component is written. - Light and dark are equals — both modes are designed, not one derived carelessly from the other.
Neutrals carry the UI. Evidence Amber is spent only on forensic significance — an IOC match, a broken chain link, a flagged span. Status colors are functional, never decorative.
The component library (UXF-3)
The shared components every pillar's UI is built on — built to the design
tokens, light and dark as equals, registered in components.md:
Button— three variants (primary/secondary/ghost) × three sizes. In real use on the landing page.HashValue— a hash, event ID, or IOC ID in Geist Mono with copy-to-clipboard; the recurring "evidence texture" element.StatusBadge—verified/warning/tamper/neutral, the functional status colors.
The rule that governs the library: a component is built only on a real
second use, never speculatively — the planned-component catalog in
components.md lists what comes next.
The brand mark (UXF-4)
BrandMark is three corner-linked rounded squares on a descending
diagonal — the hash chain of TokenAuditEvent blocks: token squares
plus chain-of-custody, the two ideas the product is built on. It is
monochrome by design, rendering in currentColor so it adapts to
light/dark and never spends Evidence Amber on decoration. The favicon
(src/app/icon.svg) is the same mark on a self-contained tile.
The accessibility baseline (UXF-6)
Accessibility is part of the design system, not an afterthought. UXF-6
turns the design system's accessibility principles into an enforced
standard — docs/a11y-standard.md, targeting WCAG 2.2 AA — that every
TokenForensics surface is built to: the landing page, this docs site,
and every pillar workbench UI as it ships.
It covers semantic HTML, full keyboard operability, visible focus,
contrast in both light and dark, reduced motion, accessible icons and
media, labelled forms, announced dynamic content, and sound page
structure. The pre-merge checklist lives inside the design-system
skill, so it is in front of whoever is building UI — not in a document
they have to remember to open.
UXF-6 also audited the existing shell and components against the standard and closed the gaps — a global reduced-motion safety net, a skip link in the app shell, and visible keyboard-focus rings on every interactive control. "Baseline" is a real floor, not an aspiration.
Why it matters
It is how the product reaches a world-class UX bar consistently instead of per-screen improvisation. Every analyst-facing screen inherits the same legibility, the same light/dark parity, the same components and mark — so the workbench feels like one coherent forensic tool, not a pile of dashboards.
Last updated