---
version: alpha
name: Ledger Green
description: Cream book paper with an emerald rule: two fixed columns on every screen including the forms, and negatives in parentheses.
meta:
  id: "theme-ledger-green"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:17+09:00"
  updatedAt: "2026-09-02T00:58:17+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Debit left, credit right, everywhere.
  bestFor: Bookkeeping and accounting, invoicing, audit trails, treasury and reconciliation, financial statements
  avoidFor: Consumer fintech, anything playful, anything where money is a secondary concern
  defaultMode: light
  surfaceStyle: ruled
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: none
  motion:
    intensity: 1
    duration: 140ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Totals recompute without animation. A figure that counts up to its value has been wrong for the duration of the animation."
  displayFont: Libre Baskerville
  displayKind: serif
  bodyFont: Libre Baskerville
  monoFont: Oxygen Mono
colors:
  background: "#EBE0D1"
  foreground: "#201B14"
  card: "#EBD6BC"
  card-foreground: "#201B14"
  popover: "#EBD6BC"
  popover-foreground: "#201B14"
  primary: "#008C57"
  primary-foreground: "#150B01"
  secondary: "#E8CBA8"
  secondary-foreground: "#201B14"
  muted: "#E8CBA8"
  muted-foreground: "#5E574B"
  accent: "#614C64"
  accent-foreground: "#FFF9F2"
  destructive: "#B6322D"
  destructive-foreground: "#FFF9F2"
  border: "#D4BB9C"
  input: "#D4BB9C"
  ring: "#008C57"
  chart-1: "#008854"
  chart-2: "#0087A4"
  chart-3: "#6B59B3"
  chart-4: "#C35A7A"
  chart-5: "#7D5E00"
colorsDark:
  background: "#1D1307"
  foreground: "#E4DFD7"
  card: "#241D16"
  card-foreground: "#E4DFD7"
  popover: "#241D16"
  popover-foreground: "#E4DFD7"
  primary: "#67ECA7"
  primary-foreground: "#140B03"
  secondary: "#30271C"
  secondary-foreground: "#E4DFD7"
  muted: "#30271C"
  muted-foreground: "#969086"
  accent: "#9F88A2"
  accent-foreground: "#140B03"
  destructive: "#FFBAB2"
  destructive-foreground: "#140B03"
  border: "#3C342A"
  input: "#3C342A"
  ring: "#67ECA7"
  chart-1: "#67DA9D"
  chart-2: "#19C9F2"
  chart-3: "#C7BFFF"
  chart-4: "#F385A4"
  chart-5: "#F7C859"
typography:
  display-lg:
    fontFamily: Libre Baskerville
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: -0.015em
  headline-lg:
    fontFamily: Libre Baskerville
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Libre Baskerville
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.34
  body-lg:
    fontFamily: Libre Baskerville
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.7
  body-md:
    fontFamily: Libre Baskerville
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.68
  body-sm:
    fontFamily: Libre Baskerville
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.55
  label-caps:
    fontFamily: Libre Baskerville
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Oxygen Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  numeral-xl:
    fontFamily: Oxygen Mono
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.005em
rounded:
  none: 0px
  sm: 2px
  md: 2px
  lg: 3px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 44px
  gutter: 16px
  margin: 30px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 11px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 11px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 20px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Ledger Green

## Overview

Ledger Green is double-entry, rendered. Its structural rule is that **debit and
credit are two fixed columns on every screen, including the forms**. Entering a
transaction is not "amount plus a direction dropdown" — it is a debit field and a
credit field side by side, one of which stays empty, exactly as a journal is
written.

That costs horizontal space and it is worth it: the shape of the form teaches
the model, and a bookkeeper checking their own entry reads the same two columns
they will read in the report.

Two further rules, both borrowed from print: **totals are double-ruled** (a 1px
line, 3px of space, another 1px line, below every total), and **negatives take
parentheses, never red.** Red in this system means an error condition, not a
negative number, and a credit balance is not an error.

Cream book paper, emerald rule, plum for a changed figure. It suits accounting
and audit. It is wrong for consumer fintech.

## Colors

Book paper, one rule colour, one mark.

- **Ground:** warm cream, the colour of a bound ledger.
- **Primary (emerald):** the rule. Structure, headers, the submit button. It is
  the colour of the printed lines on accounting paper and that is the reference.
- **Accent (plum):** **text**, and it means changed-since-last-period or
  adjusted-by-journal. Solved to 4.5:1 because it lands on figures in a table
  and a figure has to be readable.
- **Destructive** means out of balance, and only that. A trial balance that does
  not balance is the one red thing this system will show.
- **Neutrals** are cream-tinted.
- Charts are monochrome; a P&L is not a colour opportunity.

## Typography

Libre Baskerville for everything readable, Oxygen Mono for every figure.

- **Display and body are one face.** Libre Baskerville at 14px, 1.68 — it is a
  wide, high-x-height Baskerville drawn for screens, and using it for body in an
  accounting system is a choice: this content is *read*, not scanned, and a
  serif slows the eye down in the right way.
- **Every monetary figure is Oxygen Mono**, tabular, right-aligned within its
  column. No exceptions — a figure in the body face cannot be column-aligned and
  a misaligned column of money is unauditable.
- **numeral-xl at weight 400** — even the big figures are regular weight. A bold
  total in a ledger is a shout, and the double rule already does that job.
- Uppercase at 0.16em for column headers and account classes.

## Layout

**Two money columns, always.** Every table, statement, form and receipt has a
debit column and a credit column at fixed widths (140px each at desktop),
right-aligned, in mono. Descriptions flex; the money columns never do.

Totals are double-ruled: 1px, 3px gap, 1px. Grand totals get the double rule
above and below. This is the only decoration in the system.

Statements are ruled documents at a 68ch measure with a 30px margin, and they
print — every layout here has a print stylesheet that keeps the double rules and
drops the emerald to black.

A 12-column grid at 1280px with 16px gutters.

## Elevation & Depth

None. No shadows anywhere in either mode. Panels are 1px borders on a fill, and
the structural device is the rule, at three weights: hairline (0.5px effective),
single (1px) and double.

Totals recompute instantly. There is no count-up animation — a figure that
animates from 0 to 48,201.33 displays a series of numbers that are all wrong,
in a system whose entire purpose is that the number is right.

## Shapes

Square: 2px on everything. Nothing rounded, nothing pill-shaped.

There is no photography. The image treatment is "none". Where a document needs a
visual — a scanned receipt, an attachment — it renders as a bordered thumbnail
with a mono filename, clearly an attachment rather than part of the design.

## Components

- **Journal line:** date in mono (72px), description (flex), account code in
  mono (80px), debit (140px), credit (140px). Empty money cells are genuinely
  empty, not zero.
- **Total row:** label in uppercase, figures in mono, double rule below. Grand
  totals also double-ruled above.
- **Negative:** parentheses in the body colour. Never red, never a minus sign.
- **Adjustment mark:** the figure set in accent plum with a superscript mono
  reference to the adjusting journal.
- **Out of balance:** a destructive strip across the total row stating the
  difference in mono. It cannot be dismissed.

## Do's and Don'ts

- Do keep debit and credit as two fixed columns, including in forms.
- Do double-rule every total.
- Do set every monetary figure in Oxygen Mono, right-aligned.
- Don't colour a negative red; use parentheses.
- Don't animate a total.
- Don't bold a figure to emphasise it; the rule does that.
- Don't let a money column flex with its content.