Ember Ledger

About Ember Ledger

Overview

Ember Ledger is for money tools used by non-specialists: shop owners, freelancers, family businesses. Instead of the usual cold fintech blue, it signals safety through warm, legible surfaces and one unambiguous action color. The reference is a well-kept paper ledger: ink on warm paper, one red pencil for what matters.

Color

All five ramps share one structure: chroma peaks at steps 400–600 and tapers toward 50 and 950, so no mid-step turns muddy. Neutrals are tinted toward Ember's hue (warm paper to ink) at low chroma. Ember (brand) is terracotta at roughly Lab hue 45°. Danger is shifted to a raspberry crimson at about 6°, giving CIEDE2000 ΔE ≈ 22 against primary in light mode (brand.600 vs danger.600) and ≈ 21 in dark mode (brand.400 vs danger.400), so errors are never read as actions. Success is a warm olive-leaning green and warning a toasted amber, both biased toward yellow to match Ember's temperature. Light mode: white on primary (brand.600) is 5.4:1, white on destructive (danger.600) 6.1:1, white on success (success.600) 5.4:1, and muted-foreground (neutral.700) is 6.4:1 on muted. Dark mode: background is neutral.950 (#1a1613), a deep ink brown rather than black. Card (neutral.900) sits one subtle step above it. Primary is brand.400, a luminous clay that stays below neon saturation, with brand.950 text at 6.4:1.

Typography

Fraunces (display, weights 500/600) carries the human voice at heading-lg (30px) and above. Instrument Sans (400/500/600) handles every functional surface: tables, forms, buttons. JetBrains Mono (400/500) is limited to IDs, account numbers and code. The scale follows a 1.25 major-third ratio from a 16px body: 20 (heading-md), 30 (heading-lg, two steps up so the sans-to-serif switch reads as a deliberate jump), 38 (display-md), 48 (display-lg). Tracking tightens with size: -0.022em at 48px, -0.018em at 38px, -0.012em at 30px. Body copy stays at 0 tracking with 1.55–1.6 line height for long reading.

Layout

Comfortable density on a 4px base grid (space.1 = 4px). Content columns cap at 1200px. Controls are 40px tall, badges 24px. Table rows are at least 44px tall with space.4 (16px) horizontal cell padding, because people scan money line by line.

Elevation

Mostly flat. Cards separate from the page with a 1px border token and shadow.sm only. shadow.md is for popovers, menus and toasts. shadow.lg is for dialogs and sheets. In dark mode, elevation comes from surface steps (neutral.950 for the page, neutral.900 for cards and popovers) rather than heavier shadows.

Shapes

radius.md (8px) on buttons, inputs and selects. radius.lg (12px) on cards and dialogs. radius.sm (4px) on checkboxes and table selection highlights. radius.full is used only by badge.

Do

• Use one primary button per view. Render other actions as secondary (secondary / secondary-foreground) or ghost buttons.
• Set money values in Instrument Sans with font-feature-settings: 'tnum', and right-align them in table cells.
• Use Fraunces only through display-lg (48px), display-md (38px) and heading-lg (30px). Section headers use heading-md (20px Instrument Sans 600).
• Show focus with a 2px ring token outline and a 2px offset on every interactive element, including table rows that open a detail view.
• Pair every success, warning and destructive badge or alert with an icon and a text label.
• Keep table rows at least 44px tall. Zebra-stripe long ledgers with the muted token, and mark the selected row with accent plus accent-foreground text.

Don’t

• Don't use primary (Ember) for errors, overdue states or negative balances. Use destructive, and prefix negative amounts with a minus sign, not color alone.
• Don't place body-md text longer than two lines on the accent surface. Accent is for selected rows and highlights.
• Don't apply shadow.md or shadow.lg to cards. Cards use shadow.sm plus a 1px border token.
• Don't use #000000 or untinted greys. Take every neutral from the neutral ramp.
• Don't set Fraunces below 24px, in all caps, or at weight 400.
• Don't place warning-foreground text on white. Warning text always sits on the warning surface (warning.200 light, warning.400 dark).