---
version: alpha
name: Ember Ledger
description: "Warm finance UI for small-business owners: terracotta actions on paper-toned neutrals, editorial serif headlines."
colors:
  background: "#faf6f1"
  foreground: "#1a1613"
  card: "#ffffff"
  card-foreground: "#1a1613"
  popover: "#ffffff"
  popover-foreground: "#1a1613"
  primary: "#b34926"
  primary-foreground: "#ffffff"
  secondary: "#f2ece5"
  secondary-foreground: "#2b2622"
  muted: "#f2ece5"
  muted-foreground: "#5b534a"
  accent: "#fbe4da"
  accent-foreground: "#521c09"
  destructive: "#b8235a"
  destructive-foreground: "#ffffff"
  success: "#377734"
  success-foreground: "#ffffff"
  warning: "#f5d48f"
  warning-foreground: "#3d2903"
  border: "#e2dad1"
  input: "#c9c0b6"
  ring: "#cf6039"
  dark-background: "#1a1613"
  dark-foreground: "#faf6f1"
  dark-card: "#2b2622"
  dark-card-foreground: "#faf6f1"
  dark-popover: "#2b2622"
  dark-popover-foreground: "#faf6f1"
  dark-primary: "#e5805d"
  dark-primary-foreground: "#351004"
  dark-secondary: "#423c35"
  dark-secondary-foreground: "#f2ece5"
  dark-muted: "#423c35"
  dark-muted-foreground: "#c9c0b6"
  dark-accent: "#521c09"
  dark-accent-foreground: "#fbe4da"
  dark-destructive: "#ee6a90"
  dark-destructive-foreground: "#360418"
  dark-success: "#69ad62"
  dark-success-foreground: "#0b210d"
  dark-warning: "#d29b33"
  dark-warning-foreground: "#261902"
  dark-border: "#423c35"
  dark-input: "#5b534a"
  dark-ring: "#e5805d"
typography:
  display-lg:
    fontFamily: Fraunces
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.022em
  display-md:
    fontFamily: Fraunces
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.018em
  heading-lg:
    fontFamily: Fraunces
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.012em
  heading-md:
    fontFamily: Instrument Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.006em
  heading-sm:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Instrument Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# 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.

Moods: warm, trustworthy, editorial, calm. Built for: fintech, accounting, small-business. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

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.

- **Primary** `#b34926` / dark `#e5805d`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf6f1` / dark `#1a1613` on `#1a1613` / dark `#faf6f1`: page surface and body text.
- **Card** `#ffffff` / dark `#2b2622`: raised surfaces.
- **Secondary** `#f2ece5` / dark `#423c35`: secondary buttons and quiet controls.
- **Muted** `#f2ece5` / dark `#423c35` with **muted-foreground** `#5b534a` / dark `#c9c0b6`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#fbe4da` / dark `#521c09`: highlights, selected rows, badges.
- **Destructive** `#b8235a` / dark `#ee6a90`, **Success** `#377734` / dark `#69ad62`, **Warning** `#f5d48f` / dark `#d29b33`: status only, always paired with an icon or label.
- **Border** `#e2dad1` / dark `#423c35`, **Input** `#c9c0b6` / dark `#5b534a`, **Ring** `#cf6039` / dark `#e5805d`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## 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.

- Display: **Fraunces** (fallback Georgia, serif)
- Interface: **Instrument Sans** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Fraunces | 48px | 1.08 | 600 |
| display-md | Fraunces | 38px | 1.1 | 600 |
| heading-lg | Fraunces | 30px | 1.2 | 500 |
| heading-md | Instrument Sans | 20px | 1.3 | 600 |
| heading-sm | Instrument Sans | 16px | 1.4 | 600 |
| body-lg | Instrument Sans | 18px | 1.6 | 400 |
| body-md | Instrument Sans | 16px | 1.55 | 400 |
| body-sm | Instrument Sans | 14px | 1.5 | 400 |
| label | Instrument Sans | 14px | 1.25 | 500 |
| caption | Instrument Sans | 12px | 1.4 | 500 |
| code | JetBrains Mono | 14px | 1.5 | 400 |

## 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.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

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.

- sm: `0 1px 2px rgba(43, 38, 34, 0.06)`
- md: `0 4px 12px -2px rgba(43, 38, 34, 0.12)`
- lg: `0 16px 40px -8px rgba(43, 38, 34, 0.20)`

## 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.

Radius scale: sm 4px, md 8px, lg 12px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per view. Render other actions as secondary (secondary / secondary-foreground) or ghost buttons.
- **Do:** Set money values in Instrument Sans with font-feature-settings: 'tnum', and right-align them in table cells.
- **Do:** Use Fraunces only through display-lg (48px), display-md (38px) and heading-lg (30px). Section headers use heading-md (20px Instrument Sans 600).
- **Do:** Show focus with a 2px ring token outline and a 2px offset on every interactive element, including table rows that open a detail view.
- **Do:** Pair every success, warning and destructive badge or alert with an icon and a text label.
- **Do:** 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:** Don't place body-md text longer than two lines on the accent surface. Accent is for selected rows and highlights.
- **Don't:** Don't apply shadow.md or shadow.lg to cards. Cards use shadow.sm plus a 1px border token.
- **Don't:** Don't use #000000 or untinted greys. Take every neutral from the neutral ramp.
- **Don't:** Don't set Fraunces below 24px, in all caps, or at weight 400.
- **Don't:** Don't place warning-foreground text on white. Warning text always sits on the warning surface (warning.200 light, warning.400 dark).