Subchain · consolidated index
One system, from token to template.
Foundations, elements, components, patterns and ready-made templates for everything Subchain ships — governed by the same rule as the product: quiet structure, named authority.
Foundations
Colors
Warm paper canvas, white surfaces, plum-tinted ink. One brand color — plum — used sparingly; slate for information, moss for good, ochre for warnings and danger. The palette deliberately has no red. Dark is first-class via data-theme="dark".
plum 050–900 · 600 is the brand accent · status tints via color-mix recipes (--tone-*-bg/fg)
Foundations
Typography
Three faces with strict roles. Newsreader states facts at regular weight with tight tracking; IBM Plex Sans carries running copy and UI; IBM Plex Mono is reserved for eyebrows, labels, identifiers and figures where exactness matters. Heading (15.5/600) is the only semibold in the system.
Foundations
Spacing
A 4-base scale at 1.1 density: 4 / 9 / 13 / 18 / 26 / 35 / 53 / 70 / 106. Container 1200px, reading measure ~64ch, left-aligned by default.
Foundations
Elevation
Soft ink-tinted, two-layer shadows in four tiers — card, raised, pop (menus), overlay (modals) — plus the accent focus ring. Nothing glassy, nothing bevelled.
Foundations
Borders & radii
1px hairlines (--edge, stronger --edge-strong). Radii stay small and structural — 4px default, 8px for cards and media, 12px large panels; the pill is reserved for badges and status.
Foundations
Motion
Calm and decisive: 0.16s / 0.38s / 0.6s. Entrances ease out hard (cubic-bezier(0.25, 1, 0.5, 1)) with a 20px rise and 70ms stagger. No bounces, no springs, no parallax; reduced-motion always honored.
Foundations
Voice & tone
A precise protocol architect briefing counsel and procurement in the same room. Short declarative sentences, sentence case everywhere, British-neutral business English. No superlatives, no emoji; banned: "disrupt", "revolutionary", "seamless", "game-changing", "empower".
The four principles
Lead with the gate — say where human authority sits before anything else.
Name the boundary — not a ledger, not a token, not an autonomous signer.
Separate proven from inferred — integration pain is observed; demand is to be evidenced.
Prefer the audit verb — who proposed, who approved, what was recorded.
Before / after
"Our game-changing platform empowers autonomous agents to seamlessly finalise binding deals…"
"Agents negotiate machine-readable terms on one standard; a named person approves before the terms bind."
Foundations
Brand assets
The mark is two chain links crossed by a fine rule — the chain under the gate. Clear space equals the height of the lower link; minimums: lockup 120px, stacked 96px, mark 20px. Never redraw the mark, move the link above the rule, or reset the wordmark as live text.
assets/ · logo, logo-dark, logo-stacked, wordmark(+dark), mark(+dark), app-icon(+dark), favicon
Foundations
Iconography
Lucide line icons at 1.75px stroke with round caps — monoline, like the mark. Decorative companions to labels at 16–20px, muted, never filled, never multi-color. No icon fonts, no emoji, no unicode-as-icon.
Foundations
Illustration & imagery
No illustration library — the brand's graphic language is typographic: the gate-rule hairline, mono annotations, and product-UI vignettes built from real components. Photography, when used, renders duotone between the two poles below, framed in 8px-radius bordered panels, occasionally tilted −1.5°.
Duotone poles
shadows → #1c111d
highlights → #f2eff2
Product-UI vignettes (see the social templates) are the preferred "illustration".
Elements
Buttons
40px default, 4px radius, 500 weight. Primary plum darkens on hover; destructive uses ochre — never red. Labels are sentence-case verbs.
Elements
Badges & status
Pill badges on ink-blended tone tints. StatusBadge maps the product's lifecycle ids — initiated, in-negotiation, pending-approval, bound, rejected, withdrawn — to tones; prefer it over raw Badge for lifecycle state.
Elements
Form controls
40px fields with hairline borders and the accent focus ring. Field composes label, control and hint or ochre error.
Elements
Avatar, progress, skeleton
Components
Cards & data
White surface, hairline border, 8px radius, soft shadow. Tables use mono uppercase column labels and hairline row rules; StatCard pairs a mono label with a Newsreader figure and a favourability-aware delta.
Components
Feedback
Tone-tinted alerts, an ink-scrimmed dialog with a Newsreader title, inverse tooltips.
Patterns
The gate
The signature pattern: a held commitment, its reasons as tone badges, and a named decision. The gate-rule hairline separates strata — authority above, agents below. Use it for approval queues, confirmations, and anywhere a decision binds.
Patterns
Detail rows
Key/value strata for records and emails: mono uppercase keys, hairline separators, values in sans (or mono for figures and identifiers). The audit-record voice in layout form.
Patterns
Honest numbers
Every figure is cited, computed, or labelled an assumption — the caption is part of the pattern, not a footnote. Newsreader tabular figures, mono qualifiers.
Templates
Page templates
Full-screen recreations of the two product surfaces, composed from the primitives above.
Templates
Email templates
Twenty triggered emails on one scaffold — paper background, 600px card, mono eyebrow, gate-rule hairlines, one plum CTA. Markup uses literal brand hex and email-safe font stacks, so it ports to ESPs as-is.
Templates
Open Graph
The 1200×630 link-preview card: mono kicker, one Newsreader statement, logo and url. Swap the title per page; keep the composition.
Usage
One statement, max two lines. Kicker names the page ("Product", "Security", "Pricing"). Export at 1200×630 PNG; the same artboard serves Twitter summary_large_image.
Templates
Video
Intro video — "Agents negotiate. People decide."
62s · six scenes · closed captions baked in · timeline-editable · exports to video. Voice-over script with timecodes in video/intro/VO-SCRIPT.md.
Open →
Templates
Print collateral
None yet — deliberately.
No print pieces exist in the source material, and this system doesn't invent collateral. Natural candidates when needed: a one-pager for design partners, letterhead, and an evidence-pack cover sheet. Ask and they'll be built on the doc foundations here.
Templates
Social media
Seven exact-size artboards across LinkedIn, X, Facebook and Instagram — statements, honest stats, events and series posts in the editorial voice.
Rules of the set
Max two background colors per campaign — paper and ink. One brand color per artboard.
Numbers always carry their qualifier ("a scenario, not a projection").
The gate-rule hairline may be the hero; the chain-link mark never is.