back to gallery

Tally

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Download DESIGN.md

Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.

the spec

specification

philosophy
summary
Tally is an append-only forensic ledger interface language for systems that are observed rather than operated. Named for the notched tally stick — the oldest tamper-evident record, split so neither half could lie — it stages an interface as a bound folio: every event accrues as an immutable ruled line, sealed over the digest of the line before it. A page is read top to bottom; the margin carries each line's sequence and its place in the hash-chain, dotted leaders carry the eye to the value, and exactly one line — the most recent — is live. The ground is a cold petrol ink-teal archive; sealed records have two faces, a warm parchment leaf and a dark console slab; phosphor green marks only the live line.
values
The line is the unit: hierarchy comes from rule weight, dotted leaders, and marginalia — never from boxed panels.Append, never amend: a leaf is sealed the moment it lands; correction is a new line that references the old.The chain is the proof: each line seals over the digest of the one before it, so tampering refuses to close the chain.Two faces of a record: a warm parchment leaf to read, a cold console slab as it is written — temperature does the work.Accent as signal only: phosphor green marks the live line, the cursor, the chain head, and one primary action — nothing else.Recognisable without colour: the identity survives in ledger rules, leaders, mono-tabular rhythm, and the petrol/parchment contrast.
anti-values
×Boxed koma panels, nested cards, or any group trapped in a 1px grey rectangle — hierarchy is rule and space, not boxes.×Phosphor spread into fields, glows, section backgrounds, or a second accent; brand-colour flooding of any kind.×Centred marketing symmetry, friendly blue CTAs, soft blurred drop shadows, or rounded SaaS chrome.×Decorative rules, dots, or wash laid over body text where they cost legibility.
visual character
The ruled ledger row: a hairline rule, a sequence number and running digest in the margin, dotted leaders to the value, a timestamp pinned at the end — the core unit of every list.A narrow marginalia rail holding folio, root digest, depth, and seal time, divided from the body by a single hairline; the folio's spine.The live line: one phosphor dot in the gutter and one blinking cursor mark the single most-recent line, the only accent on the page.Hash-chain head: sealed blocks linked oldest to newest, with only the live head ringed in phosphor; break a line and the chain refuses to close.The leaf and the console: a sealed record shown as a warm parchment leaf (read) beside a dark console slab (write), set on a cold petrol ink ground.Amber audit margin: held lines accrue beside the chain in #E8B04B, always riding with a flagged word, never blocking the seal.
tokens
colors17 items
bg
#08161A
bg_deep
#050F12
surface
#0C1F24
leaf
#F2EBDA
on_leaf
#16110A
text
#E7EFE9
muted
#7C9298
faint
#3A5258
border
#243C42
rule_strong
#3E5A61
accent
#7CFF9A
on_accent
#06140A
audit
#E8B04B
success
#5FBF7E
warning
#E8B04B
error
#E0584B
info
#6FB6C4
typography11 items
base size
17px
body font
Inter
heading font
Fraunces
mono font
JetBrains Mono
heading weight
500
heading transform
none
letter spacing
-0.01em
display letter spacing
-0.03em
label letter spacing
0.1em
line height
1.6
google fonts url
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap
radii5 items
none
0
sm
0
md
0
leaf
16px
full
9999px
shadows3 items
leaf
14px 14px 0 rgba(5,15,18,0.55)
inner
inset 0 0 0 1px #243C42
sm
none
spacing2 items
base
8px
scale
4, 8, 12, 16, 24, 32, 48, 64, 96, 128
surfaces3 items
treatment
Cold petrol ink-teal ground; warm parchment record leaves and dark console slabs; a faint grayscale halftone dot wash below legibility, masked into the top-right and bottom-left corners.
card style
Two materials, never boxed groups: a parchment leaf (16px radius, hard offset shadow, internal leaf-rows with dotted leaders) and a console slab (deepest petrol, inset hairline, mono output). No nested cards, no accent edges.
bg pattern
Sparse corner halftone wash and shell-path / digest labels in the marginalia; the live line carries one phosphor point.
borders4 items
default width
1px
accent width
2px
style
solid
character
Hairline ledger rules (#243C42) carry the grid; a heavier 2px rule (#3E5A61) breaks sections; the accent appears as a 2px focus ring only, never a card edge.
motion3 items
duration
180ms
easing
cubic-bezier(0.2,0,0,1)
philosophy
Typed and diagnostic: a cursor blinks on the live line and sections reveal on a quiet scroll. The settled, fully-rendered state is the default and renders with no JavaScript behind an html.anim gate; reduced-motion removes all animation.
rules
composition
Compose every screen as a two-column broadsheet folio: a narrow marginalia rail plus a wide ruled body, with horizontal hairline rules carrying the grid. Lists are ruled ledger rows, not cards. Records appear as a warm parchment leaf paired with a dark console slab. Sections accrue top to bottom like leaves in a gathering; never box a group, never centre into marketing symmetry.
hierarchy
Hierarchy comes from rule weight, dotted leaders, marginalia, and the petrol/parchment contrast. Display headings and figures use Fraunces set tight; every ledger row, digest, offset, and timestamp uses JetBrains Mono, tabular; prose annotations use Inter at 17px.
density

Calm overall — 48 to 96px between sections — with deliberate ledger compression where lines cluster at 4 to 12px. Quiet, not empty.

signature
The ruled ledger row with a marginalia sequence + digest, dotted leaders to the value, and exactly one live line marked by a phosphor gutter dot and a blinking cursor. The hash-chain head, the parchment leaf, and the dark console slab all recur on the same petrol ground.
layout
grid
Desktop is a two-column folio — a ~150px marginalia rail plus a wide ruled body — on a max-width near 1280px. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out. Rules, not boxes, separate clusters.
whitespace

Calm and asymmetric to the left margin: 48 to 96px between sections; ledger rows and metadata cluster at 4 to 12px. The hero is the only full-bleed element.

density

Medium-low, with pockets of mono-tabular compression in the ledger feed and console; the page should read unhurried.

responsive
Below 680px the marginalia rail collapses to a top strip and rows drop their right-hand value column; tablet 680-1024px keeps a single ruled column; desktop restores the two-column folio. Renders cleanly from ~390px to 2560px+ with no horizontal overflow.
breakpoints
mobile
390-680px
tablet
680-1024px
desktop
1024-2560px
ultrawide
2560px+
guidance
do
  • Make the ruled line the unit of everything; let the margin and dotted leaders carry hierarchy instead of boxes.
  • Reserve phosphor green for the live line, the cursor, the chain head, and one primary action only.
  • Write real ledger language: digests, offsets, seal times, held flags, shell prompts, and command output with tabular alignment.
  • Pair the warm parchment leaf against the cold petrol console slab; let temperature carry the read/write distinction.
  • Use amber (#E8B04B) for a held or flagged line, always beside a word, never as decoration.
  • Keep the chrome open — the masthead and rail sit across the page, never trapped in a pill bar or floating card.
  • Apply -0.01em tracking to prose and -0.03em to Fraunces display so the austerity reads polished.
  • Set every form control explicitly with an inset hairline and a phosphor focus ring; no browser defaults.
avoid
  • Do not box records into nested cards or trap groups in 1px grey rectangles.
  • Do not spread phosphor into fields, glows, section backgrounds, or a second accent.
  • Do not centre sections into marketing symmetry or add friendly blue CTAs and soft blurred shadows.
  • Do not lay rules, leaders, halftone, or wash over body text where they reduce legibility.
  • Do not use character art, neon, or literal terminal-hacker palettes; the references are structural, not decorative.
  • Do not use arbitrary in-between radii — geometry is 0, 16px, and 9999px only.
imagery
pairs with

phosphor-ledger

summary
High-contrast black-ink screentone halftone of archival forensic subjects — tape spools, spindles, the physical record — with a single phosphor-green glint and cold grayscale ink-wash bleeding at the corners, composed full-bleed with calm negative space for an overlay.
subjects
reel-to-reel tape spool on a spindlestacked archival ledgersa notched tally stick split in twoa magnetic drum or plattera sealed evidence canister
usage
One full-bleed hero per landing; the dark mass and ink-wash sit to one side, leaving a calm petrol field for the ledger-header overlay and headline. Never illustrate the thumbnail — that is a true screenshot of the embodiment.
katagami spec
# Tally

## Philosophy

Tally is an append-only forensic ledger interface language for systems that are observed rather than operated. Named for the notched tally stick — the oldest tamper-evident record, split so neither half could lie — it stages an interface as a bound folio: every event accrues as an immutable ruled line, sealed over the digest of the line before it. A page is read top to bottom; the margin carries each line's sequence and its place in the hash-chain, dotted leaders carry the eye to the value, and exactly one line — the most recent — is live. The ground is a cold petrol ink-teal archive; sealed records have two faces, a warm parchment leaf and a dark console slab; phosphor green marks only the live line.

### Values

- The line is the unit: hierarchy comes from rule weight, dotted leaders, and marginalia — never from boxed panels.
- Append, never amend: a leaf is sealed the moment it lands; correction is a new line that references the old.
- The chain is the proof: each line seals over the digest of the one before it, so tampering refuses to close the chain.
- Two faces of a record: a warm parchment leaf to read, a cold console slab as it is written — temperature does the work.
- Accent as signal only: phosphor green marks the live line, the cursor, the chain head, and one primary action — nothing else.
- Recognisable without colour: the identity survives in ledger rules, leaders, mono-tabular rhythm, and the petrol/parchment contrast.

### Anti-Values

- Boxed koma panels, nested cards, or any group trapped in a 1px grey rectangle — hierarchy is rule and space, not boxes.
- Phosphor spread into fields, glows, section backgrounds, or a second accent; brand-colour flooding of any kind.
- Centred marketing symmetry, friendly blue CTAs, soft blurred drop shadows, or rounded SaaS chrome.
- Decorative rules, dots, or wash laid over body text where they cost legibility.

### Visual Character

- The ruled ledger row: a hairline rule, a sequence number and running digest in the margin, dotted leaders to the value, a timestamp pinned at the end — the core unit of every list.
- A narrow marginalia rail holding folio, root digest, depth, and seal time, divided from the body by a single hairline; the folio's spine.
- The live line: one phosphor dot in the gutter and one blinking cursor mark the single most-recent line, the only accent on the page.
- Hash-chain head: sealed blocks linked oldest to newest, with only the live head ringed in phosphor; break a line and the chain refuses to close.
- The leaf and the console: a sealed record shown as a warm parchment leaf (read) beside a dark console slab (write), set on a cold petrol ink ground.
- Amber audit margin: held lines accrue beside the chain in #E8B04B, always riding with a flagged word, never blocking the seal.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#08161A` |
| bg_deep | `#050F12` |
| surface | `#0C1F24` |
| leaf | `#F2EBDA` |
| on_leaf | `#16110A` |
| text | `#E7EFE9` |
| muted | `#7C9298` |
| faint | `#3A5258` |
| border | `#243C42` |
| rule_strong | `#3E5A61` |
| accent | `#7CFF9A` |
| on_accent | `#06140A` |
| audit | `#E8B04B` |
| success | `#5FBF7E` |
| warning | `#E8B04B` |
| error | `#E0584B` |
| info | `#6FB6C4` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Fraunces
- **Mono Font**: JetBrains Mono
- **Heading Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.01em
- **Display Letter Spacing**: -0.03em
- **Label Letter Spacing**: 0.1em
- **Line Height**: 1.6
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Leaf**: 16px
- **Full**: 9999px

### Shadows

- **Leaf**: 14px 14px 0 rgba(5,15,18,0.55)
- **Inner**: inset 0 0 0 1px #243C42
- **Sm**: none

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96,128]

### Surfaces

- **Treatment**: Cold petrol ink-teal ground; warm parchment record leaves and dark console slabs; a faint grayscale halftone dot wash below legibility, masked into the top-right and bottom-left corners.
- **Card Style**: Two materials, never boxed groups: a parchment leaf (16px radius, hard offset shadow, internal leaf-rows with dotted leaders) and a console slab (deepest petrol, inset hairline, mono output). No nested cards, no accent edges.
- **Bg Pattern**: Sparse corner halftone wash and shell-path / digest labels in the marginalia; the live line carries one phosphor point.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Hairline ledger rules (#243C42) carry the grid; a heavier 2px rule (#3E5A61) breaks sections; the accent appears as a 2px focus ring only, never a card edge.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0,0,1)
- **Philosophy**: Typed and diagnostic: a cursor blinks on the live line and sections reveal on a quiet scroll. The settled, fully-rendered state is the default and renders with no JavaScript behind an html.anim gate; reduced-motion removes all animation.

## Rules

### Composition

Compose every screen as a two-column broadsheet folio: a narrow marginalia rail plus a wide ruled body, with horizontal hairline rules carrying the grid. Lists are ruled ledger rows, not cards. Records appear as a warm parchment leaf paired with a dark console slab. Sections accrue top to bottom like leaves in a gathering; never box a group, never centre into marketing symmetry.

### Hierarchy

Hierarchy comes from rule weight, dotted leaders, marginalia, and the petrol/parchment contrast. Display headings and figures use Fraunces set tight; every ledger row, digest, offset, and timestamp uses JetBrains Mono, tabular; prose annotations use Inter at 17px.

### Density

Calm overall — 48 to 96px between sections — with deliberate ledger compression where lines cluster at 4 to 12px. Quiet, not empty.

### Signature

The ruled ledger row with a marginalia sequence + digest, dotted leaders to the value, and exactly one live line marked by a phosphor gutter dot and a blinking cursor. The hash-chain head, the parchment leaf, and the dark console slab all recur on the same petrol ground.

## Layout

### Grid

Desktop is a two-column folio — a ~150px marginalia rail plus a wide ruled body — on a max-width near 1280px. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out. Rules, not boxes, separate clusters.

### Whitespace

Calm and asymmetric to the left margin: 48 to 96px between sections; ledger rows and metadata cluster at 4 to 12px. The hero is the only full-bleed element.

### Density

Medium-low, with pockets of mono-tabular compression in the ledger feed and console; the page should read unhurried.

### Responsive

Below 680px the marginalia rail collapses to a top strip and rows drop their right-hand value column; tablet 680-1024px keeps a single ruled column; desktop restores the two-column folio. Renders cleanly from ~390px to 2560px+ with no horizontal overflow.

### Breakpoints

- **Mobile**: 390-680px
- **Tablet**: 680-1024px
- **Desktop**: 1024-2560px
- **Ultrawide**: 2560px+

## Guidance

### Do

- Make the ruled line the unit of everything; let the margin and dotted leaders carry hierarchy instead of boxes.
- Reserve phosphor green for the live line, the cursor, the chain head, and one primary action only.
- Write real ledger language: digests, offsets, seal times, held flags, shell prompts, and command output with tabular alignment.
- Pair the warm parchment leaf against the cold petrol console slab; let temperature carry the read/write distinction.
- Use amber (#E8B04B) for a held or flagged line, always beside a word, never as decoration.
- Keep the chrome open — the masthead and rail sit across the page, never trapped in a pill bar or floating card.
- Apply -0.01em tracking to prose and -0.03em to Fraunces display so the austerity reads polished.
- Set every form control explicitly with an inset hairline and a phosphor focus ring; no browser defaults.

### Don't

- Do not box records into nested cards or trap groups in 1px grey rectangles.
- Do not spread phosphor into fields, glows, section backgrounds, or a second accent.
- Do not centre sections into marketing symmetry or add friendly blue CTAs and soft blurred shadows.
- Do not lay rules, leaders, halftone, or wash over body text where they reduce legibility.
- Do not use character art, neon, or literal terminal-hacker palettes; the references are structural, not decorative.
- Do not use arbitrary in-between radii — geometry is 0, 16px, and 9999px only.

### Accessibility

Paper-cold text on petrol ground and ink on parchment both exceed WCAG AA. Phosphor green is supplemental and always paired with a word, dot, or focus ring; amber held-states ride with text. Focus states show a visible 2px ring; touch targets stay at least 44px; reduced-motion disables the cursor blink and scroll reveals.

## Imagery Direction

### Pairs With

phosphor-ledger

### Summary

High-contrast black-ink screentone halftone of archival forensic subjects — tape spools, spindles, the physical record — with a single phosphor-green glint and cold grayscale ink-wash bleeding at the corners, composed full-bleed with calm negative space for an overlay.

### Subjects

- reel-to-reel tape spool on a spindle
- stacked archival ledgers
- a notched tally stick split in two
- a magnetic drum or platter
- a sealed evidence canister

### Usage

One full-bleed hero per landing; the dark mass and ink-wash sit to one side, leaving a calm petrol field for the ledger-header overlay and headline. Never illustrate the thumbnail — that is a true screenshot of the embodiment.
DESIGN.md
---
version: "alpha"
name: "Tally"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#08161A"
  bg_deep: "#050F12"
  surface: "#0C1F24"
  leaf: "#F2EBDA"
  on_leaf: "#16110A"
  text: "#E7EFE9"
  muted: "#7C9298"
  faint: "#3A5258"
  border: "#243C42"
  rule_strong: "#3E5A61"
  accent: "#7CFF9A"
  on_accent: "#06140A"
  audit: "#E8B04B"
  success: "#5FBF7E"
  warning: "#E8B04B"
  error: "#E0584B"
  info: "#6FB6C4"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  leaf: "16px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-bg_deep:
    backgroundColor: "{colors.bg_deep}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-leaf:
    backgroundColor: "{colors.leaf}"
  color-reference-on_leaf:
    backgroundColor: "{colors.on_leaf}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-rule_strong:
    backgroundColor: "{colors.rule_strong}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-audit:
    backgroundColor: "{colors.audit}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Tally

## Overview

Tally is an append-only forensic ledger interface language for systems that are observed rather than operated. Named for the notched tally stick — the oldest tamper-evident record, split so neither half could lie — it stages an interface as a bound folio: every event accrues as an immutable ruled line, sealed over the digest of the line before it. A page is read top to bottom; the margin carries each line's sequence and its place in the hash-chain, dotted leaders carry the eye to the value, and exactly one line — the most recent — is live. The ground is a cold petrol ink-teal archive; sealed records have two faces, a warm parchment leaf and a dark console slab; phosphor green marks only the live line.

### Values

- The line is the unit: hierarchy comes from rule weight, dotted leaders, and marginalia — never from boxed panels.
- Append, never amend: a leaf is sealed the moment it lands; correction is a new line that references the old.
- The chain is the proof: each line seals over the digest of the one before it, so tampering refuses to close the chain.
- Two faces of a record: a warm parchment leaf to read, a cold console slab as it is written — temperature does the work.
- Accent as signal only: phosphor green marks the live line, the cursor, the chain head, and one primary action — nothing else.
- Recognisable without colour: the identity survives in ledger rules, leaders, mono-tabular rhythm, and the petrol/parchment contrast.

### Anti-Values

- Boxed koma panels, nested cards, or any group trapped in a 1px grey rectangle — hierarchy is rule and space, not boxes.
- Phosphor spread into fields, glows, section backgrounds, or a second accent; brand-colour flooding of any kind.
- Centred marketing symmetry, friendly blue CTAs, soft blurred drop shadows, or rounded SaaS chrome.
- Decorative rules, dots, or wash laid over body text where they cost legibility.

### Visual Character

- The ruled ledger row: a hairline rule, a sequence number and running digest in the margin, dotted leaders to the value, a timestamp pinned at the end — the core unit of every list.
- A narrow marginalia rail holding folio, root digest, depth, and seal time, divided from the body by a single hairline; the folio's spine.
- The live line: one phosphor dot in the gutter and one blinking cursor mark the single most-recent line, the only accent on the page.
- Hash-chain head: sealed blocks linked oldest to newest, with only the live head ringed in phosphor; break a line and the chain refuses to close.
- The leaf and the console: a sealed record shown as a warm parchment leaf (read) beside a dark console slab (write), set on a cold petrol ink ground.
- Amber audit margin: held lines accrue beside the chain in #E8B04B, always riding with a flagged word, never blocking the seal.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#08161A` |
| bg_deep | `#050F12` |
| surface | `#0C1F24` |
| leaf | `#F2EBDA` |
| on_leaf | `#16110A` |
| text | `#E7EFE9` |
| muted | `#7C9298` |
| faint | `#3A5258` |
| border | `#243C42` |
| rule_strong | `#3E5A61` |
| accent | `#7CFF9A` |
| on_accent | `#06140A` |
| audit | `#E8B04B` |
| success | `#5FBF7E` |
| warning | `#E8B04B` |
| error | `#E0584B` |
| info | `#6FB6C4` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `128px`

### Grid

Desktop is a two-column folio — a ~150px marginalia rail plus a wide ruled body — on a max-width near 1280px. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out. Rules, not boxes, separate clusters.

### Whitespace

Calm and asymmetric to the left margin: 48 to 96px between sections; ledger rows and metadata cluster at 4 to 12px. The hero is the only full-bleed element.

### Density

Medium-low, with pockets of mono-tabular compression in the ledger feed and console; the page should read unhurried.

### Responsive

Below 680px the marginalia rail collapses to a top strip and rows drop their right-hand value column; tablet 680-1024px keeps a single ruled column; desktop restores the two-column folio. Renders cleanly from ~390px to 2560px+ with no horizontal overflow.

### Breakpoints

- **Mobile**: 390-680px
- **Tablet**: 680-1024px
- **Desktop**: 1024-2560px
- **Ultrawide**: 2560px+

## Elevation & Depth

### Shadows

- **Leaf**: 14px 14px 0 rgba(5,15,18,0.55)
- **Inner**: inset 0 0 0 1px #243C42
- **Sm**: none

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Leaf**: `16px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Cold petrol ink-teal ground; warm parchment record leaves and dark console slabs; a faint grayscale halftone dot wash below legibility, masked into the top-right and bottom-left corners.
- **Card Style**: Two materials, never boxed groups: a parchment leaf (16px radius, hard offset shadow, internal leaf-rows with dotted leaders) and a console slab (deepest petrol, inset hairline, mono output). No nested cards, no accent edges.
- **Bg Pattern**: Sparse corner halftone wash and shell-path / digest labels in the marginalia; the live line carries one phosphor point.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Hairline ledger rules (#243C42) carry the grid; a heavier 2px rule (#3E5A61) breaks sections; the accent appears as a 2px focus ring only, never a card edge.

## Components

### Composition

Compose every screen as a two-column broadsheet folio: a narrow marginalia rail plus a wide ruled body, with horizontal hairline rules carrying the grid. Lists are ruled ledger rows, not cards. Records appear as a warm parchment leaf paired with a dark console slab. Sections accrue top to bottom like leaves in a gathering; never box a group, never centre into marketing symmetry.

### Hierarchy

Hierarchy comes from rule weight, dotted leaders, marginalia, and the petrol/parchment contrast. Display headings and figures use Fraunces set tight; every ledger row, digest, offset, and timestamp uses JetBrains Mono, tabular; prose annotations use Inter at 17px.

### Density

Calm overall — 48 to 96px between sections — with deliberate ledger compression where lines cluster at 4 to 12px. Quiet, not empty.

### Signature

The ruled ledger row with a marginalia sequence + digest, dotted leaders to the value, and exactly one live line marked by a phosphor gutter dot and a blinking cursor. The hash-chain head, the parchment leaf, and the dark console slab all recur on the same petrol ground.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-019ef833-0b88-7643-9eee-82a750156e8a/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Make the ruled line the unit of everything; let the margin and dotted leaders carry hierarchy instead of boxes.
- Do Reserve phosphor green for the live line, the cursor, the chain head, and one primary action only.
- Do Write real ledger language: digests, offsets, seal times, held flags, shell prompts, and command output with tabular alignment.
- Do Pair the warm parchment leaf against the cold petrol console slab; let temperature carry the read/write distinction.
- Do Use amber (#E8B04B) for a held or flagged line, always beside a word, never as decoration.
- Do Keep the chrome open — the masthead and rail sit across the page, never trapped in a pill bar or floating card.
- Do Apply -0.01em tracking to prose and -0.03em to Fraunces display so the austerity reads polished.
- Do Set every form control explicitly with an inset hairline and a phosphor focus ring; no browser defaults.
- Don't Do not box records into nested cards or trap groups in 1px grey rectangles.
- Don't Do not spread phosphor into fields, glows, section backgrounds, or a second accent.
- Don't Do not centre sections into marketing symmetry or add friendly blue CTAs and soft blurred shadows.
- Don't Do not lay rules, leaders, halftone, or wash over body text where they reduce legibility.
- Don't Do not use character art, neon, or literal terminal-hacker palettes; the references are structural, not decorative.
- Don't Do not use arbitrary in-between radii — geometry is 0, 16px, and 9999px only.

### Accessibility

Paper-cold text on petrol ground and ink on parchment both exceed WCAG AA. Phosphor green is supplemental and always paired with a word, dot, or focus ring; amber held-states ride with text. Focus states show a visible 2px ring; touch targets stay at least 44px; reduced-motion disables the cursor blink and scroll reveals.

## Imagery Direction

### Pairs With

phosphor-ledger

### Summary

High-contrast black-ink screentone halftone of archival forensic subjects — tape spools, spindles, the physical record — with a single phosphor-green glint and cold grayscale ink-wash bleeding at the corners, composed full-bleed with calm negative space for an overlay.

### Subjects

- reel-to-reel tape spool on a spindle
- stacked archival ledgers
- a notched tally stick split in two
- a magnetic drum or platter
- a sealed evidence canister

### Usage

One full-bleed hero per landing; the dark mass and ink-wash sit to one side, leaving a calm petrol field for the ledger-header overlay and headline. Never illustrate the thumbnail — that is a true screenshot of the embodiment.
shadcn/ui theme
```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tally",
  "type": "registry:theme",
  "title": "Tally shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#08161A",
      "foreground": "#E7EFE9",
      "card": "#0C1F24",
      "card-foreground": "#E7EFE9",
      "popover": "#0C1F24",
      "popover-foreground": "#E7EFE9",
      "primary": "#E7EFE9",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7C9298",
      "muted-foreground": "#E7EFE9",
      "accent": "#7CFF9A",
      "accent-foreground": "#111111",
      "destructive": "#E0584B",
      "border": "#243C42",
      "input": "#243C42",
      "ring": "#7CFF9A",
      "chart-1": "#E7EFE9",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF9A",
      "chart-4": "#5FBF7E",
      "chart-5": "#E8B04B",
      "sidebar": "#0C1F24",
      "sidebar-foreground": "#E7EFE9",
      "sidebar-primary": "#E7EFE9",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#6FB6C4",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#243C42",
      "sidebar-ring": "#7CFF9A",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#E7EFE9",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7CFF9A",
      "accent-foreground": "#111111",
      "destructive": "#E0584B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7CFF9A",
      "chart-1": "#E7EFE9",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF9A",
      "chart-4": "#5FBF7E",
      "chart-5": "#E8B04B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#E7EFE9",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#7CFF9A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7CFF9A",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef833-0b88-7643-9eee-82a750156e8a",
    "slug": "tally",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "audit",
        "bg",
        "bg_deep",
        "border",
        "error",
        "faint",
        "info",
        "leaf",
        "muted",
        "on_accent",
        "on_leaf",
        "rule_strong",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "label_letter_spacing",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "full",
        "leaf",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "inner",
        "leaf",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```
in the wild

embodiments

DESIGN.md

at a glance

Typography

headline-lgFraunces · 33px · 700

The quick brown fox jumps

headline-mdFraunces · 27px · 600

The quick brown fox jumps

body-mdInter · 17px · 400

The quick brown fox jumps

label-mdJetBrains Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

built with
remix lane

try a remix

Keep Tally and swap a palette and an art style onto it. The landing & dashboard recolor live.

UI language · fixed
Tally
Palette
Art style
Landing Page
live preview · recolored + filled
lineage

Family

Evolved from
related

More like this