design language·spectrum-cartography-console

Spectrum Cartography Console

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 production data-visualization language that treats charts as their own territory: ordered, colorblind-safe, dark-mode aware, and explicitly separated from brand and status color semantics.

values

chart-first comprehensiontokenized semantic separationcolorblind-safe hue spacingneutral analytic infrastructureordered light/dark adaptation

anti-values

×reusing success green and error red as arbitrary categories×brand-accent rainbow charts×low-contrast gridlines or unlabeled color-only meaning×decorative gradients inside quantitative marks

tokens

borders4 items

accent width: 3px
character: axis-like neutral borders, category rails, and stepped threshold dividers
default width: 1px
style: solid

colors12 items

accent

#C27A28

background

#F4F2EA

border

#C9C8BF

error

#B5473F

info

#356EA7

muted

#69707A

primary

#2F5F98

secondary

#6A4C93

success

#4D7C54

surface

#FFFDF7

text

#20262E

warning

#B7791F

motion3 items

duration: 140ms
easing: cubic-bezier(.2,.8,.2,1)
philosophy: motion only clarifies filter focus, legend hover, and data selection; chart colors do not animate into new meanings

radii5 items

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

shadows3 items

lg: 0 28px 70px rgba(32,38,46,0.16)
md: 0 14px 32px rgba(32,38,46,0.12)
sm: 0 1px 0 rgba(32,38,46,0.10)

spacing2 items

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

surfaces3 items

bg pattern: subtle calibration grid made from neutral hairlines at 24px intervals
card style: squared panels with one-pixel borders, order rails, and no blurred glass
treatment: matte parchment-neutral analytic canvas with white instrument panels

typography8 items

base size: 16px
body font: Public Sans
google fonts url: https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap
heading font: Public Sans
letter spacing: -0.01em
line height: 1.5
mono font: Spline Sans Mono
scale ratio: 1.22

rules

composition

Lead with one large analytic chart panel, surround it with legends, token dictionaries, threshold strips, and tabular proof so the system reads as a working data product rather than a palette poster.

density

Medium-high information density with compact controls, generous chart gutters, and strict 8px increments so many series remain legible without decorative whitespace.

hierarchy

Use bold Public Sans headings for product decisions, Spline Sans Mono for axis codes and token names, and keep legends permanently visible near their chart marks.

signature patterns

A vertical category order rail appears on chart cards, pairing each hue with a number and short code to avoid color-only identification.Sequential and diverging territories render as stepped threshold ladders with labeled stops, never as ambiguous UI gradients.Chart panels include a dark-mode twin strip using alternate CSS variables to prove contrast and chroma discipline under inversion.Reserved meaning badges separate categorical, sequential, diverging, threshold, neutral, and status tokens into visibly distinct shelves.

layout

breakpoints

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

grid

Twelve-column desktop grid with a 5/7 split for chart workbench and token ledger, collapsing to two columns on tablet and one column on mobile.

whitespace

Use tight internal spacing for controls and larger 24-32px gutters around chart panels so dense data still breathes.

guidance

Create chart tokens as a separate family from UI semantic tokens.
Pair hue with labels, numbers, patterns, or direct annotation.
Define categorical order and reserve red/green only for status semantics.
Provide light and dark variants for every chart territory.

avoid

Do not use error red or success green as arbitrary category colors.
Do not rely on color alone to explain lines, bars, or thresholds.
Do not apply brand accents to data series without chart-token review.
Do not use decorative gradients where discrete thresholds are required.

katagami spec

# Spectrum Cartography Console

## Philosophy

A production data-visualization language that treats charts as their own territory: ordered, colorblind-safe, dark-mode aware, and explicitly separated from brand and status color semantics.

### Values

- chart-first comprehension
- tokenized semantic separation
- colorblind-safe hue spacing
- neutral analytic infrastructure
- ordered light/dark adaptation

### Anti-Values

- reusing success green and error red as arbitrary categories
- brand-accent rainbow charts
- low-contrast gridlines or unlabeled color-only meaning
- decorative gradients inside quantitative marks

### Visual Character

- CSS uses a cool neutral canvas with thin axis-gray hairlines and reserved chart swatches declared as separate custom properties, never as UI status colors.
- Charts sit inside squared calibration panels with left-side order rails, fixed legends, and numbered category chips that provide redundant non-color identification.
- Categorical marks use separated OKLCH-inspired hues at moderate chroma, while sequential and diverging samples are shown as stepped strips rather than smooth decorative gradients.
- Dark-mode preview panels invert the canvas and reduce chroma through explicit dark chart variables so bars and lines retain contrast without glowing neon.
- Data tables, filters, and annotations use quiet neutral surfaces with small mono labels to keep the chart token family visually independent from product controls.

## Tokens

### Borders

- **Accent Width**: 3px
- **Character**: axis-like neutral borders, category rails, and stepped threshold dividers
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#C27A28` |
| background | `#F4F2EA` |
| border | `#C9C8BF` |
| error | `#B5473F` |
| info | `#356EA7` |
| muted | `#69707A` |
| primary | `#2F5F98` |
| secondary | `#6A4C93` |
| success | `#4D7C54` |
| surface | `#FFFDF7` |
| text | `#20262E` |
| warning | `#B7791F` |

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: motion only clarifies filter focus, legend hover, and data selection; chart colors do not animate into new meanings

### Radii

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

### Shadows

- **Lg**: 0 28px 70px rgba(32,38,46,0.16)
- **Md**: 0 14px 32px rgba(32,38,46,0.12)
- **Sm**: 0 1px 0 rgba(32,38,46,0.10)

### Spacing

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

### Surfaces

- **Bg Pattern**: subtle calibration grid made from neutral hairlines at 24px intervals
- **Card Style**: squared panels with one-pixel borders, order rails, and no blurred glass
- **Treatment**: matte parchment-neutral analytic canvas with white instrument panels

### Typography

- **Base Size**: 16px
- **Body Font**: Public Sans
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap
- **Heading Font**: Public Sans
- **Letter Spacing**: -0.01em
- **Line Height**: 1.5
- **Mono Font**: Spline Sans Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Lead with one large analytic chart panel, surround it with legends, token dictionaries, threshold strips, and tabular proof so the system reads as a working data product rather than a palette poster.

### Density

Medium-high information density with compact controls, generous chart gutters, and strict 8px increments so many series remain legible without decorative whitespace.

### Hierarchy

Use bold Public Sans headings for product decisions, Spline Sans Mono for axis codes and token names, and keep legends permanently visible near their chart marks.

### Signature Patterns

- A vertical category order rail appears on chart cards, pairing each hue with a number and short code to avoid color-only identification.
- Sequential and diverging territories render as stepped threshold ladders with labeled stops, never as ambiguous UI gradients.
- Chart panels include a dark-mode twin strip using alternate CSS variables to prove contrast and chroma discipline under inversion.
- Reserved meaning badges separate categorical, sequential, diverging, threshold, neutral, and status tokens into visibly distinct shelves.

## Layout

### Breakpoints

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

### Grid

Twelve-column desktop grid with a 5/7 split for chart workbench and token ledger, collapsing to two columns on tablet and one column on mobile.

### Whitespace

Use tight internal spacing for controls and larger 24-32px gutters around chart panels so dense data still breathes.

## Guidance

### Do

- Create chart tokens as a separate family from UI semantic tokens.
- Pair hue with labels, numbers, patterns, or direct annotation.
- Define categorical order and reserve red/green only for status semantics.
- Provide light and dark variants for every chart territory.

### Don't

- Do not use error red or success green as arbitrary category colors.
- Do not rely on color alone to explain lines, bars, or thresholds.
- Do not apply brand accents to data series without chart-token review.
- Do not use decorative gradients where discrete thresholds are required.

DESIGN.md

---
version: "alpha"
name: "Spectrum Cartography Console"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#C27A28"
  background: "#F4F2EA"
  border: "#C9C8BF"
  error: "#B5473F"
  info: "#356EA7"
  muted: "#69707A"
  primary: "#2F5F98"
  secondary: "#6A4C93"
  success: "#4D7C54"
  surface: "#FFFDF7"
  text: "#20262E"
  warning: "#B7791F"
typography:
  headline-lg:
    fontFamily: "Public Sans"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Public Sans"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Public Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "Spline Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "10px"
  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"
---

# Spectrum Cartography Console

## Overview

A production data-visualization language that treats charts as their own territory: ordered, colorblind-safe, dark-mode aware, and explicitly separated from brand and status color semantics.

### Values

- chart-first comprehension
- tokenized semantic separation
- colorblind-safe hue spacing
- neutral analytic infrastructure
- ordered light/dark adaptation

### Anti-Values

- reusing success green and error red as arbitrary categories
- brand-accent rainbow charts
- low-contrast gridlines or unlabeled color-only meaning
- decorative gradients inside quantitative marks

### Visual Character

- CSS uses a cool neutral canvas with thin axis-gray hairlines and reserved chart swatches declared as separate custom properties, never as UI status colors.
- Charts sit inside squared calibration panels with left-side order rails, fixed legends, and numbered category chips that provide redundant non-color identification.
- Categorical marks use separated OKLCH-inspired hues at moderate chroma, while sequential and diverging samples are shown as stepped strips rather than smooth decorative gradients.
- Dark-mode preview panels invert the canvas and reduce chroma through explicit dark chart variables so bars and lines retain contrast without glowing neon.
- Data tables, filters, and annotations use quiet neutral surfaces with small mono labels to keep the chart token family visually independent from product controls.

## 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 | `#C27A28` |
| background | `#F4F2EA` |
| border | `#C9C8BF` |
| error | `#B5473F` |
| info | `#356EA7` |
| muted | `#69707A` |
| primary | `#2F5F98` |
| secondary | `#6A4C93` |
| success | `#4D7C54` |
| surface | `#FFFDF7` |
| text | `#20262E` |
| warning | `#B7791F` |

## Typography

- **Headline-Lg**: Public Sans, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Public Sans, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Public Sans, 16px, weight 400, line-height 1.5.
- **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, tablet 768px, desktop 1200px, wide 1440px

### Grid

Twelve-column desktop grid with a 5/7 split for chart workbench and token ledger, collapsing to two columns on tablet and one column on mobile.

### Whitespace

Use tight internal spacing for controls and larger 24-32px gutters around chart panels so dense data still breathes.

## Elevation & Depth

### Shadows

- **Lg**: 0 28px 70px rgba(32,38,46,0.16)
- **Md**: 0 14px 32px rgba(32,38,46,0.12)
- **Sm**: 0 1px 0 rgba(32,38,46,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: subtle calibration grid made from neutral hairlines at 24px intervals
- **Card Style**: squared panels with one-pixel borders, order rails, and no blurred glass
- **Treatment**: matte parchment-neutral analytic canvas with white instrument panels

### Borders

- **Accent Width**: 3px
- **Character**: axis-like neutral borders, category rails, and stepped threshold dividers
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Lead with one large analytic chart panel, surround it with legends, token dictionaries, threshold strips, and tabular proof so the system reads as a working data product rather than a palette poster.

### Density

Medium-high information density with compact controls, generous chart gutters, and strict 8px increments so many series remain legible without decorative whitespace.

### Hierarchy

Use bold Public Sans headings for product decisions, Spline Sans Mono for axis codes and token names, and keep legends permanently visible near their chart marks.

### Signature Patterns

- A vertical category order rail appears on chart cards, pairing each hue with a number and short code to avoid color-only identification.
- Sequential and diverging territories render as stepped threshold ladders with labeled stops, never as ambiguous UI gradients.
- Chart panels include a dark-mode twin strip using alternate CSS variables to prove contrast and chroma discipline under inversion.
- Reserved meaning badges separate categorical, sequential, diverging, threshold, neutral, and status tokens into visibly distinct shelves.

## 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-df2d-7ee1-85d7-d81185656f2c/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 Create chart tokens as a separate family from UI semantic tokens.
- Do Pair hue with labels, numbers, patterns, or direct annotation.
- Do Define categorical order and reserve red/green only for status semantics.
- Do Provide light and dark variants for every chart territory.
- Don't Do not use error red or success green as arbitrary category colors.
- Don't Do not rely on color alone to explain lines, bars, or thresholds.
- Don't Do not apply brand accents to data series without chart-token review.
- Don't Do not use decorative gradients where discrete thresholds are required.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spectrum-cartography-console",
  "type": "registry:theme",
  "title": "Spectrum Cartography Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F2EA",
      "foreground": "#20262E",
      "card": "#FFFDF7",
      "card-foreground": "#20262E",
      "popover": "#FFFDF7",
      "popover-foreground": "#20262E",
      "primary": "#2F5F98",
      "primary-foreground": "#ffffff",
      "secondary": "#6A4C93",
      "secondary-foreground": "#ffffff",
      "muted": "#69707A",
      "muted-foreground": "#20262E",
      "accent": "#C27A28",
      "accent-foreground": "#ffffff",
      "destructive": "#B5473F",
      "border": "#C9C8BF",
      "input": "#C9C8BF",
      "ring": "#C27A28",
      "chart-1": "#2F5F98",
      "chart-2": "#6A4C93",
      "chart-3": "#C27A28",
      "chart-4": "#4D7C54",
      "chart-5": "#B7791F",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#20262E",
      "sidebar-primary": "#2F5F98",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#356EA7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9C8BF",
      "sidebar-ring": "#C27A28",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2F5F98",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C27A28",
      "accent-foreground": "#ffffff",
      "destructive": "#B5473F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C27A28",
      "chart-1": "#2F5F98",
      "chart-2": "#6A4C93",
      "chart-3": "#C27A28",
      "chart-4": "#4D7C54",
      "chart-5": "#B7791F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2F5F98",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C27A28",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C27A28",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-df2d-7ee1-85d7-d81185656f2c",
    "slug": "spectrum-cartography-console",
    "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 · spectrum-cartography-console

DESIGN.md

at a glance

Palette

Typography

headline-lgPublic Sans · 29px · 700

The quick brown fox jumps

headline-mdPublic Sans · 24px · 600

The quick brown fox jumps

body-mdPublic Sans · 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

lg10px

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: #F4F2EA;
  --foreground: #20262E;
  --card: #FFFDF7;
  --card-foreground: #20262E;
  --popover: #FFFDF7;
  --popover-foreground: #20262E;
  --primary: #2F5F98;
  --primary-foreground: #ffffff;
  --secondary: #6A4C93;
  --secondary-foreground: #ffffff;
  --muted: #69707A;
  --muted-foreground: #20262E;
  --accent: #C27A28;
  --accent-foreground: #ffffff;
  --destructive: #B5473F;
  --border: #C9C8BF;
  --input: #C9C8BF;
  --ring: #C27A28;
  --chart-1: #2F5F98;
  --chart-2: #6A4C93;
  --chart-3: #C27A28;
  --chart-4: #4D7C54;
  --chart-5: #B7791F;
  --sidebar: #FFFDF7;
  --sidebar-foreground: #20262E;
  --sidebar-primary: #2F5F98;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #356EA7;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C9C8BF;
  --sidebar-ring: #C27A28;
  --radius: 6px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #2F5F98;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C27A28;
  --accent-foreground: #ffffff;
  --destructive: #B5473F;
  --border: #303642;
  --input: #303642;
  --ring: #C27A28;
  --chart-1: #2F5F98;
  --chart-2: #6A4C93;
  --chart-3: #C27A28;
  --chart-4: #4D7C54;
  --chart-5: #B7791F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #2F5F98;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C27A28;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C27A28;
  --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 SpectrumCartographyConsoleShadcnKit() {
  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">Spectrum Cartography Console</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": "spectrum-cartography-console",
  "type": "registry:theme",
  "title": "Spectrum Cartography Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F2EA",
      "foreground": "#20262E",
      "card": "#FFFDF7",
      "card-foreground": "#20262E",
      "popover": "#FFFDF7",
      "popover-foreground": "#20262E",
      "primary": "#2F5F98",
      "primary-foreground": "#ffffff",
      "secondary": "#6A4C93",
      "secondary-foreground": "#ffffff",
      "muted": "#69707A",
      "muted-foreground": "#20262E",
      "accent": "#C27A28",
      "accent-foreground": "#ffffff",
      "destructive": "#B5473F",
      "border": "#C9C8BF",
      "input": "#C9C8BF",
      "ring": "#C27A28",
      "chart-1": "#2F5F98",
      "chart-2": "#6A4C93",
      "chart-3": "#C27A28",
      "chart-4": "#4D7C54",
      "chart-5": "#B7791F",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#20262E",
      "sidebar-primary": "#2F5F98",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#356EA7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9C8BF",
      "sidebar-ring": "#C27A28",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2F5F98",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C27A28",
      "accent-foreground": "#ffffff",
      "destructive": "#B5473F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C27A28",
      "chart-1": "#2F5F98",
      "chart-2": "#6A4C93",
      "chart-3": "#C27A28",
      "chart-4": "#4D7C54",
      "chart-5": "#B7791F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2F5F98",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C27A28",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C27A28",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-df2d-7ee1-85d7-d81185656f2c",
    "slug": "spectrum-cartography-console",
    "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

# Spectrum Cartography Console shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the chart-token governance language into shadcn screens where analytical components are neutral, squared, and explicitly separated from data color semantics.

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

## Token cues
Use `{colors.background}` for the calibration canvas, `{colors.surface}` for cards, `{colors.border}` for axis hairlines, `{colors.primary}` for UI focus, and reserve `{colors.error}` and `{colors.success}` only for actual status states.

## Visual character to preserve
Squared calibration panels, vertical category rails, numbered badges, stepped threshold ladders, mono token labels, and visible neutral gridlines.

## ShadSync visual profile
family: data-viz-governance; material: matte-neutral; contour: squared; border: axis-hairline; underlay: calibration-grid; grain: false; stickerBadges: false; motion: focus-only; density: compact; accents: chart-token-shelves.

## Signature component recipes
- button: squared 6px radius, primary only for actions, never chart hues for arbitrary emphasis.
- card: 1px neutral border, optional 3px left rail, no glass or glow.
- input: matte inset field with mono label and dark focus ring using primary.
- textarea: same as input, used for annotation copy with visible character count.
- select: compact field with token code prefixes in option labels.
- dialog: neutral governance confirmation with status colors only for destructive or success states.
- sheet: right-side token ledger with category order rail.
- tabs: underline/rail tabs, not pill rainbows.
- badge: mono uppercase labels; numbered category badges pair color with CAT code.
- separator: axis-gray 1px line.
- checkbox: square control, primary checkmark, label required.
- switch: neutral track with primary thumb for mode toggles.
- slider: threshold slider with stepped tick labels.
- tooltip: small mono explanatory note for token rules.
- dropdown-menu: compact menu with token family grouping.
- table: dense rows, neutral dividers, explicit status badges.

## Preview shots
application-shell, detail-editor, and data-operations are authored in preview-shots.json and must render as product screenshots, not component inventories.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Keep chart color variables separate from UI semantic variables and never map status red/green into categorical series.

## Copy-paste component example
```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function ChartTokenLedger() {
  return (
    <Card className="rounded-md border border-border bg-card shadow-sm">
      <CardHeader className="border-l-[3px] border-l-primary">
        <CardTitle className="tracking-[-0.03em]">Chart token ledger</CardTitle>
        <Badge variant="outline" className="font-mono uppercase">CAT-01..08 fixed</Badge>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader><TableRow><TableHead>Family</TableHead><TableHead>Use</TableHead><TableHead>Rule</TableHead></TableRow></TableHeader>
          <TableBody>
            <TableRow><TableCell>Categorical</TableCell><TableCell>Series identity</TableCell><TableCell>Hue + code + label</TableCell></TableRow>
            <TableRow><TableCell>Status</TableCell><TableCell>System meaning</TableCell><TableCell>Never arbitrary category</TableCell></TableRow>
          </TableBody>
        </Table>
        <Button className="mt-4 rounded-md">Approve palette map</Button>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored

{
  "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": [
        "rainbow brand accents",
        "red green arbitrary categories"
      ],
      "composition": "large chart governance shell with left order rail and right token ledger",
      "id": "application-shell",
      "mustShowStates": [
        "selected CAT-03",
        "reserved status warning",
        "dark-mode proof strip"
      ],
      "primitives": [
        "card",
        "button",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Approve map",
          "Export tokens"
        ],
        "description": "Operations team audits category separation before publishing a dashboard.",
        "eyebrow": "Palette governance",
        "headline": "Categorical load monitor",
        "rows": [
          {
            "family": "Categorical",
            "rule": "hue + number + label",
            "state": "approved"
          },
          {
            "family": "Status",
            "rule": "reserved only",
            "state": "locked"
          }
        ],
        "stats": [
          {
            "label": "Series",
            "value": "08"
          },
          {
            "label": "Contrast minimum",
            "value": "4.9:1"
          },
          {
            "label": "Reserved colors",
            "value": "2"
          }
        ]
      }
    },
    {
      "avoid": [
        "unlabeled swatches",
        "smooth decorative gradient"
      ],
      "composition": "token detail editor with threshold slider and right-side sheet ledger",
      "id": "detail-editor",
      "mustShowStates": [
        "dark variant toggle",
        "threshold steps",
        "label redundancy checkbox"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save territory",
          "Open ledger"
        ],
        "description": "A designer sets labeled stops for an accessible threshold ladder.",
        "eyebrow": "Token editor",
        "fields": [
          {
            "label": "Token family",
            "value": "SEQ-BLUE"
          },
          {
            "label": "Stop count",
            "value": "5"
          },
          {
            "label": "Annotation",
            "value": "Use for magnitude only"
          }
        ],
        "headline": "Define sequential territory"
      }
    },
    {
      "avoid": [
        "component inventory wall",
        "decorative gradients"
      ],
      "composition": "dense approval table with compact filters and status badges",
      "id": "data-operations",
      "mustShowStates": [
        "policy violation for status green",
        "approved categorical shelf",
        "neutral axis rule"
      ],
      "primitives": [
        "card",
        "dropdown-menu",
        "table",
        "badge",
        "separator",
        "button",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Run audit",
          "Assign reviewer"
        ],
        "description": "Reviewers approve chart-safe mappings across product analytics dashboards.",
        "eyebrow": "Data operations",
        "headline": "Palette policy queue",
        "rows": [
          {
            "dashboard": "Adoption funnel",
            "issue": "uses CAT tokens",
            "state": "approved"
          },
          {
            "dashboard": "Revenue risk",
            "issue": "uses success green as category",
            "state": "blocked"
          },
          {
            "dashboard": "Latency map",
            "issue": "sequential ladder labeled",
            "state": "approved"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "chart-token-shelves",
    "border": "axis-hairline",
    "contour": "squared",
    "density": "compact",
    "family": "data-viz-governance",
    "grain": false,
    "material": "matte-neutral",
    "motion": "focus-only",
    "stickerBadges": false,
    "underlay": "calibration-grid"
  }
}