# Katagami Quiet Signal Surfaces

## Philosophy

A text-first product design language for AYA workspaces that weave large amounts of context without becoming a dashboard. The interface treats documents, notes, summaries, and decisions as the primary surface; analytics appear as quiet signals embedded in the reading flow, in margins, or as narrow contextual glyphs. Japanese references are abstract and structural: washi-like restraint in low-contrast paper surfaces, sumi-like charcoal type contrast, indigo/cyan-blue active data affordances, kaki/persimmon warmth as a rare accent, and katagami-inspired rhythm expressed through cutout spacing, repeated rails, and negative-space cadence rather than literal motifs. The result is calm, precise, accessible, and product-grade: information-rich, but never card-grid-first or chart-led.

### Values

- text remains the center of gravity; metrics annotate language instead of replacing it
- context is woven through adjacency, margin notes, and subtle layering rather than dashboard modules
- micro-analytics use tabular numerals, inline alignment, and compact trend marks that preserve reading rhythm
- surface hierarchy is made from extremely low-contrast neutral panels, charcoal typography, and precise borders
- Japanese inspiration is non-literal: restraint, material softness, rhythm, negative space, and indigo/sumi/kaki calibration
- status color is semantic only; muted green, amber, and red appear for true state, risk, or failure
- accessibility and contrast are product requirements, not optional aesthetic tradeoffs

### Anti-Values

- tourist Japanese motifs, decorative waves, fans, torii gates, cranes, faux brush lettering, or red-circle symbolism
- dashboard-first layouts where charts, cards, and KPIs dominate the document
- metric card grids as the primary reading or navigation model
- low-contrast gray text that sacrifices legibility for softness
- rainbow category colors or status colors used as decoration
- large chart blocks when a marginal sparkline, inline delta, or short summary would suffice

### Visual Character

- Near-white cool neutral canvas with paper-soft panels that differ by only a few luminance steps but keep text contrast strong.
- Charcoal and sumi-gray typography creates hierarchy before color is introduced.
- Indigo/cyan-blue appears as a fine active affordance: focus rings, selected rails, inline data links, active filters, and cursor-like emphasis.
- Katagami abstraction appears as repeated narrow gaps, rhythmically spaced margin markers, clipped rails, and measured cutout bands, never as illustrated pattern.
- Metrics sit beside sentences, headings, table labels, and margin notes using tabular numerals and small labels rather than freestanding KPI cards.
- Charts are constrained to narrow marginal/contextual surfaces: sparklines, confidence ticks, thin distribution strips, and tiny trend glyphs.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Cool neutral hairlines and clipped indigo rails; borders should structure layers without drawing decorative boxes around every datum.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#A65F2B` |
| active_data | `#0B86C6` |
| background | `#F6F8FA` |
| border | `#D9E0E6` |
| border_subtle | `#E7ECEF` |
| error | `#B54747` |
| info | `#087EA4` |
| muted | `#5F6B76` |
| muted_2 | `#7A8590` |
| panel | `#EEF2F5` |
| primary | `#2947A3` |
| success | `#3F7D5A` |
| surface | `#FCFCFB` |
| surface_subtle | `#F1F4F6` |
| text | `#1E2329` |
| warning | `#A56A18` |

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: Quiet reveal and confirmation only; no bounce, spectacle, or decorative parallax.

### Radii

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

### Shadows

- **Lg**: 0 18px 48px rgba(30,35,41,0.08)
- **Md**: 0 8px 24px rgba(30,35,41,0.06)
- **Sm**: 0 1px 2px rgba(30,35,41,0.04)

### Spacing

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

### Surfaces

- **Bg Pattern**: Optional almost-invisible 16px rhythm lines or cutout gaps at less than 3% contrast, used structurally only.
- **Card Style**: Flat or near-flat panels with 1px borders; avoid card grids as primary layout.
- **Treatment**: Cool neutral document shell with extremely low-contrast panels and strong charcoal text.

### Typography

- **Base Size**: 16px
- **Body Font**: Source Sans 3
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap
- **Heading Font**: Inter
- **Letter Spacing**: -0.01em
- **Line Height**: 1.58
- **Mono Font**: IBM Plex Mono
- **Numerals**: Use tabular-nums for all metrics, deltas, timestamps, IDs, and aligned numeric lists.

## Rules

### Composition

Use a document-dominant workspace: primary reading/writing column first, context map/navigation second, and quiet signal rail third. The central document should occupy the visual majority on desktop and become the only primary surface on mobile. Avoid card grids as the main architecture; if cards are used, they summarize document sections or decisions and must defer to prose. Reserve the right or inline margin for compact summaries, confidence hints, provenance marks, and narrow analytics. Use layered context through shallow panels, inset notes, and connected rails rather than heavy dashboards.

### Density

Density is reading-first: long-form text keeps comfortable line length, while adjacent signals compress to 1-2 line units. Inline metrics may appear in sentence flow, table cells, section headers, and margin callouts, but never accumulate into KPI blocks that break reading. A dense screen should feel like an annotated document, not an analytics dashboard. Prefer one compact number plus a label over multi-stat cards; prefer short summary text over chart panels.

### Hierarchy

Build hierarchy with type weight, spacing, and charcoal contrast before accent color. Headings are calm and editorial; body copy is highly readable; numbers and deltas use tabular numerals. Blue/indigo indicates active data affordance or navigable evidence, not generic decoration. Status colors are quiet and adjacent to text labels. Critical states require explicit wording, icons or shape, and adequate contrast.

### Interaction

Interactions should sharpen rather than animate loudly. Hover reveals provenance, exact values, or comparison period in a small adjacent layer. Focus states use a visible 2px indigo/cyan ring with offset. Expanding a signal opens a contextual note or marginal panel, not a full dashboard unless the user explicitly asks for analysis. Motion is short and functional: reveal, align, confirm.

### Micro Analytics

Numbers sit in the reading flow with tabular numerals, stable baselines, and compact labels. Use formats like “Confidence 84%”, “3 unresolved”, “+12% over 7d”, or “p95 1.8s” inline with copy or in the margin. Align comparable numbers on a decimal or right edge when scanned in lists. Keep visual weight below the surrounding heading unless the number is the current user task. Pair every delta with direction and timeframe. Use charts only when shape adds understanding; otherwise use text, tiny ticks, sparklines, or distribution strips.

### Signature Patterns

- Margin signal rail: a 56-96px contextual column with status LEDs, tiny trend glyphs, provenance dots, and short labels aligned to paragraphs.
- Inline metric chips: low-fill, high-contrast text pills embedded in prose, using tabular numerals and an indigo active outline only when interactive.
- Katagami cadence dividers: repeated 1px hairlines and clipped spacing gaps that create rhythm between context layers without literal ornament.
- Document-adjacent summary bands: pale neutral inset rows under section headings with 1-3 short signals, never full KPI cards.
- Quiet status LEDs: 6-8px dots or short rails paired with text labels; green/amber/red reserved for true states and never used for categories.
- Narrow trend glyphs: 32-80px sparklines or slope ticks in margins, table cells, or summary bands, never large chart panels by default.

## Layout

### Breakpoints

Mobile <= 640px collapses context map into a top drawer and transforms the signal rail into inline expandable annotations. Tablet 641-1024px keeps the document primary with signals below section headers or in a collapsible side sheet. Desktop >= 1025px uses persistent context map plus marginal signals.

### Density

Medium-high information density around the document, low visual density in the document itself. Signals compress laterally and vertically while body text remains comfortable. Do not create primary KPI card grids; use compact summaries, marginal analytics, and table-adjacent values.

### Grid

Desktop uses a document-first grid: 240-280px context map, flexible 640-820px reading column, and 72-280px signal rail depending on task. Gutters follow an 8px base with 24px default column gaps. The reading column retains optimal measure; extra width goes to context and margin, not stretched prose.

### Responsive

Preserve reading order and text hierarchy first. Move metrics after the paragraph or heading they annotate. Tiny trend glyphs may become text-only deltas on small screens. Any chart larger than a sparkline should require deliberate expansion.

### Whitespace

Whitespace behaves like washi restraint: soft, purposeful, and structural. Use 16-24px between document blocks, 8-12px between signal rows, and 32-40px around major work zones. Negative space should create rhythm and scanability, not emptiness.

## Guidance

### Do

- Keep prose, summaries, and decisions visually primary; let metrics annotate rather than dominate.
- Use tabular numerals for every number that may be compared or scanned.
- Place metrics inline, in table cells, in section summaries, or in a marginal rail aligned to the text they explain.
- Reserve larger charts for explicit drill-in or narrow contextual surfaces where visual shape is necessary.
- Use indigo/cyan-blue consistently for active data affordances, links to evidence, selected filters, and focus.
- Use muted green, amber, and red only for true success, warning, and error states with labels.
- Express katagami through rhythm, spacing, clipping, and layered negative space rather than motifs.

### Don't

- Do not lead with KPI card grids, dashboard tiles, or decorative chart walls.
- Do not use literal Japanese motifs, faux paper textures that reduce legibility, or tourist iconography.
- Do not make panels so low contrast that boundaries or controls become ambiguous.
- Do not use color-coded categories that compete with semantic statuses.
- Do not stretch prose to fill wide screens; give surplus width to context and marginal signals.
- Do not hide critical state in a tiny dot without adjacent text.

### Accessibility

Maintain WCAG AA contrast for all body text, controls, and inline metrics. Do not use pale gray text below contrast thresholds. Focus rings are visible 2px indigo/cyan with offset. Status indicators must include text labels or shape; color alone is insufficient. Tiny charts require accessible text equivalents or tooltips with exact values.

### Usage Context

Best for AYA/Katagami document workspaces, AI context assemblers, research notebooks, operational review tools, knowledge bases, and collaboration surfaces where many signals must remain subordinate to reading and synthesis.

---
version: "alpha"
name: "Katagami Quiet Signal Surfaces"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#A65F2B"
  active_data: "#0B86C6"
  background: "#F6F8FA"
  border: "#D9E0E6"
  border_subtle: "#E7ECEF"
  error: "#B54747"
  info: "#087EA4"
  muted: "#5F6B76"
  muted_2: "#7A8590"
  panel: "#EEF2F5"
  primary: "#2947A3"
  success: "#3F7D5A"
  surface: "#FCFCFB"
  surface_subtle: "#F1F4F6"
  text: "#1E2329"
  warning: "#A56A18"
typography:
  headline-lg:
    fontFamily: "Inter"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Inter"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "14px"
  md: "10px"
  none: "0px"
  sm: "6px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "40px"
  4xl: "48px"
  step-8: "64px"
  step-9: "80px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-active_data:
    backgroundColor: "{colors.active_data}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-border_subtle:
    backgroundColor: "{colors.border_subtle}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-muted_2:
    backgroundColor: "{colors.muted_2}"
  color-reference-panel:
    backgroundColor: "{colors.panel}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_subtle:
    backgroundColor: "{colors.surface_subtle}"
  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"
---

# Katagami Quiet Signal Surfaces

## Overview

A text-first product design language for AYA workspaces that weave large amounts of context without becoming a dashboard. The interface treats documents, notes, summaries, and decisions as the primary surface; analytics appear as quiet signals embedded in the reading flow, in margins, or as narrow contextual glyphs. Japanese references are abstract and structural: washi-like restraint in low-contrast paper surfaces, sumi-like charcoal type contrast, indigo/cyan-blue active data affordances, kaki/persimmon warmth as a rare accent, and katagami-inspired rhythm expressed through cutout spacing, repeated rails, and negative-space cadence rather than literal motifs. The result is calm, precise, accessible, and product-grade: information-rich, but never card-grid-first or chart-led.

### Values

- text remains the center of gravity; metrics annotate language instead of replacing it
- context is woven through adjacency, margin notes, and subtle layering rather than dashboard modules
- micro-analytics use tabular numerals, inline alignment, and compact trend marks that preserve reading rhythm
- surface hierarchy is made from extremely low-contrast neutral panels, charcoal typography, and precise borders
- Japanese inspiration is non-literal: restraint, material softness, rhythm, negative space, and indigo/sumi/kaki calibration
- status color is semantic only; muted green, amber, and red appear for true state, risk, or failure
- accessibility and contrast are product requirements, not optional aesthetic tradeoffs

### Anti-Values

- tourist Japanese motifs, decorative waves, fans, torii gates, cranes, faux brush lettering, or red-circle symbolism
- dashboard-first layouts where charts, cards, and KPIs dominate the document
- metric card grids as the primary reading or navigation model
- low-contrast gray text that sacrifices legibility for softness
- rainbow category colors or status colors used as decoration
- large chart blocks when a marginal sparkline, inline delta, or short summary would suffice

### Visual Character

- Near-white cool neutral canvas with paper-soft panels that differ by only a few luminance steps but keep text contrast strong.
- Charcoal and sumi-gray typography creates hierarchy before color is introduced.
- Indigo/cyan-blue appears as a fine active affordance: focus rings, selected rails, inline data links, active filters, and cursor-like emphasis.
- Katagami abstraction appears as repeated narrow gaps, rhythmically spaced margin markers, clipped rails, and measured cutout bands, never as illustrated pattern.
- Metrics sit beside sentences, headings, table labels, and margin notes using tabular numerals and small labels rather than freestanding KPI cards.
- Charts are constrained to narrow marginal/contextual surfaces: sparklines, confidence ticks, thin distribution strips, and tiny trend glyphs.

## 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 | `#A65F2B` |
| active_data | `#0B86C6` |
| background | `#F6F8FA` |
| border | `#D9E0E6` |
| border_subtle | `#E7ECEF` |
| error | `#B54747` |
| info | `#087EA4` |
| muted | `#5F6B76` |
| muted_2 | `#7A8590` |
| panel | `#EEF2F5` |
| primary | `#2947A3` |
| success | `#3F7D5A` |
| surface | `#FCFCFB` |
| surface_subtle | `#F1F4F6` |
| text | `#1E2329` |
| warning | `#A56A18` |

## Typography

- **Headline-Lg**: Inter, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Inter, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Source Sans 3, 16px, weight 400, line-height 1.58.
- **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**: `40px`
- **4xl**: `48px`
- **Step-8**: `64px`
- **Step-9**: `80px`

### Breakpoints

Mobile <= 640px collapses context map into a top drawer and transforms the signal rail into inline expandable annotations. Tablet 641-1024px keeps the document primary with signals below section headers or in a collapsible side sheet. Desktop >= 1025px uses persistent context map plus marginal signals.

### Density

Medium-high information density around the document, low visual density in the document itself. Signals compress laterally and vertically while body text remains comfortable. Do not create primary KPI card grids; use compact summaries, marginal analytics, and table-adjacent values.

### Grid

Desktop uses a document-first grid: 240-280px context map, flexible 640-820px reading column, and 72-280px signal rail depending on task. Gutters follow an 8px base with 24px default column gaps. The reading column retains optimal measure; extra width goes to context and margin, not stretched prose.

### Responsive

Preserve reading order and text hierarchy first. Move metrics after the paragraph or heading they annotate. Tiny trend glyphs may become text-only deltas on small screens. Any chart larger than a sparkline should require deliberate expansion.

### Whitespace

Whitespace behaves like washi restraint: soft, purposeful, and structural. Use 16-24px between document blocks, 8-12px between signal rows, and 32-40px around major work zones. Negative space should create rhythm and scanability, not emptiness.

## Elevation & Depth

### Shadows

- **Lg**: 0 18px 48px rgba(30,35,41,0.08)
- **Md**: 0 8px 24px rgba(30,35,41,0.06)
- **Sm**: 0 1px 2px rgba(30,35,41,0.04)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Optional almost-invisible 16px rhythm lines or cutout gaps at less than 3% contrast, used structurally only.
- **Card Style**: Flat or near-flat panels with 1px borders; avoid card grids as primary layout.
- **Treatment**: Cool neutral document shell with extremely low-contrast panels and strong charcoal text.

### Borders

- **Accent Width**: 2px
- **Character**: Cool neutral hairlines and clipped indigo rails; borders should structure layers without drawing decorative boxes around every datum.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Use a document-dominant workspace: primary reading/writing column first, context map/navigation second, and quiet signal rail third. The central document should occupy the visual majority on desktop and become the only primary surface on mobile. Avoid card grids as the main architecture; if cards are used, they summarize document sections or decisions and must defer to prose. Reserve the right or inline margin for compact summaries, confidence hints, provenance marks, and narrow analytics. Use layered context through shallow panels, inset notes, and connected rails rather than heavy dashboards.

### Density

Density is reading-first: long-form text keeps comfortable line length, while adjacent signals compress to 1-2 line units. Inline metrics may appear in sentence flow, table cells, section headers, and margin callouts, but never accumulate into KPI blocks that break reading. A dense screen should feel like an annotated document, not an analytics dashboard. Prefer one compact number plus a label over multi-stat cards; prefer short summary text over chart panels.

### Hierarchy

Build hierarchy with type weight, spacing, and charcoal contrast before accent color. Headings are calm and editorial; body copy is highly readable; numbers and deltas use tabular numerals. Blue/indigo indicates active data affordance or navigable evidence, not generic decoration. Status colors are quiet and adjacent to text labels. Critical states require explicit wording, icons or shape, and adequate contrast.

### Interaction

Interactions should sharpen rather than animate loudly. Hover reveals provenance, exact values, or comparison period in a small adjacent layer. Focus states use a visible 2px indigo/cyan ring with offset. Expanding a signal opens a contextual note or marginal panel, not a full dashboard unless the user explicitly asks for analysis. Motion is short and functional: reveal, align, confirm.

### Micro Analytics

Numbers sit in the reading flow with tabular numerals, stable baselines, and compact labels. Use formats like “Confidence 84%”, “3 unresolved”, “+12% over 7d”, or “p95 1.8s” inline with copy or in the margin. Align comparable numbers on a decimal or right edge when scanned in lists. Keep visual weight below the surrounding heading unless the number is the current user task. Pair every delta with direction and timeframe. Use charts only when shape adds understanding; otherwise use text, tiny ticks, sparklines, or distribution strips.

### Signature Patterns

- Margin signal rail: a 56-96px contextual column with status LEDs, tiny trend glyphs, provenance dots, and short labels aligned to paragraphs.
- Inline metric chips: low-fill, high-contrast text pills embedded in prose, using tabular numerals and an indigo active outline only when interactive.
- Katagami cadence dividers: repeated 1px hairlines and clipped spacing gaps that create rhythm between context layers without literal ornament.
- Document-adjacent summary bands: pale neutral inset rows under section headings with 1-3 short signals, never full KPI cards.
- Quiet status LEDs: 6-8px dots or short rails paired with text labels; green/amber/red reserved for true states and never used for categories.
- Narrow trend glyphs: 32-80px sparklines or slope ticks in margins, table cells, or summary bands, never large chart panels by default.

## 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/katagami-quiet-signal-surfaces/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 Keep prose, summaries, and decisions visually primary; let metrics annotate rather than dominate.
- Do Use tabular numerals for every number that may be compared or scanned.
- Do Place metrics inline, in table cells, in section summaries, or in a marginal rail aligned to the text they explain.
- Do Reserve larger charts for explicit drill-in or narrow contextual surfaces where visual shape is necessary.
- Do Use indigo/cyan-blue consistently for active data affordances, links to evidence, selected filters, and focus.
- Do Use muted green, amber, and red only for true success, warning, and error states with labels.
- Do Express katagami through rhythm, spacing, clipping, and layered negative space rather than motifs.
- Don't Do not lead with KPI card grids, dashboard tiles, or decorative chart walls.
- Don't Do not use literal Japanese motifs, faux paper textures that reduce legibility, or tourist iconography.
- Don't Do not make panels so low contrast that boundaries or controls become ambiguous.
- Don't Do not use color-coded categories that compete with semantic statuses.
- Don't Do not stretch prose to fill wide screens; give surplus width to context and marginal signals.
- Don't Do not hide critical state in a tiny dot without adjacent text.

### Accessibility

Maintain WCAG AA contrast for all body text, controls, and inline metrics. Do not use pale gray text below contrast thresholds. Focus rings are visible 2px indigo/cyan with offset. Status indicators must include text labels or shape; color alone is insufficient. Tiny charts require accessible text equivalents or tooltips with exact values.

### Usage Context

Best for AYA/Katagami document workspaces, AI context assemblers, research notebooks, operational review tools, knowledge bases, and collaboration surfaces where many signals must remain subordinate to reading and synthesis.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "katagami-quiet-signal-surfaces",
  "type": "registry:theme",
  "title": "Katagami Quiet Signal Surfaces shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F8FA",
      "foreground": "#1E2329",
      "card": "#FCFCFB",
      "card-foreground": "#1E2329",
      "popover": "#FCFCFB",
      "popover-foreground": "#1E2329",
      "primary": "#2947A3",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5F6B76",
      "muted-foreground": "#1E2329",
      "accent": "#A65F2B",
      "accent-foreground": "#ffffff",
      "destructive": "#B54747",
      "border": "#D9E0E6",
      "input": "#D9E0E6",
      "ring": "#A65F2B",
      "chart-1": "#2947A3",
      "chart-2": "#f4f4f5",
      "chart-3": "#A65F2B",
      "chart-4": "#3F7D5A",
      "chart-5": "#A56A18",
      "sidebar": "#FCFCFB",
      "sidebar-foreground": "#1E2329",
      "sidebar-primary": "#2947A3",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#087EA4",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D9E0E6",
      "sidebar-ring": "#A65F2B",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2947A3",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#A65F2B",
      "accent-foreground": "#ffffff",
      "destructive": "#B54747",
      "border": "#303642",
      "input": "#303642",
      "ring": "#A65F2B",
      "chart-1": "#2947A3",
      "chart-2": "#f4f4f5",
      "chart-3": "#A65F2B",
      "chart-4": "#3F7D5A",
      "chart-5": "#A56A18",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2947A3",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#A65F2B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#A65F2B",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "katagami-quiet-signal-surfaces",
    "slug": "katagami-quiet-signal-surfaces",
    "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",
        "active_data",
        "background",
        "border",
        "border_subtle",
        "error",
        "info",
        "muted",
        "muted_2",
        "panel",
        "primary",
        "success",
        "surface",
        "surface_subtle",
        "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",
        "numerals"
      ]
    }
  }
}
```