Calibrated Signal Base

# Calibrated Signal Base

## Philosophy

Calibrated Signal Base is a production-ready palette language for modern editorial products: quiet neutral and midtone foundations hold the interface steady while acidic citrus, electric violet, signal cyan, and hot coral are reserved for named semantic moments with explicit contrast pairings and usage caps.

### Values

- Build a trustworthy neutral foundation first, then let two or three high-chroma accents behave like editorial punctuation rather than decoration.
- Treat color as infrastructure: every primitive, semantic role, data series, state, and on-color text token must be named before it appears in UI.
- Preserve hue identity across light and dark modes by shifting OKLCH lightness and chroma intentionally instead of inverting or washing out accents.
- Balance warm stone neutrals with cool graphite and slate midtones so the system works for enterprise screens, creative tools, and data-heavy editorial surfaces.
- Make accessibility visible in the system through contrast-safe pairings, capped accent areas, redundant chart encoding, and clear focus states.

### Anti-Values

- No rainbow component slop, no saturated accents on every card, and no decorative gradients that obscure state or hierarchy.
- No unpaired accent usage: brand, interactive, highlight, editorial-only, and chart colors must each have on-color text guidance and area limits.
- No brittle light-only palette; every hue must retain its identity in dark mode with tested contrast and adjusted chroma.

### Visual Character

- Use layered neutral CSS variables for canvas, raised surface, panel, and graphite text, with hairline borders and midtone header bands forming the visible base of the interface.
- Apply high-chroma accents only through small bounded CSS selectors such as .accent-rail, .status-dot, .focus-ring, .metric-spark, and .editorial-chip with max-width or max-area constraints.
- Render color token tables as production artifacts: swatches include role names, OKLCH notes, on-token labels, WCAG target text, and usage cap badges instead of decorative color blocks.
- Create light and dark preview columns that preserve accent hue identity by changing lightness and chroma while keeping identical semantic aliases in both columns.
- Use data-viz strips with redundant labels, patterns, and neutral gridlines so signal cyan, electric violet, citrus, and coral never carry meaning by hue alone.

## Tokens

### Borders

- **Accent Width**: 3px
- **Character**: Quiet warm-gray dividers carry layout; accent borders appear only for active, focus, or editorial callout states.
- **Default Width**: 1px
- **Style**: solid with occasional dotted data-viz pattern strokes

### Colors

| Name | Value |
|------|-------|
| accent | `#B9F227` |
| background | `#F4F1EA` |
| border | `#D8D1C4` |
| error | `#C7433E` |
| info | `#007C9C` |
| muted | `#8B8579` |
| primary | `#262A31` |
| secondary | `#766F63` |
| success | `#537A34` |
| surface | `#FFFCF4` |
| text | `#17191D` |
| warning | `#A66A00` |

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Philosophy**: Motion confirms state changes with short fades and rail slides; color should not pulse or animate into spectacle.

### Radii

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

### Semantic Accents

- **Brand Citrus**: {"cap":"5% of any viewport","dark":"#A7E51D","light":"#B9F227","on":"#17191D"}
- **Editorial Coral**: {"cap":"editorial-only alias; not for system errors","dark":"#FF7D85","light":"#FF5C67","on":"#23070A"}
- **Highlight Violet**: {"cap":"2 highlighted objects per screen","dark":"#A98BFF","light":"#7D4DFF","on":"#FFFFFF"}
- **Interactive Cyan**: {"cap":"primary actions and focus only","dark":"#35CBE6","light":"#00A7C7","on":"#07191D"}

### Shadows

- **Lg**: 0 24px 70px rgba(38, 42, 49, 0.18)
- **Md**: 0 12px 30px rgba(38, 42, 49, 0.12)
- **Sm**: 0 1px 2px rgba(23, 25, 29, 0.08)

### Spacing

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

### Surfaces

- **Bg Pattern**: Subtle OKLCH calibration grid: repeating linear hairlines at low opacity, never decorative enough to compete with data.
- **Card Style**: Rectangular cards with 10-18px radius, 1px warm-gray border, small semantic accent tab only when needed.
- **Treatment**: Warm stone canvas with ink graphite text, raised ivory cards, cool midtone section bands, and sparse chroma rails.

### Typography

- **Base Size**: 16px
- **Body Font**: Source Serif 4
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap
- **Heading Font**: Instrument Sans
- **Letter Spacing**: -0.015em
- **Line Height**: 1.52
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Start with a calm neutral operating surface, then place color in auditable slots: a single accent rail, one active control family, limited chart series, and tiny editorial chips. The screen should read as a palette governance tool, not a loud mood board.

### Density

Medium density with compact token rows and generous section gutters; color documentation can be data-rich but must keep accents spatially rare.

### Hierarchy

Use graphite headings, serif explanatory copy, mono token labels, and warm-gray borders for baseline hierarchy. High-chroma color may raise priority only when paired with labels, on-color text, and a stated usage cap.

### Signature Patterns

- Accent governor rails: 3px vertical or top-edge color bars paired with cap labels such as max 5%, never full-card color fills except tiny chips.
- Dual-mode token cards: side-by-side light and dark swatches sharing the same semantic alias, with OKLCH adjustment notes and contrast labels printed in mono text.
- Color-safe chart lanes: neutral gridlines, patterned series fills, direct labels, and small signal color points so chart meaning survives colorblind review.
- Editorial quarantine chips: coral and violet badges marked editorial-only or highlight-only, visually separated from interactive and system-status tokens.

## Layout

### Breakpoints

mobile <= 640px, tablet 641px-980px, desktop >= 981px

### Density

Dense where token metadata is scanned, spacious where accent decisions are demonstrated.

### Grid

Desktop uses a 12-column token-lab grid with a 4-column governance panel and 8-column preview workspace; tablet becomes 6 columns; mobile is a single audit stack.

### Whitespace

Use 32-64px section gutters around dense token matrices and 8-16px row gaps inside cards so documentation feels engineered, not cramped.

## Guidance

### Do

- Name every accent by role: brand, interactive, highlight, editorial-only, data series, or state before using it in a component.
- Pair accent backgrounds with on-accent text tokens and keep AA contrast for text-bearing surfaces in both light and dark modes.
- Use neutral and midtone ramps for most components, reserving acidic citrus, electric violet, signal cyan, and hot coral for bounded moments.
- Provide redundant chart encodings through labels, shapes, patterns, and ordering instead of hue-only distinctions.
- Document OKLCH light/dark shifts so accents retain hue identity without becoming glare in dark mode.

### Don't

- Do not make every button, card, row, and chart segment saturated; loudness must be capped and intentional.
- Do not use hot coral as an error token or electric violet as a default link color without semantic justification.
- Do not ship accent swatches without on-accent text, contrast target, usage cap, and dark-mode counterpart.
- Do not rely on gradients as a substitute for semantic token structure or data-viz accessibility.

### Accessibility

Target WCAG 2.2 AA for text by default, AAA for key neutral text where possible, visible cyan focus rings with a dark outline fallback, and non-color cues for charts and status.

### Usage Context

Best for creative operating systems, editorial publishing tools, enterprise design systems, palette governance dashboards, and modern data products that need controlled statement color.

---
version: "alpha"
name: "Calibrated Signal Base"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#B9F227"
  background: "#F4F1EA"
  border: "#D8D1C4"
  error: "#C7433E"
  info: "#007C9C"
  muted: "#8B8579"
  primary: "#262A31"
  secondary: "#766F63"
  success: "#537A34"
  surface: "#FFFCF4"
  text: "#17191D"
  warning: "#A66A00"
typography:
  headline-lg:
    fontFamily: "Instrument Sans"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "Instrument Sans"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "Source Serif 4"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.52
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "18px"
  md: "10px"
  none: "0px"
  sm: "4px"
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"
---

# Calibrated Signal Base

## Overview

Calibrated Signal Base is a production-ready palette language for modern editorial products: quiet neutral and midtone foundations hold the interface steady while acidic citrus, electric violet, signal cyan, and hot coral are reserved for named semantic moments with explicit contrast pairings and usage caps.

### Values

- Build a trustworthy neutral foundation first, then let two or three high-chroma accents behave like editorial punctuation rather than decoration.
- Treat color as infrastructure: every primitive, semantic role, data series, state, and on-color text token must be named before it appears in UI.
- Preserve hue identity across light and dark modes by shifting OKLCH lightness and chroma intentionally instead of inverting or washing out accents.
- Balance warm stone neutrals with cool graphite and slate midtones so the system works for enterprise screens, creative tools, and data-heavy editorial surfaces.
- Make accessibility visible in the system through contrast-safe pairings, capped accent areas, redundant chart encoding, and clear focus states.

### Anti-Values

- No rainbow component slop, no saturated accents on every card, and no decorative gradients that obscure state or hierarchy.
- No unpaired accent usage: brand, interactive, highlight, editorial-only, and chart colors must each have on-color text guidance and area limits.
- No brittle light-only palette; every hue must retain its identity in dark mode with tested contrast and adjusted chroma.

### Visual Character

- Use layered neutral CSS variables for canvas, raised surface, panel, and graphite text, with hairline borders and midtone header bands forming the visible base of the interface.
- Apply high-chroma accents only through small bounded CSS selectors such as .accent-rail, .status-dot, .focus-ring, .metric-spark, and .editorial-chip with max-width or max-area constraints.
- Render color token tables as production artifacts: swatches include role names, OKLCH notes, on-token labels, WCAG target text, and usage cap badges instead of decorative color blocks.
- Create light and dark preview columns that preserve accent hue identity by changing lightness and chroma while keeping identical semantic aliases in both columns.
- Use data-viz strips with redundant labels, patterns, and neutral gridlines so signal cyan, electric violet, citrus, and coral never carry meaning by hue alone.

## 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 | `#B9F227` |
| background | `#F4F1EA` |
| border | `#D8D1C4` |
| error | `#C7433E` |
| info | `#007C9C` |
| muted | `#8B8579` |
| primary | `#262A31` |
| secondary | `#766F63` |
| success | `#537A34` |
| surface | `#FFFCF4` |
| text | `#17191D` |
| warning | `#A66A00` |

## Typography

- **Headline-Lg**: Instrument Sans, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Instrument Sans, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Source Serif 4, 16px, weight 400, line-height 1.52.
- **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 <= 640px, tablet 641px-980px, desktop >= 981px

### Density

Dense where token metadata is scanned, spacious where accent decisions are demonstrated.

### Grid

Desktop uses a 12-column token-lab grid with a 4-column governance panel and 8-column preview workspace; tablet becomes 6 columns; mobile is a single audit stack.

### Whitespace

Use 32-64px section gutters around dense token matrices and 8-16px row gaps inside cards so documentation feels engineered, not cramped.

## Elevation & Depth

### Shadows

- **Lg**: 0 24px 70px rgba(38, 42, 49, 0.18)
- **Md**: 0 12px 30px rgba(38, 42, 49, 0.12)
- **Sm**: 0 1px 2px rgba(23, 25, 29, 0.08)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Subtle OKLCH calibration grid: repeating linear hairlines at low opacity, never decorative enough to compete with data.
- **Card Style**: Rectangular cards with 10-18px radius, 1px warm-gray border, small semantic accent tab only when needed.
- **Treatment**: Warm stone canvas with ink graphite text, raised ivory cards, cool midtone section bands, and sparse chroma rails.

### Borders

- **Accent Width**: 3px
- **Character**: Quiet warm-gray dividers carry layout; accent borders appear only for active, focus, or editorial callout states.
- **Default Width**: 1px
- **Style**: solid with occasional dotted data-viz pattern strokes

## Components

### Composition

Start with a calm neutral operating surface, then place color in auditable slots: a single accent rail, one active control family, limited chart series, and tiny editorial chips. The screen should read as a palette governance tool, not a loud mood board.

### Density

Medium density with compact token rows and generous section gutters; color documentation can be data-rich but must keep accents spatially rare.

### Hierarchy

Use graphite headings, serif explanatory copy, mono token labels, and warm-gray borders for baseline hierarchy. High-chroma color may raise priority only when paired with labels, on-color text, and a stated usage cap.

### Signature Patterns

- Accent governor rails: 3px vertical or top-edge color bars paired with cap labels such as max 5%, never full-card color fills except tiny chips.
- Dual-mode token cards: side-by-side light and dark swatches sharing the same semantic alias, with OKLCH adjustment notes and contrast labels printed in mono text.
- Color-safe chart lanes: neutral gridlines, patterned series fills, direct labels, and small signal color points so chart meaning survives colorblind review.
- Editorial quarantine chips: coral and violet badges marked editorial-only or highlight-only, visually separated from interactive and system-status tokens.

## 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-019ea9b1-666f-7452-9f72-49b99ff90788/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Name every accent by role: brand, interactive, highlight, editorial-only, data series, or state before using it in a component.
- Do Pair accent backgrounds with on-accent text tokens and keep AA contrast for text-bearing surfaces in both light and dark modes.
- Do Use neutral and midtone ramps for most components, reserving acidic citrus, electric violet, signal cyan, and hot coral for bounded moments.
- Do Provide redundant chart encodings through labels, shapes, patterns, and ordering instead of hue-only distinctions.
- Do Document OKLCH light/dark shifts so accents retain hue identity without becoming glare in dark mode.
- Don't Do not make every button, card, row, and chart segment saturated; loudness must be capped and intentional.
- Don't Do not use hot coral as an error token or electric violet as a default link color without semantic justification.
- Don't Do not ship accent swatches without on-accent text, contrast target, usage cap, and dark-mode counterpart.
- Don't Do not rely on gradients as a substitute for semantic token structure or data-viz accessibility.

### Accessibility

Target WCAG 2.2 AA for text by default, AAA for key neutral text where possible, visible cyan focus rings with a dark outline fallback, and non-color cues for charts and status.

### Usage Context

Best for creative operating systems, editorial publishing tools, enterprise design systems, palette governance dashboards, and modern data products that need controlled statement color.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calibrated-signal-base",
  "type": "registry:theme",
  "title": "Calibrated Signal Base shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F1EA",
      "foreground": "#17191D",
      "card": "#FFFCF4",
      "card-foreground": "#17191D",
      "popover": "#FFFCF4",
      "popover-foreground": "#17191D",
      "primary": "#262A31",
      "primary-foreground": "#ffffff",
      "secondary": "#766F63",
      "secondary-foreground": "#ffffff",
      "muted": "#8B8579",
      "muted-foreground": "#17191D",
      "accent": "#B9F227",
      "accent-foreground": "#111111",
      "destructive": "#C7433E",
      "border": "#D8D1C4",
      "input": "#D8D1C4",
      "ring": "#B9F227",
      "chart-1": "#262A31",
      "chart-2": "#766F63",
      "chart-3": "#B9F227",
      "chart-4": "#537A34",
      "chart-5": "#A66A00",
      "sidebar": "#FFFCF4",
      "sidebar-foreground": "#17191D",
      "sidebar-primary": "#262A31",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#007C9C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D1C4",
      "sidebar-ring": "#B9F227",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#262A31",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B9F227",
      "accent-foreground": "#111111",
      "destructive": "#C7433E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B9F227",
      "chart-1": "#262A31",
      "chart-2": "#766F63",
      "chart-3": "#B9F227",
      "chart-4": "#537A34",
      "chart-5": "#A66A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#262A31",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B9F227",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B9F227",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b1-666f-7452-9f72-49b99ff90788",
    "slug": "calibrated-signal-base",
    "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"
      ],
      "semantic_accents": [
        "brand_citrus",
        "editorial_coral",
        "highlight_violet",
        "interactive_cyan"
      ],
      "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"
      ]
    }
  }
}
```