Design system
The voice of the brand & the voice of the ledger.
A documentary, audit-grade system for treasury and settlement. General Sans carries the language; JetBrains Mono carries every number that represents real-world data.
Retheme by editing the :root semantic tokens in src/app/globals.css. Every component below references those tokens; brand changes propagate automatically.
Foundations
Get started
Everything in this system is described in one portable file, DESIGN.md. Download it and a developer (or an AI tool like Claude or Cursor) can build interfaces in the LineRate system from it directly.
- 01
Download the spec
DESIGN.md is the full contract: principles, voice, tokens, the type system, every primitive and pattern, and how to retheme.
- 02
Give it to your AI tool or developer
Using AI? Start a new chat in Claude or Cursor and paste the whole file in as your first message, it is written to be pasted in one piece. Working with a developer? Drop DESIGN.md into the repo.
- 03
Ask for the screen you need
Describe it in plain language. The tokens, primitives, and patterns in the file keep every result on brand. Copy this to start:
Using the LineRate design system in the attached DESIGN.md, build a settlement dashboard: a summary card with the cycle total, a counterparty table with amounts and status pills, and a cycle indicator in the header.
Pull logos and avatars from Brand assets below.
Typography
Type scale & pairing
Settle nine-figure obligations the same day.
General Sans, medium, 30px
General Sans, regular, 20px
Body copy at 16px in foreground-muted. Direct, factual, precise. The product handles real money, so the copy reads like it.
JetBrains Mono 0123456789 · the voice of the ledger
General Sans
General Sans is the voice of the brand. It sets every heading, every line of body copy, the navigation, button labels, and legal text: anywhere a human is meant to sit down and read. It is confident and neutral, legible from a display headline down to an 11px eyebrow, and it never competes with the data beside it. Use it by default. If a string is language rather than a figure, it belongs in General Sans.
JetBrains Mono
JetBrains Mono is the voice of the ledger. It sets every figure that represents real-world data: settlement amounts, transaction IDs, timestamps, account references, hashes, and cycle numbers. Its fixed-width, tabular figures hold columns in alignment and make a number impossible to misread at a glance. Use it the moment a digit carries meaning, and never for running prose. The two families do not trade places.
Numerals
Ledger figures
Today’s settlement
$127,492,851.50
Cycle
4271
Window
14:32 UTC
Counterparties
38
Cleared
99.4%
Color
Surfaces & roles
Click any swatch to copy its resolved hex. Values track the active theme, so you copy what actually renders.
Page
bg-page
Surface
bg-surface
Raised
bg-raised
Muted
bg-muted
Primary
bg-primary
Accent
bg-accent
Color
Neutral & amber scales
Reference only. Use semantic tokens (bg-primary, bg-muted, bg-accent) in product code. Hover a step to see its hex, click to copy.
Ink family
Amber, signal color only
Primitives
Forms
Thin border, transparent background, global amber focus ring. Mono variant for ledger fields.
Primitives
Badges
The Badge component renders the global .pill style. Four variants: status-coded only.
Primitives
Brand assets
Downloadable brand marks. The wordmark as a vector (SVG) or a PNG on a padded dark field, and the monogram avatar at the common 400 x 400 social size in both tones.
Wordmark
Avatar, 400 × 400
Primitives
Separator
Subtle by default. Pass className="bg-border" for a stronger break.
Account · A-7142
acme-hosting · primary
$42,180,000.00
Account · A-7143
acme-hosting · reserve
$8,940,000.00
Account · A-7144
acme-hosting · clearing
$76,372,851.50
Primitives
Card
Surface for grouped information. bg-surface, 1px border, 8px radius, p-6 default. Cards lift via tone, not shadow.
Generated
2026-06-19 14:32 UTC
Hash
a91f3c…d8
$42,180,000.00
38 counterparties, 99.4% cleared
Primitives
Table
Header cells use the eyebrow style. Pass numeric on TableHead and TableCell to mark a column as mono, tabular, right-aligned. Subtle row dividers, no zebra.
| Counterparty | Reference | Notional | Cleared | Status |
|---|---|---|---|---|
| Acme Hosting | A-7142 | 42,180,000.00 | 42,180,000.00 | Settled |
| Northwind Compute | N-3318 | 18,640,000.00 | 18,640,000.00 | Settled |
| Cascade Datacenter | C-9920 | 8,940,000.00 | 0.00 | Pending |
| Helix Networks | H-5571 | 3,212,851.50 | 0.00 | Failed |
Primitives
Tabs
Underline style only. Active trigger gets border-foreground. No segmented pill variant.
Overview content. Today the system cleared 38 counterparties at 99.4%, totalling $127.4M.
Primitives
Overlays
Floating surfaces all share bg-raised + 1px border + subtle shadow. Highlighted items use bg-muted, never bg-accent (amber).
Primitives
Resilience
Three primitives for when things go wrong, are empty, or are loading. Voice convention for any error copy: what happened, why, what to do next.
Audit pack ready for cycle 4271.
Signed and hash-chained. Download from the cycle summary or from your scheduled export folder.
Cascade Datacenter has not acknowledged.
Acknowledgement is due at 14:34 UTC. The cycle will hold for 90 seconds past the window before flagging as failed.
Helix Networks settlement failed.
Wire returned 0x12 (insufficient counterparty balance). Funds remain in the escrow account. Retry or mark as manual.
No exceptions
Every counterparty cleared in this cycle.
The next window opens at 14:32 UTC. Failures will appear here.
Loading state, sample
Primitives
Charts
Audit-grade data viz on Recharts. Paper stroke, faint area wash, hairline grid, mono axis ticks. One amber accent. Tooltips in mono; draw-in respects reduced motion.
Settlement volume
Last 12 cycles, $M settled
Cleared on first attempt
Last 6 cycles, percent cleared
Patterns
Pre-flight
What the operator sees in the seconds before a window opens. Countdown, total queued, ready / awaiting / at-risk counts, an at-risk alert, the counterparty list, and the hold-or-open decision. Composes Card + Table + Badge + Alert + ConfirmDestructive.
Pre-flight
Opens in
02:22
Total queued
$94,210,000.00
Ready
2
Awaiting ack
1
At risk
1
1 counterparty is at risk.
Acknowledgement is overdue. The cycle will hold for 90 seconds past the window before flagging these as failed.
| Counterparty | Queued | Status |
|---|---|---|
Acme HostingA-7142 | 42,180,000.00 | Ready |
Northwind ComputeN-3318 | 18,640,000.00 | Ready |
Meridian GridM-1180 | 21,300,000.00 | Awaiting ack |
Cascade DatacenterC-9920 | 12,090,000.00 | At risk |
The cycle opens automatically at 18:00 UTC. Hold to defer.
Patterns
Settlement summary
Bespoke LineRate pattern. Composes Card + Table + Badge to render a cycle and its counterparty breakdown. Lives in components/patterns/.
Today’s settlement
$127,492,851.50
| Counterparty | Amount | Status |
|---|---|---|
Acme HostingA-7142 | 42,180,000.00 | Settled |
Northwind ComputeN-3318 | 18,640,000.00 | Settled |
Cascade DatacenterC-9920 | 8,940,000.00 | Pending |
Helix NetworksH-5571 | 3,212,851.50 | Failed |
Patterns
Counterparty list
A sub-row of a counterparty list: name in sans, transaction reference in small mono beneath, amount in mono right-aligned, status as a pill. Rows divided by a subtle rule, no zebra.
Acme Hosting
A-7142
Northwind Compute
N-3318
Cascade Datacenter
C-9920
Helix Networks
H-5571
Patterns
Cycle indicator
Compact mono pill carrying cycle metadata. Lives in headers, table captions, and emails. Read-only signal, not interactive.
Patterns
Audit pack drawer
Slide-in from right. Summary at top in mono figures, action row at bottom with primary export. Composes Sheet + Button + Badge.
Patterns
Destructive confirmation
For irreversible action at meaningful stakes. The operator types a match string (cycle number, token) before the primary confirm enables. Composes Dialog + Input.