A field manual for the surfaces, components, and motion that carry the Brached brand into compliance work. Companion to the Brand Identity Guidelines.
The principles and philosophy a design system inherits before it draws a single rectangle. Why we build the way we build — and what users should feel when the product is doing its job.
Compliance work is high-stakes and emotionally heavy. Analysts sit with fraud cases for hours. Our job is to make the surface they look at all day feel like a calm, capable colleague. Every component in this book is engineered toward that one feeling.
The brand book gave us paper and ink. The product extends that ledger with a small, exact set of meaning-colors — verified, review, flagged, monitoring — and the dark-mode surface system every analyst eventually lives in.
--brc-ink, 2 px offset. Visible on every focusable element.The brand book set the families. The product sets the scale, the line-height, the numeric style — and the seven distinct text roles every screen has to support.
font-variant-numeric: tabular-nums; — always, on every figure.font-variant-ligatures: none;— em-dash, not 0, when a value is genuinely absent.Every dimension in the system is a multiple of four. A 12-column grid, a six-step spacing scale, four breakpoints. Density is permitted at every step — never accidental.
1680 px. Beyond LG, margin grows; content holds.comfort (default) · compact (case tables) · dense (audit rows).--sp-1
--sp-2
--sp-3
--sp-4
--sp-5
--sp-6
--sp-7
--sp-8
14 px or 20 px, the choice between 12 and 16 is part of the design decision.
The full UI inventory — controls, fields, tables, modals, plus a verification-specific subsystem of identity chips, risk indicators, and audit primitives that exist nowhere else.
36 px default · 28 px compact · 44 px primary CTA0 14 px horizontal — never less than the gap between icon and label0 — buttons are crisp rectangles. No rounded edges.--brc-inkThe dataviz layer for a fraud, AML, and identity-monitoring product. Lines, areas, networks, risk meters, and confidence scoring — each tuned for analysts who have to defend a decision later.
— em-dash, never 0.000.A 240-icon library built on a single ridge — 24-pixel grid, 1.5-pixel stroke, all corners rounded by the same radius. Plus a compliance subsystem no other product needs.
The brand book named three principles: reveal, continuous, trail. This section gives the design system the six motion types and four duration tokens that turn principle into production.
prefers-reduced-motion: reduce is set, all motion drops to 0 ms — but state changes still occur. Motion is decoration; the decision is not.
The four flows that make up 90% of analyst work in the product — verification onboarding, case review, search & investigation, audit & escalation. Same components, same vocabulary, every time.
prev → current) is recomputed and signed on every append.
--brc-ink. Visible on every interactive element, including links inside running prose.header · nav · main · aside · footer on every page.aria-live="polite"; alerts via "assertive".<th> with scope. Captions narrate the table's purpose.aria-hidden on decorative; aria-label on functional.<Stat>.<IdentityForm>.<IdentityRow>.<PascalCase> · <IdentityCard>camelCase · showConfidencebrc-block__element--modifier--brc-color-ok · --brc-sp-4kebab-case.tsx · identity-card.tsxdata-brc-slot="…" for layout anchors:root {
/* Color · brand */
--brc-linen: #E9E4DA;
--brc-ink: #162847;
--brc-midnight: #0A1428;
--brc-tan: #B8895A;
/* Color · semantic */
--brc-ok: #1F8A5B;
--brc-warn: #B8895A;
--brc-risk: #C03A2B;
--brc-info: #2C5DA8;
/* Spacing · 4 px base */
--brc-sp-1: 4px;
--brc-sp-2: 8px;
--brc-sp-3: 12px;
--brc-sp-4: 16px;
--brc-sp-5: 24px;
--brc-sp-6: 32px;
--brc-sp-7: 48px;
--brc-sp-8: 64px;
/* Motion */
--brc-dur-quick: 120ms;
--brc-dur-base: 200ms;
--brc-dur-reveal: 320ms;
--brc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
{
"color": {
"brand": {
"linen": { "value": "#E9E4DA" },
"ink": { "value": "#162847" },
"midnight": { "value": "#0A1428" },
"tan": { "value": "#B8895A" }
},
"semantic": {
"ok": { "value": "{color.ok.500}" },
"warn": { "value": "{color.warn.500}" },
"risk": { "value": "{color.risk.500}" },
"info": { "value": "{color.info.500}" }
}
},
"space": {
"4": { "value": "4px" },
"8": { "value": "8px" },
"12": { "value": "12px" }
}
}
import { IdentityCard } from "@brached/ui";
<IdentityCard
subject={{
id: "BRC-9013-44A2",
name: "Anya R. Vellori",
dob: "1991-04-08",
domicile: "NLD"
}}
status="verified"
tier={2}
confidence={0.942}
showSparkbar
onOpen={() => nav(`/cases/04982`)}
/>
@brached/ui · /tokens · /iconsForty pages, fifteen chapters, 218 tokens, 64 components. Everything in here is in service of one feeling — that the product knows what it's doing, and shows its work.