design language·signal-ledger-chart-safe

Signal Ledger Chart-Safe

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

Signal Ledger Chart-Safe is a production digital-product language where data visualization has its own disciplined color territory, separate from brand accent and UI status semantics. It is built for analytics, operations, and creative dashboards that must compare categories, read sequential intensity, and survive light/dark adaptation without turning red and green into arbitrary decoration.

values

Chart comprehension before brand expression: categorical, sequential, diverging, and threshold colors are named, ordered, and reserved as independent token families.Colorblind-safe separation through hue, lightness, and pattern redundancy rather than relying on red/green opposition.Production neutrality for axes, grids, surfaces, and tables so chart marks carry meaning without fighting the interface.Semantic token readiness using OKLCH-oriented ramps, stable dark-mode pairings, and explicit no-recycling rules for status colors.

anti-values

×Never reuse status red or success green as arbitrary chart categories or decorative accents.×No rainbow gradients, low-contrast lines, unlabeled color-only thresholds, or brand-colored chart series without a reserved meaning.×No glossy SaaS chroma overload; interface neutrals must stay quiet enough for dense data displays.

tokens

borders4 items

accent width: 2px
character: technical ledger lines with clipped notches and reserved colored rule accents
default width: 1px
style: solid for UI structure, dashed only for data-series redundancy

chart_tokens5 items

categorical order: #3178B7, #D49A2A, #7A63B8, #3C8E7B, #C5658B, #6F879D, #9B6A3E, #5A9E4B
diverging temp: #315D9F, #78A6C8, #E8E1D3, #D9A24A, #A94F36
reserved meanings: error UI failure only·green not a default category·red not a default category·success UI completion only
sequential blue: #EAF2F8, #CFE2F1, #9EC5DF, #5E9BC8, #2F6F9F, #17496F
threshold: breach #8E3F5E·safe #2D6F9F·watch #D49A2A

colors12 items

accent

#D48A1F

background

#F7F4ED

border

#C8C1B5

error

#B83A4B

info

#2D6F9F

muted

#69717C

primary

#2446A8

secondary

#6A4C93

success

#237A57

surface

#FFFDF7

text

#1C2530

warning

#B36B00

dark_colors6 items

background: #10161D
border: #394653
categorical order: #68A9DC, #F0B94D, #A990E6, #63C2A9, #E28AB0, #A8B8C7, #D19A68, #8CCB7C
muted: #9BA7B4
surface: #17202A
text: #EEF2F6

motion3 items

duration: 160ms
easing: cubic-bezier(0.2, 0.8, 0.2, 1)
philosophy: small focus and hover confirmations only; charts must not animate in ways that obscure comparison

radii5 items

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

shadows3 items

lg: 0 22px 60px rgba(28,37,48,0.14)
md: 0 12px 30px rgba(28,37,48,0.10)
sm: 0 1px 0 rgba(28,37,48,0.12)

spacing2 items

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

surfaces3 items

bg pattern: subtle 24px repeating grid using low-contrast neutral lines
card style: flat panels with 2px ink borders, notch corners, and no glossy gradients
treatment: warm matte ivory surfaces with ledger-grid underlays for chart zones

typography8 items

base size: 16px
body font: IBM Plex Sans
google fonts url: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap
heading font: Space Grotesk
letter spacing: -0.015em
line height: 1.5
mono font: IBM Plex Mono
scale ratio: 1.2

rules

composition

Use a neutral application shell with a left token ledger, a central chart board, and right-side interpretation panels; never let decorative brand color dominate the plotted data.

density

Medium-high information density is expected, with 8px rhythm, tight table rows, and enough neutral whitespace around charts for labels and legends.

hierarchy

Headlines are compact and technical; hierarchy comes from rule weight, tabular numeric contrast, direct chart labels, and reserved swatch order rather than oversized cards.

signature patterns

Ordered color ledgers display categorical swatches as numbered rows with usage notes, making chart tokens auditable instead of decorative.Chart boards use neutral axis-grid CSS backgrounds plus inline labels, endpoint dots, and dashed/solid line styles for redundant reading.Threshold bands are striped and labeled directly inside the plot area so alert meaning is not dependent on color hue alone.Notched ledger panels use clip-path polygons and 2px borders to create a precise production-instrument feel without skeuomorphic chrome.

layout

breakpoints

1440 desktop three-column, 768 tablet two-column with notes below, 375 mobile single-column with horizontal chart scrolling only where necessary.

grid

Desktop uses a 12-column ledger grid with 280px token rail, flexible chart board, and 320px notes rail; cards align to an 8px baseline.

whitespace

Whitespace is functional and reserved for labels, legends, and axis clarity; dense tables may tighten but chart annotations need breathing room.

guidance

Use chart tokens in their declared order and document any reserved semantic meaning at the point of use.
Pair every important color distinction with a label, line style, marker shape, stripe, or numeric value.
Keep axes, gridlines, dividers, and inactive controls in safe neutrals so data color remains legible.
Provide dark-mode equivalents by preserving relative lightness contrast, not by simply inverting hues.

avoid

Do not use UI error red or success green as casual chart categories.
Do not ship unlabeled heatmaps, rainbow ramps, or low-contrast thin lines against tinted surfaces.
Do not use brand accent as the default first data series unless the chart is explicitly about the brand.
Do not rely on color alone for thresholds, selection, or risk states.

katagami spec

# Signal Ledger Chart-Safe

## Philosophy

Signal Ledger Chart-Safe is a production digital-product language where data visualization has its own disciplined color territory, separate from brand accent and UI status semantics. It is built for analytics, operations, and creative dashboards that must compare categories, read sequential intensity, and survive light/dark adaptation without turning red and green into arbitrary decoration.

### Values

- Chart comprehension before brand expression: categorical, sequential, diverging, and threshold colors are named, ordered, and reserved as independent token families.
- Colorblind-safe separation through hue, lightness, and pattern redundancy rather than relying on red/green opposition.
- Production neutrality for axes, grids, surfaces, and tables so chart marks carry meaning without fighting the interface.
- Semantic token readiness using OKLCH-oriented ramps, stable dark-mode pairings, and explicit no-recycling rules for status colors.

### Anti-Values

- Never reuse status red or success green as arbitrary chart categories or decorative accents.
- No rainbow gradients, low-contrast lines, unlabeled color-only thresholds, or brand-colored chart series without a reserved meaning.
- No glossy SaaS chroma overload; interface neutrals must stay quiet enough for dense data displays.

### Visual Character

- CSS variables define separate --ui-*, --chart-cat-*, --chart-seq-*, --chart-div-* and --threshold-* families, with chart swatches rendered as ordered ledger rows.
- Panels use squared 2px ink borders with clipped 10px corner notches and faint axis-grid backgrounds made from repeating linear gradients.
- Charts combine color with redundant encodings: dashed lines, dot markers, striped threshold bands, and inline labels anchored directly beside marks.
- Layout pairs a quiet neutral product shell with a high-density chart board, using fixed-width numeric columns and tabular-nums for all metrics.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: technical ledger lines with clipped notches and reserved colored rule accents
- **Default Width**: 1px
- **Style**: solid for UI structure, dashed only for data-series redundancy

### Chart Tokens

- **Categorical Order**: ["#3178B7","#D49A2A","#7A63B8","#3C8E7B","#C5658B","#6F879D","#9B6A3E","#5A9E4B"]
- **Diverging Temp**: ["#315D9F","#78A6C8","#E8E1D3","#D9A24A","#A94F36"]
- **Reserved Meanings**: {"error":"UI failure only","green":"not a default category","red":"not a default category","success":"UI completion only"}
- **Sequential Blue**: ["#EAF2F8","#CFE2F1","#9EC5DF","#5E9BC8","#2F6F9F","#17496F"]
- **Threshold**: {"breach":"#8E3F5E","safe":"#2D6F9F","watch":"#D49A2A"}

### Colors

| Name | Value |
|------|-------|
| accent | `#D48A1F` |
| background | `#F7F4ED` |
| border | `#C8C1B5` |
| error | `#B83A4B` |
| info | `#2D6F9F` |
| muted | `#69717C` |
| primary | `#2446A8` |
| secondary | `#6A4C93` |
| success | `#237A57` |
| surface | `#FFFDF7` |
| text | `#1C2530` |
| warning | `#B36B00` |

### Dark Colors

- **Background**: #10161D
- **Border**: #394653
- **Categorical Order**: ["#68A9DC","#F0B94D","#A990E6","#63C2A9","#E28AB0","#A8B8C7","#D19A68","#8CCB7C"]
- **Muted**: #9BA7B4
- **Surface**: #17202A
- **Text**: #EEF2F6

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: small focus and hover confirmations only; charts must not animate in ways that obscure comparison

### Radii

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

### Shadows

- **Lg**: 0 22px 60px rgba(28,37,48,0.14)
- **Md**: 0 12px 30px rgba(28,37,48,0.10)
- **Sm**: 0 1px 0 rgba(28,37,48,0.12)

### Spacing

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

### Surfaces

- **Bg Pattern**: subtle 24px repeating grid using low-contrast neutral lines
- **Card Style**: flat panels with 2px ink borders, notch corners, and no glossy gradients
- **Treatment**: warm matte ivory surfaces with ledger-grid underlays for chart zones

### Typography

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

## Rules

### Composition

Use a neutral application shell with a left token ledger, a central chart board, and right-side interpretation panels; never let decorative brand color dominate the plotted data.

### Density

Medium-high information density is expected, with 8px rhythm, tight table rows, and enough neutral whitespace around charts for labels and legends.

### Hierarchy

Headlines are compact and technical; hierarchy comes from rule weight, tabular numeric contrast, direct chart labels, and reserved swatch order rather than oversized cards.

### Signature Patterns

- Ordered color ledgers display categorical swatches as numbered rows with usage notes, making chart tokens auditable instead of decorative.
- Chart boards use neutral axis-grid CSS backgrounds plus inline labels, endpoint dots, and dashed/solid line styles for redundant reading.
- Threshold bands are striped and labeled directly inside the plot area so alert meaning is not dependent on color hue alone.
- Notched ledger panels use clip-path polygons and 2px borders to create a precise production-instrument feel without skeuomorphic chrome.

## Layout

### Breakpoints

1440 desktop three-column, 768 tablet two-column with notes below, 375 mobile single-column with horizontal chart scrolling only where necessary.

### Grid

Desktop uses a 12-column ledger grid with 280px token rail, flexible chart board, and 320px notes rail; cards align to an 8px baseline.

### Whitespace

Whitespace is functional and reserved for labels, legends, and axis clarity; dense tables may tighten but chart annotations need breathing room.

## Guidance

### Do

- Use chart tokens in their declared order and document any reserved semantic meaning at the point of use.
- Pair every important color distinction with a label, line style, marker shape, stripe, or numeric value.
- Keep axes, gridlines, dividers, and inactive controls in safe neutrals so data color remains legible.
- Provide dark-mode equivalents by preserving relative lightness contrast, not by simply inverting hues.

### Don't

- Do not use UI error red or success green as casual chart categories.
- Do not ship unlabeled heatmaps, rainbow ramps, or low-contrast thin lines against tinted surfaces.
- Do not use brand accent as the default first data series unless the chart is explicitly about the brand.
- Do not rely on color alone for thresholds, selection, or risk states.

DESIGN.md

---
version: "alpha"
name: "Signal Ledger Chart-Safe"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#D48A1F"
  background: "#F7F4ED"
  border: "#C8C1B5"
  error: "#B83A4B"
  info: "#2D6F9F"
  muted: "#69717C"
  primary: "#2446A8"
  secondary: "#6A4C93"
  success: "#237A57"
  surface: "#FFFDF7"
  text: "#1C2530"
  warning: "#B36B00"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "1.728rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.44rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "IBM Plex 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"
---

# Signal Ledger Chart-Safe

## Overview

Signal Ledger Chart-Safe is a production digital-product language where data visualization has its own disciplined color territory, separate from brand accent and UI status semantics. It is built for analytics, operations, and creative dashboards that must compare categories, read sequential intensity, and survive light/dark adaptation without turning red and green into arbitrary decoration.

### Values

- Chart comprehension before brand expression: categorical, sequential, diverging, and threshold colors are named, ordered, and reserved as independent token families.
- Colorblind-safe separation through hue, lightness, and pattern redundancy rather than relying on red/green opposition.
- Production neutrality for axes, grids, surfaces, and tables so chart marks carry meaning without fighting the interface.
- Semantic token readiness using OKLCH-oriented ramps, stable dark-mode pairings, and explicit no-recycling rules for status colors.

### Anti-Values

- Never reuse status red or success green as arbitrary chart categories or decorative accents.
- No rainbow gradients, low-contrast lines, unlabeled color-only thresholds, or brand-colored chart series without a reserved meaning.
- No glossy SaaS chroma overload; interface neutrals must stay quiet enough for dense data displays.

### Visual Character

- CSS variables define separate --ui-*, --chart-cat-*, --chart-seq-*, --chart-div-* and --threshold-* families, with chart swatches rendered as ordered ledger rows.
- Panels use squared 2px ink borders with clipped 10px corner notches and faint axis-grid backgrounds made from repeating linear gradients.
- Charts combine color with redundant encodings: dashed lines, dot markers, striped threshold bands, and inline labels anchored directly beside marks.
- Layout pairs a quiet neutral product shell with a high-density chart board, using fixed-width numeric columns and tabular-nums for all metrics.

## 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 | `#D48A1F` |
| background | `#F7F4ED` |
| border | `#C8C1B5` |
| error | `#B83A4B` |
| info | `#2D6F9F` |
| muted | `#69717C` |
| primary | `#2446A8` |
| secondary | `#6A4C93` |
| success | `#237A57` |
| surface | `#FFFDF7` |
| text | `#1C2530` |
| warning | `#B36B00` |

## Typography

- **Headline-Lg**: Space Grotesk, 1.728rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.44rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 16px, weight 400, line-height 1.5.
- **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

1440 desktop three-column, 768 tablet two-column with notes below, 375 mobile single-column with horizontal chart scrolling only where necessary.

### Grid

Desktop uses a 12-column ledger grid with 280px token rail, flexible chart board, and 320px notes rail; cards align to an 8px baseline.

### Whitespace

Whitespace is functional and reserved for labels, legends, and axis clarity; dense tables may tighten but chart annotations need breathing room.

## Elevation & Depth

### Shadows

- **Lg**: 0 22px 60px rgba(28,37,48,0.14)
- **Md**: 0 12px 30px rgba(28,37,48,0.10)
- **Sm**: 0 1px 0 rgba(28,37,48,0.12)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: subtle 24px repeating grid using low-contrast neutral lines
- **Card Style**: flat panels with 2px ink borders, notch corners, and no glossy gradients
- **Treatment**: warm matte ivory surfaces with ledger-grid underlays for chart zones

### Borders

- **Accent Width**: 2px
- **Character**: technical ledger lines with clipped notches and reserved colored rule accents
- **Default Width**: 1px
- **Style**: solid for UI structure, dashed only for data-series redundancy

## Components

### Composition

Use a neutral application shell with a left token ledger, a central chart board, and right-side interpretation panels; never let decorative brand color dominate the plotted data.

### Density

Medium-high information density is expected, with 8px rhythm, tight table rows, and enough neutral whitespace around charts for labels and legends.

### Hierarchy

Headlines are compact and technical; hierarchy comes from rule weight, tabular numeric contrast, direct chart labels, and reserved swatch order rather than oversized cards.

### Signature Patterns

- Ordered color ledgers display categorical swatches as numbered rows with usage notes, making chart tokens auditable instead of decorative.
- Chart boards use neutral axis-grid CSS backgrounds plus inline labels, endpoint dots, and dashed/solid line styles for redundant reading.
- Threshold bands are striped and labeled directly inside the plot area so alert meaning is not dependent on color hue alone.
- Notched ledger panels use clip-path polygons and 2px borders to create a precise production-instrument feel without skeuomorphic chrome.

## 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-5d03-7d23-8595-0524a6ac8d26/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 chart tokens in their declared order and document any reserved semantic meaning at the point of use.
- Do Pair every important color distinction with a label, line style, marker shape, stripe, or numeric value.
- Do Keep axes, gridlines, dividers, and inactive controls in safe neutrals so data color remains legible.
- Do Provide dark-mode equivalents by preserving relative lightness contrast, not by simply inverting hues.
- Don't Do not use UI error red or success green as casual chart categories.
- Don't Do not ship unlabeled heatmaps, rainbow ramps, or low-contrast thin lines against tinted surfaces.
- Don't Do not use brand accent as the default first data series unless the chart is explicitly about the brand.
- Don't Do not rely on color alone for thresholds, selection, or risk states.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signal-ledger-chart-safe",
  "type": "registry:theme",
  "title": "Signal Ledger Chart-Safe shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F4ED",
      "foreground": "#1C2530",
      "card": "#FFFDF7",
      "card-foreground": "#1C2530",
      "popover": "#FFFDF7",
      "popover-foreground": "#1C2530",
      "primary": "#2446A8",
      "primary-foreground": "#ffffff",
      "secondary": "#6A4C93",
      "secondary-foreground": "#ffffff",
      "muted": "#69717C",
      "muted-foreground": "#1C2530",
      "accent": "#D48A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A4B",
      "border": "#C8C1B5",
      "input": "#C8C1B5",
      "ring": "#D48A1F",
      "chart-1": "#2446A8",
      "chart-2": "#6A4C93",
      "chart-3": "#D48A1F",
      "chart-4": "#237A57",
      "chart-5": "#B36B00",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#1C2530",
      "sidebar-primary": "#2446A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D6F9F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C8C1B5",
      "sidebar-ring": "#D48A1F",
      "radius": "6px"
    },
    "dark": {
      "background": "#10161D",
      "foreground": "#EEF2F6",
      "card": "#17202A",
      "card-foreground": "#EEF2F6",
      "popover": "#17202A",
      "popover-foreground": "#EEF2F6",
      "primary": "#2446A8",
      "primary-foreground": "#ffffff",
      "secondary": "#6A4C93",
      "secondary-foreground": "#ffffff",
      "muted": "#9BA7B4",
      "muted-foreground": "#EEF2F6",
      "accent": "#D48A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A4B",
      "border": "#394653",
      "input": "#394653",
      "ring": "#D48A1F",
      "chart-1": "#2446A8",
      "chart-2": "#6A4C93",
      "chart-3": "#D48A1F",
      "chart-4": "#237A57",
      "chart-5": "#B36B00",
      "sidebar": "#17202A",
      "sidebar-foreground": "#EEF2F6",
      "sidebar-primary": "#2446A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D6F9F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#394653",
      "sidebar-ring": "#D48A1F",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-5d03-7d23-8595-0524a6ac8d26",
    "slug": "signal-ledger-chart-safe",
    "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"
      ],
      "chart_tokens": [
        "categorical_order",
        "diverging_temp",
        "reserved_meanings",
        "sequential_blue",
        "threshold"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "dark_colors": [
        "background",
        "border",
        "categorical_order",
        "muted",
        "surface",
        "text"
      ],
      "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 · signal-ledger-chart-safe

DESIGN.md

at a glance

Palette

Typography

headline-lgSpace Grotesk · 28px · 700

The quick brown fox jumps

headline-mdSpace Grotesk · 23px · 600

The quick brown fox jumps

body-mdIBM Plex Sans · 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

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: #F7F4ED;
  --foreground: #1C2530;
  --card: #FFFDF7;
  --card-foreground: #1C2530;
  --popover: #FFFDF7;
  --popover-foreground: #1C2530;
  --primary: #2446A8;
  --primary-foreground: #ffffff;
  --secondary: #6A4C93;
  --secondary-foreground: #ffffff;
  --muted: #69717C;
  --muted-foreground: #1C2530;
  --accent: #D48A1F;
  --accent-foreground: #ffffff;
  --destructive: #B83A4B;
  --border: #C8C1B5;
  --input: #C8C1B5;
  --ring: #D48A1F;
  --chart-1: #2446A8;
  --chart-2: #6A4C93;
  --chart-3: #D48A1F;
  --chart-4: #237A57;
  --chart-5: #B36B00;
  --sidebar: #FFFDF7;
  --sidebar-foreground: #1C2530;
  --sidebar-primary: #2446A8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2D6F9F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C8C1B5;
  --sidebar-ring: #D48A1F;
  --radius: 6px;
}

.dark {
  --background: #10161D;
  --foreground: #EEF2F6;
  --card: #17202A;
  --card-foreground: #EEF2F6;
  --popover: #17202A;
  --popover-foreground: #EEF2F6;
  --primary: #2446A8;
  --primary-foreground: #ffffff;
  --secondary: #6A4C93;
  --secondary-foreground: #ffffff;
  --muted: #9BA7B4;
  --muted-foreground: #EEF2F6;
  --accent: #D48A1F;
  --accent-foreground: #ffffff;
  --destructive: #B83A4B;
  --border: #394653;
  --input: #394653;
  --ring: #D48A1F;
  --chart-1: #2446A8;
  --chart-2: #6A4C93;
  --chart-3: #D48A1F;
  --chart-4: #237A57;
  --chart-5: #B36B00;
  --sidebar: #17202A;
  --sidebar-foreground: #EEF2F6;
  --sidebar-primary: #2446A8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2D6F9F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #394653;
  --sidebar-ring: #D48A1F;
  --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 SignalLedgerChartSafeShadcnKit() {
  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">Signal Ledger Chart-Safe</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": "signal-ledger-chart-safe",
  "type": "registry:theme",
  "title": "Signal Ledger Chart-Safe shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F4ED",
      "foreground": "#1C2530",
      "card": "#FFFDF7",
      "card-foreground": "#1C2530",
      "popover": "#FFFDF7",
      "popover-foreground": "#1C2530",
      "primary": "#2446A8",
      "primary-foreground": "#ffffff",
      "secondary": "#6A4C93",
      "secondary-foreground": "#ffffff",
      "muted": "#69717C",
      "muted-foreground": "#1C2530",
      "accent": "#D48A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A4B",
      "border": "#C8C1B5",
      "input": "#C8C1B5",
      "ring": "#D48A1F",
      "chart-1": "#2446A8",
      "chart-2": "#6A4C93",
      "chart-3": "#D48A1F",
      "chart-4": "#237A57",
      "chart-5": "#B36B00",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#1C2530",
      "sidebar-primary": "#2446A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D6F9F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C8C1B5",
      "sidebar-ring": "#D48A1F",
      "radius": "6px"
    },
    "dark": {
      "background": "#10161D",
      "foreground": "#EEF2F6",
      "card": "#17202A",
      "card-foreground": "#EEF2F6",
      "popover": "#17202A",
      "popover-foreground": "#EEF2F6",
      "primary": "#2446A8",
      "primary-foreground": "#ffffff",
      "secondary": "#6A4C93",
      "secondary-foreground": "#ffffff",
      "muted": "#9BA7B4",
      "muted-foreground": "#EEF2F6",
      "accent": "#D48A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#B83A4B",
      "border": "#394653",
      "input": "#394653",
      "ring": "#D48A1F",
      "chart-1": "#2446A8",
      "chart-2": "#6A4C93",
      "chart-3": "#D48A1F",
      "chart-4": "#237A57",
      "chart-5": "#B36B00",
      "sidebar": "#17202A",
      "sidebar-foreground": "#EEF2F6",
      "sidebar-primary": "#2446A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D6F9F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#394653",
      "sidebar-ring": "#D48A1F",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-5d03-7d23-8595-0524a6ac8d26",
    "slug": "signal-ledger-chart-safe",
    "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"
      ],
      "chart_tokens": [
        "categorical_order",
        "diverging_temp",
        "reserved_meanings",
        "sequential_blue",
        "threshold"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "dark_colors": [
        "background",
        "border",
        "categorical_order",
        "muted",
        "surface",
        "text"
      ],
      "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

# Signal Ledger Chart-Safe shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate Signal Ledger into shadcn/ui screens for analytic products where chart color is separate from UI semantic status. Components must feel like precise chart ledgers: neutral matte surfaces, notched borders, tabular numbers, direct labels, and explicit chart token order.

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

## Token cues
Use background `{colors.background}`, surface `{colors.surface}`, text `{colors.text}`, border `{colors.border}`, primary `{colors.primary}` for product actions only, and reserve error/success for UI outcomes. Chart recipes use custom CSS variables `--chart-cat-01..08`, `--chart-seq-*`, `--chart-div-*`, and `--threshold-*` inside application code.

## Visual character to preserve
- Notched 10px card corners via a wrapper class using `clip-path` or pseudo-element corner cuts.
- 2px ink borders for main panels, 1px neutral borders for rows and controls.
- Ledger grid underlays behind chart boards only, not behind every component.
- Tabular numeric columns and inline labels for all chart/state data.

## ShadSync visual profile
family: data-ledger; material: matte-ivory; contour: notched-rect; border: 2px ink; underlay: axis-grid; grain: false; stickerBadges: false; motion: short-focus-confirmation; density: medium-high; accents: chart-safe blue/amber/violet/teal.

## Signature component recipes
- button: primary buttons use `{colors.primary}` with 2px ink border and 3px offset shadow; secondary buttons stay surface-filled. Destructive buttons are only for destructive UI actions.
- card: wrap Card in `.ledger-card` with clipped corners, 2px border, no blur, no glossy gradients.
- input, textarea: 2px border, square 6px control radius, mono helper text, focus ring in info blue not status green.
- select and dropdown-menu: neutral surface menu with mono option metadata; selected chart category displays numbered swatch and label.
- dialog and sheet: use as token audit panels; include a separator and table of reserved meanings.
- tabs: use for categorical / sequential / diverging / threshold families; active tab gets a small top rule instead of a filled pill.
- badge: use outlined badges for category IDs; filled badges only for threshold labels with text redundancy.
- separator: 2px dark rule for section breaks, 1px neutral rule inside dense forms.
- checkbox and switch: show settings for redundant labels, dark pair enabled, and colorblind check; do not encode success with green-only switch styling.
- slider: use for sequential ramp step count, with visible numeric output.
- tooltip: explain reserved meanings and contrast ratios; never hide essential chart labels only in a tooltip.
- table: compact rows, tabular numbers, first column label, swatch column, and explicit reserved meaning column.

## Preview shots
application-shell shows a token ledger and chart board; detail-editor edits a categorical token; data-operations audits contrast, dark pairs, and reserved red/green usage.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Preserve all chart token semantics and redundant cues in copy, layout, and states.

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

export function ChartTokenLedger() {
  const rows = [
    ["01", "Comparison blue", "#3178B7", "primary category"],
    ["02", "Amber measure", "#D49A2A", "secondary category"],
    ["03", "Violet cohort", "#7A63B8", "dashed redundant line"]
  ]
  return (
    <Card className="ledger-card border-2 shadow-none [clip-path:polygon(0_10px,10px_0,100%_0,100%_calc(100%-10px),calc(100%-10px)_100%,0_100%)]">
      <CardHeader className="border-b-2"><CardTitle>Chart token ledger</CardTitle></CardHeader>
      <CardContent className="space-y-4 pt-4">
        <div className="flex gap-2"><Button>Export tokens</Button><Badge variant="outline">red/green reserved</Badge></div>
        <Table><TableHeader><TableRow><TableHead>ID</TableHead><TableHead>Name</TableHead><TableHead>Hex</TableHead><TableHead>Rule</TableHead></TableRow></TableHeader><TableBody>{rows.map((r) => <TableRow key={r[0]}><TableCell className="font-mono">{r[0]}</TableCell><TableCell>{r[1]}</TableCell><TableCell className="font-mono">{r[2]}</TableCell><TableCell>{r[3]}</TableCell></TableRow>)}</TableBody></Table>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for button."
    },
    {
      "component": "card",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for card."
    },
    {
      "component": "input",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for input."
    },
    {
      "component": "textarea",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for textarea."
    },
    {
      "component": "select",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for select."
    },
    {
      "component": "dialog",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for dialog."
    },
    {
      "component": "sheet",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for sheet."
    },
    {
      "component": "tabs",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for tabs."
    },
    {
      "component": "badge",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for badge."
    },
    {
      "component": "separator",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for separator."
    },
    {
      "component": "checkbox",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for checkbox."
    },
    {
      "component": "switch",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for switch."
    },
    {
      "component": "slider",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for slider."
    },
    {
      "component": "tooltip",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for tooltip."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for dropdown-menu."
    },
    {
      "component": "table",
      "recipe": "Use Signal Ledger neutral surfaces, ink borders, tabular labels, and reserved chart token semantics for table."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow legends",
        "status red/green categories"
      ],
      "composition": "Three-column analytics shell with token rail, central chart card, and audit notes.",
      "id": "application-shell",
      "mustShowStates": [
        "active category tab",
        "outlined reserved-meaning badge",
        "tooltip explaining contrast ratio"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Export tokens",
          "Run contrast audit"
        ],
        "description": "Audit categorical order, threshold labels, and dark-mode pairs before publishing a dashboard.",
        "eyebrow": "Chart token operations",
        "headline": "Palette decisions that survive charts",
        "rows": [
          [
            "CAT-01",
            "Comparison blue",
            "#3178B7",
            "solid line"
          ],
          [
            "CAT-02",
            "Amber measure",
            "#D49A2A",
            "dotted line"
          ],
          [
            "CAT-03",
            "Violet cohort",
            "#7A63B8",
            "dashed line"
          ]
        ],
        "stats": [
          {
            "label": "categories",
            "value": "8"
          },
          {
            "label": "min line contrast",
            "value": "3.2:1"
          },
          {
            "label": "redundant cues",
            "value": "4"
          }
        ]
      }
    },
    {
      "avoid": [
        "green success switch as decoration",
        "unlabeled color fields"
      ],
      "composition": "Focused editor sheet for a single chart color token with reserved meaning controls.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused hex input",
        "checked redundant label option",
        "slider value for ramp step"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet",
        "button"
      ],
      "scene": {
        "actions": [
          "Save token",
          "Preview dark pair"
        ],
        "description": "Change a category token while preserving contrast, dark pair, and non-color encodings.",
        "eyebrow": "Token detail",
        "fields": [
          {
            "label": "Token name",
            "value": "Violet cohort"
          },
          {
            "label": "Hex",
            "value": "#7A63B8"
          },
          {
            "label": "Line style",
            "value": "dashed"
          },
          {
            "label": "Dark pair",
            "value": "#A990E6"
          }
        ],
        "headline": "Edit CAT-03 without breaking semantics"
      }
    },
    {
      "avoid": [
        "color-only breach rows",
        "brand accent as first series"
      ],
      "composition": "Dense audit table for palette release operations, with filters and threshold badges.",
      "id": "data-operations",
      "mustShowStates": [
        "watch threshold badge",
        "dropdown category filter",
        "table row hover"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "badge",
        "separator",
        "card",
        "button",
        "input",
        "select"
      ],
      "scene": {
        "actions": [
          "Filter family",
          "Approve release"
        ],
        "description": "Review categorical, sequential, diverging, and threshold families with explicit accessibility evidence.",
        "eyebrow": "Release audit",
        "headline": "Chart safety checks by family",
        "rows": [
          [
            "Categorical",
            "8 hues",
            "Pass",
            "Labels + dash"
          ],
          [
            "Sequential blue",
            "6 steps",
            "Pass",
            "3.1:1 min"
          ],
          [
            "Diverging temp",
            "5 stops",
            "Watch",
            "neutral midpoint"
          ],
          [
            "Threshold",
            "3 states",
            "Pass",
            "striped bands"
          ]
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "#3178B7",
      "#D49A2A",
      "#7A63B8",
      "#3C8E7B"
    ],
    "border": "2px ink outer borders with 1px neutral row rules",
    "contour": "notched-rect",
    "density": "medium-high",
    "family": "data-ledger",
    "grain": false,
    "material": "matte-ivory panels",
    "motion": "160ms short focus confirmation",
    "stickerBadges": false,
    "underlay": true
  }
}