design language·watershed-redirection-editorial-system

Watershed Redirection Editorial System

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

Watershed Redirection is an editorial product language for organizations turning climate evidence, cultural repair, and future-building commitments into legible decisions. Its palette provenance treats teal as civic responsibility, earth naturals as local material memory, urgent brights as intervention signals, and calming tints as recovery space rather than generic nature decoration.

values

Eco-accountability with named provenance for every color familyCultural redirection expressed through evidence-led editorial hierarchyAccessible contrast and non-color signifiers for risk, status, and priorityFuture-building optimism balanced by grounded repair materiality

anti-values

×Vague greenwashing or decorative nature symbolism×Color-only state communication without labels, icons, or structure×Generic white SaaS dashboards detached from place, repair, or cultural context

tokens

borders4 items

accent width: 4px
character: inked teal ledger rules, orange intervention ticks, and non-color labels for all states
default width: 1.5px
style: solid with occasional dashed provenance separators

colors12 items

accent

#FF5A1F

background

#F4EBDD

border

#185B55

error

#B42318

info

#155EEF

muted

#D8CCBA

primary

#006C67

secondary

#6E5B37

success

#087443

surface

#FFF7EA

text

#10201D

warning

#B26A00

motion3 items

duration: 160ms
easing: cubic-bezier(0.2, 0.8, 0.2, 1)
philosophy: small ledger-slide and stamp-settle movements; never watery drift or decorative environmental animation

radii5 items

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

shadows3 items

lg: 12px 12px 0 rgba(0,108,103,0.22)
md: 6px 6px 0 rgba(24,91,85,0.35)
sm: 3px 3px 0 #185B55

spacing2 items

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

surfaces3 items

bg pattern: subtle 24px grid plus offset watershed contour lines in low-contrast teal ink
card style: thin teal ledger borders, square top-left repair tabs, and occasional urgent stamp overlays
treatment: warm recycled-paper fields with pale aqua evidence tints and no glossy gradients

typography8 items

base size: 16px
body font: Atkinson Hyperlegible
google fonts url: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&family=Spline+Sans+Mono:wght@400;600;700&display=swap
heading font: Newsreader
letter spacing: -0.01em
line height: 1.55
mono font: Spline Sans Mono
scale ratio: 1.24

rules

composition

Build pages as editorial evidence rooms: a dark teal responsibility rail, one oversized serif headline, modular ledger cards, and cross-column provenance notes that connect visual accents to repair actions.

density

Moderately dense like a field office briefing: compact data rows and chips sit beside generous calm tint panels for interpretation and editorial pacing.

hierarchy

Lead with high-contrast text, large Newsreader headlines, mono eyebrow labels, and numbered intervention markers; color supports structure but never replaces labels, icons, or border weight.

signature patterns

Responsibility rail: a fixed-width dark teal column containing section numbers, source labels, and vertical rule bars that repeat through cards.Repair ledger cards: warm paper panels with 1.5px teal borders, clipped corner tabs, shadow offsets, and dashed provenance dividers.Intervention stamps: urgent bright badges rotated by one degree, always paired with a word label, icon glyph, or numeric priority marker.Calm-future tint fields: pale aqua or mist rectangles behind explanatory copy, outlined by dark text and dotted with small blue-green coordinate marks.

layout

breakpoints

Mobile 375px single-column with rail converted to top band; tablet 768px two-column evidence grid; desktop 1200px+ full 14-column composition.

grid

Desktop uses a 14-column editorial grid with a 112px responsibility rail, 24px gutters, and cards spanning asymmetric 4/5/6-column groupings.

whitespace

Use calm tint panels and 32-64px section gaps to let dense evidence breathe while keeping action rows compact and scannable.

guidance

Name palette provenance in captions, tooltips, or card metadata whenever colors carry cultural or environmental meaning.
Use teal structure, earth surfaces, urgent stamps, and calming tints in distinct roles so the system avoids generic nature symbolism.
Meet WCAG 2.2 contrast: 4.5:1 for normal text, 3:1 for large text, and aim for 7:1 on body copy where feasible.
Pair every status color with text, icons, border weight, or position because the system must not rely on color alone.

avoid

Do not use green gradients, leaf icons, or watery textures as shorthand for sustainability.
Do not place urgent orange or yellow behind small body text; use them as badges, rules, or large labeled signals.
Do not flatten the language into a generic dashboard; keep editorial provenance, ledger structure, and repair context visible.
Do not communicate success, warning, or error states by hue alone.

katagami spec

# Watershed Redirection Editorial System

## Philosophy

Watershed Redirection is an editorial product language for organizations turning climate evidence, cultural repair, and future-building commitments into legible decisions. Its palette provenance treats teal as civic responsibility, earth naturals as local material memory, urgent brights as intervention signals, and calming tints as recovery space rather than generic nature decoration.

### Values

- Eco-accountability with named provenance for every color family
- Cultural redirection expressed through evidence-led editorial hierarchy
- Accessible contrast and non-color signifiers for risk, status, and priority
- Future-building optimism balanced by grounded repair materiality

### Anti-Values

- Vague greenwashing or decorative nature symbolism
- Color-only state communication without labels, icons, or structure
- Generic white SaaS dashboards detached from place, repair, or cultural context

### Visual Character

- Use a dark blue-green command rail and repeated vertical rule bars to make Transformative Teal the structural anchor instead of a decorative swatch.
- Layer off-white clay surfaces with fine grid-line backgrounds, inset ledger panels, and square-torn card corners to imply local records and repair documentation.
- Reserve urgent orange, solar yellow, and magenta accents for stamped labels, progress notches, and numbered interventions paired with text or symbols.
- Place pale aqua, mist blue, and reed tint blocks behind explanatory copy so high-contrast text remains calm while the page carries a future-building atmosphere.

## Tokens

### Borders

- **Accent Width**: 4px
- **Character**: inked teal ledger rules, orange intervention ticks, and non-color labels for all states
- **Default Width**: 1.5px
- **Style**: solid with occasional dashed provenance separators

### Colors

| Name | Value |
|------|-------|
| accent | `#FF5A1F` |
| background | `#F4EBDD` |
| border | `#185B55` |
| error | `#B42318` |
| info | `#155EEF` |
| muted | `#D8CCBA` |
| primary | `#006C67` |
| secondary | `#6E5B37` |
| success | `#087443` |
| surface | `#FFF7EA` |
| text | `#10201D` |
| warning | `#B26A00` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: small ledger-slide and stamp-settle movements; never watery drift or decorative environmental animation

### Radii

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

### Shadows

- **Lg**: 12px 12px 0 rgba(0,108,103,0.22)
- **Md**: 6px 6px 0 rgba(24,91,85,0.35)
- **Sm**: 3px 3px 0 #185B55

### Spacing

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

### Surfaces

- **Bg Pattern**: subtle 24px grid plus offset watershed contour lines in low-contrast teal ink
- **Card Style**: thin teal ledger borders, square top-left repair tabs, and occasional urgent stamp overlays
- **Treatment**: warm recycled-paper fields with pale aqua evidence tints and no glossy gradients

### Typography

- **Base Size**: 16px
- **Body Font**: Atkinson Hyperlegible
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&family=Spline+Sans+Mono:wght@400;600;700&display=swap
- **Heading Font**: Newsreader
- **Letter Spacing**: -0.01em
- **Line Height**: 1.55
- **Mono Font**: Spline Sans Mono
- **Scale Ratio**: 1.24

## Rules

### Composition

Build pages as editorial evidence rooms: a dark teal responsibility rail, one oversized serif headline, modular ledger cards, and cross-column provenance notes that connect visual accents to repair actions.

### Density

Moderately dense like a field office briefing: compact data rows and chips sit beside generous calm tint panels for interpretation and editorial pacing.

### Hierarchy

Lead with high-contrast text, large Newsreader headlines, mono eyebrow labels, and numbered intervention markers; color supports structure but never replaces labels, icons, or border weight.

### Signature Patterns

- Responsibility rail: a fixed-width dark teal column containing section numbers, source labels, and vertical rule bars that repeat through cards.
- Repair ledger cards: warm paper panels with 1.5px teal borders, clipped corner tabs, shadow offsets, and dashed provenance dividers.
- Intervention stamps: urgent bright badges rotated by one degree, always paired with a word label, icon glyph, or numeric priority marker.
- Calm-future tint fields: pale aqua or mist rectangles behind explanatory copy, outlined by dark text and dotted with small blue-green coordinate marks.

## Layout

### Breakpoints

Mobile 375px single-column with rail converted to top band; tablet 768px two-column evidence grid; desktop 1200px+ full 14-column composition.

### Grid

Desktop uses a 14-column editorial grid with a 112px responsibility rail, 24px gutters, and cards spanning asymmetric 4/5/6-column groupings.

### Whitespace

Use calm tint panels and 32-64px section gaps to let dense evidence breathe while keeping action rows compact and scannable.

## Guidance

### Do

- Name palette provenance in captions, tooltips, or card metadata whenever colors carry cultural or environmental meaning.
- Use teal structure, earth surfaces, urgent stamps, and calming tints in distinct roles so the system avoids generic nature symbolism.
- Meet WCAG 2.2 contrast: 4.5:1 for normal text, 3:1 for large text, and aim for 7:1 on body copy where feasible.
- Pair every status color with text, icons, border weight, or position because the system must not rely on color alone.

### Don't

- Do not use green gradients, leaf icons, or watery textures as shorthand for sustainability.
- Do not place urgent orange or yellow behind small body text; use them as badges, rules, or large labeled signals.
- Do not flatten the language into a generic dashboard; keep editorial provenance, ledger structure, and repair context visible.
- Do not communicate success, warning, or error states by hue alone.

DESIGN.md

---
version: "alpha"
name: "Watershed Redirection Editorial System"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#FF5A1F"
  background: "#F4EBDD"
  border: "#185B55"
  error: "#B42318"
  info: "#155EEF"
  muted: "#D8CCBA"
  primary: "#006C67"
  secondary: "#6E5B37"
  success: "#087443"
  surface: "#FFF7EA"
  text: "#10201D"
  warning: "#B26A00"
typography:
  headline-lg:
    fontFamily: "Newsreader"
    fontSize: "1.907rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Newsreader"
    fontSize: "1.538rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Atkinson Hyperlegible"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "Spline Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "14px"
  md: "6px"
  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"
---

# Watershed Redirection Editorial System

## Overview

Watershed Redirection is an editorial product language for organizations turning climate evidence, cultural repair, and future-building commitments into legible decisions. Its palette provenance treats teal as civic responsibility, earth naturals as local material memory, urgent brights as intervention signals, and calming tints as recovery space rather than generic nature decoration.

### Values

- Eco-accountability with named provenance for every color family
- Cultural redirection expressed through evidence-led editorial hierarchy
- Accessible contrast and non-color signifiers for risk, status, and priority
- Future-building optimism balanced by grounded repair materiality

### Anti-Values

- Vague greenwashing or decorative nature symbolism
- Color-only state communication without labels, icons, or structure
- Generic white SaaS dashboards detached from place, repair, or cultural context

### Visual Character

- Use a dark blue-green command rail and repeated vertical rule bars to make Transformative Teal the structural anchor instead of a decorative swatch.
- Layer off-white clay surfaces with fine grid-line backgrounds, inset ledger panels, and square-torn card corners to imply local records and repair documentation.
- Reserve urgent orange, solar yellow, and magenta accents for stamped labels, progress notches, and numbered interventions paired with text or symbols.
- Place pale aqua, mist blue, and reed tint blocks behind explanatory copy so high-contrast text remains calm while the page carries a future-building atmosphere.

## 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 | `#FF5A1F` |
| background | `#F4EBDD` |
| border | `#185B55` |
| error | `#B42318` |
| info | `#155EEF` |
| muted | `#D8CCBA` |
| primary | `#006C67` |
| secondary | `#6E5B37` |
| success | `#087443` |
| surface | `#FFF7EA` |
| text | `#10201D` |
| warning | `#B26A00` |

## Typography

- **Headline-Lg**: Newsreader, 1.907rem, weight 700, line-height 1.1.
- **Headline-Md**: Newsreader, 1.538rem, weight 600, line-height 1.15.
- **Body-Md**: Atkinson Hyperlegible, 16px, weight 400, line-height 1.55.
- **Label-Md**: Spline Sans 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 375px single-column with rail converted to top band; tablet 768px two-column evidence grid; desktop 1200px+ full 14-column composition.

### Grid

Desktop uses a 14-column editorial grid with a 112px responsibility rail, 24px gutters, and cards spanning asymmetric 4/5/6-column groupings.

### Whitespace

Use calm tint panels and 32-64px section gaps to let dense evidence breathe while keeping action rows compact and scannable.

## Elevation & Depth

### Shadows

- **Lg**: 12px 12px 0 rgba(0,108,103,0.22)
- **Md**: 6px 6px 0 rgba(24,91,85,0.35)
- **Sm**: 3px 3px 0 #185B55

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: subtle 24px grid plus offset watershed contour lines in low-contrast teal ink
- **Card Style**: thin teal ledger borders, square top-left repair tabs, and occasional urgent stamp overlays
- **Treatment**: warm recycled-paper fields with pale aqua evidence tints and no glossy gradients

### Borders

- **Accent Width**: 4px
- **Character**: inked teal ledger rules, orange intervention ticks, and non-color labels for all states
- **Default Width**: 1.5px
- **Style**: solid with occasional dashed provenance separators

## Components

### Composition

Build pages as editorial evidence rooms: a dark teal responsibility rail, one oversized serif headline, modular ledger cards, and cross-column provenance notes that connect visual accents to repair actions.

### Density

Moderately dense like a field office briefing: compact data rows and chips sit beside generous calm tint panels for interpretation and editorial pacing.

### Hierarchy

Lead with high-contrast text, large Newsreader headlines, mono eyebrow labels, and numbered intervention markers; color supports structure but never replaces labels, icons, or border weight.

### Signature Patterns

- Responsibility rail: a fixed-width dark teal column containing section numbers, source labels, and vertical rule bars that repeat through cards.
- Repair ledger cards: warm paper panels with 1.5px teal borders, clipped corner tabs, shadow offsets, and dashed provenance dividers.
- Intervention stamps: urgent bright badges rotated by one degree, always paired with a word label, icon glyph, or numeric priority marker.
- Calm-future tint fields: pale aqua or mist rectangles behind explanatory copy, outlined by dark text and dotted with small blue-green coordinate marks.

## 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-019ea9a2-c071-7520-9af3-22d51882ddc8/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 Name palette provenance in captions, tooltips, or card metadata whenever colors carry cultural or environmental meaning.
- Do Use teal structure, earth surfaces, urgent stamps, and calming tints in distinct roles so the system avoids generic nature symbolism.
- Do Meet WCAG 2.2 contrast: 4.5:1 for normal text, 3:1 for large text, and aim for 7:1 on body copy where feasible.
- Do Pair every status color with text, icons, border weight, or position because the system must not rely on color alone.
- Don't Do not use green gradients, leaf icons, or watery textures as shorthand for sustainability.
- Don't Do not place urgent orange or yellow behind small body text; use them as badges, rules, or large labeled signals.
- Don't Do not flatten the language into a generic dashboard; keep editorial provenance, ledger structure, and repair context visible.
- Don't Do not communicate success, warning, or error states by hue alone.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "watershed-redirection-editorial-system",
  "type": "registry:theme",
  "title": "Watershed Redirection Editorial System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EBDD",
      "foreground": "#10201D",
      "card": "#FFF7EA",
      "card-foreground": "#10201D",
      "popover": "#FFF7EA",
      "popover-foreground": "#10201D",
      "primary": "#006C67",
      "primary-foreground": "#ffffff",
      "secondary": "#6E5B37",
      "secondary-foreground": "#ffffff",
      "muted": "#D8CCBA",
      "muted-foreground": "#10201D",
      "accent": "#FF5A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#185B55",
      "input": "#185B55",
      "ring": "#FF5A1F",
      "chart-1": "#006C67",
      "chart-2": "#6E5B37",
      "chart-3": "#FF5A1F",
      "chart-4": "#087443",
      "chart-5": "#B26A00",
      "sidebar": "#FFF7EA",
      "sidebar-foreground": "#10201D",
      "sidebar-primary": "#006C67",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#155EEF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#185B55",
      "sidebar-ring": "#FF5A1F",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#006C67",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF5A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF5A1F",
      "chart-1": "#006C67",
      "chart-2": "#6E5B37",
      "chart-3": "#FF5A1F",
      "chart-4": "#087443",
      "chart-5": "#B26A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#006C67",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF5A1F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF5A1F",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a2-c071-7520-9af3-22d51882ddc8",
    "slug": "watershed-redirection-editorial-system",
    "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 · watershed-redirection-editorial-system

DESIGN.md

at a glance

Palette

Typography

headline-lgNewsreader · 31px · 700

The quick brown fox jumps

headline-mdNewsreader · 25px · 600

The quick brown fox jumps

body-mdAtkinson Hyperlegible · 16px · 400

The quick brown fox jumps

label-mdSpline Sans 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

lg14px

md6px

none0px

sm2px

shadcn/ui

implementation kit

needs agent-authored kitstored

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: #F4EBDD;
  --foreground: #10201D;
  --card: #FFF7EA;
  --card-foreground: #10201D;
  --popover: #FFF7EA;
  --popover-foreground: #10201D;
  --primary: #006C67;
  --primary-foreground: #ffffff;
  --secondary: #6E5B37;
  --secondary-foreground: #ffffff;
  --muted: #D8CCBA;
  --muted-foreground: #10201D;
  --accent: #FF5A1F;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #185B55;
  --input: #185B55;
  --ring: #FF5A1F;
  --chart-1: #006C67;
  --chart-2: #6E5B37;
  --chart-3: #FF5A1F;
  --chart-4: #087443;
  --chart-5: #B26A00;
  --sidebar: #FFF7EA;
  --sidebar-foreground: #10201D;
  --sidebar-primary: #006C67;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #155EEF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #185B55;
  --sidebar-ring: #FF5A1F;
  --radius: 6px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #006C67;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF5A1F;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #303642;
  --input: #303642;
  --ring: #FF5A1F;
  --chart-1: #006C67;
  --chart-2: #6E5B37;
  --chart-3: #FF5A1F;
  --chart-4: #087443;
  --chart-5: #B26A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #006C67;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF5A1F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF5A1F;
  --radius: 6px;
}

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 WatershedRedirectionEditorialSystemShadcnKit() {
  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">Watershed Redirection Editorial System</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": "watershed-redirection-editorial-system",
  "type": "registry:theme",
  "title": "Watershed Redirection Editorial System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EBDD",
      "foreground": "#10201D",
      "card": "#FFF7EA",
      "card-foreground": "#10201D",
      "popover": "#FFF7EA",
      "popover-foreground": "#10201D",
      "primary": "#006C67",
      "primary-foreground": "#ffffff",
      "secondary": "#6E5B37",
      "secondary-foreground": "#ffffff",
      "muted": "#D8CCBA",
      "muted-foreground": "#10201D",
      "accent": "#FF5A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#185B55",
      "input": "#185B55",
      "ring": "#FF5A1F",
      "chart-1": "#006C67",
      "chart-2": "#6E5B37",
      "chart-3": "#FF5A1F",
      "chart-4": "#087443",
      "chart-5": "#B26A00",
      "sidebar": "#FFF7EA",
      "sidebar-foreground": "#10201D",
      "sidebar-primary": "#006C67",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#155EEF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#185B55",
      "sidebar-ring": "#FF5A1F",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#006C67",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF5A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF5A1F",
      "chart-1": "#006C67",
      "chart-2": "#6E5B37",
      "chart-3": "#FF5A1F",
      "chart-4": "#087443",
      "chart-5": "#B26A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#006C67",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF5A1F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF5A1F",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a2-c071-7520-9af3-22d51882ddc8",
    "slug": "watershed-redirection-editorial-system",
    "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 recipesstored

# shadcn/ui Components

Author: `katagami-agent`

## ShadSync visual profile
Family: editorial civic ledger. Material: warm recycled paper over teal grid underlay. Contour: squared panels with clipped tab labels; pills only for badges. Border: 2px teal ink rules plus dashed provenance dividers. Grain: subtle paper. Motion: short stamp-settle and ledger-slide transitions. Density: structured dashboard with breathing room.

## Signature component recipes
### button
Use `@/components/ui/button` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### card
Use `@/components/ui/card` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### input
Use `@/components/ui/input` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### textarea
Use `@/components/ui/textarea` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### select
Use `@/components/ui/select` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### dialog
Use `@/components/ui/dialog` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### sheet
Use `@/components/ui/sheet` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### tabs
Use `@/components/ui/tabs` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### badge
Use `@/components/ui/badge` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### separator
Use `@/components/ui/separator` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### checkbox
Use `@/components/ui/checkbox` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### switch
Use `@/components/ui/switch` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### slider
Use `@/components/ui/slider` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### tooltip
Use `@/components/ui/tooltip` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### dropdown-menu
Use `@/components/ui/dropdown-menu` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

### table
Use `@/components/ui/table` with warm paper surfaces, 2px teal ledger borders, square-to-small radii, monospaced evidence labels, visible focus rings, and orange stamps only for urgent intervention state. Keep controls dense enough for civic operations but leave generous editorial whitespace around panels.

## Preview shots
- application-shell: basin map, top navigation, metric cards, intervention stamps.
- detail-editor: decision label form, public explanation textarea, source checklist, dialog confirmation.
- data-operations: operations table, filters, tabs, dropdown menu, slider threshold, switch and checkbox states.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export function WatershedDecisionCard() {
  return (
    <Card className="border-2 border-[#1e4b55] bg-[#fdf9ef] shadow-[6px_6px_0_#1e4b55] rounded-[6px]">
      <CardHeader className="border-b border-dashed border-[#6f8f87]">
        <Badge className="w-fit rounded-sm bg-[#e8793e] text-white font-mono">INTERVENTION READY</Badge>
        <CardTitle className="font-serif text-[#173238]">Redirect peak flow to restored wetland edge</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-3 pt-4">
        <Input placeholder="Evidence source" className="border-2 border-[#1e4b55] rounded-[4px]" />
        <Textarea placeholder="Public explanation" className="border-2 border-[#1e4b55] rounded-[4px]" />
        <Button className="rounded-[4px] bg-[#1e4b55] shadow-[3px_3px_0_#0f2e35]">Publish proof</Button>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "card",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "input",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "textarea",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "select",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "dialog",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "sheet",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "tabs",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "badge",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "separator",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "checkbox",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "switch",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "slider",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "tooltip",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    },
    {
      "component": "table",
      "recipe": "Warm paper shadcn primitive with teal ledger border, small radius controls, monospaced metadata labels, accessible contrast, and orange accent only for urgent/action state."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "scene": {
        "description": "Dashboard with basin map, ledger cards, status stamps, and evidence-first navigation.",
        "eyebrow": "Watershed redirection desk",
        "fields": [
          {
            "label": "Map layer",
            "value": "Hydrology + transit access"
          },
          {
            "label": "Urgency stamp",
            "value": "Intervention ready"
          }
        ],
        "headline": "Repair the flow, publish the proof.",
        "primaryAction": "Open redirection plan",
        "rows": [
          {
            "evidence": "Sensor 14 + resident photos",
            "site": "North Fork spillway",
            "status": "urgent"
          }
        ],
        "secondaryAction": "Audit source trail",
        "stats": [
          {
            "label": "culverts reprioritized",
            "value": "42"
          },
          {
            "label": "runoff reduction",
            "value": "18%"
          },
          {
            "label": "checkpoints",
            "value": "7"
          }
        ]
      },
      "title": "Application shell"
    },
    {
      "id": "detail-editor",
      "scene": {
        "description": "Form screen for public explanation, source trail, resident sign-off, and dialog confirmation.",
        "eyebrow": "Decision record",
        "fields": [
          {
            "label": "Decision label",
            "value": "Wetland edge redirection"
          },
          {
            "label": "Public explanation",
            "value": "Flooding overlaps transit access and sediment load."
          },
          {
            "label": "Review state",
            "value": "Awaiting coalition sign-off"
          }
        ],
        "headline": "Redirect peak flow to restored wetland edge.",
        "primaryAction": "Publish decision label",
        "rows": [
          {
            "source": "Hydrology model v3",
            "state": "verified"
          },
          {
            "source": "Resident photo packet",
            "state": "needs caption"
          }
        ],
        "secondaryAction": "Save field draft",
        "stats": [
          {
            "label": "sources attached",
            "value": "9"
          },
          {
            "label": "residents notified",
            "value": "124"
          }
        ]
      },
      "title": "Detail editor"
    },
    {
      "id": "data-operations",
      "scene": {
        "description": "Dense table with filters, tabs, threshold slider, switches, checkboxes, tooltips, and dropdown actions.",
        "eyebrow": "Operations table",
        "fields": [
          {
            "label": "Filter",
            "value": "Urgent + scheduled"
          },
          {
            "label": "Tab",
            "value": "Sediment load"
          },
          {
            "label": "Notification switch",
            "value": "On"
          }
        ],
        "headline": "Prioritize sites by evidence score and repair window.",
        "primaryAction": "Export public ledger",
        "rows": [
          {
            "evidence": "Hydrology model v3",
            "site": "Marsh buffer west",
            "status": "scheduled"
          },
          {
            "evidence": "Maintenance log + soil test",
            "site": "School rain garden",
            "status": "verified"
          },
          {
            "evidence": "Flow sensor 22",
            "site": "South culvert",
            "status": "monitor"
          }
        ],
        "secondaryAction": "Adjust threshold",
        "stats": [
          {
            "label": "active sites",
            "value": "31"
          },
          {
            "label": "threshold",
            "value": "72"
          }
        ]
      },
      "title": "Data operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "orange intervention stamps, reed secondary fields, teal source rules",
    "border": "2px teal ledger border with dashed provenance dividers",
    "contour": "square panels with clipped tabs and pill status badges",
    "density": "structured editorial dashboard",
    "family": "editorial-civic-ledger",
    "grain": true,
    "material": "warm recycled paper and ink",
    "motion": "stamp-settle and ledger-slide",
    "stickerBadges": true,
    "underlay": true
  }
}