back to gallery
design language·tally

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 source of truth for most agents and apps.

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

bespoke marketing landingopen full page ↗
landing · tally
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

Agent-generated

remix lane

try a remix

Keep Tallyand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.

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

Family

Evolved from
related

More like this