design language·rail-ledger-product-ui

Rail Ledger Product UI

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

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

Rail Ledger Product UI is a refined consumer SaaS and operations-system language for products that must feel calm, trustworthy, and warm while carrying dense operational information. It borrows the composure of an editorial ledger, the discipline of public-service interface typography, and a single cobalt signal used only when action or status needs attention.

values

Readable density before decoration: labels, notes, small controls, and tables remain comfortable at real product sizes.A friendly mature voice: sparse serif moments are used for product identity and narrative while all work surfaces use a highly legible sans.Structural restraint: identity comes from ruled ledgers, notched panels, narrow rails, and disciplined spacing rather than icons or effects.Semantic clarity: high-chroma accent is reserved for focus, selected state, and primary action; status colors are muted and paired with text.Production credibility: all components should look buildable as tokens in a serious app shell, not a marketing mockup.Editorial hierarchy: dense information is composed with captions, source notes, and column rhythm rather than same-sized cards.

anti-values

×No gradient keyword emphasis, generic mesh/grid backgrounds, pulsing-dot hero pills, or unrelated icon bento clutter.×No nested rounded stat cards or three equal cards in a row; if panels repeat, one area must dominate or break the grid.×No tiny low-contrast metadata; secondary text must stay legible against cream and tinted surfaces.×No sterile textureless SaaS surfaces that rely only on shadows and rounded rectangles for polish.

tokens

borders4 items

accent width: 4px
character: Default borders render as rgba(32,33,31,0.08); accent rails are separate square ::before bars or flat-edged table/nav geometry, never one-sided borders on rounded elements.
default width: 1px
style: solid

colors12 items

accent

#C7F04B

background

#F7F3EA

border

#20211F

error

#9B312C

info

#2F579E

muted

#5F625D

primary

#2431A5

secondary

#E9EEF2

success

#326B4B

surface

#FEFCF6

text

#20211F

warning

#856012

motion3 items

duration: 160ms
easing: cubic-bezier(0.2, 0.7, 0.2, 1)
philosophy: Motion is functional and brief: row highlight, focus reveal, and drawer transitions only; avoid bounce, pulse, or decorative shimmer.

radii4 items

focus: 0px
none: 0
panel: 0px
pill: 9999px

shadows3 items

lg: 0 22px 60px rgba(32,33,31,0.10)
md: 0 10px 28px rgba(32,33,31,0.08)
sm: 0 1px 0 rgba(32,33,31,0.08)

spacing2 items

base: 8px
scale: 4, 6, 8, 12, 16, 24, 32, 48, 64, 72, 96

surfaces3 items

bg pattern: No generic grid. Use isolated ledger rules inside components and a single left spine in the app shell.
card style: Flat squared notched panels with surface fill, subtle rgba border, sparse shadow only for the main shell, and separate cobalt rail pseudo-elements for active emphasis.
treatment: Cream canvas with cool tinted utility bands; no gradients; optional 1px ledger rules in rgba(32,33,31,0.08).

typography17 items

base size: 16px
body font: Atkinson Hyperlegible
data tracking: -0.01em
display line height: 1.12
display tracking: -0.035em
fallback strategy: Display falls back to Georgia, Times New Roman, serif; UI falls back to Arial, Helvetica, sans-serif; mono falls back to ui-monospace, SFMono-Regular, Menlo, Consolas, monospace.
google fonts url: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap
heading font: Cormorant Garamond
label line height: 1.25
label tracking: 0.06em
letter spacing: -0.02em
line height: 1.55
measure: Body copy maxes at 66ch; dense table labels max at 18ch before wrapping; numeric columns use tabular figures and right alignment.
mono font: JetBrains Mono
rationale: Cormorant Garamond supplies a sparse refined editorial voice for product moments, while Atkinson Hyperlegible protects app controls, labels, dense rows, and metadata from decorative fragility.
scale ratio: 1.22
ui font: Atkinson Hyperlegible

rules

composition

Use an asymmetric app shell: a narrow ledger spine, a spacious editorial header, and a denser workbench below. Avoid equal card triptychs; pair one dominant timetable or table with smaller controls and annotations. Keep ornamental content out of empty space and let margins, rails, and rows create identity.

density

Dense by design but not cramped: operational rows hold 44-52px height, label clusters use 6-8px gaps, related panels use 16-24px internal spacing, and unrelated sections separate by 64-96px.

hierarchy

Display hierarchy is created through type role contrast: serif for sparse product/title moments, Atkinson sans for all work surfaces, uppercase labels for metadata, and JetBrains Mono only for codes and tabular numbers. Accent color does not make hierarchy by itself; placement, rail width, and whitespace do.

signature patterns

Ledger rail selection: active navigation, selected records, and primary panels share a separate 4px cobalt ::before bar with 12px internal offset and flat square geometry.Notched utility panel: core surfaces use clip-path polygon corners with a tiny diagonal cut at top-right and bottom-left to distinguish them without extra color.Ruled data rhythm: table and schedule areas use 1px horizontal rgba rules, tabular numerals, restrained row tint on hover, and readable captions beneath.Editorial-to-productive split: a large serif title block sits above a compact sans control plane, with the first dense component intentionally breaking the header grid.Citrus acknowledgement chip: the fresh accent appears only as a small square confirmation mark or inline status swatch, never as text gradient or broad fill.

layout

breakpoints

1440 desktop full shell; 768 tablet collapses side brief under the table with spine retained; 375 mobile converts spine to top rail and stacks panels with preserved table horizontal scroll.

density

Optimized for real app use: compact controls and tables are allowed, but text remains 15-16px, rows preserve touchable height, and metadata avoids low-contrast grey-on-grey.

grid

Desktop uses a 72px left spine plus a 12-column content grid at max-width 1260px with 24px gutters; the main workbench spans 8 columns and the side brief spans 4.

responsive

Never shrink text below 15px; tables may scroll horizontally; serif headline reduces size and line length on mobile while controls remain legible.

whitespace

Use a strong 8:1 rhythm: 6px label gaps, 16px related control gaps, 32px panel padding, 72px header-to-workbench distance, and 96px outer breathing room on large screens.

guidance

Pair a sparse Cormorant Garamond display moment with Atkinson Hyperlegible for all dense product UI.
Reserve cobalt for left rails, focus rings, selected rows, and one primary action per view.
Use readable 15-16px body text, 12-13px labels with sufficient contrast, and tabular figures for times, counts, and money.
Make one panel or table dominant; use secondary panels as annotations rather than equal stat cards.
Use near-invisible borders and clipped notches as the signature surface treatment.
Write captions, source notes, and metadata as real content with accessible charcoal or muted contrast.
Keep the citrus accent as a small acknowledgement or success marker only.

avoid

Do not use gradients, mesh backgrounds, glow, pulsing dots, or gradient keyword emphasis.
Do not create unrelated icon bento boxes or nested rounded statistics cards.
Do not set small metadata in low-contrast pale grey or reduce dense table text below product-usable sizes.
Do not rely on Cormorant for controls, tables, nav, or labels; it is display only.
Do not use three equal cards in a row; break scale or hierarchy every time.
Do not flood surfaces with cobalt; if more than one large blue block appears, the language is being misused.
Do not replace the ledger rail with generic outline cards or soft shadow-only SaaS panels.

katagami spec

# Rail Ledger Product UI

## Philosophy

### Values

- Readable density before decoration: labels, notes, small controls, and tables remain comfortable at real product sizes.
- A friendly mature voice: sparse serif moments are used for product identity and narrative while all work surfaces use a highly legible sans.
- Structural restraint: identity comes from ruled ledgers, notched panels, narrow rails, and disciplined spacing rather than icons or effects.
- Semantic clarity: high-chroma accent is reserved for focus, selected state, and primary action; status colors are muted and paired with text.
- Production credibility: all components should look buildable as tokens in a serious app shell, not a marketing mockup.
- Editorial hierarchy: dense information is composed with captions, source notes, and column rhythm rather than same-sized cards.

### Anti-Values

- No gradient keyword emphasis, generic mesh/grid backgrounds, pulsing-dot hero pills, or unrelated icon bento clutter.
- No nested rounded stat cards or three equal cards in a row; if panels repeat, one area must dominate or break the grid.
- No tiny low-contrast metadata; secondary text must stay legible against cream and tinted surfaces.
- No sterile textureless SaaS surfaces that rely only on shadows and rounded rectangles for polish.

### Visual Character

- A 4px cobalt ledger rail appears as a separate square inset bar on selected panels, navigation items, and active table rows rather than decorative icons or rounded border-left crescents.
- Panels use flat squared bodies with two small clipped diagonal notches via clip-path polygon and near-invisible rgba borders; only status chips may use 9999px pill radius.
- Dense information appears in ruled rows with 44px minimum height, tabular numerals, small uppercase labels at 0.06em tracking, and source-note captions below data.
- The page alternates one spacious editorial serif header with a compact sans workbench, using large section gaps of 72px and tight label clusters of 6px.
- Cobalt appears as hairline rails, focus rings, and one primary button only; all other surfaces remain cream, charcoal, and cool blue-grey tint.

## Tokens

### Borders

- **Accent Width**: 4px
- **Character**: Default borders render as rgba(32,33,31,0.08); accent rails are separate square ::before bars or flat-edged table/nav geometry, never one-sided borders on rounded elements.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#C7F04B` |
| background | `#F7F3EA` |
| border | `#20211F` |
| error | `#9B312C` |
| info | `#2F579E` |
| muted | `#5F625D` |
| primary | `#2431A5` |
| secondary | `#E9EEF2` |
| success | `#326B4B` |
| surface | `#FEFCF6` |
| text | `#20211F` |
| warning | `#856012` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0.7, 0.2, 1)
- **Philosophy**: Motion is functional and brief: row highlight, focus reveal, and drawer transitions only; avoid bounce, pulse, or decorative shimmer.

### Radii

- **Focus**: 0px
- **None**: 0
- **Panel**: 0px
- **Pill**: 9999px

### Shadows

- **Lg**: 0 22px 60px rgba(32,33,31,0.10)
- **Md**: 0 10px 28px rgba(32,33,31,0.08)
- **Sm**: 0 1px 0 rgba(32,33,31,0.08)

### Spacing

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

### Surfaces

- **Bg Pattern**: No generic grid. Use isolated ledger rules inside components and a single left spine in the app shell.
- **Card Style**: Flat squared notched panels with surface fill, subtle rgba border, sparse shadow only for the main shell, and separate cobalt rail pseudo-elements for active emphasis.
- **Treatment**: Cream canvas with cool tinted utility bands; no gradients; optional 1px ledger rules in rgba(32,33,31,0.08).

### Typography

- **Base Size**: 16px
- **Body Font**: Atkinson Hyperlegible
- **Data Tracking**: -0.01em
- **Display Line Height**: 1.12
- **Display Tracking**: -0.035em
- **Fallback Strategy**: Display falls back to Georgia, Times New Roman, serif; UI falls back to Arial, Helvetica, sans-serif; mono falls back to ui-monospace, SFMono-Regular, Menlo, Consolas, monospace.
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap
- **Heading Font**: Cormorant Garamond
- **Label Line Height**: 1.25
- **Label Tracking**: 0.06em
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Measure**: Body copy maxes at 66ch; dense table labels max at 18ch before wrapping; numeric columns use tabular figures and right alignment.
- **Mono Font**: JetBrains Mono
- **Rationale**: Cormorant Garamond supplies a sparse refined editorial voice for product moments, while Atkinson Hyperlegible protects app controls, labels, dense rows, and metadata from decorative fragility.
- **Scale Ratio**: 1.22
- **Ui Font**: Atkinson Hyperlegible

## Rules

### Composition

Use an asymmetric app shell: a narrow ledger spine, a spacious editorial header, and a denser workbench below. Avoid equal card triptychs; pair one dominant timetable or table with smaller controls and annotations. Keep ornamental content out of empty space and let margins, rails, and rows create identity.

### Density

Dense by design but not cramped: operational rows hold 44-52px height, label clusters use 6-8px gaps, related panels use 16-24px internal spacing, and unrelated sections separate by 64-96px.

### Hierarchy

Display hierarchy is created through type role contrast: serif for sparse product/title moments, Atkinson sans for all work surfaces, uppercase labels for metadata, and JetBrains Mono only for codes and tabular numbers. Accent color does not make hierarchy by itself; placement, rail width, and whitespace do.

### Signature Patterns

- Ledger rail selection: active navigation, selected records, and primary panels share a separate 4px cobalt ::before bar with 12px internal offset and flat square geometry.
- Notched utility panel: core surfaces use clip-path polygon corners with a tiny diagonal cut at top-right and bottom-left to distinguish them without extra color.
- Ruled data rhythm: table and schedule areas use 1px horizontal rgba rules, tabular numerals, restrained row tint on hover, and readable captions beneath.
- Editorial-to-productive split: a large serif title block sits above a compact sans control plane, with the first dense component intentionally breaking the header grid.
- Citrus acknowledgement chip: the fresh accent appears only as a small square confirmation mark or inline status swatch, never as text gradient or broad fill.

## Layout

### Breakpoints

1440 desktop full shell; 768 tablet collapses side brief under the table with spine retained; 375 mobile converts spine to top rail and stacks panels with preserved table horizontal scroll.

### Density

Optimized for real app use: compact controls and tables are allowed, but text remains 15-16px, rows preserve touchable height, and metadata avoids low-contrast grey-on-grey.

### Grid

Desktop uses a 72px left spine plus a 12-column content grid at max-width 1260px with 24px gutters; the main workbench spans 8 columns and the side brief spans 4.

### Responsive

Never shrink text below 15px; tables may scroll horizontally; serif headline reduces size and line length on mobile while controls remain legible.

### Whitespace

Use a strong 8:1 rhythm: 6px label gaps, 16px related control gaps, 32px panel padding, 72px header-to-workbench distance, and 96px outer breathing room on large screens.

## Guidance

### Do

- Pair a sparse Cormorant Garamond display moment with Atkinson Hyperlegible for all dense product UI.
- Reserve cobalt for left rails, focus rings, selected rows, and one primary action per view.
- Use readable 15-16px body text, 12-13px labels with sufficient contrast, and tabular figures for times, counts, and money.
- Make one panel or table dominant; use secondary panels as annotations rather than equal stat cards.
- Use near-invisible borders and clipped notches as the signature surface treatment.
- Write captions, source notes, and metadata as real content with accessible charcoal or muted contrast.
- Keep the citrus accent as a small acknowledgement or success marker only.

### Don't

- Do not use gradients, mesh backgrounds, glow, pulsing dots, or gradient keyword emphasis.
- Do not create unrelated icon bento boxes or nested rounded statistics cards.
- Do not set small metadata in low-contrast pale grey or reduce dense table text below product-usable sizes.
- Do not rely on Cormorant for controls, tables, nav, or labels; it is display only.
- Do not use three equal cards in a row; break scale or hierarchy every time.
- Do not flood surfaces with cobalt; if more than one large blue block appears, the language is being misused.
- Do not replace the ledger rail with generic outline cards or soft shadow-only SaaS panels.

### Accessibility

Body and UI text meet WCAG AA on cream and tinted surfaces; focus states use 2px cobalt outlines plus offset; status color is always paired with text labels; table rows keep minimum 44px targets.

### Usage Context

Best for refined consumer SaaS utilities, civic/service operations tools, editorial dashboards, planning systems, and product shells where dense information must feel calm rather than bureaucratic.

DESIGN.md

---
version: "alpha"
name: "Rail Ledger Product UI"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
accent: "#C7F04B"
background: "#F7F3EA"
border: "#20211F"
error: "#9B312C"
info: "#2F579E"
muted: "#5F625D"
primary: "#2431A5"
secondary: "#E9EEF2"
success: "#326B4B"
surface: "#FEFCF6"
text: "#20211F"
warning: "#856012"
typography:
headline-lg:
fontFamily: "Cormorant Garamond"
fontSize: "1.816rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Cormorant Garamond"
fontSize: "1.488rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Atkinson Hyperlegible"
fontSize: "16px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.02em"
label-md:
fontFamily: "JetBrains Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
focus: "0px"
none: "0px"
panel: "0px"
pill: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "6px"
md: "8px"
lg: "12px"
xl: "16px"
2xl: "24px"
3xl: "32px"
4xl: "48px"
step-8: "64px"
step-9: "72px"
step-10: "96px"
components:
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-warning:
backgroundColor: "{colors.warning}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#ffffff"
typography: "{typography.label-md}"
rounded: "{rounded.none}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
height: "44px"
---

# Rail Ledger Product UI

## Overview

### Values

### Anti-Values

### Visual Character

## Colors

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

| Token | Value |
|-------|-------|
| accent | `#C7F04B` |
| background | `#F7F3EA` |
| border | `#20211F` |
| error | `#9B312C` |
| info | `#2F579E` |
| muted | `#5F625D` |
| primary | `#2431A5` |
| secondary | `#E9EEF2` |
| success | `#326B4B` |
| surface | `#FEFCF6` |
| text | `#20211F` |
| warning | `#856012` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Atkinson Hyperlegible, 16px, weight 400, line-height 1.55.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Breakpoints

1440 desktop full shell; 768 tablet collapses side brief under the table with spine retained; 375 mobile converts spine to top rail and stacks panels with preserved table horizontal scroll.

### Density

Optimized for real app use: compact controls and tables are allowed, but text remains 15-16px, rows preserve touchable height, and metadata avoids low-contrast grey-on-grey.

### Grid

Desktop uses a 72px left spine plus a 12-column content grid at max-width 1260px with 24px gutters; the main workbench spans 8 columns and the side brief spans 4.

### Responsive

Never shrink text below 15px; tables may scroll horizontally; serif headline reduces size and line length on mobile while controls remain legible.

### Whitespace

Use a strong 8:1 rhythm: 6px label gaps, 16px related control gaps, 32px panel padding, 72px header-to-workbench distance, and 96px outer breathing room on large screens.

## Elevation & Depth

### Shadows

- **Lg**: 0 22px 60px rgba(32,33,31,0.10)
- **Md**: 0 10px 28px rgba(32,33,31,0.08)
- **Sm**: 0 1px 0 rgba(32,33,31,0.08)

## Shapes

### Rounded

- **Focus**: `0px`
- **None**: `0px`
- **Panel**: `0px`
- **Pill**: `9999px`

### Surfaces

### Borders

## Components

### Composition

### Density

Dense by design but not cramped: operational rows hold 44-52px height, label clusters use 6-8px gaps, related panels use 16-24px internal spacing, and unrelated sections separate by 64-96px.

### Hierarchy

### Signature Patterns

## 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/rail-ledger-product-ui/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 Pair a sparse Cormorant Garamond display moment with Atkinson Hyperlegible for all dense product UI.
- Do Reserve cobalt for left rails, focus rings, selected rows, and one primary action per view.
- Do Use readable 15-16px body text, 12-13px labels with sufficient contrast, and tabular figures for times, counts, and money.
- Do Make one panel or table dominant; use secondary panels as annotations rather than equal stat cards.
- Do Use near-invisible borders and clipped notches as the signature surface treatment.
- Do Write captions, source notes, and metadata as real content with accessible charcoal or muted contrast.
- Do Keep the citrus accent as a small acknowledgement or success marker only.
- Don't Do not use gradients, mesh backgrounds, glow, pulsing dots, or gradient keyword emphasis.
- Don't Do not create unrelated icon bento boxes or nested rounded statistics cards.
- Don't Do not set small metadata in low-contrast pale grey or reduce dense table text below product-usable sizes.
- Don't Do not rely on Cormorant for controls, tables, nav, or labels; it is display only.
- Don't Do not use three equal cards in a row; break scale or hierarchy every time.
- Don't Do not flood surfaces with cobalt; if more than one large blue block appears, the language is being misused.
- Don't Do not replace the ledger rail with generic outline cards or soft shadow-only SaaS panels.

### Accessibility

Body and UI text meet WCAG AA on cream and tinted surfaces; focus states use 2px cobalt outlines plus offset; status color is always paired with text labels; table rows keep minimum 44px targets.

### Usage Context

Best for refined consumer SaaS utilities, civic/service operations tools, editorial dashboards, planning systems, and product shells where dense information must feel calm rather than bureaucratic.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rail-ledger-product-ui",
  "type": "registry:theme",
  "title": "Rail Ledger Product UI shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F3EA",
      "foreground": "#20211F",
      "card": "#FEFCF6",
      "card-foreground": "#20211F",
      "popover": "#FEFCF6",
      "popover-foreground": "#20211F",
      "primary": "#2431A5",
      "primary-foreground": "#ffffff",
      "secondary": "#E9EEF2",
      "secondary-foreground": "#111111",
      "muted": "#5F625D",
      "muted-foreground": "#20211F",
      "accent": "#C7F04B",
      "accent-foreground": "#111111",
      "destructive": "#9B312C",
      "border": "#20211F",
      "input": "#20211F",
      "ring": "#C7F04B",
      "chart-1": "#2431A5",
      "chart-2": "#E9EEF2",
      "chart-3": "#C7F04B",
      "chart-4": "#326B4B",
      "chart-5": "#856012",
      "sidebar": "#FEFCF6",
      "sidebar-foreground": "#20211F",
      "sidebar-primary": "#2431A5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F579E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#20211F",
      "sidebar-ring": "#C7F04B",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2431A5",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C7F04B",
      "accent-foreground": "#111111",
      "destructive": "#9B312C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C7F04B",
      "chart-1": "#2431A5",
      "chart-2": "#E9EEF2",
      "chart-3": "#C7F04B",
      "chart-4": "#326B4B",
      "chart-5": "#856012",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2431A5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C7F04B",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C7F04B",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "rail-ledger-product-ui",
    "slug": "rail-ledger-product-ui",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "focus",
        "none",
        "panel",
        "pill"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "data_tracking",
        "display_line_height",
        "display_tracking",
        "fallback_strategy",
        "google_fonts_url",
        "heading_font",
        "label_line_height",
        "label_tracking",
        "letter_spacing",
        "line_height",
        "measure",
        "mono_font",
        "rationale",
        "scale_ratio",
        "ui_font"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · rail-ledger-product-ui

DESIGN.md

at a glance

Palette

Typography

headline-lgCormorant Garamond · 29px · 700

The quick brown fox jumps

headline-mdCormorant Garamond · 24px · 600

The quick brown fox jumps

body-mdAtkinson Hyperlegible · 16px · 400

The quick brown fox jumps

label-mdJetBrains Mono · 12px · 600

The quick brown fox jumps

Components

New

Card title

Components rendered with this language’s tokens — colors, type, and rounded corners as specified.

Spacing

base8px
xs4px
sm6px
md8px
lg12px
xl16px
2xl24px
3xl32px
4xl48px
step-864px
step-972px
step-1096px

Shape

focus0px

none0px

panel0px

pill9999px

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

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.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #F7F3EA;
  --foreground: #20211F;
  --card: #FEFCF6;
  --card-foreground: #20211F;
  --popover: #FEFCF6;
  --popover-foreground: #20211F;
  --primary: #2431A5;
  --primary-foreground: #ffffff;
  --secondary: #E9EEF2;
  --secondary-foreground: #111111;
  --muted: #5F625D;
  --muted-foreground: #20211F;
  --accent: #C7F04B;
  --accent-foreground: #111111;
  --destructive: #9B312C;
  --border: #20211F;
  --input: #20211F;
  --ring: #C7F04B;
  --chart-1: #2431A5;
  --chart-2: #E9EEF2;
  --chart-3: #C7F04B;
  --chart-4: #326B4B;
  --chart-5: #856012;
  --sidebar: #FEFCF6;
  --sidebar-foreground: #20211F;
  --sidebar-primary: #2431A5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2F579E;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #20211F;
  --sidebar-ring: #C7F04B;
  --radius: 0.625rem;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #2431A5;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C7F04B;
  --accent-foreground: #111111;
  --destructive: #9B312C;
  --border: #303642;
  --input: #303642;
  --ring: #C7F04B;
  --chart-1: #2431A5;
  --chart-2: #E9EEF2;
  --chart-3: #C7F04B;
  --chart-4: #326B4B;
  --chart-5: #856012;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #2431A5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C7F04B;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #C7F04B;
  --radius: 0.625rem;
}

tsx starter

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 RailLedgerProductUiShadcnKit() {
  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">Rail Ledger Product UI</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>
  );
}

theme JSONcompatibility fallback

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rail-ledger-product-ui",
  "type": "registry:theme",
  "title": "Rail Ledger Product UI shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F3EA",
      "foreground": "#20211F",
      "card": "#FEFCF6",
      "card-foreground": "#20211F",
      "popover": "#FEFCF6",
      "popover-foreground": "#20211F",
      "primary": "#2431A5",
      "primary-foreground": "#ffffff",
      "secondary": "#E9EEF2",
      "secondary-foreground": "#111111",
      "muted": "#5F625D",
      "muted-foreground": "#20211F",
      "accent": "#C7F04B",
      "accent-foreground": "#111111",
      "destructive": "#9B312C",
      "border": "#20211F",
      "input": "#20211F",
      "ring": "#C7F04B",
      "chart-1": "#2431A5",
      "chart-2": "#E9EEF2",
      "chart-3": "#C7F04B",
      "chart-4": "#326B4B",
      "chart-5": "#856012",
      "sidebar": "#FEFCF6",
      "sidebar-foreground": "#20211F",
      "sidebar-primary": "#2431A5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F579E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#20211F",
      "sidebar-ring": "#C7F04B",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2431A5",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C7F04B",
      "accent-foreground": "#111111",
      "destructive": "#9B312C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C7F04B",
      "chart-1": "#2431A5",
      "chart-2": "#E9EEF2",
      "chart-3": "#C7F04B",
      "chart-4": "#326B4B",
      "chart-5": "#856012",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2431A5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C7F04B",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C7F04B",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "rail-ledger-product-ui",
    "slug": "rail-ledger-product-ui",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "focus",
        "none",
        "panel",
        "pill"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "data_tracking",
        "display_line_height",
        "display_tracking",
        "fallback_strategy",
        "google_fonts_url",
        "heading_font",
        "label_line_height",
        "label_tracking",
        "letter_spacing",
        "line_height",
        "measure",
        "mono_font",
        "rationale",
        "scale_ratio",
        "ui_font"
      ]
    }
  }
}

component recipescompatibility fallback

# Rail Ledger Product UI shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `rail-ledger-product-ui`
Slug: `rail-ledger-product-ui`

## Intent

Rail Ledger Product UI is a refined consumer SaaS and operations-system language for products that must feel calm, trustworthy, and warm while carrying dense operational information. It borrows the composure of an editorial ledger, the discipline of public-service interface typography, and a single cobalt signal used only when action or status needs attention.

## 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:

{
  "accent": "#C7F04B",
  "background": "#F7F3EA",
  "border": "#20211F",
  "error": "#9B312C",
  "info": "#2F579E",
  "muted": "#5F625D",
  "primary": "#2431A5",
  "secondary": "#E9EEF2",
  "success": "#326B4B",
  "surface": "#FEFCF6",
  "text": "#20211F",
  "warning": "#856012"
}

Typography:

{
  "base_size": "16px",
  "body_font": "Atkinson Hyperlegible",
  "data_tracking": "-0.01em",
  "display_line_height": 1.12,
  "display_tracking": "-0.035em",
  "fallback_strategy": "Display falls back to Georgia, Times New Roman, serif; UI falls back to Arial, Helvetica, sans-serif; mono falls back to ui-monospace, SFMono-Regular, Menlo, Consolas, monospace.",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap",
  "heading_font": "Cormorant Garamond",
  "label_line_height": 1.25,
  "label_tracking": "0.06em",
  "letter_spacing": "-0.02em",
  "line_height": 1.55,
  "measure": "Body copy maxes at 66ch; dense table labels max at 18ch before wrapping; numeric columns use tabular figures and right alignment.",
  "mono_font": "JetBrains Mono",
  "rationale": "Cormorant Garamond supplies a sparse refined editorial voice for product moments, while Atkinson Hyperlegible protects app controls, labels, dense rows, and metadata from decorative fragility.",
  "scale_ratio": 1.22,
  "ui_font": "Atkinson Hyperlegible"
}

## Visual character to preserve

- A 4px cobalt ledger rail appears as a separate square inset bar on selected panels, navigation items, and active table rows rather than decorative icons or rounded border-left crescents.
- Panels use flat squared bodies with two small clipped diagonal notches via clip-path polygon and near-invisible rgba borders; only status chips may use 9999px pill radius.
- Dense information appears in ruled rows with 44px minimum height, tabular numerals, small uppercase labels at 0.06em tracking, and source-note captions below data.
- The page alternates one spacious editorial serif header with a compact sans workbench, using large section gaps of 72px and tight label clusters of 6px.
- Cobalt appears as hairline rails, focus rings, and one primary button only; all other surfaces remain cream, charcoal, and cool blue-grey tint.

## ShadSync visual profile

{
  "family": "editorial",
  "material": "flat",
  "contour": "pebble",
  "border": "solid",
  "underlay": true,
  "grain": false,
  "stickerBadges": false,
  "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/rail-ledger-product-ui/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: Pair a sparse Cormorant Garamond display moment with Atkinson Hyperlegible for all dense product UI.; Reserve cobalt for left rails, focus rings, selected rows, and one primary action per view.; Use readable 15-16px body text, 12-13px labels with sufficient contrast, and tabular figures for times, counts, and money.; Make one panel or table dominant; use secondary panels as annotations rather than equal stat cards.; Use near-invisible borders and clipped notches as the signature surface treatment.; Write captions, source notes, and metadata as real content with accessible charcoal or muted contrast.; Keep the citrus accent as a small acknowledgement or success marker only.
- Do not: Do not use gradients, mesh backgrounds, glow, pulsing dots, or gradient keyword emphasis.; Do not create unrelated icon bento boxes or nested rounded statistics cards.; Do not set small metadata in low-contrast pale grey or reduce dense table text below product-usable sizes.; Do not rely on Cormorant for controls, tables, nav, or labels; it is display only.; Do not use three equal cards in a row; break scale or hierarchy every time.; Do not flood surfaces with cobalt; if more than one large blue block appears, the language is being misused.; Do not replace the ledger rail with generic outline cards or soft shadow-only SaaS panels.

## 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 RailLedgerProductUiShadcnKit() {
  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">Rail Ledger Product UI</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

{
  "breakpoints": "1440 desktop full shell; 768 tablet collapses side brief under the table with spine retained; 375 mobile converts spine to top rail and stacks panels with preserved table horizontal scroll.",
  "density": "Optimized for real app use: compact controls and tables are allowed, but text remains 15-16px, rows preserve touchable height, and metadata avoids low-contrast grey-on-grey.",
  "grid": "Desktop uses a 72px left spine plus a 12-column content grid at max-width 1260px with 24px gutters; the main workbench spans 8 columns and the side brief spans 4.",
  "responsive": "Never shrink text below 15px; tables may scroll horizontally; serif headline reduces size and line length on mobile while controls remain legible.",
  "whitespace": "Use a strong 8:1 rhythm: 6px label gaps, 16px related control gaps, 32px panel padding, 72px header-to-workbench distance, and 96px outer breathing room on large screens."
}

preview shotscompatibility fallback

{
  "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": "rail-ledger-product-ui",
    "name": "Rail Ledger Product UI",
    "slug": "rail-ledger-product-ui"
  },
  "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": [
    "A 4px cobalt ledger rail appears as a separate square inset bar on selected panels, navigation items, and active table rows rather than decorative icons or rounded border-left crescents.",
    "Panels use flat squared bodies with two small clipped diagonal notches via clip-path polygon and near-invisible rgba borders; only status chips may use 9999px pill radius.",
    "Dense information appears in ruled rows with 44px minimum height, tabular numerals, small uppercase labels at 0.06em tracking, and source-note captions below data.",
    "The page alternates one spacious editorial serif header with a compact sans workbench, using large section gaps of 72px and tight label clusters of 6px.",
    "Cobalt appears as hairline rails, focus rings, and one primary button only; all other surfaces remain cream, charcoal, and cool blue-grey tint."
  ],
  "visualProfile": {
    "family": "editorial",
    "material": "flat",
    "contour": "pebble",
    "border": "solid",
    "underlay": true,
    "grain": false,
    "stickerBadges": false,
    "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": "Rail Ledger Product UI 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": [
      "Pair a sparse Cormorant Garamond display moment with Atkinson Hyperlegible for all dense product UI.",
      "Reserve cobalt for left rails, focus rings, selected rows, and one primary action per view.",
      "Use readable 15-16px body text, 12-13px labels with sufficient contrast, and tabular figures for times, counts, and money.",
      "Make one panel or table dominant; use secondary panels as annotations rather than equal stat cards.",
      "Use near-invisible borders and clipped notches as the signature surface treatment.",
      "Write captions, source notes, and metadata as real content with accessible charcoal or muted contrast.",
      "Keep the citrus accent as a small acknowledgement or success marker only."
    ],
    "dont": [
      "Do not use gradients, mesh backgrounds, glow, pulsing dots, or gradient keyword emphasis.",
      "Do not create unrelated icon bento boxes or nested rounded statistics cards.",
      "Do not set small metadata in low-contrast pale grey or reduce dense table text below product-usable sizes.",
      "Do not rely on Cormorant for controls, tables, nav, or labels; it is display only.",
      "Do not use three equal cards in a row; break scale or hierarchy every time.",
      "Do not flood surfaces with cobalt; if more than one large blue block appears, the language is being misused.",
      "Do not replace the ledger rail with generic outline cards or soft shadow-only SaaS panels."
    ]
  }
}

More like this

Aperture Ledgershares tabular-numerals Gouache System Glassshares product-ui Ledgerline Editorial Systemsshares accessible-typography Ledgerline Paper Shellshares organized-taxonomy-v1 Signal Slate Operationsshares tabular-numerals