design language·ochre-signal-neutrals

Ochre Signal Neutrals

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

A warm semantic palette system for product interfaces where quiet oatmeal and clay surfaces carry most of the experience, while restrained high-contrast accents are reserved for state, route, and decision meaning.

values

Warm neutral confidenceSemantic restraintAccessible state clarityContent-first hierarchy

anti-values

×Decorative saturation across broad surfaces×Ambiguous intent colors×Cold gray corporate wash×Low-contrast disabled-looking interfaces

tokens

borders4 items

accent width: 3px
character: Warm taupe default borders; state borders increase weight and darken before adding fill.
default width: 1px
style: solid

colors12 items

accent

#B86519

background

#F7F1E8

border

#D7C8B5

error

#9B352C

info

#315F7D

muted

#8B7D6C

primary

#8A4F14

secondary

#7B6A52

success

#3F6F4B

surface

#FFF9F0

text

#251D16

warning

#A76513

motion3 items

duration: 160ms
easing: cubic-bezier(0.2, 0.8, 0.2, 1)
philosophy: Short lift and border-color transitions clarify interaction; no decorative color washing.

radii5 items

full: 9999px
lg: 20px
md: 12px
none: 0
sm: 6px

shadows3 items

lg: 0 28px 70px rgba(73,49,25,0.16)
md: 0 12px 32px rgba(73,49,25,0.10)
sm: 0 1px 0 rgba(37,29,22,0.08)

spacing2 items

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

surfaces3 items

bg pattern: Low-opacity dotted grid and horizontal ruled bands in border color for orientation without decoration.
card style: 1px warm taupe borders, subtle top highlight, and semantic left-edge state strips.
treatment: Warm ivory canvas with oatmeal panels, tiny radial ochre glow, and raised cream cards.

typography8 items

base size: 16px
body font: Source Sans 3
google fonts url: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap
heading font: Fraunces
letter spacing: -0.012em
line height: 1.55
mono font: IBM Plex Mono
scale ratio: 1.22

rules

composition

Use a calm application shell with warm neutral canvas, elevated semantic panels, and one controlled accent rail for wayfinding.

density

Balanced product density with 8px rhythm, generous section gutters, and compact controls only inside tables or filter bars.

hierarchy

Headlines use Fraunces for editorial gravity, body content stays highly legible, and intent labels are compact mono annotations.

signature patterns

Semantic rail cards: every major panel has a 3px left border mapped to primary, success, warning, error, or info meaning.Ochre wayfinding underline: active tabs and nav items use a thin ochre rule plus bold text rather than saturated backgrounds.Muted intent chips: status badges combine low-chroma tinted surfaces, dark readable text, icon dots, and explicit labels.Warm rule grid: dashboards use subtle taupe ruled lines and dot texture to organize space without cold gray dividers.State-first focus: inputs show double focus treatment with espresso outline and small ochre corner tick for keyboard visibility.

layout

breakpoints

mobile 375px, tablet 768px, desktop 1200px

grid

12-column desktop grid with 24px gutters; tablet collapses to 6 columns and mobile to a single stacked column.

whitespace

Whitespace is warm and deliberate: 24px between sections, 16px within cards, 8px between related controls.

guidance

Reserve saturated ochre for primary action, active route, or selected state only.
Pair every semantic color with text, icon, and border weight.
Use warm neutral elevation to separate content before adding new colors.
Keep contrast high between espresso text and ivory or oatmeal surfaces.

avoid

Do not flood backgrounds with brand orange or rainbow gradients.
Do not encode status with color alone.
Do not use cold blue-gray neutrals as the foundation.
Do not soften body text below accessible contrast.

katagami spec

# Ochre Signal Neutrals

## Philosophy

### Values

- Warm neutral confidence
- Semantic restraint
- Accessible state clarity
- Content-first hierarchy

### Anti-Values

- Decorative saturation across broad surfaces
- Ambiguous intent colors
- Cold gray corporate wash
- Low-contrast disabled-looking interfaces

### Visual Character

- Layered warm-neutral CSS variables step from canvas to raised panels with visible semantic background, surface, and inset zones.
- Muted chroma ramps use desaturated clay, sage, amber, and blue tokens only inside badges, focus rings, charts, and status rows.
- High-contrast espresso text and carbon borders create AA-friendly definition without relying on saturated brand fills.
- Active navigation and primary actions use a narrow ochre left rail or underline instead of flooding whole cards with color.
- Form and data states pair color with icon, label text, and border weight so meaning survives color-blind and grayscale viewing.

## Tokens

### Borders

- **Accent Width**: 3px
- **Character**: Warm taupe default borders; state borders increase weight and darken before adding fill.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#B86519` |
| background | `#F7F1E8` |
| border | `#D7C8B5` |
| error | `#9B352C` |
| info | `#315F7D` |
| muted | `#8B7D6C` |
| primary | `#8A4F14` |
| secondary | `#7B6A52` |
| success | `#3F6F4B` |
| surface | `#FFF9F0` |
| text | `#251D16` |
| warning | `#A76513` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Short lift and border-color transitions clarify interaction; no decorative color washing.

### Radii

- **Full**: 9999px
- **Lg**: 20px
- **Md**: 12px
- **None**: 0
- **Sm**: 6px

### Shadows

- **Lg**: 0 28px 70px rgba(73,49,25,0.16)
- **Md**: 0 12px 32px rgba(73,49,25,0.10)
- **Sm**: 0 1px 0 rgba(37,29,22,0.08)

### Spacing

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

### Surfaces

- **Bg Pattern**: Low-opacity dotted grid and horizontal ruled bands in border color for orientation without decoration.
- **Card Style**: 1px warm taupe borders, subtle top highlight, and semantic left-edge state strips.
- **Treatment**: Warm ivory canvas with oatmeal panels, tiny radial ochre glow, and raised cream cards.

### Typography

- **Base Size**: 16px
- **Body Font**: Source Sans 3
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap
- **Heading Font**: Fraunces
- **Letter Spacing**: -0.012em
- **Line Height**: 1.55
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Use a calm application shell with warm neutral canvas, elevated semantic panels, and one controlled accent rail for wayfinding.

### Density

Balanced product density with 8px rhythm, generous section gutters, and compact controls only inside tables or filter bars.

### Hierarchy

Headlines use Fraunces for editorial gravity, body content stays highly legible, and intent labels are compact mono annotations.

### Signature Patterns

- Semantic rail cards: every major panel has a 3px left border mapped to primary, success, warning, error, or info meaning.
- Ochre wayfinding underline: active tabs and nav items use a thin ochre rule plus bold text rather than saturated backgrounds.
- Muted intent chips: status badges combine low-chroma tinted surfaces, dark readable text, icon dots, and explicit labels.
- Warm rule grid: dashboards use subtle taupe ruled lines and dot texture to organize space without cold gray dividers.
- State-first focus: inputs show double focus treatment with espresso outline and small ochre corner tick for keyboard visibility.

## Layout

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px

### Grid

12-column desktop grid with 24px gutters; tablet collapses to 6 columns and mobile to a single stacked column.

### Whitespace

Whitespace is warm and deliberate: 24px between sections, 16px within cards, 8px between related controls.

## Guidance

### Do

- Reserve saturated ochre for primary action, active route, or selected state only.
- Pair every semantic color with text, icon, and border weight.
- Use warm neutral elevation to separate content before adding new colors.
- Keep contrast high between espresso text and ivory or oatmeal surfaces.

### Don't

- Do not flood backgrounds with brand orange or rainbow gradients.
- Do not encode status with color alone.
- Do not use cold blue-gray neutrals as the foundation.
- Do not soften body text below accessible contrast.

DESIGN.md

---
version: "alpha"
name: "Ochre Signal Neutrals"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#B86519"
  background: "#F7F1E8"
  border: "#D7C8B5"
  error: "#9B352C"
  info: "#315F7D"
  muted: "#8B7D6C"
  primary: "#8A4F14"
  secondary: "#7B6A52"
  success: "#3F6F4B"
  surface: "#FFF9F0"
  text: "#251D16"
  warning: "#A76513"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.012em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.012em"
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.012em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "20px"
  md: "12px"
  none: "0px"
  sm: "6px"
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"
---

# Ochre Signal Neutrals

## Overview

A warm semantic palette system for product interfaces where quiet oatmeal and clay surfaces carry most of the experience, while restrained high-contrast accents are reserved for state, route, and decision meaning.

### Values

- Warm neutral confidence
- Semantic restraint
- Accessible state clarity
- Content-first hierarchy

### Anti-Values

- Decorative saturation across broad surfaces
- Ambiguous intent colors
- Cold gray corporate wash
- Low-contrast disabled-looking interfaces

### Visual Character

- Layered warm-neutral CSS variables step from canvas to raised panels with visible semantic background, surface, and inset zones.
- Muted chroma ramps use desaturated clay, sage, amber, and blue tokens only inside badges, focus rings, charts, and status rows.
- High-contrast espresso text and carbon borders create AA-friendly definition without relying on saturated brand fills.
- Active navigation and primary actions use a narrow ochre left rail or underline instead of flooding whole cards with color.
- Form and data states pair color with icon, label text, and border weight so meaning survives color-blind and grayscale viewing.

## 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 | `#B86519` |
| background | `#F7F1E8` |
| border | `#D7C8B5` |
| error | `#9B352C` |
| info | `#315F7D` |
| muted | `#8B7D6C` |
| primary | `#8A4F14` |
| secondary | `#7B6A52` |
| success | `#3F6F4B` |
| surface | `#FFF9F0` |
| text | `#251D16` |
| warning | `#A76513` |

## Typography

- **Headline-Lg**: Fraunces, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Source Sans 3, 16px, weight 400, line-height 1.55.
- **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 375px, tablet 768px, desktop 1200px

### Grid

12-column desktop grid with 24px gutters; tablet collapses to 6 columns and mobile to a single stacked column.

### Whitespace

Whitespace is warm and deliberate: 24px between sections, 16px within cards, 8px between related controls.

## Elevation & Depth

### Shadows

- **Lg**: 0 28px 70px rgba(73,49,25,0.16)
- **Md**: 0 12px 32px rgba(73,49,25,0.10)
- **Sm**: 0 1px 0 rgba(37,29,22,0.08)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `20px`
- **Md**: `12px`
- **None**: `0px`
- **Sm**: `6px`

### Surfaces

- **Bg Pattern**: Low-opacity dotted grid and horizontal ruled bands in border color for orientation without decoration.
- **Card Style**: 1px warm taupe borders, subtle top highlight, and semantic left-edge state strips.
- **Treatment**: Warm ivory canvas with oatmeal panels, tiny radial ochre glow, and raised cream cards.

### Borders

- **Accent Width**: 3px
- **Character**: Warm taupe default borders; state borders increase weight and darken before adding fill.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Use a calm application shell with warm neutral canvas, elevated semantic panels, and one controlled accent rail for wayfinding.

### Density

Balanced product density with 8px rhythm, generous section gutters, and compact controls only inside tables or filter bars.

### Hierarchy

Headlines use Fraunces for editorial gravity, body content stays highly legible, and intent labels are compact mono annotations.

### Signature Patterns

- Semantic rail cards: every major panel has a 3px left border mapped to primary, success, warning, error, or info meaning.
- Ochre wayfinding underline: active tabs and nav items use a thin ochre rule plus bold text rather than saturated backgrounds.
- Muted intent chips: status badges combine low-chroma tinted surfaces, dark readable text, icon dots, and explicit labels.
- Warm rule grid: dashboards use subtle taupe ruled lines and dot texture to organize space without cold gray dividers.
- State-first focus: inputs show double focus treatment with espresso outline and small ochre corner tick for keyboard visibility.

## 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-019ea9a3-3dc7-75a0-9d40-6807d1461c1f/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 Reserve saturated ochre for primary action, active route, or selected state only.
- Do Pair every semantic color with text, icon, and border weight.
- Do Use warm neutral elevation to separate content before adding new colors.
- Do Keep contrast high between espresso text and ivory or oatmeal surfaces.
- Don't Do not flood backgrounds with brand orange or rainbow gradients.
- Don't Do not encode status with color alone.
- Don't Do not use cold blue-gray neutrals as the foundation.
- Don't Do not soften body text below accessible contrast.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ochre-signal-neutrals",
  "type": "registry:theme",
  "title": "Ochre Signal Neutrals shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F1E8",
      "foreground": "#251D16",
      "card": "#FFF9F0",
      "card-foreground": "#251D16",
      "popover": "#FFF9F0",
      "popover-foreground": "#251D16",
      "primary": "#8A4F14",
      "primary-foreground": "#ffffff",
      "secondary": "#7B6A52",
      "secondary-foreground": "#ffffff",
      "muted": "#8B7D6C",
      "muted-foreground": "#251D16",
      "accent": "#B86519",
      "accent-foreground": "#ffffff",
      "destructive": "#9B352C",
      "border": "#D7C8B5",
      "input": "#D7C8B5",
      "ring": "#B86519",
      "chart-1": "#8A4F14",
      "chart-2": "#7B6A52",
      "chart-3": "#B86519",
      "chart-4": "#3F6F4B",
      "chart-5": "#A76513",
      "sidebar": "#FFF9F0",
      "sidebar-foreground": "#251D16",
      "sidebar-primary": "#8A4F14",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#315F7D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D7C8B5",
      "sidebar-ring": "#B86519",
      "radius": "12px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#8A4F14",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B86519",
      "accent-foreground": "#ffffff",
      "destructive": "#9B352C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B86519",
      "chart-1": "#8A4F14",
      "chart-2": "#7B6A52",
      "chart-3": "#B86519",
      "chart-4": "#3F6F4B",
      "chart-5": "#A76513",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#8A4F14",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B86519",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B86519",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-3dc7-75a0-9d40-6807d1461c1f",
    "slug": "ochre-signal-neutrals",
    "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 · ochre-signal-neutrals

DESIGN.md

at a glance

Palette

Typography

headline-lgFraunces · 29px · 700

The quick brown fox jumps

headline-mdFraunces · 24px · 600

The quick brown fox jumps

body-mdSource Sans 3 · 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

lg20px

md12px

none0px

sm6px

shadcn/ui

implementation kit

agent-authored kitstored + verified

shadcn implementation kit

These scenes and recipes came from the Katagami review agent and can be copied as the shadcn implementation layer.

shadsync shotsstored + verifiedpaper-collage

Ochre Signal Neutrals

Agent-authored scenes, component recipes, and visual profile rendered on local shadcn-style primitives.

1px warm taupe borders, subtle top highlight, and semantic left-edge state strips.

Palette operationsapplication-shell

Semantic neutrals dashboard

Warm surfaces define structure while ochre marks route and action intent.

buttoncardtabsbadgeseparatortooltipdropdown-menu

Ochre Signal Neutrals

shadcn layer

Overview

Components

Reviews

Exports

primaryaccentsurfacemutedwarningerror

7.8 contrast

12 roles

ready

4 state ramps

balanced

Component coverage

Filters, state, and row density rendered with the generated theme.

Surface	State	Status
Primary flow	mapped	active
Token coverage	semantic	synced
Responsive proof	queued	review

Must show

Avoid

saturated background fills

color-only status

Token editordetail-editor

Edit surface and state mapping

Every field uses taupe borders and an ochre focus tick for keyboard visibility.

inputtextareaselectdialogsheetcheckboxswitchslider

Recipe details

Labels, validation, written guidance, and controls stay visible.

Component familyState treatment

Guidance copy

Require keyboard stateAgent-authored shot

Density68

FocusInvalidConfirmed

Context sheet

Generated with the language job

sheet

Palette name

Narrative cards

Surface direction

Visible focus

Usage note

Small lift

Accent reserve

Must show

Avoid

unlabeled color marks

cold gray fields

Audit queuedata-operations

Contrast and intent operations

Dense data remains readable through espresso text, taupe rules, and labeled state badges.

tablebadgeseparatorbuttoncardinputselectdropdown-menu

Contrast and intent operations

Dense data remains readable through espresso text, taupe rules, and labeled state badges.

okwatchdone

Check	Finding	Status
surface.raised AA	approved	ok
accent.ochre reserve	needs pass	watch
intent.error labeled	designed	done

Responsive table, menu, tooltip, and badge proof.

Must show

Avoid

inventory wall

rainbow table rows

recommendedagent kit included

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: #F7F1E8;
  --foreground: #251D16;
  --card: #FFF9F0;
  --card-foreground: #251D16;
  --popover: #FFF9F0;
  --popover-foreground: #251D16;
  --primary: #8A4F14;
  --primary-foreground: #ffffff;
  --secondary: #7B6A52;
  --secondary-foreground: #ffffff;
  --muted: #8B7D6C;
  --muted-foreground: #251D16;
  --accent: #B86519;
  --accent-foreground: #ffffff;
  --destructive: #9B352C;
  --border: #D7C8B5;
  --input: #D7C8B5;
  --ring: #B86519;
  --chart-1: #8A4F14;
  --chart-2: #7B6A52;
  --chart-3: #B86519;
  --chart-4: #3F6F4B;
  --chart-5: #A76513;
  --sidebar: #FFF9F0;
  --sidebar-foreground: #251D16;
  --sidebar-primary: #8A4F14;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #315F7D;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D7C8B5;
  --sidebar-ring: #B86519;
  --radius: 12px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #8A4F14;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B86519;
  --accent-foreground: #ffffff;
  --destructive: #9B352C;
  --border: #303642;
  --input: #303642;
  --ring: #B86519;
  --chart-1: #8A4F14;
  --chart-2: #7B6A52;
  --chart-3: #B86519;
  --chart-4: #3F6F4B;
  --chart-5: #A76513;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #8A4F14;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #B86519;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #B86519;
  --radius: 12px;
}

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 OchreSignalNeutralsShadcnKit() {
  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">Ochre Signal Neutrals</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": "ochre-signal-neutrals",
  "type": "registry:theme",
  "title": "Ochre Signal Neutrals shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F1E8",
      "foreground": "#251D16",
      "card": "#FFF9F0",
      "card-foreground": "#251D16",
      "popover": "#FFF9F0",
      "popover-foreground": "#251D16",
      "primary": "#8A4F14",
      "primary-foreground": "#ffffff",
      "secondary": "#7B6A52",
      "secondary-foreground": "#ffffff",
      "muted": "#8B7D6C",
      "muted-foreground": "#251D16",
      "accent": "#B86519",
      "accent-foreground": "#ffffff",
      "destructive": "#9B352C",
      "border": "#D7C8B5",
      "input": "#D7C8B5",
      "ring": "#B86519",
      "chart-1": "#8A4F14",
      "chart-2": "#7B6A52",
      "chart-3": "#B86519",
      "chart-4": "#3F6F4B",
      "chart-5": "#A76513",
      "sidebar": "#FFF9F0",
      "sidebar-foreground": "#251D16",
      "sidebar-primary": "#8A4F14",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#315F7D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D7C8B5",
      "sidebar-ring": "#B86519",
      "radius": "12px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#8A4F14",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B86519",
      "accent-foreground": "#ffffff",
      "destructive": "#9B352C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B86519",
      "chart-1": "#8A4F14",
      "chart-2": "#7B6A52",
      "chart-3": "#B86519",
      "chart-4": "#3F6F4B",
      "chart-5": "#A76513",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#8A4F14",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B86519",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B86519",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-3dc7-75a0-9d40-6807d1461c1f",
    "slug": "ochre-signal-neutrals",
    "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 + verified

# Ochre Signal Neutrals shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate warm neutral semantic color roles into shadcn/ui screens where surfaces, content, borders, and states are distinct before any decoration is added.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table.

## Token cues
Use background #F7F1E8, card #FFF9F0, text #251D16, border #D7C8B5, primary #8A4F14, accent #B86519, and muted state ramps for success, warning, info, and error.

## Visual character to preserve
Warm raised cards, taupe rule grid, semantic left rails, ochre active underlines, muted intent chips, and double focus treatment.

## ShadSync visual profile
family: semantic-warm-neutral; material: warm-ivory; contour: measured-rounded; border: taupe-rail; underlay: subtle-rule-grid; grain: low; stickerBadges: false; motion: short-lift-border; density: balanced; accents: ochre-only-for-wayfinding.

## Signature component recipes
- button: primary uses ochre fill with ivory text; secondary is cream with taupe border; destructive uses error border and explicit label.
- card: cream surface, 1px taupe border, lg radius, optional 3px semantic left rail.
- input: ivory inset field, md radius, espresso focus outline plus ochre left inset shadow.
- textarea: same as input with generous line-height and visible label.
- select: cream trigger, taupe border, muted helper text, no saturated menu background.
- dialog: ivory panel over warm translucent overlay, semantic header badge when stateful.
- sheet: right-side cream surface with taupe separators and ochre active section rail.
- tabs: active tab uses ochre underline and espresso text, never full saturated fill.
- badge: muted tinted surface plus dot/icon and explicit status text.
- separator: taupe 1px rule or dotted grid line.
- checkbox: espresso outline, ochre check, label required for meaning.
- switch: neutral track with ochre thumb only when enabled.
- slider: taupe track, ochre filled range, visible numeric value.
- tooltip: espresso surface with ivory text for contrast.
- dropdown-menu: cream surface, taupe dividers, ochre rail on active item.
- table: compact rows with taupe horizontal rules and muted status badges.

## Preview shots
application-shell, detail-editor, data-operations.

## Implementation contract
Import local primitives from `@/components/ui/*`; do not invent a second component system. Preserve semantic rails, muted status chips, and restrained accent use.

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

export function OchreSignalCard() {
  return (
    <Card className="border-[#D7C8B5] bg-[#FFF9F0] shadow-md border-l-[3px] border-l-[#B86519] rounded-[20px]">
      <CardHeader>
        <Badge className="w-fit bg-[#F4E4CE] text-[#74430B]">Warning · labeled</Badge>
        <CardTitle className="font-serif text-[#251D16]">Accent reserve nearing limit</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <Input className="bg-[#FFFDF8] border-[#D7C8B5] focus-visible:ring-[#251D16]" defaultValue="Oatmeal surface ramp" />
        <Button className="rounded-full bg-[#8A4F14] text-[#FFF9F0] hover:bg-[#73400F]">Save mapping</Button>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored + verified

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "saturated background fills",
        "color-only status"
      ],
      "composition": "Sidebar shell, hero metrics, semantic status rail cards, and active ochre tab underline.",
      "id": "application-shell",
      "mustShowStates": [
        "active navigation",
        "success badge",
        "warning badge",
        "hoverable primary action"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Publish palette",
          "Open menu"
        ],
        "description": "Warm surfaces define structure while ochre marks route and action intent.",
        "eyebrow": "Palette operations",
        "headline": "Semantic neutrals dashboard",
        "stats": [
          "7.8 contrast",
          "12 roles",
          "4 state ramps"
        ]
      }
    },
    {
      "avoid": [
        "unlabeled color marks",
        "cold gray fields"
      ],
      "composition": "Two-column editor with focused field, sheet settings, and explicit labeled state controls.",
      "id": "detail-editor",
      "mustShowStates": [
        "focus outline",
        "enabled switch",
        "checked checkbox",
        "warning helper badge"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save mapping",
          "Preview dialog"
        ],
        "description": "Every field uses taupe borders and an ochre focus tick for keyboard visibility.",
        "eyebrow": "Token editor",
        "fields": [
          "Palette name",
          "Surface direction",
          "Usage note",
          "Accent reserve"
        ],
        "headline": "Edit surface and state mapping"
      }
    },
    {
      "avoid": [
        "inventory wall",
        "rainbow table rows"
      ],
      "composition": "Operational table with warm ruled rows, search/filter controls, and muted intent chips.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row rail",
        "error badge with label",
        "info badge with dot"
      ],
      "primitives": [
        "table",
        "badge",
        "separator",
        "button",
        "card",
        "input",
        "select",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Export report",
          "Filter states"
        ],
        "description": "Dense data remains readable through espresso text, taupe rules, and labeled state badges.",
        "eyebrow": "Audit queue",
        "headline": "Contrast and intent operations",
        "rows": [
          "surface.raised AA",
          "accent.ochre reserve",
          "intent.error labeled"
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "ochre-only-for-wayfinding",
    "border": "taupe-rail",
    "contour": "measured-rounded",
    "density": "balanced",
    "family": "semantic-warm-neutral",
    "grain": "low",
    "material": "warm-ivory",
    "motion": "short-lift-border",
    "stickerBadges": false,
    "underlay": "subtle-rule-grid"
  }
}

More like this

Signal Slate Operationsshares warm-neutral-surfaces