---
version: alpha
name: Terminal Ledger
description: Monospace everywhere, zero radius, phosphor green and amber on near-black. A ledger you can grep.
meta:
  id: "theme-terminal-ledger"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-08-29T15:33:37+09:00"
  updatedAt: "2026-08-29T15:33:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Everything is mono, nothing is rounded, every value is greppable
  bestFor: Developer tools, logs, CI dashboards, infra consoles, CLIs on the web, status pages
  avoidFor: Consumer products, marketing pages, anything read by non-technical users
  defaultMode: dark
  surfaceStyle: outline
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 1px
  imageTreatment: grayscale
  motion:
    intensity: 1
    duration: 80ms
    ease: "steps(1, end)"
    signature: "Instant inversion of foreground and background. No tween, no fade."
  displayFont: JetBrains Mono
  displayKind: sans
  bodyFont: JetBrains Mono
  monoFont: JetBrains Mono
colors:
  background: "#F4F4F2"
  foreground: "#0C0E0F"
  card: "#FFFFFF"
  card-foreground: "#0C0E0F"
  popover: "#FFFFFF"
  popover-foreground: "#0C0E0F"
  primary: "#146B35"
  primary-foreground: "#FFFFFF"
  secondary: "#E7E7E4"
  secondary-foreground: "#2C2F30"
  muted: "#E7E7E4"
  muted-foreground: "#5F6365"
  accent: "#8A5B08"
  accent-foreground: "#FFFFFF"
  destructive: "#B0201A"
  destructive-foreground: "#FFFFFF"
  border: "#D3D3CF"
  input: "#D3D3CF"
  ring: "#146B35"
  chart-1: "#146B35"
  chart-2: "#8A5B08"
  chart-3: "#1F5C9E"
  chart-4: "#7A3E9E"
  chart-5: "#4A4E50"
colorsDark:
  background: "#08090A"
  foreground: "#E4E7E3"
  card: "#0F1113"
  card-foreground: "#E4E7E3"
  popover: "#0F1113"
  popover-foreground: "#E4E7E3"
  primary: "#52D77F"
  primary-foreground: "#04120A"
  secondary: "#16191C"
  secondary-foreground: "#D8DCD8"
  muted: "#16191C"
  muted-foreground: "#949B96"
  accent: "#E5A03C"
  accent-foreground: "#1A0F02"
  destructive: "#F4635B"
  destructive-foreground: "#2A0605"
  border: "#23272B"
  input: "#23272B"
  ring: "#52D77F"
  chart-1: "#52D77F"
  chart-2: "#E5A03C"
  chart-3: "#6AB8F0"
  chart-4: "#D06AD8"
  chart-5: "#949B96"
typography:
  display-lg:
    fontFamily: JetBrains Mono
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: JetBrains Mono
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: JetBrains Mono
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: JetBrains Mono
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
  data-md:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    fontFeature: "'zero' 1"
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 0px
spacing:
  base: 8px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 32px
  gutter: 12px
  margin: 16px
  row: 28px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 8px
  button-ghost:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 8px
  panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 12px
  log-row:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    height: 28px
  status-ok:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
  status-warn:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
---

# Terminal Ledger

## Overview

Terminal Ledger is a web UI that behaves like a terminal without cosplaying as
one. Everything is monospace, so every column aligns without effort and every
value can be selected, copied and diffed. Nothing is rounded, nothing is
animated, and no element exists that does not carry information.

Use it for developer-facing surfaces: build and deploy dashboards, log viewers,
infrastructure consoles, status pages, queue inspectors. Its density is the
point — this theme is *comfortable* at information levels that would break every
other theme in the lookbook.

Personality: literal, fast, unsentimental, high trust.

## Colors

Near-black with two phosphor signals.

- **Primary (#52D77F dark / #146B35 light):** Green means healthy, passed,
  applied, live. It is a *state*, so it also functions as the primary action.
- **Accent (#E5A03C dark / #8A5B08 light):** Amber means pending, degraded,
  skipped, needs attention.
- **Destructive (#F4635B dark / #B0201A light):** Red means failed. These three
  colours are a status vocabulary before they are a palette; never use one
  decoratively.
- **Neutral:** `#08090A` page, `#0F1113` panels — a step small enough that the
  1px `border` does the actual dividing work.

Light mode is a printed ledger version of the same vocabulary, for people who
work in bright rooms and for print/PDF export.

## Typography

One family: JetBrains Mono. There is no second typeface, ever.

- **Headings:** JetBrains Mono 700, uppercase, `0.02em` tracking. Headings are
  uppercase in this system; labels are uppercase too — the case ladder is
  carried by weight and size instead.
- **Body:** JetBrains Mono 13px / 1.6. Short. Mono prose is tiring past a couple
  of lines, so write in fragments and lists.
- **Data:** `'zero' 1` slashed zero is on for every numeric context, so `0` and
  `O` never get confused in an ID.

Because everything is mono, hierarchy must come from **weight, case, and colour**
— never from a different family.

## Layout

A hard character grid. Everything aligns to an 8px base with a 28px row height,
and columns are sized in `ch` units rather than percentages so values line up
exactly the way they would in a terminal.

Desktop is a fixed 200px nav rail plus a fluid content column with no max width —
this theme is meant to use the whole monitor. Tables scroll horizontally rather
than wrapping; a wrapped log line is a broken log line.

Gutters are 12px. Page margin is 16px. Density is deliberate.

## Elevation & Depth

There is no elevation. Zero shadows, zero blur, zero transparency. Layers are
distinguished by a 1px `border` and a single tonal step. Modals are full-width
panels with a solid border, not floating cards.

## Shapes

Zero radius on everything, including avatars, badges, inputs and modals. A
rounded corner anywhere in this theme is a bug.

Status is conveyed by a 2px left bar on the row, in green / amber / red.

## Components

- **Buttons:** square, 1px border, 8px/14px padding, uppercase label. Primary is
  a green fill. Hover inverts foreground and background rather than shifting hue.
- **Log row:** 28px tall, `ch`-sized columns, 2px status bar on the left,
  timestamp in `muted-foreground`, message in `foreground`, selectable.
- **Status pill:** not a pill — a square 1px-bordered box with an uppercase
  label and a coloured left bar.
- **Table:** 1px borders on all sides including verticals. This is the one theme
  where vertical rules are correct; they are column guides.
- **Inputs:** square, 1px border, mono, with a `>` prefix glyph on search fields.
- **Charts:** step and bar only. No curves, no gradients, no area fills.

## Do's and Don'ts

- Do keep green / amber / red as a strict status vocabulary.
- Do size table columns in `ch` so values align exactly.
- Do turn on slashed zero for every ID and hash.
- Don't round anything. Not even a little.
- Don't add shadows, transitions over 100ms, or decorative motion.
- Don't wrap log lines — scroll horizontally.
- Don't use this theme for anything a non-engineer has to read.