Cinnabar

# Cinnabar

## Philosophy

Cinnabar is an instrument language for speculative neural tools. It reads a consciousness the way a lab reads a mineral core sample: mounted, sliced into measured bands, every channel traced and tabled. Where a calmer take on the brief empties the screen into a sterile white void and floats a few panels in it, Cinnabar makes the shell visible under assay — a fully instrumented, edge-to-edge surface, dense where the measurement lives and calm everywhere else, lit on a deep aubergine ground by two signals.

### Values

- Read the shell as strata: every page is a continuous stack of full-width assay bands, each with an index gutter, a continuous trace, and a tabled readout.
- Trace two channels at once: subject in cinnabar, reference in mercury-green, so deviation is visible the instant the lines part.
- Instrument the whole surface — no sterile void; keep one local pocket of high compression and let the rest stay clinical.
- Register everything with hairline crosshairs and corner ticks so the surface reads as measured, not decorated.
- Accents are instrument LEDs: sparse, meaningful, never spread across large fills.
- Y2K futurism as a single chrome glint edge, not gloss; manga ink as one structural contour arc, never character art.

### Anti-Values

- No sterile white void with panels floating in negative space; the surface is instrumented edge to edge.
- No cinnabar or mercury spread across large surfaces; signal stays in traces, LEDs, hairlines, and terse readouts.
- No rounded pastel SaaS cards or equal three-card sections; bands are hard-0 and vary in weight.
- No saturated neon, matrix rain, or green-on-black hacker cliche; no anime character art or decorative gloss.

### Visual Character

- Assay strata: full-width measured bands locked to a baseline rhythm, each built from an index gutter, a dual-channel SVG trace, and a right-hand readout column with corner registration ticks.
- Dual-channel trace: a warm cinnabar subject line over a cold mercury-green reference line, drawn together.
- Crosshair registration and a faint measurement grid behind a deep aubergine plum-graphite ground.
- 4px scanline diagnostic seams dividing one dense telemetry pocket; the strata around it stay quiet.
- One oversized black ink contour arc sweeps the composition as structure; a single Y2K chrome glint on the primary action and the specimen plate.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#170E1B` |
| surface | `#1F1424` |
| surface_2 | `#271830` |
| text | `#F2E9EC` |
| muted | `#9A8A98` |
| border | `rgba(242,233,236,0.12)` |
| accent | `#E2402B` |
| accent_cool | `#58C9A0` |
| on_accent | `#170E1B` |
| chrome | `#C9C2CC` |
| primary | `#E2402B` |
| success | `#58C9A0` |
| warning | `#D8A24A` |
| error | `#E2402B` |
| info | `#7FA8C9` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Space Grotesk
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

- **None**: 0
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.4)
- **Md**: 0 18px 44px rgba(0,0,0,0.45)
- **Lg**: 0 40px 120px rgba(226,64,43,0.16)

### Spacing

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

### Surfaces

- **Treatment**: Flat instrument surfaces on a deep aubergine plum-graphite ground; a single chrome glint edge on the primary action and specimen plate; no gloss elsewhere.
- **Card Style**: Hard-0 assay bands and panels with a top hairline border and a corner registration tick; 16px clip only on the specimen scan plate.
- **Bg Pattern**: Faint graphite measurement grid (linear-gradients every 56px) with 4px scanline seams behind the dense telemetry pocket.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairline graphite borders at ~12% opacity, used as top dividers and corner registration ticks rather than full frames; cinnabar/mercury appear as single-pixel signal ticks.

### Motion

- **Duration**: 460ms
- **Easing**: cubic-bezier(0.16, 1, 0.3, 1)
- **Philosophy**: The fully settled state is the default and renders with no JavaScript. Strata and panels resolve into focus on scroll — subtle opacity and a short rise, no bounce; hero copy settles in sequence. Respects prefers-reduced-motion.

## Rules

### Composition

Build pages as a continuous vertical stack of full-width assay strata, hard-locked to a baseline rhythm. Instrument the whole surface edge to edge; keep one local pocket of high compression (the telemetry bus) and let the strata around it stay calm. Only the hero spans 100vw.

### Hierarchy

Space Grotesk display titles, Inter body, IBM Plex Mono for every label, value, coordinate, and verdict. Each stratum reads index gutter then trace then readout. Cinnabar marks the subject and the one primary action; mercury marks the reference and pass states.

### Density

Low global density with one dense telemetry pocket; the strata are calm and clinical, the bus runs hot.

### Signature

Assay strata bands (index gutter + dual-channel trace + tabled readout), crosshair registration, scanline seams, one ink contour arc, and a single Y2K chrome glint.

## Layout

### Grid

A single full-width column of stacked strata; each stratum is an internal 3-column grid (gutter / trace / readout). Contained content caps at 1280px and centres; only the hero spans 100vw.

### Whitespace

Tight, ledgered rhythm: 4-16px inside bands, 48-84px between functional clusters. No large sterile void — emptiness is replaced by instrumentation.

### Density

Dense and locked, with one high-compression telemetry pocket balanced against calmer strata.

### Responsive

Mobile narrows the gutter and readout columns, hides the masthead nav, and drops the status column from tables; never overflows horizontally.

### Breakpoints

- **Mobile**: <= 680px: single column, narrowed strata columns, nav hidden
- **Tablet**: 681-1080px: stacked grid2, 2-up KPIs and slabs
- **Desktop**: >= 1081px: full strata + side panels; ultra-wide caps and centres content

## Guidance

### Do

- Build pages as stacked assay strata; keep the index gutter, trace, and readout in every band.
- Trace two channels — cinnabar for subject, mercury-green for reference — drawn together.
- Keep one dense telemetry pocket and let everything around it stay calm.
- Register the surface with hairline crosshairs and corner ticks.
- Make one action primary in cinnabar with a single chrome glint edge; keep the rest quiet.
- Name scenes as real speculative tools: memory-shell calibration, prosthetic identity audit.

### Don't

- Don't empty the page into a sterile void or float panels in negative space.
- Don't spread cinnabar or mercury across large fills; they are signal, not surface.
- Don't round the strata; geometry is hard 0, with 16px only on the specimen scan plate.
- Don't box the nav into a pill or floating card; let the masthead sit open across the header.
- Don't add anime character art; ink is structure only.
- Don't carry channel state by colour alone; the readout and status tags name the result in text.

### Accessibility

Readout text and body hold AA contrast on the aubergine ground and surfaces. Channel and run state are never carried by colour alone — the readout column and status tags name the result. Motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

veil-optics

### Summary

Subjects are rendered as a clinical optical diagnostic scan — a quiet near-camouflaged form under hairline crosshairs and a faint grid, ghost telemetry in the negative space, scanline seams, one sweeping black ink contour arc, a single chrome glint, and sparse cinnabar/mercury signal ticks — recoloured to the aubergine ground.

### Subjects

- mineral core-sample column
- specimen scan plate
- prosthetic node
- memory-index lattice
- reference sweep

### Usage

One full-bleed hero scan per landing; the same scan plate reappears as the mounted specimen in the embodiment and dashboard, always crosshair-registered.

---
version: "alpha"
name: "Cinnabar"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#170E1B"
  surface: "#1F1424"
  surface_2: "#271830"
  text: "#F2E9EC"
  muted: "#9A8A98"
  accent: "#E2402B"
  accent_cool: "#58C9A0"
  on_accent: "#170E1B"
  chrome: "#C9C2CC"
  primary: "#E2402B"
  success: "#58C9A0"
  warning: "#D8A24A"
  error: "#E2402B"
  info: "#7FA8C9"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_cool:
    backgroundColor: "{colors.accent_cool}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-chrome:
    backgroundColor: "{colors.chrome}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    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"
---

# Cinnabar

## Overview

Cinnabar is an instrument language for speculative neural tools. It reads a consciousness the way a lab reads a mineral core sample: mounted, sliced into measured bands, every channel traced and tabled. Where a calmer take on the brief empties the screen into a sterile white void and floats a few panels in it, Cinnabar makes the shell visible under assay — a fully instrumented, edge-to-edge surface, dense where the measurement lives and calm everywhere else, lit on a deep aubergine ground by two signals.

### Values

- Read the shell as strata: every page is a continuous stack of full-width assay bands, each with an index gutter, a continuous trace, and a tabled readout.
- Trace two channels at once: subject in cinnabar, reference in mercury-green, so deviation is visible the instant the lines part.
- Instrument the whole surface — no sterile void; keep one local pocket of high compression and let the rest stay clinical.
- Register everything with hairline crosshairs and corner ticks so the surface reads as measured, not decorated.
- Accents are instrument LEDs: sparse, meaningful, never spread across large fills.
- Y2K futurism as a single chrome glint edge, not gloss; manga ink as one structural contour arc, never character art.

### Anti-Values

- No sterile white void with panels floating in negative space; the surface is instrumented edge to edge.
- No cinnabar or mercury spread across large surfaces; signal stays in traces, LEDs, hairlines, and terse readouts.
- No rounded pastel SaaS cards or equal three-card sections; bands are hard-0 and vary in weight.
- No saturated neon, matrix rain, or green-on-black hacker cliche; no anime character art or decorative gloss.

### Visual Character

- Assay strata: full-width measured bands locked to a baseline rhythm, each built from an index gutter, a dual-channel SVG trace, and a right-hand readout column with corner registration ticks.
- Dual-channel trace: a warm cinnabar subject line over a cold mercury-green reference line, drawn together.
- Crosshair registration and a faint measurement grid behind a deep aubergine plum-graphite ground.
- 4px scanline diagnostic seams dividing one dense telemetry pocket; the strata around it stay quiet.
- One oversized black ink contour arc sweeps the composition as structure; a single Y2K chrome glint on the primary action and the specimen plate.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#170E1B` |
| surface | `#1F1424` |
| surface_2 | `#271830` |
| text | `#F2E9EC` |
| muted | `#9A8A98` |
| accent | `#E2402B` |
| accent_cool | `#58C9A0` |
| on_accent | `#170E1B` |
| chrome | `#C9C2CC` |
| primary | `#E2402B` |
| success | `#58C9A0` |
| warning | `#D8A24A` |
| error | `#E2402B` |
| info | `#7FA8C9` |

## Typography

- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, 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`
- **Step-8**: `96px`
- **Step-9**: `128px`

### Grid

A single full-width column of stacked strata; each stratum is an internal 3-column grid (gutter / trace / readout). Contained content caps at 1280px and centres; only the hero spans 100vw.

### Whitespace

Tight, ledgered rhythm: 4-16px inside bands, 48-84px between functional clusters. No large sterile void — emptiness is replaced by instrumentation.

### Density

Dense and locked, with one high-compression telemetry pocket balanced against calmer strata.

### Responsive

Mobile narrows the gutter and readout columns, hides the masthead nav, and drops the status column from tables; never overflows horizontally.

### Breakpoints

- **Mobile**: <= 680px: single column, narrowed strata columns, nav hidden
- **Tablet**: 681-1080px: stacked grid2, 2-up KPIs and slabs
- **Desktop**: >= 1081px: full strata + side panels; ultra-wide caps and centres content

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.4)
- **Md**: 0 18px 44px rgba(0,0,0,0.45)
- **Lg**: 0 40px 120px rgba(226,64,43,0.16)

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Flat instrument surfaces on a deep aubergine plum-graphite ground; a single chrome glint edge on the primary action and specimen plate; no gloss elsewhere.
- **Card Style**: Hard-0 assay bands and panels with a top hairline border and a corner registration tick; 16px clip only on the specimen scan plate.
- **Bg Pattern**: Faint graphite measurement grid (linear-gradients every 56px) with 4px scanline seams behind the dense telemetry pocket.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairline graphite borders at ~12% opacity, used as top dividers and corner registration ticks rather than full frames; cinnabar/mercury appear as single-pixel signal ticks.

## Components

### Composition

Build pages as a continuous vertical stack of full-width assay strata, hard-locked to a baseline rhythm. Instrument the whole surface edge to edge; keep one local pocket of high compression (the telemetry bus) and let the strata around it stay calm. Only the hero spans 100vw.

### Hierarchy

Space Grotesk display titles, Inter body, IBM Plex Mono for every label, value, coordinate, and verdict. Each stratum reads index gutter then trace then readout. Cinnabar marks the subject and the one primary action; mercury marks the reference and pass states.

### Density

Low global density with one dense telemetry pocket; the strata are calm and clinical, the bus runs hot.

### Signature

Assay strata bands (index gutter + dual-channel trace + tabled readout), crosshair registration, scanline seams, one ink contour arc, and a single Y2K chrome glint.

## 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-019ef832-f8b3-7193-a695-9a36c521074c/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 Build pages as stacked assay strata; keep the index gutter, trace, and readout in every band.
- Do Trace two channels — cinnabar for subject, mercury-green for reference — drawn together.
- Do Keep one dense telemetry pocket and let everything around it stay calm.
- Do Register the surface with hairline crosshairs and corner ticks.
- Do Make one action primary in cinnabar with a single chrome glint edge; keep the rest quiet.
- Do Name scenes as real speculative tools: memory-shell calibration, prosthetic identity audit.
- Don't Don't empty the page into a sterile void or float panels in negative space.
- Don't Don't spread cinnabar or mercury across large fills; they are signal, not surface.
- Don't Don't round the strata; geometry is hard 0, with 16px only on the specimen scan plate.
- Don't Don't box the nav into a pill or floating card; let the masthead sit open across the header.
- Don't Don't add anime character art; ink is structure only.
- Don't Don't carry channel state by colour alone; the readout and status tags name the result in text.

### Accessibility

Readout text and body hold AA contrast on the aubergine ground and surfaces. Channel and run state are never carried by colour alone — the readout column and status tags name the result. Motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

veil-optics

### Summary

Subjects are rendered as a clinical optical diagnostic scan — a quiet near-camouflaged form under hairline crosshairs and a faint grid, ghost telemetry in the negative space, scanline seams, one sweeping black ink contour arc, a single chrome glint, and sparse cinnabar/mercury signal ticks — recoloured to the aubergine ground.

### Subjects

- mineral core-sample column
- specimen scan plate
- prosthetic node
- memory-index lattice
- reference sweep

### Usage

One full-bleed hero scan per landing; the same scan plate reappears as the mounted specimen in the embodiment and dashboard, always crosshair-registered.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cinnabar",
  "type": "registry:theme",
  "title": "Cinnabar shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#170E1B",
      "foreground": "#F2E9EC",
      "card": "#1F1424",
      "card-foreground": "#F2E9EC",
      "popover": "#1F1424",
      "popover-foreground": "#F2E9EC",
      "primary": "#E2402B",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9A8A98",
      "muted-foreground": "#F2E9EC",
      "accent": "#E2402B",
      "accent-foreground": "#ffffff",
      "destructive": "#E2402B",
      "border": "rgba(242,233,236,0.12)",
      "input": "rgba(242,233,236,0.12)",
      "ring": "#E2402B",
      "chart-1": "#E2402B",
      "chart-2": "#f4f4f5",
      "chart-3": "#E2402B",
      "chart-4": "#58C9A0",
      "chart-5": "#D8A24A",
      "sidebar": "#1F1424",
      "sidebar-foreground": "#F2E9EC",
      "sidebar-primary": "#E2402B",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7FA8C9",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(242,233,236,0.12)",
      "sidebar-ring": "#E2402B",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#E2402B",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E2402B",
      "accent-foreground": "#ffffff",
      "destructive": "#E2402B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E2402B",
      "chart-1": "#E2402B",
      "chart-2": "#f4f4f5",
      "chart-3": "#E2402B",
      "chart-4": "#58C9A0",
      "chart-5": "#D8A24A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#E2402B",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E2402B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E2402B",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef832-f8b3-7193-a695-9a36c521074c",
    "slug": "cinnabar",
    "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": {
      "colors": [
        "accent",
        "accent_cool",
        "bg",
        "border",
        "chrome",
        "error",
        "info",
        "muted",
        "on_accent",
        "primary",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```