Sōma

# Sōma

## Philosophy

Soma is a quiet clinical e-paper language for neural-map manuals. A warm bone page carries graphite hairline plates, a ruler of calibration ticks and one cyan registration bracket on the single synapse under probe. Headings are condensed capitals, notes are a plain humanist sans, and every number is printed in a monospace reading. The cell is drawn to scale, and nothing else gets colour.

### Values

- One bracket: cyan marks the one node under probe and the one action in a view.
- Evidence over decoration: coordinates, weights, thresholds and refresh times beat marketing copy.
- Large quiet plates beside dense readings, never equal card rows.
- Open ground for type: headings and copy sit on calm bone beside the plate, never on a panel over it.
- What was erased keeps its dashed outline as proof.

### Anti-Values

- Dark panels laid over the hero plate.
- Invented plate numbers, eyebrow micro-labels and fake coordinate strips as ornament.
- Cyan as small text on bone.
- Traffic-light status colours as the main palette.
- Card trios with shadows, stat ribbons and made-up quotes.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4F1E8` |
| surface | `#FBFAF4` |
| text | `#161715` |
| muted | `#5D5D55` |
| border | `#D2CFC3` |
| accent | `#078FA9` |
| on_accent | `#06181C` |
| success | `#0E6B5E` |
| warning | `#8A4B00` |
| error | `#A4123F` |
| info | `#0E6F87` |
| graphite | `#161715` |
| recess | `#ECE8DC` |
| tick | `#8F918A` |

### Typography

- **Heading Font**: Asap Condensed
- **Body Font**: Duru Sans
- **Mono Font**: Inconsolata
- **Base Size**: 17px
- **Line Height**: 1.58
- **Heading Weight**: 700
- **Button Weight**: 500
- **Heading Transform**: uppercase
- **Letter Spacing**: 0.01em on display; 0.04em on mono capitals
- **Scale**: ["15px","17px","18px","20px","24px","26px","32px","56px","92px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@500;600;700&family=Duru+Sans&family=Inconsolata:wght@400;500&display=swap

### Radii

- **Base**: 0px
- **Pill**: 9999px

### Shadows

- **None**: everything is flat; the plate is separated by tone and space

### Spacing

- **Base**: 4px
- **Scale**: ["4px","8px","12px","16px","24px","36px","56px","72px","120px"]

### Surfaces

- **Paper**: warm bone e-paper #F4F1E8, flat
- **Plate**: paler bone #FBFAF4 for a specimen plate
- **Recess**: #ECE8DC for wells, plate views and banded table rows
- **Band**: graphite #161715 for the one atlas band, overlays and the footer

### Borders

- **Policy**: none: separate by space, tone and ticks; the one hairline is the calibration ruler under the hero; focus is a 3px graphite outline

### Motion

- **Refresh**: 180ms steps(2,end) e-ink ghost shift on buttons and switches
- **Reduced Motion**: respected; the settled state is the default and nothing needs script

## Rules

### Composition

- Give the hero one full-bleed graphite plate with calm bone ground on the text side; the headline and one action sit directly on that ground.
- Build each view from one large plate and two small ones, then one dense instrument readout, then one ledger.
- Show the cyan bracket once per plate, on the single node under probe.

### Hierarchy

- Condensed capital headings, 17px+ notes, mono for every reading.
- Cyan fills the one action; state words use the deep inks success, warning, error and info, never cyan text.
- Link weight is always read against the firing level of 1.00.

### Density

Sparse bone ground around plates, compressed 4px to 12px annotation systems only where a reading is taken; 120px between sections on desktop.

### Signature Patterns

- Probe bracket: a cyan registration bracket on one synapse of a graphite contour plate.
- Calibration ruler: a run of graphite ticks along the foot of the hero and each plate.
- Erased void: a dashed outline over rubbed hatch where a reading was removed.
- Atlas readout: node, link weight against the firing level, and refresh time on one graphite band.

## Layout

### Grid

- **Type**: manual page: hero plate, one large plate with two small, one atlas band, one ledger, one form
- **Max Width**: 1240px content, centred above 1440px; the hero spans the viewport
- **Gutter**: clamp 20px to 72px
- **Column Behavior**: 12 columns on desktop (7 and 5 for the plate group), one column below 900px; grid children carry min-width:0

### Whitespace

- **Section Gap**: 120px desktop, 64px phone
- **Approach**: padding above every title; plates sit on the paper separated by 16 to 28px of space, never framed

### Density

- **Default**: comfortable
- **Button Height**: 48px
- **Input Height**: 52px
- **Row Height**: 56px

### Responsive

Hero swaps to the tall plate below 900px with the text above the cell; plates stack to one column; the ledger drops the Node and Proofed columns below 600px; body text clamps 17 to 19px so a 1280 design holds from 390 to 2560.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Draw the cell as graphite hairlines and mark one node with the cyan bracket.
- Keep text on the open bone ground of the plate at full strength.
- Read every weight against the firing level of 1.00.
- Use cyan for the one action and the bracket only; use deep inks for state words.
- Style every control explicitly: square, recessed wells, a 3px graphite focus outline.

### Don't

- Don't put a dark panel or scrim over the hero plate.
- Don't print plate numbers, eyebrows or coordinate strips as ornament.
- Don't set cyan as small text on bone.
- Don't use three equal shadowed cards, stat ribbons or invented quotes.
- Don't add borders, grey washes, gradients or glow.

### Accessibility

Graphite #161715 on bone is 16:1 and muted #5D5D55 is 6:1; the button label #06181C on cyan #078FA9 is 4.8:1; state inks all clear 5:1 on bone; every state carries a word; focus is a 3px graphite outline; the settled page needs no JavaScript and prefers-reduced-motion is respected.

## Imagery Direction

### Pairs With

graphite-schematic

### Art Style Id

en-019ef726-b6d6-76a3-8090-5a4ff9ac9732

### Summary

Graphite Plate drawings of one neuron on warm bone e-paper: fine contour hairlines, a ruler of ticks along the foot and one cyan bracket on one synapse, with a calm bone area on the text side.

### Subjects

- a pyramidal neuron with its dendrite arbor
- an axon trace with myelin ticks
- an erased region with a dashed outline
- cross-sectioned anatomy

### Usage

One full-bleed hero per landing painted with var(--hero-image): the neuron sits in the right 58 percent of the wide plate, the left 42 percent is open bone for the headline; the tall plate puts the neuron in the lower half. Inner pages use the small SVG plates.

### Avoid

Text, numbers or logos in the picture; a panel over the plate; more than one cyan bracket; glow, gradients, photographs of paper or instruments.

---
version: "alpha"
name: "Sōma"
description: "Soma is a quiet clinical e-paper language for neural-map manuals. A warm bone page carries graphite hairline plates, a ruler of calibration ticks and one cyan registration bracket on the single synapse under probe. Headings are condensed..."
colors:
  bg: "#F4F1E8"
  surface: "#FBFAF4"
  text: "#161715"
  muted: "#5D5D55"
  border: "#D2CFC3"
  accent: "#078FA9"
  on_accent: "#06181C"
  success: "#0E6B5E"
  warning: "#8A4B00"
  error: "#A4123F"
  info: "#0E6F87"
  graphite: "#161715"
  recess: "#ECE8DC"
  tick: "#8F918A"
typography:
  headline-lg:
    fontFamily: "Asap Condensed"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Asap Condensed"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Duru Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Inconsolata"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  base: "0px"
  pill: "9999px"
spacing:
  base: "4px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "36px"
  3xl: "56px"
  4xl: "72px"
  step-8: "120px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-graphite:
    backgroundColor: "{colors.graphite}"
  color-reference-recess:
    backgroundColor: "{colors.recess}"
  color-reference-tick:
    backgroundColor: "{colors.tick}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.base}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.base}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.base}"
    height: "44px"
---

# Sōma

## Overview

Soma is a quiet clinical e-paper language for neural-map manuals. A warm bone page carries graphite hairline plates, a ruler of calibration ticks and one cyan registration bracket on the single synapse under probe. Headings are condensed capitals, notes are a plain humanist sans, and every number is printed in a monospace reading. The cell is drawn to scale, and nothing else gets colour.

### Values

- One bracket: cyan marks the one node under probe and the one action in a view.
- Evidence over decoration: coordinates, weights, thresholds and refresh times beat marketing copy.
- Large quiet plates beside dense readings, never equal card rows.
- Open ground for type: headings and copy sit on calm bone beside the plate, never on a panel over it.
- What was erased keeps its dashed outline as proof.

### Anti-Values

- Dark panels laid over the hero plate.
- Invented plate numbers, eyebrow micro-labels and fake coordinate strips as ornament.
- Cyan as small text on bone.
- Traffic-light status colours as the main palette.
- Card trios with shadows, stat ribbons and made-up quotes.

## 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 | `#F4F1E8` |
| surface | `#FBFAF4` |
| text | `#161715` |
| muted | `#5D5D55` |
| border | `#D2CFC3` |
| accent | `#078FA9` |
| on_accent | `#06181C` |
| success | `#0E6B5E` |
| warning | `#8A4B00` |
| error | `#A4123F` |
| info | `#0E6F87` |
| graphite | `#161715` |
| recess | `#ECE8DC` |
| tick | `#8F918A` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@500;600;700&family=Duru+Sans&family=Inconsolata:wght@400;500&display=swap

- **Headline-Lg**: Asap Condensed, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Asap Condensed, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Duru Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: Inconsolata, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `4px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `36px`
- **3xl**: `56px`
- **4xl**: `72px`
- **Step-8**: `120px`

### Grid

- **Type**: manual page: hero plate, one large plate with two small, one atlas band, one ledger, one form
- **Max Width**: 1240px content, centred above 1440px; the hero spans the viewport
- **Gutter**: clamp 20px to 72px
- **Column Behavior**: 12 columns on desktop (7 and 5 for the plate group), one column below 900px; grid children carry min-width:0

### Whitespace

- **Section Gap**: 120px desktop, 64px phone
- **Approach**: padding above every title; plates sit on the paper separated by 16 to 28px of space, never framed

### Density

- **Default**: comfortable
- **Button Height**: 48px
- **Input Height**: 52px
- **Row Height**: 56px

### Responsive

Hero swaps to the tall plate below 900px with the text above the cell; plates stack to one column; the ledger drops the Node and Proofed columns below 600px; body text clamps 17 to 19px so a 1280 design holds from 390 to 2560.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **None**: everything is flat; the plate is separated by tone and space

## Shapes

### Rounded

- **Base**: `0px`
- **Pill**: `9999px`

### Surfaces

- **Paper**: warm bone e-paper #F4F1E8, flat
- **Plate**: paler bone #FBFAF4 for a specimen plate
- **Recess**: #ECE8DC for wells, plate views and banded table rows
- **Band**: graphite #161715 for the one atlas band, overlays and the footer

### Borders

- **Policy**: none: separate by space, tone and ticks; the one hairline is the calibration ruler under the hero; focus is a 3px graphite outline

## Components

### Composition

- Give the hero one full-bleed graphite plate with calm bone ground on the text side; the headline and one action sit directly on that ground.
- Build each view from one large plate and two small ones, then one dense instrument readout, then one ledger.
- Show the cyan bracket once per plate, on the single node under probe.

### Hierarchy

- Condensed capital headings, 17px+ notes, mono for every reading.
- Cyan fills the one action; state words use the deep inks success, warning, error and info, never cyan text.
- Link weight is always read against the firing level of 1.00.

### Density

Sparse bone ground around plates, compressed 4px to 12px annotation systems only where a reading is taken; 120px between sections on desktop.

### Signature Patterns

- Probe bracket: a cyan registration bracket on one synapse of a graphite contour plate.
- Calibration ruler: a run of graphite ticks along the foot of the hero and each plate.
- Erased void: a dashed outline over rubbed hatch where a reading was removed.
- Atlas readout: node, link weight against the firing level, and refresh time on one graphite band.

## 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-01a11415-01ea-7f90-92de-b23365a100ae/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11415-01ea-7f90-92de-b23365a100ae/shadcn.json` (registry theme), `/language/en-01a11415-01ea-7f90-92de-b23365a100ae/shadcn-components.md` (component recipes) and `/language/en-01a11415-01ea-7f90-92de-b23365a100ae/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Draw the cell as graphite hairlines and mark one node with the cyan bracket.
- Do Keep text on the open bone ground of the plate at full strength.
- Do Read every weight against the firing level of 1.00.
- Do Use cyan for the one action and the bracket only; use deep inks for state words.
- Do Style every control explicitly: square, recessed wells, a 3px graphite focus outline.
- Don't Don't put a dark panel or scrim over the hero plate.
- Don't Don't print plate numbers, eyebrows or coordinate strips as ornament.
- Don't Don't set cyan as small text on bone.
- Don't Don't use three equal shadowed cards, stat ribbons or invented quotes.
- Don't Don't add borders, grey washes, gradients or glow.

### Accessibility

Graphite #161715 on bone is 16:1 and muted #5D5D55 is 6:1; the button label #06181C on cyan #078FA9 is 4.8:1; state inks all clear 5:1 on bone; every state carries a word; focus is a 3px graphite outline; the settled page needs no JavaScript and prefers-reduced-motion is respected.

## Imagery Direction

### Pairs With

graphite-schematic

### Art Style Id

en-019ef726-b6d6-76a3-8090-5a4ff9ac9732

### Summary

Graphite Plate drawings of one neuron on warm bone e-paper: fine contour hairlines, a ruler of ticks along the foot and one cyan bracket on one synapse, with a calm bone area on the text side.

### Subjects

- a pyramidal neuron with its dendrite arbor
- an axon trace with myelin ticks
- an erased region with a dashed outline
- cross-sectioned anatomy

### Usage

One full-bleed hero per landing painted with var(--hero-image): the neuron sits in the right 58 percent of the wide plate, the left 42 percent is open bone for the headline; the tall plate puts the neuron in the lower half. Inner pages use the small SVG plates.

### Avoid

Text, numbers or logos in the picture; a panel over the plate; more than one cyan bracket; glow, gradients, photographs of paper or instruments.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "soma",
  "type": "registry:theme",
  "title": "Sōma shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F1E8",
      "foreground": "#161715",
      "card": "#FBFAF4",
      "card-foreground": "#161715",
      "popover": "#FBFAF4",
      "popover-foreground": "#161715",
      "primary": "#161715",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5D5D55",
      "muted-foreground": "#161715",
      "accent": "#078FA9",
      "accent-foreground": "#ffffff",
      "destructive": "#A4123F",
      "border": "#D2CFC3",
      "input": "#D2CFC3",
      "ring": "#078FA9",
      "chart-1": "#161715",
      "chart-2": "#f4f4f5",
      "chart-3": "#078FA9",
      "chart-4": "#0E6B5E",
      "chart-5": "#8A4B00",
      "sidebar": "#FBFAF4",
      "sidebar-foreground": "#161715",
      "sidebar-primary": "#161715",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0E6F87",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D2CFC3",
      "sidebar-ring": "#078FA9",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#161715",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#078FA9",
      "accent-foreground": "#ffffff",
      "destructive": "#A4123F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#078FA9",
      "chart-1": "#161715",
      "chart-2": "#f4f4f5",
      "chart-3": "#078FA9",
      "chart-4": "#0E6B5E",
      "chart-5": "#8A4B00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#161715",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#078FA9",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#078FA9",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11415-01ea-7f90-92de-b23365a100ae",
    "slug": "soma",
    "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",
        "bg",
        "border",
        "error",
        "graphite",
        "info",
        "muted",
        "on_accent",
        "recess",
        "success",
        "surface",
        "text",
        "tick",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "base",
        "pill"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "band",
        "paper",
        "plate",
        "recess"
      ],
      "borders": [
        "policy"
      ],
      "motion": [
        "reduced_motion",
        "refresh"
      ]
    }
  }
}
```