design language·proof-contrast-atelier

Proof Contrast Atelier

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 palette-system language for product teams that treats contrast as the primary craft material: hard neutral steps, almost no chroma, and one warm manufactured accent used like a printer mark rather than decoration.

values

measurable accessibility as visual compositionproduction-ready semantic token disciplineeditorial restraint over generative polishwarm-cool neutrality balanced by a single crafted accent

anti-values

×AI-slop gradients and random saturation×unnamed one-off colors hidden in components×low-contrast gray-on-gray hierarchy×decorative chroma that cannot survive dark mode

tokens

borders4 items

accent width: 2px
character: crisp printer-proof rules; borders create hierarchy before color does
default width: 1px
style: solid

colors12 items

accent

#D54E2F

background

#F6F1E8

border

#1C1B18

error

#B42318

info

#245C8F

muted

#747069

primary

#111111

secondary

#4A4A46

success

#1D6B3A

surface

#FFFCF4

text

#10100F

warning

#9A5A00

motion3 items

duration: 120ms
easing: steps(2, end)
philosophy: motion behaves like a mechanical proof press: short stepped shifts, no floaty easing, no decorative parallax

radii5 items

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

shadows3 items

lg: 8px 8px 0 rgba(28,27,24,0.85)
md: 4px 4px 0 #1C1B18
sm: 2px 2px 0 #1C1B18

spacing2 items

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

surfaces3 items

bg pattern: subtle 24px registration grid built from repeating-linear-gradient in neutral ink at 5 percent opacity
card style: square proof cards, one-pixel ink border, optional offset hard shadow, small vermilion registration mark
treatment: paper and ink neutral planes with no blur, no glass, and AA or AAA contrast at every text size

typography8 items

base size: 16px
body font: Atkinson Hyperlegible
google fonts url: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap
heading font: Instrument Serif
letter spacing: -0.01em
line height: 1.48
mono font: IBM Plex Mono
scale ratio: 1.22

rules

composition

Compose screens as proof sheets: one dominant ink block, one content ledger, one data strip, and tight annotation columns aligned to a visible grid.

density

High information density is acceptable when rows align to 8px increments and every cluster has a black rule or whitespace gutter.

hierarchy

Hierarchy comes from contrast jumps, typeface changes, rule weight, and spatial breaks; color may only confirm state or active location.

signature patterns

Proof bars: two-pixel horizontal or vertical black rules label sections and replace decorative headers in cards, tables, and sheets.Vermilion chips: tiny square or pill markers attach to active controls, chart outliers, and focus states with strict area limits.Neutral-step panels: adjacent modules alternate paper, bone, graphite, and ink variables to maintain WCAG contrast without new colors.Registration grid: background and chart areas use fine repeating-linear-gradient guide lines that stay neutral and never become a gradient wash.Lintable token labels: component captions expose semantic token names such as color.action.danger and chart.series.accent for production credibility.

layout

breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

grid

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

whitespace

Whitespace is measured and editorial: large gutters around ink blocks, compact 8px row rhythm inside operational ledgers.

guidance

Use semantic aliases over raw primitives: background.canvas, surface.raised, text.primary, border.proof, accent.registration, chart.series.neutral.
Check every foreground/background pair against WCAG 2.2 AA, and prefer AAA for navigation, table text, and operational labels.
Keep data visualization mostly neutral, using vermilion only for selected series, exception states, or a single crafted comparison.
Provide light and dark mappings from the same primitive ladder so components adapt without inventing new hue families.

avoid

Do not add pastel gradients, glass panels, neon glows, or saturation simply because the interface feels sparse.
Do not create unnamed one-off hex values in charts, illustrations, shadows, or hover states.
Do not use the accent for broad backgrounds, hero floods, or multiple competing CTAs.
Do not lower contrast to create sophistication; use scale, rule weight, and spacing instead.

katagami spec

# Proof Contrast Atelier

## Philosophy

A palette-system language for product teams that treats contrast as the primary craft material: hard neutral steps, almost no chroma, and one warm manufactured accent used like a printer mark rather than decoration.

### Values

- measurable accessibility as visual composition
- production-ready semantic token discipline
- editorial restraint over generative polish
- warm-cool neutrality balanced by a single crafted accent

### Anti-Values

- AI-slop gradients and random saturation
- unnamed one-off colors hidden in components
- low-contrast gray-on-gray hierarchy
- decorative chroma that cannot survive dark mode

### Visual Character

- Use a five-step neutral ladder as CSS variables, with large AAA black-on-paper and paper-on-ink blocks instead of soft gray panels.
- Render every card and control with one-pixel square borders plus occasional two-pixel black rule bars for proof-sheet hierarchy.
- Reserve the kiln-vermilion accent for tiny tokens: status pins, focus rings, active tabs, and data callouts never larger than badge scale.
- Apply subtle registration-grid underlays using repeating-linear-gradient at low opacity, never atmospheric color gradients.
- Flip light and dark modes by swapping neutral variables while keeping semantic token names, border weights, and accent proportions stable.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: crisp printer-proof rules; borders create hierarchy before color does
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#D54E2F` |
| background | `#F6F1E8` |
| border | `#1C1B18` |
| error | `#B42318` |
| info | `#245C8F` |
| muted | `#747069` |
| primary | `#111111` |
| secondary | `#4A4A46` |
| success | `#1D6B3A` |
| surface | `#FFFCF4` |
| text | `#10100F` |
| warning | `#9A5A00` |

### Motion

- **Duration**: 120ms
- **Easing**: steps(2, end)
- **Philosophy**: motion behaves like a mechanical proof press: short stepped shifts, no floaty easing, no decorative parallax

### Radii

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

### Shadows

- **Lg**: 8px 8px 0 rgba(28,27,24,0.85)
- **Md**: 4px 4px 0 #1C1B18
- **Sm**: 2px 2px 0 #1C1B18

### Spacing

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

### Surfaces

- **Bg Pattern**: subtle 24px registration grid built from repeating-linear-gradient in neutral ink at 5 percent opacity
- **Card Style**: square proof cards, one-pixel ink border, optional offset hard shadow, small vermilion registration mark
- **Treatment**: paper and ink neutral planes with no blur, no glass, and AA or AAA contrast at every text size

### Typography

- **Base Size**: 16px
- **Body Font**: Atkinson Hyperlegible
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap
- **Heading Font**: Instrument Serif
- **Letter Spacing**: -0.01em
- **Line Height**: 1.48
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Compose screens as proof sheets: one dominant ink block, one content ledger, one data strip, and tight annotation columns aligned to a visible grid.

### Density

High information density is acceptable when rows align to 8px increments and every cluster has a black rule or whitespace gutter.

### Hierarchy

Hierarchy comes from contrast jumps, typeface changes, rule weight, and spatial breaks; color may only confirm state or active location.

### Signature Patterns

- Proof bars: two-pixel horizontal or vertical black rules label sections and replace decorative headers in cards, tables, and sheets.
- Vermilion chips: tiny square or pill markers attach to active controls, chart outliers, and focus states with strict area limits.
- Neutral-step panels: adjacent modules alternate paper, bone, graphite, and ink variables to maintain WCAG contrast without new colors.
- Registration grid: background and chart areas use fine repeating-linear-gradient guide lines that stay neutral and never become a gradient wash.
- Lintable token labels: component captions expose semantic token names such as color.action.danger and chart.series.accent for production credibility.

## Layout

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

### Grid

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

### Whitespace

Whitespace is measured and editorial: large gutters around ink blocks, compact 8px row rhythm inside operational ledgers.

## Guidance

### Do

- Use semantic aliases over raw primitives: background.canvas, surface.raised, text.primary, border.proof, accent.registration, chart.series.neutral.
- Check every foreground/background pair against WCAG 2.2 AA, and prefer AAA for navigation, table text, and operational labels.
- Keep data visualization mostly neutral, using vermilion only for selected series, exception states, or a single crafted comparison.
- Provide light and dark mappings from the same primitive ladder so components adapt without inventing new hue families.

### Don't

- Do not add pastel gradients, glass panels, neon glows, or saturation simply because the interface feels sparse.
- Do not create unnamed one-off hex values in charts, illustrations, shadows, or hover states.
- Do not use the accent for broad backgrounds, hero floods, or multiple competing CTAs.
- Do not lower contrast to create sophistication; use scale, rule weight, and spacing instead.

DESIGN.md

---
version: "alpha"
name: "Proof Contrast Atelier"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#D54E2F"
  background: "#F6F1E8"
  border: "#1C1B18"
  error: "#B42318"
  info: "#245C8F"
  muted: "#747069"
  primary: "#111111"
  secondary: "#4A4A46"
  success: "#1D6B3A"
  surface: "#FFFCF4"
  text: "#10100F"
  warning: "#9A5A00"
typography:
  headline-lg:
    fontFamily: "Instrument Serif"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Instrument Serif"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Atkinson Hyperlegible"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "4px"
  md: "2px"
  none: "0px"
  sm: "0px"
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"
---

# Proof Contrast Atelier

## Overview

A palette-system language for product teams that treats contrast as the primary craft material: hard neutral steps, almost no chroma, and one warm manufactured accent used like a printer mark rather than decoration.

### Values

- measurable accessibility as visual composition
- production-ready semantic token discipline
- editorial restraint over generative polish
- warm-cool neutrality balanced by a single crafted accent

### Anti-Values

- AI-slop gradients and random saturation
- unnamed one-off colors hidden in components
- low-contrast gray-on-gray hierarchy
- decorative chroma that cannot survive dark mode

### Visual Character

- Use a five-step neutral ladder as CSS variables, with large AAA black-on-paper and paper-on-ink blocks instead of soft gray panels.
- Render every card and control with one-pixel square borders plus occasional two-pixel black rule bars for proof-sheet hierarchy.
- Reserve the kiln-vermilion accent for tiny tokens: status pins, focus rings, active tabs, and data callouts never larger than badge scale.
- Apply subtle registration-grid underlays using repeating-linear-gradient at low opacity, never atmospheric color gradients.
- Flip light and dark modes by swapping neutral variables while keeping semantic token names, border weights, and accent proportions stable.

## 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 | `#D54E2F` |
| background | `#F6F1E8` |
| border | `#1C1B18` |
| error | `#B42318` |
| info | `#245C8F` |
| muted | `#747069` |
| primary | `#111111` |
| secondary | `#4A4A46` |
| success | `#1D6B3A` |
| surface | `#FFFCF4` |
| text | `#10100F` |
| warning | `#9A5A00` |

## Typography

- **Headline-Lg**: Instrument Serif, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Instrument Serif, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Atkinson Hyperlegible, 16px, weight 400, line-height 1.48.
- **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, wide 1440px

### Grid

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

### Whitespace

Whitespace is measured and editorial: large gutters around ink blocks, compact 8px row rhythm inside operational ledgers.

## Elevation & Depth

### Shadows

- **Lg**: 8px 8px 0 rgba(28,27,24,0.85)
- **Md**: 4px 4px 0 #1C1B18
- **Sm**: 2px 2px 0 #1C1B18

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: subtle 24px registration grid built from repeating-linear-gradient in neutral ink at 5 percent opacity
- **Card Style**: square proof cards, one-pixel ink border, optional offset hard shadow, small vermilion registration mark
- **Treatment**: paper and ink neutral planes with no blur, no glass, and AA or AAA contrast at every text size

### Borders

- **Accent Width**: 2px
- **Character**: crisp printer-proof rules; borders create hierarchy before color does
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Compose screens as proof sheets: one dominant ink block, one content ledger, one data strip, and tight annotation columns aligned to a visible grid.

### Density

High information density is acceptable when rows align to 8px increments and every cluster has a black rule or whitespace gutter.

### Hierarchy

Hierarchy comes from contrast jumps, typeface changes, rule weight, and spatial breaks; color may only confirm state or active location.

### Signature Patterns

- Proof bars: two-pixel horizontal or vertical black rules label sections and replace decorative headers in cards, tables, and sheets.
- Vermilion chips: tiny square or pill markers attach to active controls, chart outliers, and focus states with strict area limits.
- Neutral-step panels: adjacent modules alternate paper, bone, graphite, and ink variables to maintain WCAG contrast without new colors.
- Registration grid: background and chart areas use fine repeating-linear-gradient guide lines that stay neutral and never become a gradient wash.
- Lintable token labels: component captions expose semantic token names such as color.action.danger and chart.series.accent for production credibility.

## 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-019ea9b2-beb1-7a50-a9d6-28a4558ac202/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 semantic aliases over raw primitives: background.canvas, surface.raised, text.primary, border.proof, accent.registration, chart.series.neutral.
- Do Check every foreground/background pair against WCAG 2.2 AA, and prefer AAA for navigation, table text, and operational labels.
- Do Keep data visualization mostly neutral, using vermilion only for selected series, exception states, or a single crafted comparison.
- Do Provide light and dark mappings from the same primitive ladder so components adapt without inventing new hue families.
- Don't Do not add pastel gradients, glass panels, neon glows, or saturation simply because the interface feels sparse.
- Don't Do not create unnamed one-off hex values in charts, illustrations, shadows, or hover states.
- Don't Do not use the accent for broad backgrounds, hero floods, or multiple competing CTAs.
- Don't Do not lower contrast to create sophistication; use scale, rule weight, and spacing instead.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "proof-contrast-atelier",
  "type": "registry:theme",
  "title": "Proof Contrast Atelier shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F1E8",
      "foreground": "#10100F",
      "card": "#FFFCF4",
      "card-foreground": "#10100F",
      "popover": "#FFFCF4",
      "popover-foreground": "#10100F",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#4A4A46",
      "secondary-foreground": "#ffffff",
      "muted": "#747069",
      "muted-foreground": "#10100F",
      "accent": "#D54E2F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#1C1B18",
      "input": "#1C1B18",
      "ring": "#D54E2F",
      "chart-1": "#111111",
      "chart-2": "#4A4A46",
      "chart-3": "#D54E2F",
      "chart-4": "#1D6B3A",
      "chart-5": "#9A5A00",
      "sidebar": "#FFFCF4",
      "sidebar-foreground": "#10100F",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#245C8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1C1B18",
      "sidebar-ring": "#D54E2F",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D54E2F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D54E2F",
      "chart-1": "#111111",
      "chart-2": "#4A4A46",
      "chart-3": "#D54E2F",
      "chart-4": "#1D6B3A",
      "chart-5": "#9A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D54E2F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D54E2F",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-beb1-7a50-a9d6-28a4558ac202",
    "slug": "proof-contrast-atelier",
    "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 · proof-contrast-atelier

DESIGN.md

at a glance

Palette

Typography

headline-lgInstrument Serif · 29px · 700

The quick brown fox jumps

headline-mdInstrument Serif · 24px · 600

The quick brown fox jumps

body-mdAtkinson Hyperlegible · 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

lg4px

md2px

none0px

sm0px

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: #F6F1E8;
  --foreground: #10100F;
  --card: #FFFCF4;
  --card-foreground: #10100F;
  --popover: #FFFCF4;
  --popover-foreground: #10100F;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #4A4A46;
  --secondary-foreground: #ffffff;
  --muted: #747069;
  --muted-foreground: #10100F;
  --accent: #D54E2F;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #1C1B18;
  --input: #1C1B18;
  --ring: #D54E2F;
  --chart-1: #111111;
  --chart-2: #4A4A46;
  --chart-3: #D54E2F;
  --chart-4: #1D6B3A;
  --chart-5: #9A5A00;
  --sidebar: #FFFCF4;
  --sidebar-foreground: #10100F;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #245C8F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #1C1B18;
  --sidebar-ring: #D54E2F;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D54E2F;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #303642;
  --input: #303642;
  --ring: #D54E2F;
  --chart-1: #111111;
  --chart-2: #4A4A46;
  --chart-3: #D54E2F;
  --chart-4: #1D6B3A;
  --chart-5: #9A5A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D54E2F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #D54E2F;
  --radius: 2px;
}

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 ProofContrastAtelierShadcnKit() {
  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">Proof Contrast Atelier</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": "proof-contrast-atelier",
  "type": "registry:theme",
  "title": "Proof Contrast Atelier shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F1E8",
      "foreground": "#10100F",
      "card": "#FFFCF4",
      "card-foreground": "#10100F",
      "popover": "#FFFCF4",
      "popover-foreground": "#10100F",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#4A4A46",
      "secondary-foreground": "#ffffff",
      "muted": "#747069",
      "muted-foreground": "#10100F",
      "accent": "#D54E2F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#1C1B18",
      "input": "#1C1B18",
      "ring": "#D54E2F",
      "chart-1": "#111111",
      "chart-2": "#4A4A46",
      "chart-3": "#D54E2F",
      "chart-4": "#1D6B3A",
      "chart-5": "#9A5A00",
      "sidebar": "#FFFCF4",
      "sidebar-foreground": "#10100F",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#245C8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1C1B18",
      "sidebar-ring": "#D54E2F",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D54E2F",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D54E2F",
      "chart-1": "#111111",
      "chart-2": "#4A4A46",
      "chart-3": "#D54E2F",
      "chart-4": "#1D6B3A",
      "chart-5": "#9A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D54E2F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D54E2F",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-beb1-7a50-a9d6-28a4558ac202",
    "slug": "proof-contrast-atelier",
    "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

# Proof Contrast Atelier shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the palette-system brief into local shadcn/ui primitives that feel like a contrast proofing workstation: square geometry, hard neutral steps, visible token names, and tiny vermilion registration marks.

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

## Token cues
Use background.canvas as bone, surface.raised as paper, text.primary as ink, border.proof as crisp black, accent.registration as the only warm chroma, and chart.series.neutral for all unselected data.

## Visual character to preserve
One-pixel borders, two-pixel proof bars, square or 2px radii, offset hard shadows, neutral registration grids, and tiny accent chips. No gradients, glass, glows, or invented hex values.

## ShadSync visual profile
family: proof-atelier; material: ink-on-paper; contour: square; border: crisp-solid; underlay: registration-grid; grain: false; stickerBadges: true but tiny; motion: stepped-press; density: compact-editorial; accents: vermilion chips and focus rings.

## Signature component recipes
- button: default is paper with 1px proof border and 2px hard shadow; primary is ink fill with paper text; focus uses a 2px vermilion outline.
- card: square proof card, paper fill, hard offset shadow, optional top proof bar via before element.
- input: paper field, 1px proof border, mono label above, vermilion focus ring, no tinted disabled backgrounds.
- textarea: same as input with ledger row rhythm and token-name helper text.
- select: paper trigger, square menu, active item marked by a tiny vermilion square not a full accent fill.
- dialog: ink title strip, paper body, 1px border, no overlay blur; close button remains neutral until focus.
- sheet: side proof ledger with 2px leading rule and compact rows.
- tabs: active tab is ink fill or vermilion bottom chip; inactive tabs remain neutral outlines.
- badge: mono uppercase, either neutral outline or small vermilion chip; never large accent pills.
- separator: 1px default, 2px for section proof bars.
- checkbox: square ink outline, vermilion check mark for selected state.
- switch: rectangular track, ink on state, vermilion thumb, no soft rounded iOS styling.
- slider: black rail, square thumb, vermilion selected segment only.
- tooltip: ink fill, paper text, square contour, mono token hints.
- dropdown-menu: paper menu, 1px border, hard shadow, active item with left vermilion chip.
- table: compact rows, black header, visible borders, status badges with AA contrast.

## Preview shots
application-shell shows token navigation, contrast metrics, and chart exception state. detail-editor shows token change form, dialog preview, and lint warnings. data-operations shows dense table, filters, dropdown, and colorblind-safe chart states.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not create a second component system. Preserve semantic token names in class comments or labels where helpful. Never add non-token hex values, vague gradients, blur glass, or decorative saturation.

## 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 { Separator } from "@/components/ui/separator"

export function ContrastProofCard() {
  return (
    <Card className="rounded-[2px] border border-[var(--border-proof)] bg-[var(--surface-raised)] shadow-[4px_4px_0_var(--border-proof)]">
      <CardHeader className="border-b-2 border-[var(--border-proof)]">
        <Badge className="w-fit rounded-none border border-[var(--border-proof)] bg-[var(--background-canvas)] font-mono uppercase text-[var(--text-primary)]">accent.registration</Badge>
        <CardTitle className="font-serif text-4xl tracking-tight">Contrast proof</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-3 pt-4">
        <Input className="rounded-none border-[var(--border-proof)] focus-visible:ring-2 focus-visible:ring-[var(--accent-registration)]" defaultValue="color.neutral.950" />
        <Separator className="h-[2px] bg-[var(--border-proof)]" />
        <Button className="rounded-none bg-[var(--text-primary)] font-mono uppercase text-[var(--background-canvas)] shadow-[2px_2px_0_var(--accent-registration)]">Run contrast lint</Button>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "card",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "input",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "textarea",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "select",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "dialog",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "sheet",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "tabs",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "badge",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "separator",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "checkbox",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "switch",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "slider",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "tooltip",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    },
    {
      "component": "table",
      "recipe": "Use square geometry, 1px proof borders, neutral fills, mono labels where appropriate, and vermilion only for focus, selected, or exception state."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "gradient hero",
        "large accent surfaces",
        "unnamed chart colors"
      ],
      "composition": "Two-column proofing shell with rail navigation, hero contrast card, metrics row, and compact token table.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab ink fill",
        "vermilion focus/action chip",
        "AAA and fail badges",
        "neutral registration grid"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Export tokens",
          "Run contrast lint"
        ],
        "description": "Design ops reviews semantic token pairs before publishing a cross-platform theme.",
        "eyebrow": "Palette QA",
        "headline": "Contrast ledger for release 26.1",
        "rows": [
          {
            "pair": "surface.raised",
            "ratio": "18.3",
            "state": "AAA",
            "token": "text.primary"
          },
          {
            "pair": "white",
            "ratio": "4.7",
            "state": "AA",
            "token": "accent.registration"
          },
          {
            "pair": "none",
            "ratio": "0",
            "state": "FAIL",
            "token": "random.hex"
          }
        ],
        "stats": [
          {
            "label": "AAA pairs",
            "value": "38"
          },
          {
            "label": "AA pairs",
            "value": "12"
          },
          {
            "label": "blocked",
            "value": "3"
          }
        ]
      }
    },
    {
      "avoid": [
        "rounded SaaS controls",
        "soft disabled gray",
        "blurred dialog overlay"
      ],
      "composition": "Token edit sheet beside a modal preview, with lint controls and dark-mode invariant switch.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input vermilion ring",
        "checked square checkbox",
        "rectangular switch",
        "slider with accent segment"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "badge"
      ],
      "scene": {
        "actions": [
          "Approve token",
          "Open dark proof"
        ],
        "description": "A designer documents usage, accessibility ratios, and platform mappings before merge.",
        "eyebrow": "Token change request",
        "fields": [
          {
            "label": "Primitive",
            "value": "color.neutral.650"
          },
          {
            "label": "Semantic alias",
            "value": "text.secondary"
          },
          {
            "label": "Rule",
            "value": "Minimum 4.5:1 against paper and bone"
          }
        ],
        "headline": "Promote graphite step to semantic muted text",
        "stats": [
          {
            "label": "light ratio",
            "value": "5.1"
          },
          {
            "label": "dark ratio",
            "value": "7.4"
          }
        ]
      }
    },
    {
      "avoid": [
        "rainbow categorical palette",
        "low contrast row text",
        "component inventory wall"
      ],
      "composition": "Dense operations table with neutral chart, dropdown filters, and one accent exception series.",
      "id": "data-operations",
      "mustShowStates": [
        "black table header",
        "outline badges",
        "dropdown active chip",
        "single vermilion chart bar"
      ],
      "primitives": [
        "button",
        "card",
        "dropdown-menu",
        "table",
        "badge",
        "separator",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Filter status",
          "Annotate exception"
        ],
        "description": "Operations analysts compare neutral series while the only chroma identifies an audited outlier.",
        "eyebrow": "Chart token safety",
        "headline": "Colorblind-safe exception review",
        "rows": [
          {
            "series": "baseline demand",
            "state": "ok",
            "token": "chart.series.neutral.1"
          },
          {
            "series": "kiln delay",
            "state": "review",
            "token": "chart.series.accent"
          },
          {
            "series": "forecast range",
            "state": "ok",
            "token": "chart.series.neutral.3"
          }
        ],
        "stats": [
          {
            "label": "neutral series",
            "value": "5"
          },
          {
            "label": "accent series",
            "value": "1"
          },
          {
            "label": "unmapped hex",
            "value": "0"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "vermilion chips, focus rings, and exception bars only",
    "border": "crisp-solid",
    "contour": "square",
    "density": "compact-editorial",
    "family": "proof-atelier",
    "grain": false,
    "material": "ink-on-paper",
    "motion": "stepped-press",
    "stickerBadges": true,
    "underlay": "registration-grid"
  }
}

More like this

Captioned Clarityshares high-contrast Emigre Vernacular Type Consoleshares high-contrast Ledger Prism Editorial Shellshares neutral-foundation Memphis Command Objectsshares high-contrast