A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Ledger Quiet"3description: "A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen."4tags: [fintech, minimal, premium, modern, dashboard]5colors:6 primary: "#0e1116"7 secondary: "#5b6370"8 tertiary: "#0e1116"9 neutral: "#eef0f2"10 surface: "#f8f9fa"11typography:12 display: "IBM Plex Sans"13 body: "IBM Plex Sans"14 mono: "IBM Plex Mono"15 scale:16 hero: "3rem / 1.08 / 600 / -0.025em"17 h1: "2rem / 1.18 / 600 / -0.02em"18 h2: "1.375rem / 1.3 / 600 / -0.012em"19 body: "0.9375rem / 1.55 / 400 / 0"20radius:21 sm: 3px22 md: 5px23 lg: 7px24 pill: 9999px25shadows:26 card: "rgba(14,17,22,0.04) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(14,17,22,0.08)"30 divider: rgba(14,17,22,0.08)31buttons:32 primary:33 background: #0e111634 color: #f8f9fa35 border: none36 shape: rounded37 padding: 9px 18px38 font: 500 / 0.8125rem39 secondary:40 background: #ffffff41 color: #0e111642 border: 1px solid rgba(14,17,22,0.14)43 shape: rounded44 padding: 9px 18px45 font: 500 / 0.8125rem46 outline:47 background: transparent48 color: #0e111649 border: 1px solid rgba(14,17,22,0.18)50 shape: rounded51 padding: 9px 18px52 font: 500 / 0.8125rem53 ghost:54 background: transparent55 color: #5b637056 border: none57 shape: rounded58 padding: 9px 14px59 font: 500 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 1.2563 fill_opacity: 0.0564 gridlines: true65 bar_gap: 8px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"69dependencies: ["lucide-react"]70---71 72# Ledger Quiet73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Ledger Quiet** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — rounded shape, bg `#0e1116`, text `#f8f9fa`, padding `9px 18px`, weight `500`.110- **Secondary** — rounded shape, bg `#ffffff`, text `#0e1116`, border `1px solid rgba(14,17,22,0.14)`, padding `9px 18px`, weight `500`.111- **Outline** — rounded shape, text `#0e1116`, border `1px solid rgba(14,17,22,0.18)`, padding `9px 18px`, weight `500`.112- **Ghost** — rounded shape, text `#5b6370`, padding `9px 14px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#f8f9fa`121- Border: `1px solid rgba(14,17,22,0.08)`122- Shadow: `rgba(14,17,22,0.04) 0 1px 2px`123- Radius: `radius.lg` (`7px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134 135#### Typography pairings136 137- **Display (`IBM Plex Sans`)** — h1, h2, hero headlines, brand wordmarks.138- **Body (`IBM Plex Sans`)** — paragraphs, labels, button text, form inputs.139- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.140 141### 4 · Hard constraints142 143Never do any of the following without explicit instruction from the user:144 145- Introduce a new color, font, radius, or shadow that isn't declared above.146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.150 151### 5 · Before you finish — verify152 153Run through this checklist for every screen you produce:154 155- [ ] Every color used appears in the Colors table above.156- [ ] Headlines use the display font; body copy uses the body font.157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.159- [ ] Cards and dividers use the declared border + shadow tokens.160- [ ] No values were invented; if you needed something missing, you stopped and asked.161 162---163 164## 1. Atmosphere165 166Ledger Quiet is a trading desk that whispers. The page is off-white `#f8f9fa` with cards lifted to pure white — a tonal-shift system where every surface differs by 1-2% lightness. IBM Plex Sans handles prose, IBM Plex Mono handles every figure with tabular numerals so columns of numbers align to the pixel. Chrome is hairlines at 8% ink. The single accent is a deep forest-green `#1f7a4d` that appears only on positive deltas (+2.4%), the active tab underline, and the chart highlight bar. Negative deltas use ink, never red — this system trusts the reader to read the sign.167 168The discipline is in the typographic split: prose in sans, every numeral in mono with tabular alignment. The page reads as a serious P&L, not a marketing dashboard.169 170**Signature moves**171- IBM Plex Mono with `font-variant-numeric: tabular-nums` on every figure — columns align perfectly172- Forest-green `#1f7a4d` only on positive deltas + active tab underline + chart highlight173- Negative deltas in ink (with minus sign), never in red — quiet conviction174- Hairline-only chrome at 8% ink — no shadows beyond the 1px lift175- Tonal-shift surfaces: `#f8f9fa` page → `#ffffff` card → `#eef0f2` table header176 177## 2. Palette178 179### Surfaces180- **Page** `#f8f9fa` — primary background (cool off-white)181- **Card** `#ffffff` — elevated surface, 1px hairline border182- **Header / Bone** `#eef0f2` — table headers, secondary surfaces183 184### Ink185- **Ink** `#0e1116` — text, headings, primary CTA fill, negative deltas186- **Ink 60** `#5b6370` — secondary text, mono labels187- **Hairline** `rgba(14,17,22,0.08)` — every divider, every card edge188 189### Accent190- **Forest** `#1f7a4d` — positive delta, active tab underline, chart highlight191- **Forest Soft** `rgba(31,122,77,0.10)` — focus ring, hovered tab background192 193## 3. Typography194 195| Role | Font | Size | Weight | Leading | Tracking |196|------|------|------|--------|---------|----------|197| Hero | IBM Plex Sans | 48px | 600 | 1.08 | -0.025em |198| H1 | IBM Plex Sans | 32px | 600 | 1.18 | -0.02em |199| H2 | IBM Plex Sans | 22px | 600 | 1.3 | -0.012em |200| Body | IBM Plex Sans | 15px | 400 | 1.55 | 0 |201| UI / Button | IBM Plex Sans | 13px | 500 | 1.4 | 0 |202| Figure / KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums |203| Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |204| Delta | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums |205 206Plex Mono everywhere a number lives — KPIs, deltas, table cells, axis labels. The tabular-nums variant is what makes the system read as professional finance vs. marketing copy.207 208## 4. Buttons209 210### Primary (Ink)211```css212background: #0e1116;213color: #f8f9fa;214padding: 9px 18px;215border-radius: 5px;216font-weight: 500;217```218 219### Secondary (Card White)220- Pure white, 1px hairline at 14% ink, ink text — same shape, same padding221 222### Outline & Ghost223- Outline: transparent, 1px hairline at 18% ink224- Ghost: no border, ink-60, hover lifts to ink225 226## 5. Cards227 228```css229background: #ffffff;230border: 1px solid rgba(14,17,22,0.08);231border-radius: 7px;232box-shadow: rgba(14,17,22,0.04) 0 1px 2px;233```234 235The single 1px shadow is the maximum lift. Every card carries a 1px hairline header divider beneath the title — that internal rule is the signature of a trading-pane card.236 237## 6. Charts238 239Thin precise bars (3px wide, 8px gap) with dashed gridlines at 6% ink. One bar in forest, others in 22% ink. Line charts at 1.25px ink with a 5% forest fill, ending in a forest dot marker. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right edge.240 241## 7. Tabs242 243Underline 1.5px in forest for the active state. Inactive tabs are ink-60 in IBM Plex Sans 500. Hover = forest-soft background wash. Tabs sit on a 1px hairline baseline.244 245## 8. Spacing246 247- Base 4px (KPI-card aware)248- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80`249- Section padding: 80px desktop, 32px mobile250 251## 9. Do's & don'ts252 253✅ **Do**254- Use IBM Plex Mono with tabular-nums on every figure — column alignment IS the brand255- Reserve forest for positive deltas + active tab + chart highlight only256- Keep negative deltas in ink with a minus sign — never red257- Hold tonal-shift surfaces (page → card → header), each step 1-2% lightness258 259❌ **Don't**260- Use red for negative deltas — the system trusts the minus sign261- Use a second accent color — forest alone, on three specific surfaces262- Add a heavy shadow — 1px lift is the maximum263- Use proportional figures for numbers — tabular-nums always264 265---266 267## Tokens268 269> Generated from the same source the live preview renders from.270> Treat the values below as the contract — never substitute approximations.271 272### Colors273 274| Role | Value |275|-----------|-------|276| primary | `#0e1116` |277| secondary | `#5b6370` |278| tertiary | `#0e1116` |279| neutral | `#eef0f2` |280| surface | `#f8f9fa` |281 282### Typography283 284- **Display:** IBM Plex Sans285- **Body:** IBM Plex Sans286- **Mono:** IBM Plex Mono287 288| Role | size / leading / weight / tracking |289|------|------------------------------------|290| Hero | 3rem / 1.08 / 600 / -0.025em |291| H1 | 2rem / 1.18 / 600 / -0.02em |292| H2 | 1.375rem / 1.3 / 600 / -0.012em |293| Body | 0.9375rem / 1.55 / 400 / 0 |294 295### Radius296 297- sm: `3px`298- md: `5px`299- lg: `7px`300- pill: `9999px`301 302### Shadows303 304- **card:** `rgba(14,17,22,0.04) 0 1px 2px`305- **button:** `none`306 307### Borders308 309- **card:** `1px solid rgba(14,17,22,0.08)`310- **divider:** `rgba(14,17,22,0.08)`311 312### Buttons313 314Four variants, each fully tokenized. The preview renders from these exact values.315 316#### Primary317 318| Property | Value |319|----------|-------|320| shape | `rounded` |321| background | `#0e1116` |322| color | `#f8f9fa` |323| border | `none` |324| padding | `9px 18px` |325| fontWeight | `500` |326| fontSize | `0.8125rem` |327 328#### Secondary329 330| Property | Value |331|----------|-------|332| shape | `rounded` |333| background | `#ffffff` |334| color | `#0e1116` |335| border | `1px solid rgba(14,17,22,0.14)` |336| padding | `9px 18px` |337| fontWeight | `500` |338| fontSize | `0.8125rem` |339 340#### Outline341 342| Property | Value |343|----------|-------|344| shape | `rounded` |345| background | `transparent` |346| color | `#0e1116` |347| border | `1px solid rgba(14,17,22,0.18)` |348| padding | `9px 18px` |349| fontWeight | `500` |350| fontSize | `0.8125rem` |351 352#### Ghost353 354| Property | Value |355|----------|-------|356| shape | `rounded` |357| background | `transparent` |358| color | `#5b6370` |359| border | `none` |360| padding | `9px 14px` |361| fontWeight | `500` |362| fontSize | `0.8125rem` |363 364### Charts365 366| Property | Value |367|----------|-------|368| variant | `thin-bars` |369| strokeWidth | `1.25` |370| fillOpacity | `0.05` |371| gridlines | `true` |372| barGap | `8px` |373| highlight | `single` |374| dotMarker | `true` |375 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"IBM Plex Sans"', 'serif'], sans: ['"IBM Plex Sans"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#0e1116', secondary: '#5b6370', accent: '#0e1116', neutral: '#eef0f2', surface: '#f8f9fa', }, borderRadius: { sm: '3px', md: '5px', lg: '7px', }, }, },};tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.