Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
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 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.
Calm overall — 48 to 96px between sections — with deliberate ledger compression where lines cluster at 4 to 12px. Quiet, not empty.
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.
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.
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.
Medium-low, with pockets of mono-tabular compression in the ledger feed and console; the page should read unhurried.
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.
phosphor-ledger
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.
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.
# 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.
---
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.
```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"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
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.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--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;
}
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
export function TallyShadcnKit() {
return (
<section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
<div className="flex items-start justify-between gap-4">
<div>
<Badge variant="outline">shadcn/ui</Badge>
<h2 className="mt-3 text-2xl font-semibold tracking-tight">Tally</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "tally",
"type": "registry:theme",
"title": "Tally — Petrol Folio",
"author": "katagami-agent",
"cssVars": {
"theme": {
"font-sans": "Inter, system-ui, sans-serif",
"font-serif": "Fraunces, Georgia, serif",
"font-mono": "JetBrains Mono, ui-monospace, monospace",
"radius": "16px"
},
"light": {
"background": "#08161A",
"foreground": "#E7EFE9",
"card": "#0C1F24",
"card-foreground": "#E7EFE9",
"popover": "#0C1F24",
"popover-foreground": "#E7EFE9",
"primary": "#7CFF9A",
"primary-foreground": "#06140A",
"secondary": "#0E252B",
"secondary-foreground": "#E7EFE9",
"muted": "#0C1F24",
"muted-foreground": "#7C9298",
"accent": "#0E252B",
"accent-foreground": "#7CFF9A",
"destructive": "#E0584B",
"destructive-foreground": "#F2EBDA",
"border": "#243C42",
"input": "#243C42",
"ring": "#7CFF9A",
"chart-1": "#7CFF9A",
"chart-2": "#6FB6C4",
"chart-3": "#E8B04B",
"chart-4": "#5FBF7E",
"chart-5": "#7C9298",
"sidebar": "#08161A",
"sidebar-foreground": "#7C9298",
"sidebar-primary": "#7CFF9A",
"sidebar-primary-foreground": "#06140A",
"sidebar-accent": "#0E252B",
"sidebar-accent-foreground": "#E7EFE9",
"sidebar-border": "#243C42",
"sidebar-ring": "#7CFF9A"
},
"dark": {
"background": "#050F12",
"foreground": "#E7EFE9",
"card": "#0C1F24",
"card-foreground": "#E7EFE9",
"popover": "#0C1F24",
"popover-foreground": "#E7EFE9",
"primary": "#7CFF9A",
"primary-foreground": "#06140A",
"secondary": "#0E252B",
"secondary-foreground": "#E7EFE9",
"muted": "#0C1F24",
"muted-foreground": "#7C9298",
"accent": "#0E252B",
"accent-foreground": "#7CFF9A",
"destructive": "#E0584B",
"destructive-foreground": "#F2EBDA",
"border": "#243C42",
"input": "#243C42",
"ring": "#7CFF9A",
"chart-1": "#7CFF9A",
"chart-2": "#6FB6C4",
"chart-3": "#E8B04B",
"chart-4": "#5FBF7E",
"chart-5": "#7C9298",
"sidebar": "#08161A",
"sidebar-foreground": "#7C9298",
"sidebar-primary": "#7CFF9A",
"sidebar-primary-foreground": "#06140A",
"sidebar-accent": "#0E252B",
"sidebar-accent-foreground": "#E7EFE9",
"sidebar-border": "#243C42",
"sidebar-ring": "#7CFF9A"
}
},
"visualProfile": {
"id": "tally",
"ground": "dark",
"material": "flat",
"borders": "hairline-rule",
"border_color": "#243C42",
"radius": "16px",
"radius_set": [0, 16, 9999],
"control_shape": "pill",
"control_radius": "9999px",
"shadow": "hard-offset",
"shadow_value": "14px 14px 0 rgba(5,15,18,0.55)",
"accent_discipline": "signal-only",
"accent": "#7CFF9A",
"typography": {
"display": "Fraunces",
"body": "Inter",
"mono": "JetBrains Mono",
"numeric": "mono-tabular"
},
"notes": "Petrol ink-teal ground; warm parchment record leaf (#F2EBDA) for data cards; hierarchy from hairline ledger rules and dotted leaders, never boxed panels; phosphor accent reserved for the live line and one primary action; amber (#E8B04B) only for a held/flagged state with a word."
}
}
# Tally shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef833-0b88-7643-9eee-82a750156e8a`
Slug: `tally`
## Intent
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.
## Required primitives
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
## Token cues
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:
{
"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"
}
## Visual character to preserve
- 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.
## ShadSync visual profile
{
"family": "editorial",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": false,
"stickerBadges": true,
"motion": "still",
"density": "dense",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/tally/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- 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.
- Do not: 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.
## Copy-paste component example
This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.
```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
export function TallyShadcnKit() {
return (
<section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
<div className="flex items-start justify-between gap-4">
<div>
<Badge variant="outline">shadcn/ui</Badge>
<h2 className="mt-3 text-2xl font-semibold tracking-tight">Tally</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"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+"
}
}
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"generator": "katagami-ui-compatibility-projection",
"generatedBy": "katagami-ui-projection",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": {
"id": "en-019ef833-0b88-7643-9eee-82a750156e8a",
"name": "Tally",
"slug": "tally"
},
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"identityNotes": [
"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."
],
"visualProfile": {
"family": "editorial",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": true,
"motion": "still",
"density": "dense",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "Tally launch room",
"description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
"primaryAction": "Apply theme",
"secondaryAction": "Review states",
"stats": [
{
"label": "components",
"value": "16",
"tone": "accent"
},
{
"label": "states",
"value": "ready"
},
{
"label": "density",
"value": "balanced",
"tone": "warning"
}
],
"rows": [
{
"label": "Primary flow",
"value": "mapped",
"status": "active"
},
{
"label": "Token coverage",
"value": "semantic",
"status": "synced"
},
{
"label": "Responsive proof",
"value": "queued",
"status": "review"
}
],
"statuses": [
"Active",
"Synced",
"Draft"
]
}
},
{
"id": "detail-editor",
"title": "Detail editor",
"viewport": "tablet",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"checkbox",
"switch",
"slider",
"dialog",
"sheet"
],
"composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
"mustShow": [
"focus ring",
"error or destructive state",
"dialog or sheet treatment",
"written guidance content"
],
"avoid": [
"unstyled browser controls",
"floating cards inside cards",
"missing labels"
],
"scene": {
"eyebrow": "editing flow",
"headline": "Language recipe editor",
"description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
"primaryAction": "Save recipe",
"secondaryAction": "Open sheet",
"fields": [
{
"label": "Component family",
"value": "Narrative cards"
},
{
"label": "State treatment",
"value": "Visible focus + validation"
},
{
"label": "Motion",
"value": "Small lift, no opacity-only fade"
}
],
"statuses": [
"Focus",
"Invalid",
"Confirmed"
]
}
},
{
"id": "data-operations",
"title": "Data operations",
"viewport": "mobile",
"primitives": [
"button",
"tabs",
"badge",
"dropdown-menu",
"table",
"tooltip",
"separator"
],
"composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
"mustShow": [
"responsive reflow",
"dense row styling",
"menu affordance",
"status badge system"
],
"avoid": [
"desktop-only tables",
"text overflow",
"default shadcn spacing without Katagami character"
],
"scene": {
"eyebrow": "operations",
"headline": "Compact review queue",
"description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
"primaryAction": "Resolve",
"secondaryAction": "Filter",
"rows": [
{
"label": "Button hierarchy",
"value": "approved",
"status": "ok"
},
{
"label": "Table rhythm",
"value": "needs pass",
"status": "watch"
},
{
"label": "Empty state",
"value": "designed",
"status": "done"
}
],
"statuses": [
"Queued",
"Blocked",
"Done"
]
}
}
],
"componentRecipes": [
{
"primitive": "button",
"intent": "Prove action hierarchy, focus, disabled, and destructive states."
},
{
"primitive": "card",
"intent": "Carry the language surface, border, elevation, and density rules."
},
{
"primitive": "input",
"intent": "Show labels, focus rings, validation, and spacing rhythm."
},
{
"primitive": "textarea",
"intent": "Show longer guidance, validation copy, and writing density."
},
{
"primitive": "select",
"intent": "Show filtering, selection contrast, and menu trigger styling."
},
{
"primitive": "dialog",
"intent": "Show centered decision states and overlay treatment."
},
{
"primitive": "sheet",
"intent": "Show contextual side panels and responsive editing."
},
{
"primitive": "tabs",
"intent": "Show navigational structure and active/inactive contrast."
},
{
"primitive": "badge",
"intent": "Show compact status vocabulary and semantic colors."
},
{
"primitive": "separator",
"intent": "Show section rhythm without generic gray dividers."
},
{
"primitive": "checkbox",
"intent": "Show binary selection with visible focus and checked states."
},
{
"primitive": "switch",
"intent": "Show settings toggles and on/off contrast."
},
{
"primitive": "slider",
"intent": "Show numeric adjustment with track/thumb styling."
},
{
"primitive": "tooltip",
"intent": "Show concise explanation styling above compact controls."
},
{
"primitive": "dropdown-menu",
"intent": "Show action menus, destructive items, and grouped choices."
},
{
"primitive": "table",
"intent": "Show dense operational data, separators, row states, and responsive behavior."
}
],
"qualityRules": {
"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."
],
"dont": [
"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."
]
}
}