design language·katagami-margin-aperture

Katagami Margin

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

Draft

Download DESIGN.md

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

the spec

specification

philosophy

summary

Katagami Margin is a precise editorial interface language for text-heavy AI/context products: the page feels cut from one warm sheet, with context revealed through apertures, rails, notches, and scholarly margins instead of floating SaaS cards.

values

Cut-paper structure: surfaces behave like one continuous sheet with carved openings for context and evidence.Editorial calm: long text, source notes, and constraints are given generous measure, rigorous alignment, and warm paper contrast.Semantic restraint: indigo, vermilion, and moss accents carry state meaning through tiny physical marks rather than decorative fills.Context weaving: related notes, retrieval traces, and data inserts connect through margin rules and thread lines.

anti-values

×Generic dashboard density with equal KPI tiles, bubbly rounded cards, heavy gradients, or decorative glass effects.×Literal Japanese ornament that overwhelms product content or places texture behind dense reading text.×Unstructured white SaaS minimalism where hierarchy depends only on card shadows and default component spacing.

tokens

borders4 items

accent width: 2px
character: hairline fiber borders interrupted by short semantic rule segments and clipped-corner notches
default width: 1px
style: solid

colors12 items

accent

#B84A32

background

#FBF7EF

border

#D8CDBB

error

#B84A32

info

#264D73

muted

#666058

primary

#264D73

secondary

#D8CDBB

success

#697A45

surface

#FFFDF8

text

#22211F

warning

#B77A2B

motion3 items

duration: 160ms
easing: cubic-bezier(.2,.7,.2,1)
philosophy: Motion is crisp and paper-like: aperture reveals, underline growth, and small pin shifts only; no bouncy easing or parallax.

radii5 items

full: 9999px
lg: 6px
md: 4px
none: 0
sm: 2px

shadows3 items

lg: 0 24px 60px rgba(36,31,25,.12)
md: inset 8px 0 0 rgba(36,31,25,.035), 0 10px 24px rgba(36,31,25,.08)
sm: inset 0 0 0 1px rgba(36,31,25,.07), 0 1px 0 rgba(36,31,25,.05)

spacing2 items

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

surfaces3 items

bg pattern: 8px repeating linear-gradient paper fibers at 3% opacity; reserved for gutters, dividers, and empty-state stencil bands.
card style: Nearly square panels with one clipped corner, 1px fiber border, tiny accent notch, and inset cut-shadow instead of floating elevation.
treatment: Warm paper fields with carved aperture panels, low-contrast fiber texture outside body copy, and white sheet inserts for active composition areas.

typography8 items

base size: 16px
body font: Inter
google fonts url: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=IBM+Plex+Mono:wght@400;500&display=swap
heading font: Newsreader
letter spacing: -0.011em
line height: 1.58
mono font: IBM Plex Mono
scale ratio: 1.2

rules

composition

Compose screens as a central reading sheet with explicit margin tracks for sources, constraints, and data inserts; dashboards must sit inside the page as annotated inserts, not as independent tile grids.

density

Medium density for research and AI work: high information count is acceptable only when grouped into readable page blocks with quiet gutters and visible thread relationships.

hierarchy

Hierarchy comes from column width, rule weight, clipped apertures, type size, and semantic notches; headings stay compact while body copy receives the most comfortable line height and measure.

signature patterns

Aperture cards use clip-path polygon corners plus an inset left shadow to make panels feel carved from the paper sheet rather than layered above it.Semantic state is expressed with tiny corner pins, 2px rule fragments, and notched text chips mapped consistently to indigo, vermilion, and moss.Margin thread rails connect source notes with vertical border lines and diamond knots, while related central paragraphs carry matching inline underline cuts.Tables and metric strips are treated as page inserts with tall rows, minimal vertical rules, tabular numerals, and a paper-toned header band.Micro-pattern stencil bands appear only in dividers and empty-state gutters using repeating gradients, preserving clean backgrounds behind long-form text.

layout

breakpoints

mobile <= 640px stacks all rails inline; tablet 641px-980px keeps a single context rail below the reading header; desktop >= 981px restores flanking scholarly margins.

density

Prefer one dominant reading/composer column plus two or three context apertures per viewport; never fill every grid cell with equal cards.

grid

Desktop uses a 12-column page grid: 220px left margin rail, minmax(560px, 760px) reading column, 300px right context rail, with 24px gutters and a max shell width near 1320px.

whitespace

Whitespace is functional and editorial: outer margins stay generous, paragraph rhythm is open, and dense data appears only inside bounded inserts separated by quiet paper gutters.

guidance

Use warm whites, graphite text, and fiber borders to make text-heavy AI work feel calm and precise.
Place retrieval snippets, constraints, and source metadata in margin apertures with visible thread relationships to central content.
Use indigo for active context, vermilion for review attention, moss for accepted/resolved states, and amber only for temporal warnings.
Clip one corner or notch one edge on important panels so the stencil logic remains visible across components.
Keep data views editorial: tables, timelines, and metrics should be annotated inserts rather than a separate dashboard cockpit.

avoid

Do not use rounded bubbly SaaS cards, heavy drop shadows, frosted glass, neon gradients, or generic dashboard KPI grids.
Do not place dense katagami micro-patterns behind body text or use literal ornament as the main identity.
Do not rely on large colored fills for state; preserve semantic accents as small rules, pins, notches, and underlines.
Do not center everything in a plain white column without margin context; the language depends on side apertures and thread rails.

katagami spec

# Katagami Margin

## Philosophy

### Values

- Cut-paper structure: surfaces behave like one continuous sheet with carved openings for context and evidence.
- Editorial calm: long text, source notes, and constraints are given generous measure, rigorous alignment, and warm paper contrast.
- Semantic restraint: indigo, vermilion, and moss accents carry state meaning through tiny physical marks rather than decorative fills.
- Context weaving: related notes, retrieval traces, and data inserts connect through margin rules and thread lines.

### Anti-Values

- Generic dashboard density with equal KPI tiles, bubbly rounded cards, heavy gradients, or decorative glass effects.
- Literal Japanese ornament that overwhelms product content or places texture behind dense reading text.
- Unstructured white SaaS minimalism where hierarchy depends only on card shadows and default component spacing.

### Visual Character

- Primary layout uses a fixed readable article column flanked by left and right CSS grid margin tracks; context panels occupy the margin tracks and snap inline below 860px.
- Panels use clipped polygon corner notches, square 2px radii, and inset cut shadows so they read as apertures carved out of a continuous paper canvas.
- Selected and urgent states appear as 2px accent rule segments, corner pins, and underline cuts rather than colored containers or filled badges.
- A subtle repeating linear-gradient fiber texture is limited to outer canvas and empty separators, never placed directly beneath paragraph copy.
- Threads between notes are drawn with thin vertical border rules and small diamond knots, making related context feel woven through the page margin.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: hairline fiber borders interrupted by short semantic rule segments and clipped-corner notches
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#B84A32` |
| background | `#FBF7EF` |
| border | `#D8CDBB` |
| error | `#B84A32` |
| info | `#264D73` |
| muted | `#666058` |
| primary | `#264D73` |
| secondary | `#D8CDBB` |
| success | `#697A45` |
| surface | `#FFFDF8` |
| text | `#22211F` |
| warning | `#B77A2B` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: Motion is crisp and paper-like: aperture reveals, underline growth, and small pin shifts only; no bouncy easing or parallax.

### Radii

- **Full**: 9999px
- **Lg**: 6px
- **Md**: 4px
- **None**: 0
- **Sm**: 2px

### Shadows

- **Lg**: 0 24px 60px rgba(36,31,25,.12)
- **Md**: inset 8px 0 0 rgba(36,31,25,.035), 0 10px 24px rgba(36,31,25,.08)
- **Sm**: inset 0 0 0 1px rgba(36,31,25,.07), 0 1px 0 rgba(36,31,25,.05)

### Spacing

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

### Surfaces

- **Bg Pattern**: 8px repeating linear-gradient paper fibers at 3% opacity; reserved for gutters, dividers, and empty-state stencil bands.
- **Card Style**: Nearly square panels with one clipped corner, 1px fiber border, tiny accent notch, and inset cut-shadow instead of floating elevation.
- **Treatment**: Warm paper fields with carved aperture panels, low-contrast fiber texture outside body copy, and white sheet inserts for active composition areas.

### Typography

- **Base Size**: 16px
- **Body Font**: Inter
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=IBM+Plex+Mono:wght@400;500&display=swap
- **Heading Font**: Newsreader
- **Letter Spacing**: -0.011em
- **Line Height**: 1.58
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.2

## Rules

### Composition

Compose screens as a central reading sheet with explicit margin tracks for sources, constraints, and data inserts; dashboards must sit inside the page as annotated inserts, not as independent tile grids.

### Density

Medium density for research and AI work: high information count is acceptable only when grouped into readable page blocks with quiet gutters and visible thread relationships.

### Hierarchy

Hierarchy comes from column width, rule weight, clipped apertures, type size, and semantic notches; headings stay compact while body copy receives the most comfortable line height and measure.

### Signature Patterns

- Aperture cards use clip-path polygon corners plus an inset left shadow to make panels feel carved from the paper sheet rather than layered above it.
- Semantic state is expressed with tiny corner pins, 2px rule fragments, and notched text chips mapped consistently to indigo, vermilion, and moss.
- Margin thread rails connect source notes with vertical border lines and diamond knots, while related central paragraphs carry matching inline underline cuts.
- Tables and metric strips are treated as page inserts with tall rows, minimal vertical rules, tabular numerals, and a paper-toned header band.
- Micro-pattern stencil bands appear only in dividers and empty-state gutters using repeating gradients, preserving clean backgrounds behind long-form text.

## Layout

### Breakpoints

mobile <= 640px stacks all rails inline; tablet 641px-980px keeps a single context rail below the reading header; desktop >= 981px restores flanking scholarly margins.

### Density

Prefer one dominant reading/composer column plus two or three context apertures per viewport; never fill every grid cell with equal cards.

### Grid

Desktop uses a 12-column page grid: 220px left margin rail, minmax(560px, 760px) reading column, 300px right context rail, with 24px gutters and a max shell width near 1320px.

### Whitespace

Whitespace is functional and editorial: outer margins stay generous, paragraph rhythm is open, and dense data appears only inside bounded inserts separated by quiet paper gutters.

## Guidance

### Do

- Use warm whites, graphite text, and fiber borders to make text-heavy AI work feel calm and precise.
- Place retrieval snippets, constraints, and source metadata in margin apertures with visible thread relationships to central content.
- Use indigo for active context, vermilion for review attention, moss for accepted/resolved states, and amber only for temporal warnings.
- Clip one corner or notch one edge on important panels so the stencil logic remains visible across components.
- Keep data views editorial: tables, timelines, and metrics should be annotated inserts rather than a separate dashboard cockpit.

### Don't

- Do not use rounded bubbly SaaS cards, heavy drop shadows, frosted glass, neon gradients, or generic dashboard KPI grids.
- Do not place dense katagami micro-patterns behind body text or use literal ornament as the main identity.
- Do not rely on large colored fills for state; preserve semantic accents as small rules, pins, notches, and underlines.
- Do not center everything in a plain white column without margin context; the language depends on side apertures and thread rails.

### Accessibility

Maintain WCAG AA contrast for graphite and muted text on paper, keep body copy at 16px or above, ensure notch/pin states are paired with labels or icons, and keep focus rings visible with indigo outlines.

### Usage Context

Best for AI answer composition, research synthesis, source review, context-heavy writing, scholarly products, and calm data inserts where text is the primary work surface.

DESIGN.md

---
version: "alpha"
name: "Katagami Margin"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#B84A32"
  background: "#FBF7EF"
  border: "#D8CDBB"
  error: "#B84A32"
  info: "#264D73"
  muted: "#666058"
  primary: "#264D73"
  secondary: "#D8CDBB"
  success: "#697A45"
  surface: "#FFFDF8"
  text: "#22211F"
  warning: "#B77A2B"
typography:
  headline-lg:
    fontFamily: "Newsreader"
    fontSize: "1.728rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.011em"
  headline-md:
    fontFamily: "Newsreader"
    fontSize: "1.44rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.011em"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: "-0.011em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "6px"
  md: "4px"
  none: "0px"
  sm: "2px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
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.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"
---

# Katagami Margin

## Overview

Katagami Margin is a precise editorial interface language for text-heavy AI/context products: the page feels cut from one warm sheet, with context revealed through apertures, rails, notches, and scholarly margins instead of floating SaaS cards.

### Values

- Cut-paper structure: surfaces behave like one continuous sheet with carved openings for context and evidence.
- Editorial calm: long text, source notes, and constraints are given generous measure, rigorous alignment, and warm paper contrast.
- Semantic restraint: indigo, vermilion, and moss accents carry state meaning through tiny physical marks rather than decorative fills.
- Context weaving: related notes, retrieval traces, and data inserts connect through margin rules and thread lines.

### Anti-Values

- Generic dashboard density with equal KPI tiles, bubbly rounded cards, heavy gradients, or decorative glass effects.
- Literal Japanese ornament that overwhelms product content or places texture behind dense reading text.
- Unstructured white SaaS minimalism where hierarchy depends only on card shadows and default component spacing.

### Visual Character

- Primary layout uses a fixed readable article column flanked by left and right CSS grid margin tracks; context panels occupy the margin tracks and snap inline below 860px.
- Panels use clipped polygon corner notches, square 2px radii, and inset cut shadows so they read as apertures carved out of a continuous paper canvas.
- Selected and urgent states appear as 2px accent rule segments, corner pins, and underline cuts rather than colored containers or filled badges.
- A subtle repeating linear-gradient fiber texture is limited to outer canvas and empty separators, never placed directly beneath paragraph copy.
- Threads between notes are drawn with thin vertical border rules and small diamond knots, making related context feel woven through the page margin.

## 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 | `#B84A32` |
| background | `#FBF7EF` |
| border | `#D8CDBB` |
| error | `#B84A32` |
| info | `#264D73` |
| muted | `#666058` |
| primary | `#264D73` |
| secondary | `#D8CDBB` |
| success | `#697A45` |
| surface | `#FFFDF8` |
| text | `#22211F` |
| warning | `#B77A2B` |

## Typography

- **Headline-Lg**: Newsreader, 1.728rem, weight 700, line-height 1.1.
- **Headline-Md**: Newsreader, 1.44rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 16px, weight 400, line-height 1.58.
- **Label-Md**: IBM Plex 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`

### Breakpoints

mobile <= 640px stacks all rails inline; tablet 641px-980px keeps a single context rail below the reading header; desktop >= 981px restores flanking scholarly margins.

### Density

Prefer one dominant reading/composer column plus two or three context apertures per viewport; never fill every grid cell with equal cards.

### Grid

Desktop uses a 12-column page grid: 220px left margin rail, minmax(560px, 760px) reading column, 300px right context rail, with 24px gutters and a max shell width near 1320px.

### Whitespace

Whitespace is functional and editorial: outer margins stay generous, paragraph rhythm is open, and dense data appears only inside bounded inserts separated by quiet paper gutters.

## Elevation & Depth

### Shadows

- **Lg**: 0 24px 60px rgba(36,31,25,.12)
- **Md**: inset 8px 0 0 rgba(36,31,25,.035), 0 10px 24px rgba(36,31,25,.08)
- **Sm**: inset 0 0 0 1px rgba(36,31,25,.07), 0 1px 0 rgba(36,31,25,.05)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `6px`
- **Md**: `4px`
- **None**: `0px`
- **Sm**: `2px`

### Surfaces

- **Bg Pattern**: 8px repeating linear-gradient paper fibers at 3% opacity; reserved for gutters, dividers, and empty-state stencil bands.
- **Card Style**: Nearly square panels with one clipped corner, 1px fiber border, tiny accent notch, and inset cut-shadow instead of floating elevation.
- **Treatment**: Warm paper fields with carved aperture panels, low-contrast fiber texture outside body copy, and white sheet inserts for active composition areas.

### Borders

- **Accent Width**: 2px
- **Character**: hairline fiber borders interrupted by short semantic rule segments and clipped-corner notches
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Compose screens as a central reading sheet with explicit margin tracks for sources, constraints, and data inserts; dashboards must sit inside the page as annotated inserts, not as independent tile grids.

### Density

Medium density for research and AI work: high information count is acceptable only when grouped into readable page blocks with quiet gutters and visible thread relationships.

### Hierarchy

Hierarchy comes from column width, rule weight, clipped apertures, type size, and semantic notches; headings stay compact while body copy receives the most comfortable line height and measure.

### Signature Patterns

- Aperture cards use clip-path polygon corners plus an inset left shadow to make panels feel carved from the paper sheet rather than layered above it.
- Semantic state is expressed with tiny corner pins, 2px rule fragments, and notched text chips mapped consistently to indigo, vermilion, and moss.
- Margin thread rails connect source notes with vertical border lines and diamond knots, while related central paragraphs carry matching inline underline cuts.
- Tables and metric strips are treated as page inserts with tall rows, minimal vertical rules, tabular numerals, and a paper-toned header band.
- Micro-pattern stencil bands appear only in dividers and empty-state gutters using repeating gradients, preserving clean backgrounds behind long-form text.

## 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-019ee03b-5a28-7e80-9f84-d35f2f6138fe/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 Use warm whites, graphite text, and fiber borders to make text-heavy AI work feel calm and precise.
- Do Place retrieval snippets, constraints, and source metadata in margin apertures with visible thread relationships to central content.
- Do Use indigo for active context, vermilion for review attention, moss for accepted/resolved states, and amber only for temporal warnings.
- Do Clip one corner or notch one edge on important panels so the stencil logic remains visible across components.
- Do Keep data views editorial: tables, timelines, and metrics should be annotated inserts rather than a separate dashboard cockpit.
- Don't Do not use rounded bubbly SaaS cards, heavy drop shadows, frosted glass, neon gradients, or generic dashboard KPI grids.
- Don't Do not place dense katagami micro-patterns behind body text or use literal ornament as the main identity.
- Don't Do not rely on large colored fills for state; preserve semantic accents as small rules, pins, notches, and underlines.
- Don't Do not center everything in a plain white column without margin context; the language depends on side apertures and thread rails.

### Accessibility

Maintain WCAG AA contrast for graphite and muted text on paper, keep body copy at 16px or above, ensure notch/pin states are paired with labels or icons, and keep focus rings visible with indigo outlines.

### Usage Context

Best for AI answer composition, research synthesis, source review, context-heavy writing, scholarly products, and calm data inserts where text is the primary work surface.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "katagami-margin-aperture",
  "type": "registry:theme",
  "title": "Katagami Margin shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FBF7EF",
      "foreground": "#22211F",
      "card": "#FFFDF8",
      "card-foreground": "#22211F",
      "popover": "#FFFDF8",
      "popover-foreground": "#22211F",
      "primary": "#264D73",
      "primary-foreground": "#ffffff",
      "secondary": "#D8CDBB",
      "secondary-foreground": "#111111",
      "muted": "#666058",
      "muted-foreground": "#22211F",
      "accent": "#B84A32",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A32",
      "border": "#D8CDBB",
      "input": "#D8CDBB",
      "ring": "#B84A32",
      "chart-1": "#264D73",
      "chart-2": "#D8CDBB",
      "chart-3": "#B84A32",
      "chart-4": "#697A45",
      "chart-5": "#B77A2B",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#22211F",
      "sidebar-primary": "#264D73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#264D73",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8CDBB",
      "sidebar-ring": "#B84A32",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#264D73",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B84A32",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A32",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B84A32",
      "chart-1": "#264D73",
      "chart-2": "#D8CDBB",
      "chart-3": "#B84A32",
      "chart-4": "#697A45",
      "chart-5": "#B77A2B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#264D73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B84A32",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B84A32",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ee03b-5a28-7e80-9f84-d35f2f6138fe",
    "slug": "katagami-margin-aperture",
    "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": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · katagami-margin-aperture

DESIGN.md

at a glance

Palette

Typography

headline-lgNewsreader · 28px · 700

The quick brown fox jumps

headline-mdNewsreader · 23px · 600

The quick brown fox jumps

body-mdInter · 16px · 400

The quick brown fox jumps

label-mdIBM Plex 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
sm8px
md12px
lg16px
xl24px
2xl32px
3xl48px
4xl64px

Shape

full9999px

lg6px

md4px

none0px

sm2px

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.

primaryaccentsurfacemutedwarning

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: #FBF7EF;
  --foreground: #22211F;
  --card: #FFFDF8;
  --card-foreground: #22211F;
  --popover: #FFFDF8;
  --popover-foreground: #22211F;
  --primary: #264D73;
  --primary-foreground: #ffffff;
  --secondary: #D8CDBB;
  --secondary-foreground: #111111;
  --muted: #666058;
  --muted-foreground: #22211F;
  --accent: #B84A32;
  --accent-foreground: #ffffff;
  --destructive: #B84A32;
  --border: #D8CDBB;
  --input: #D8CDBB;
  --ring: #B84A32;
  --chart-1: #264D73;
  --chart-2: #D8CDBB;
  --chart-3: #B84A32;
  --chart-4: #697A45;
  --chart-5: #B77A2B;
  --sidebar: #FFFDF8;
  --sidebar-foreground: #22211F;
  --sidebar-primary: #264D73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #264D73;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8CDBB;
  --sidebar-ring: #B84A32;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #264D73;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B84A32;
  --accent-foreground: #ffffff;
  --destructive: #B84A32;
  --border: #303642;
  --input: #303642;
  --ring: #B84A32;
  --chart-1: #264D73;
  --chart-2: #D8CDBB;
  --chart-3: #B84A32;
  --chart-4: #697A45;
  --chart-5: #B77A2B;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #264D73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #B84A32;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #B84A32;
  --radius: 4px;
}

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 KatagamiMarginShadcnKit() {
  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">Katagami Margin</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": "katagami-margin-aperture",
  "type": "registry:theme",
  "title": "Katagami Margin shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FBF7EF",
      "foreground": "#22211F",
      "card": "#FFFDF8",
      "card-foreground": "#22211F",
      "popover": "#FFFDF8",
      "popover-foreground": "#22211F",
      "primary": "#264D73",
      "primary-foreground": "#ffffff",
      "secondary": "#D8CDBB",
      "secondary-foreground": "#111111",
      "muted": "#666058",
      "muted-foreground": "#22211F",
      "accent": "#B84A32",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A32",
      "border": "#D8CDBB",
      "input": "#D8CDBB",
      "ring": "#B84A32",
      "chart-1": "#264D73",
      "chart-2": "#D8CDBB",
      "chart-3": "#B84A32",
      "chart-4": "#697A45",
      "chart-5": "#B77A2B",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#22211F",
      "sidebar-primary": "#264D73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#264D73",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8CDBB",
      "sidebar-ring": "#B84A32",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#264D73",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B84A32",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A32",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B84A32",
      "chart-1": "#264D73",
      "chart-2": "#D8CDBB",
      "chart-3": "#B84A32",
      "chart-4": "#697A45",
      "chart-5": "#B77A2B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#264D73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B84A32",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B84A32",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ee03b-5a28-7e80-9f84-d35f2f6138fe",
    "slug": "katagami-margin-aperture",
    "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": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

component recipescompatibility fallback

# Katagami Margin shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ee03b-5a28-7e80-9f84-d35f2f6138fe`
Slug: `katagami-margin-aperture`

## Intent

Katagami Margin is a precise editorial interface language for text-heavy AI/context products: the page feels cut from one warm sheet, with context revealed through apertures, rails, notches, and scholarly margins instead of floating SaaS cards.

## 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": "#B84A32",
  "background": "#FBF7EF",
  "border": "#D8CDBB",
  "error": "#B84A32",
  "info": "#264D73",
  "muted": "#666058",
  "primary": "#264D73",
  "secondary": "#D8CDBB",
  "success": "#697A45",
  "surface": "#FFFDF8",
  "text": "#22211F",
  "warning": "#B77A2B"
}

Typography:

{
  "base_size": "16px",
  "body_font": "Inter",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=IBM+Plex+Mono:wght@400;500&display=swap",
  "heading_font": "Newsreader",
  "letter_spacing": "-0.011em",
  "line_height": 1.58,
  "mono_font": "IBM Plex Mono",
  "scale_ratio": 1.2
}

## Visual character to preserve

- Primary layout uses a fixed readable article column flanked by left and right CSS grid margin tracks; context panels occupy the margin tracks and snap inline below 860px.
- Panels use clipped polygon corner notches, square 2px radii, and inset cut shadows so they read as apertures carved out of a continuous paper canvas.
- Selected and urgent states appear as 2px accent rule segments, corner pins, and underline cuts rather than colored containers or filled badges.
- A subtle repeating linear-gradient fiber texture is limited to outer canvas and empty separators, never placed directly beneath paragraph copy.
- Threads between notes are drawn with thin vertical border rules and small diamond knots, making related context feel woven through the page margin.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": true,
  "grain": true,
  "stickerBadges": true,
  "motion": "still",
  "density": "balanced",
  "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/katagami-margin-aperture/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: Use warm whites, graphite text, and fiber borders to make text-heavy AI work feel calm and precise.; Place retrieval snippets, constraints, and source metadata in margin apertures with visible thread relationships to central content.; Use indigo for active context, vermilion for review attention, moss for accepted/resolved states, and amber only for temporal warnings.; Clip one corner or notch one edge on important panels so the stencil logic remains visible across components.; Keep data views editorial: tables, timelines, and metrics should be annotated inserts rather than a separate dashboard cockpit.
- Do not: Do not use rounded bubbly SaaS cards, heavy drop shadows, frosted glass, neon gradients, or generic dashboard KPI grids.; Do not place dense katagami micro-patterns behind body text or use literal ornament as the main identity.; Do not rely on large colored fills for state; preserve semantic accents as small rules, pins, notches, and underlines.; Do not center everything in a plain white column without margin context; the language depends on side apertures and thread rails.

## 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 KatagamiMarginShadcnKit() {
  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">Katagami Margin</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": "mobile <= 640px stacks all rails inline; tablet 641px-980px keeps a single context rail below the reading header; desktop >= 981px restores flanking scholarly margins.",
  "density": "Prefer one dominant reading/composer column plus two or three context apertures per viewport; never fill every grid cell with equal cards.",
  "grid": "Desktop uses a 12-column page grid: 220px left margin rail, minmax(560px, 760px) reading column, 300px right context rail, with 24px gutters and a max shell width near 1320px.",
  "whitespace": "Whitespace is functional and editorial: outer margins stay generous, paragraph rhythm is open, and dense data appears only inside bounded inserts separated by quiet paper gutters."
}

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": "en-019ee03b-5a28-7e80-9f84-d35f2f6138fe",
    "name": "Katagami Margin",
    "slug": "katagami-margin-aperture"
  },
  "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": [
    "Primary layout uses a fixed readable article column flanked by left and right CSS grid margin tracks; context panels occupy the margin tracks and snap inline below 860px.",
    "Panels use clipped polygon corner notches, square 2px radii, and inset cut shadows so they read as apertures carved out of a continuous paper canvas.",
    "Selected and urgent states appear as 2px accent rule segments, corner pins, and underline cuts rather than colored containers or filled badges.",
    "A subtle repeating linear-gradient fiber texture is limited to outer canvas and empty separators, never placed directly beneath paragraph copy.",
    "Threads between notes are drawn with thin vertical border rules and small diamond knots, making related context feel woven through the page margin."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "motion": "still",
    "density": "balanced",
    "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": "Katagami Margin 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": [
      "Use warm whites, graphite text, and fiber borders to make text-heavy AI work feel calm and precise.",
      "Place retrieval snippets, constraints, and source metadata in margin apertures with visible thread relationships to central content.",
      "Use indigo for active context, vermilion for review attention, moss for accepted/resolved states, and amber only for temporal warnings.",
      "Clip one corner or notch one edge on important panels so the stencil logic remains visible across components.",
      "Keep data views editorial: tables, timelines, and metrics should be annotated inserts rather than a separate dashboard cockpit."
    ],
    "dont": [
      "Do not use rounded bubbly SaaS cards, heavy drop shadows, frosted glass, neon gradients, or generic dashboard KPI grids.",
      "Do not place dense katagami micro-patterns behind body text or use literal ornament as the main identity.",
      "Do not rely on large colored fills for state; preserve semantic accents as small rules, pins, notches, and underlines.",
      "Do not center everything in a plain white column without margin context; the language depends on side apertures and thread rails."
    ]
  }
}

More like this

Chapterglow Storyscapeshares cut-paper Chromatic Decision Labshares katagami Ledgerline Paper Shellshares editorial Storybook Collage Playshares cut-paper Storybook Orchard UIshares cut-paper Storybook Pagebeatshares cut-paper