Back to gallery

Tachikiri

Tachikiri is a koma-noir interface language for systems that feel observed rather than operated.

Its pictures are drawn in Phosphor Ledger.

Download DESIGN.md

Tokens, rules and the paired art style Phosphor Ledger.

Preview

Open full page

Typography

Each face set in this language's own words.

headline lgSquada One, 33px, 700

Tachikiri

headline mdSquada One, 27px, 600

Tachikiri

body mdHedvig Letters Sans, 17px, 400

Tachikiri is a koma-noir interface language for systems that feel observed rather than operated.

label mdsystem, 12px, 600

Tachikiri is a koma-noir interface language for systems that feel observed rather than operated.

Specification

Philosophy

summary

Tachikiri is a koma-noir interface language for systems that feel observed rather than operated. A page is staged like a manga spread: one full-bleed ink drawing with its type on the empty black wall, then koma panels of unequal width, a gutter that does the pacing, and a terminal slab that goes live with one phosphor cursor. Black, paper and grey are the real palette, and green marks only what the machine is doing now.

It values

  • Restraint before atmosphere: noir is made by omission, hard contrast and visible silence.
  • Panels as interface logic: unequal koma and the gutter between them set order, grouping and pace.
  • Typed evidence over ornament: commands, paths and counts carry the references, with nothing laid over them.
  • One live signal: phosphor green appears for the cursor, the confirmed recall, the one action and focus.
  • Recognizable without colour: the identity survives in scale, gutter and type.

It refuses

  • Gradient scrims, dot overlays and glow over the drawing.
  • Invented stamps, tracked uppercase eyebrow labels and decorative codes.
  • Outlines, hard offset shadows and rounded cards.
  • Three equal step cards or an equal-weight analytics grid.
  • Over-used display faces and a default green, amber, red and blue status set.

visual character

  • Ground #0A0A0B with surface #151517 slabs and paper #F4F2EC koma, all flat and square.
  • One full-strength screentone drawing as the hero, with a calm solid black wall for the type.
  • Squada One headings, Hedvig Letters Sans prose and system mono evidence.
  • One phosphor green #7CFF9A, spent only on live signal.
  • Semantic colours retinted to the palette so status reads as a word and a mark, never a rainbow.

lineage

Revised in place from the approved Inspora specimen tachikiri-i (round 8, 2026-10-07). Kept: the name, the black ground, the paper koma, phosphor green on live signal only, the page order and the Mnemos copy, and the unequal koma spread. Changed: the hero is one full-strength drawing with a calm black wall and the type on it, with no scrim; Anton, Noto Sans and Kode Mono became Squada One, Hedvig Letters Sans and the system mono; the semantic colours were retinted; the stamps, eyebrows, outlines, offset shadows, three step cards and colophon were removed; the steps became one typed slab and a rules section was added.

Tokens
colors13
bg
#0A0A0B
surface
#151517
panel
#F4F2EC
on panel
#0A0A0B
text
#EDEAE2
muted
#A7A59C
border
#2A2A2E
accent
#7CFF9A
on accent
#06140A
success
#7CFF9A
warning
#E6C36A
error
#FF7A6B
info
#9DB8C4
typography12
heading font
Squada One
body font
Hedvig Letters Sans
mono font
ui-monospace
heading weight
400
body weight
400
button weight
400
heading transform
none
base size
17px
line height
1.6
letter spacing
-0.02em on display and body; 0 on mono
scale
14.5px, 17px, 20px, 26px, 36px, 60px, 96px, 150px
google fonts url
https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans&family=Squada+One&display=swap
radii5
none
0px
sm
0px
md
0px
lg
0px
full
0px
shadows1
none
everything is flat; depth comes from ink against paper and from the gutter
spacing2
base
8px
scale
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
surfaces3
treatment
black room with paper-white koma
card style
No cards. Koma are flat fills of surface or paper in unequal widths, parted by a gutter of the ground.
bg pattern
none; the hero drawing carries the only texture
borders3
default width
0
style
none
character
No borders, outlines or hairlines. Panels are fills; a 2px outline appears only as the focus ring.
motion3
duration
180ms
easing
cubic-bezier(0.2,0,0,1)
philosophy
A blinking phosphor cursor and a quiet hover. The settled page is the default, renders with no JavaScript, and prefers-reduced-motion stops the blink.
controls2
height
54px button, 44px small, 52px field
radius
0px
Rules

composition

  • Stage a screen as an asymmetric koma spread: one dominant panel, then smaller ones of different widths, parted by a gutter of the black ground.
  • Put the hero title on the empty black wall of one full-bleed ink drawing, with no top bar, no scrim and nothing laid over the drawing.
  • Show one live terminal slab per view: surface fill, mono output, one phosphor cursor.
  • Never use cards, outlines or equal rows; every cluster takes its own width.

hierarchy

  • Headings in Squada One 400 at -0.02em: 150px at most for the hero, 60 to 88px for sections, 26 to 44px inside koma.
  • Prose in Hedvig Letters Sans 400 at 17px, in two tones: text and muted.
  • The system mono prints evidence: commands, paths, counts and steps, at 14.5px or larger.
  • Importance is scale and order; the widest koma reads first.

density

Alternate dense terminal slabs with large unoccupied black or paper fields. Gutters run from 12px between koma to 128px between sections.

signature patterns

  • Koma spread: four or five panels in a 12-column grid with unequal spans, paper and surface fills, the gutter as the only structure.
  • Terminal inversion: a live panel turns to a surface slab with mono output and a single blinking phosphor cursor.
  • Phosphor signal: green is spent only on the cursor, the confirmed recall, the one button that acts and the focus ring.
  • Ink wall hero: one full-bleed black and white screentone drawing with a calm solid black wall on which the type stands.
  • Typed evidence: the process is told as one slab of mono lines, each verb in green, and nothing decorative is added.
Layout

grid

type
asymmetric koma spread under a full-bleed hero
max width
1320px content, centred above 1440px; the hero spans the viewport
gutter
48px desktop, 20px phone, 12 to 24px between koma
column behavior
A 12-column grid with unequal spans (7 and 5, 4 and 8); every child has min-width:0 and uses minmax(0,1fr).

whitespace

section gap
128px desktop, 64px phone
card gap
no cards; gutters of 12 to 24px between koma
content padding
koma pad 24 to 44px; the hero title sits 100px below the wordmark
approach
The black ground is the table. Space and scale separate, and large unoccupied fields stay unoccupied.

density

default
medium-low with pockets of terminal density
comfortable
button height 54pxinput height 52pxrow height 44 to 56px

responsive

Phones (390px) stack the koma to one column, switch to the tall hero drawing and shrink the title to 56 to 70px. The tablet band (601 to 1199px) keeps a 12-column spread with 12 and 7/5 spans and the tall hero. From 1441px the hero text stays at 6vw from the edge and the content caps and centres.

breakpoints

mobile
390px
tablet
601 to 1199px
desktop
1280px
ultrawide
2560px
Guidance

Do

  • Put the title on the empty black wall of the hero drawing and keep the wall empty.
  • Vary koma widths: one dominant, one dense slab, one quiet paper beat.
  • Write real interface language: commands, paths, frame counts and steps.
  • Spend green only on the live cursor, the confirmed state, the one button and focus.
  • Keep every corner square, every fill flat and every line gone.
  • Pair each status colour with a word and a mark.
  • Keep the page readable with no JavaScript.

Avoid

  • Don't lay a scrim, dot field or grain over the hero drawing.
  • Don't add timestamps, scene stamps or reel codes as decoration.
  • Don't draw outlines, hairlines or offset shadows around panels.
  • Don't build three equal cards or an equal-weight dashboard grid.
  • Don't set tracked uppercase eyebrow or tab labels.
  • Don't use green as a field, a gradient or a decoration.
  • Don't round corners or add glow.
Imagery

pairs with

phosphor-ledger

summary

High-contrast black-ink screentone illustration: hard inked contours, halftone dot tones modelling volume, pure-black shadow masses against paper-white highlights, and a single tiny phosphor-green glint as the only colour. The hero is drawn with a calm solid black wall on one side, so the title stands on the drawing's own emptiness.

subjects

  • a lone CRT terminal in a dark operations room
  • forensic archive interiors and empty consoles
  • post-human writing systems and memory machines
  • objects and figures treated as inked screentone plates

usage

One full-bleed landing hero in the ink-screentone technique, painted with var(--hero-image): the lit CRT lower right on a desk, the wall left as a flat black field for the type, and a tall version with the wall on top for phones. No scrim over it. Never illustration behind body text or on the thumbnail.

art style id

en-019ef80f-d766-7c82-96ba-c5e48af24a83

Katagami spec file
# Tachikiri

## Philosophy

Tachikiri is a koma-noir interface language for systems that feel observed rather than operated. A page is staged like a manga spread: one full-bleed ink drawing with its type on the empty black wall, then koma panels of unequal width, a gutter that does the pacing, and a terminal slab that goes live with one phosphor cursor. Black, paper and grey are the real palette, and green marks only what the machine is doing now.

### Values

- Restraint before atmosphere: noir is made by omission, hard contrast and visible silence.
- Panels as interface logic: unequal koma and the gutter between them set order, grouping and pace.
- Typed evidence over ornament: commands, paths and counts carry the references, with nothing laid over them.
- One live signal: phosphor green appears for the cursor, the confirmed recall, the one action and focus.
- Recognizable without colour: the identity survives in scale, gutter and type.

### Anti-Values

- Gradient scrims, dot overlays and glow over the drawing.
- Invented stamps, tracked uppercase eyebrow labels and decorative codes.
- Outlines, hard offset shadows and rounded cards.
- Three equal step cards or an equal-weight analytics grid.
- Over-used display faces and a default green, amber, red and blue status set.

### Visual Character

- Ground #0A0A0B with surface #151517 slabs and paper #F4F2EC koma, all flat and square.
- One full-strength screentone drawing as the hero, with a calm solid black wall for the type.
- Squada One headings, Hedvig Letters Sans prose and system mono evidence.
- One phosphor green #7CFF9A, spent only on live signal.
- Semantic colours retinted to the palette so status reads as a word and a mark, never a rainbow.

### Lineage

> Revised in place from the approved Inspora specimen tachikiri-i (round 8, 2026-10-07). Kept: the name, the black ground, the paper koma, phosphor green on live signal only, the page order and the Mnemos copy, and the unequal koma spread. Changed: the hero is one full-strength drawing with a calm black wall and the type on it, with no scrim; Anton, Noto Sans and Kode Mono became Squada One, Hedvig Letters Sans and the system mono; the semantic colours were retinted; the stamps, eyebrows, outlines, offset shadows, three step cards and colophon were removed; the steps became one typed slab and a rules section was added.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A0A0B` |
| surface | `#151517` |
| panel | `#F4F2EC` |
| on_panel | `#0A0A0B` |
| text | `#EDEAE2` |
| muted | `#A7A59C` |
| border | `#2A2A2E` |
| accent | `#7CFF9A` |
| on_accent | `#06140A` |
| success | `#7CFF9A` |
| warning | `#E6C36A` |
| error | `#FF7A6B` |
| info | `#9DB8C4` |

### Typography

- **Heading Font**: Squada One
- **Body Font**: Hedvig Letters Sans
- **Mono Font**: ui-monospace
- **Heading Weight**: 400
- **Body Weight**: 400
- **Button Weight**: 400
- **Heading Transform**: none
- **Base Size**: 17px
- **Line Height**: 1.6
- **Letter Spacing**: -0.02em on display and body; 0 on mono
- **Scale**: ["14.5px","17px","20px","26px","36px","60px","96px","150px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans&family=Squada+One&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 0px

### Shadows

- **None**: everything is flat; depth comes from ink against paper and from the gutter

### Spacing

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

### Surfaces

- **Treatment**: black room with paper-white koma
- **Card Style**: No cards. Koma are flat fills of surface or paper in unequal widths, parted by a gutter of the ground.
- **Bg Pattern**: none; the hero drawing carries the only texture

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, outlines or hairlines. Panels are fills; a 2px outline appears only as the focus ring.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0,0,1)
- **Philosophy**: A blinking phosphor cursor and a quiet hover. The settled page is the default, renders with no JavaScript, and prefers-reduced-motion stops the blink.

### Controls

- **Height**: 54px button, 44px small, 52px field
- **Radius**: 0px

## Rules

### Composition

- Stage a screen as an asymmetric koma spread: one dominant panel, then smaller ones of different widths, parted by a gutter of the black ground.
- Put the hero title on the empty black wall of one full-bleed ink drawing, with no top bar, no scrim and nothing laid over the drawing.
- Show one live terminal slab per view: surface fill, mono output, one phosphor cursor.
- Never use cards, outlines or equal rows; every cluster takes its own width.

### Hierarchy

- Headings in Squada One 400 at -0.02em: 150px at most for the hero, 60 to 88px for sections, 26 to 44px inside koma.
- Prose in Hedvig Letters Sans 400 at 17px, in two tones: text and muted.
- The system mono prints evidence: commands, paths, counts and steps, at 14.5px or larger.
- Importance is scale and order; the widest koma reads first.

### Density

Alternate dense terminal slabs with large unoccupied black or paper fields. Gutters run from 12px between koma to 128px between sections.

### Signature Patterns

- Koma spread: four or five panels in a 12-column grid with unequal spans, paper and surface fills, the gutter as the only structure.
- Terminal inversion: a live panel turns to a surface slab with mono output and a single blinking phosphor cursor.
- Phosphor signal: green is spent only on the cursor, the confirmed recall, the one button that acts and the focus ring.
- Ink wall hero: one full-bleed black and white screentone drawing with a calm solid black wall on which the type stands.
- Typed evidence: the process is told as one slab of mono lines, each verb in green, and nothing decorative is added.

## Layout

### Grid

- **Type**: asymmetric koma spread under a full-bleed hero
- **Max Width**: 1320px content, centred above 1440px; the hero spans the viewport
- **Gutter**: 48px desktop, 20px phone, 12 to 24px between koma
- **Column Behavior**: A 12-column grid with unequal spans (7 and 5, 4 and 8); every child has min-width:0 and uses minmax(0,1fr).

### Whitespace

- **Section Gap**: 128px desktop, 64px phone
- **Card Gap**: no cards; gutters of 12 to 24px between koma
- **Content Padding**: koma pad 24 to 44px; the hero title sits 100px below the wordmark
- **Approach**: The black ground is the table. Space and scale separate, and large unoccupied fields stay unoccupied.

### Density

- **Default**: medium-low with pockets of terminal density
- **Comfortable**: {"button_height":"54px","input_height":"52px","row_height":"44 to 56px"}

### Responsive

Phones (390px) stack the koma to one column, switch to the tall hero drawing and shrink the title to 56 to 70px. The tablet band (601 to 1199px) keeps a 12-column spread with 12 and 7/5 spans and the tall hero. From 1441px the hero text stays at 6vw from the edge and the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Put the title on the empty black wall of the hero drawing and keep the wall empty.
- Vary koma widths: one dominant, one dense slab, one quiet paper beat.
- Write real interface language: commands, paths, frame counts and steps.
- Spend green only on the live cursor, the confirmed state, the one button and focus.
- Keep every corner square, every fill flat and every line gone.
- Pair each status colour with a word and a mark.
- Keep the page readable with no JavaScript.

### Don't

- Don't lay a scrim, dot field or grain over the hero drawing.
- Don't add timestamps, scene stamps or reel codes as decoration.
- Don't draw outlines, hairlines or offset shadows around panels.
- Don't build three equal cards or an equal-weight dashboard grid.
- Don't set tracked uppercase eyebrow or tab labels.
- Don't use green as a field, a gradient or a decoration.
- Don't round corners or add glow.

### Accessibility

Text on ink is #EDEAE2 on #0A0A0B and ink on paper is #0A0A0B on #F4F2EC, both far above AA. Muted #A7A59C passes AA on the ground and the surface. Green is supplemental and always paired with a word. Focus is a visible 2px outline, touch targets are at least 44px, and prefers-reduced-motion stops the cursor.

### Usage Context

Best for AI memory consoles, forensic archive tools, security review interfaces and developer products that want mystery without noise.

## Imagery Direction

### Pairs With

phosphor-ledger

### Summary

High-contrast black-ink screentone illustration: hard inked contours, halftone dot tones modelling volume, pure-black shadow masses against paper-white highlights, and a single tiny phosphor-green glint as the only colour. The hero is drawn with a calm solid black wall on one side, so the title stands on the drawing's own emptiness.

### Subjects

- a lone CRT terminal in a dark operations room
- forensic archive interiors and empty consoles
- post-human writing systems and memory machines
- objects and figures treated as inked screentone plates

### Usage

One full-bleed landing hero in the ink-screentone technique, painted with var(--hero-image): the lit CRT lower right on a desk, the wall left as a flat black field for the type, and a tall version with the wall on top for phones. No scrim over it. Never illustration behind body text or on the thumbnail.

### Art Style Id

en-019ef80f-d766-7c82-96ba-c5e48af24a83
DESIGN.md file
---
version: "alpha"
name: "Tachikiri"
description: "Tachikiri is a koma-noir interface language for systems that feel observed rather than operated. A page is staged like a manga spread: one full-bleed ink drawing with its type on the empty black wall, then koma panels of unequal width, a..."
colors:
  bg: "#0A0A0B"
  surface: "#151517"
  panel: "#F4F2EC"
  on_panel: "#0A0A0B"
  text: "#EDEAE2"
  muted: "#A7A59C"
  border: "#2A2A2E"
  accent: "#7CFF9A"
  on_accent: "#06140A"
  success: "#7CFF9A"
  warning: "#E6C36A"
  error: "#FF7A6B"
  info: "#9DB8C4"
typography:
  headline-lg:
    fontFamily: "Squada One"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Squada One"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Hedvig Letters Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "ui-monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "0px"
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-panel:
    backgroundColor: "{colors.panel}"
  color-reference-on_panel:
    backgroundColor: "{colors.on_panel}"
  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}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    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"
---

# Tachikiri

## Overview

Tachikiri is a koma-noir interface language for systems that feel observed rather than operated. A page is staged like a manga spread: one full-bleed ink drawing with its type on the empty black wall, then koma panels of unequal width, a gutter that does the pacing, and a terminal slab that goes live with one phosphor cursor. Black, paper and grey are the real palette, and green marks only what the machine is doing now.

### Values

- Restraint before atmosphere: noir is made by omission, hard contrast and visible silence.
- Panels as interface logic: unequal koma and the gutter between them set order, grouping and pace.
- Typed evidence over ornament: commands, paths and counts carry the references, with nothing laid over them.
- One live signal: phosphor green appears for the cursor, the confirmed recall, the one action and focus.
- Recognizable without colour: the identity survives in scale, gutter and type.

### Anti-Values

- Gradient scrims, dot overlays and glow over the drawing.
- Invented stamps, tracked uppercase eyebrow labels and decorative codes.
- Outlines, hard offset shadows and rounded cards.
- Three equal step cards or an equal-weight analytics grid.
- Over-used display faces and a default green, amber, red and blue status set.

### Visual Character

- Ground #0A0A0B with surface #151517 slabs and paper #F4F2EC koma, all flat and square.
- One full-strength screentone drawing as the hero, with a calm solid black wall for the type.
- Squada One headings, Hedvig Letters Sans prose and system mono evidence.
- One phosphor green #7CFF9A, spent only on live signal.
- Semantic colours retinted to the palette so status reads as a word and a mark, never a rainbow.

### Lineage

> Revised in place from the approved Inspora specimen tachikiri-i (round 8, 2026-10-07). Kept: the name, the black ground, the paper koma, phosphor green on live signal only, the page order and the Mnemos copy, and the unequal koma spread. Changed: the hero is one full-strength drawing with a calm black wall and the type on it, with no scrim; Anton, Noto Sans and Kode Mono became Squada One, Hedvig Letters Sans and the system mono; the semantic colours were retinted; the stamps, eyebrows, outlines, offset shadows, three step cards and colophon were removed; the steps became one typed slab and a rules section was added.

## 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 | `#0A0A0B` |
| surface | `#151517` |
| panel | `#F4F2EC` |
| on_panel | `#0A0A0B` |
| text | `#EDEAE2` |
| muted | `#A7A59C` |
| border | `#2A2A2E` |
| accent | `#7CFF9A` |
| on_accent | `#06140A` |
| success | `#7CFF9A` |
| warning | `#E6C36A` |
| error | `#FF7A6B` |
| info | `#9DB8C4` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans&family=Squada+One&display=swap

- **Headline-Lg**: Squada One, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Squada One, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Hedvig Letters Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: ui-monospace, 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

- **Type**: asymmetric koma spread under a full-bleed hero
- **Max Width**: 1320px content, centred above 1440px; the hero spans the viewport
- **Gutter**: 48px desktop, 20px phone, 12 to 24px between koma
- **Column Behavior**: A 12-column grid with unequal spans (7 and 5, 4 and 8); every child has min-width:0 and uses minmax(0,1fr).

### Whitespace

- **Section Gap**: 128px desktop, 64px phone
- **Card Gap**: no cards; gutters of 12 to 24px between koma
- **Content Padding**: koma pad 24 to 44px; the hero title sits 100px below the wordmark
- **Approach**: The black ground is the table. Space and scale separate, and large unoccupied fields stay unoccupied.

### Density

- **Default**: medium-low with pockets of terminal density
- **Comfortable**: {"button_height":"54px","input_height":"52px","row_height":"44 to 56px"}

### Responsive

Phones (390px) stack the koma to one column, switch to the tall hero drawing and shrink the title to 56 to 70px. The tablet band (601 to 1199px) keeps a 12-column spread with 12 and 7/5 spans and the tall hero. From 1441px the hero text stays at 6vw from the edge and the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **None**: everything is flat; depth comes from ink against paper and from the gutter

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`

### Surfaces

- **Treatment**: black room with paper-white koma
- **Card Style**: No cards. Koma are flat fills of surface or paper in unequal widths, parted by a gutter of the ground.
- **Bg Pattern**: none; the hero drawing carries the only texture

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, outlines or hairlines. Panels are fills; a 2px outline appears only as the focus ring.

## Components

### Composition

- Stage a screen as an asymmetric koma spread: one dominant panel, then smaller ones of different widths, parted by a gutter of the black ground.
- Put the hero title on the empty black wall of one full-bleed ink drawing, with no top bar, no scrim and nothing laid over the drawing.
- Show one live terminal slab per view: surface fill, mono output, one phosphor cursor.
- Never use cards, outlines or equal rows; every cluster takes its own width.

### Hierarchy

- Headings in Squada One 400 at -0.02em: 150px at most for the hero, 60 to 88px for sections, 26 to 44px inside koma.
- Prose in Hedvig Letters Sans 400 at 17px, in two tones: text and muted.
- The system mono prints evidence: commands, paths, counts and steps, at 14.5px or larger.
- Importance is scale and order; the widest koma reads first.

### Density

Alternate dense terminal slabs with large unoccupied black or paper fields. Gutters run from 12px between koma to 128px between sections.

### Signature Patterns

- Koma spread: four or five panels in a 12-column grid with unequal spans, paper and surface fills, the gutter as the only structure.
- Terminal inversion: a live panel turns to a surface slab with mono output and a single blinking phosphor cursor.
- Phosphor signal: green is spent only on the cursor, the confirmed recall, the one button that acts and the focus ring.
- Ink wall hero: one full-bleed black and white screentone drawing with a calm solid black wall on which the type stands.
- Typed evidence: the process is told as one slab of mono lines, each verb in green, and nothing decorative is added.

## 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-7241-7cd1-bcaf-bc989ee93a8c/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11415-7241-7cd1-bcaf-bc989ee93a8c/shadcn.json` (registry theme), `/language/en-01a11415-7241-7cd1-bcaf-bc989ee93a8c/shadcn-components.md` (component recipes) and `/language/en-01a11415-7241-7cd1-bcaf-bc989ee93a8c/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 Put the title on the empty black wall of the hero drawing and keep the wall empty.
- Do Vary koma widths: one dominant, one dense slab, one quiet paper beat.
- Do Write real interface language: commands, paths, frame counts and steps.
- Do Spend green only on the live cursor, the confirmed state, the one button and focus.
- Do Keep every corner square, every fill flat and every line gone.
- Do Pair each status colour with a word and a mark.
- Do Keep the page readable with no JavaScript.
- Don't Don't lay a scrim, dot field or grain over the hero drawing.
- Don't Don't add timestamps, scene stamps or reel codes as decoration.
- Don't Don't draw outlines, hairlines or offset shadows around panels.
- Don't Don't build three equal cards or an equal-weight dashboard grid.
- Don't Don't set tracked uppercase eyebrow or tab labels.
- Don't Don't use green as a field, a gradient or a decoration.
- Don't Don't round corners or add glow.

### Accessibility

Text on ink is #EDEAE2 on #0A0A0B and ink on paper is #0A0A0B on #F4F2EC, both far above AA. Muted #A7A59C passes AA on the ground and the surface. Green is supplemental and always paired with a word. Focus is a visible 2px outline, touch targets are at least 44px, and prefers-reduced-motion stops the cursor.

### Usage Context

Best for AI memory consoles, forensic archive tools, security review interfaces and developer products that want mystery without noise.

## Imagery Direction

### Pairs With

phosphor-ledger

### Summary

High-contrast black-ink screentone illustration: hard inked contours, halftone dot tones modelling volume, pure-black shadow masses against paper-white highlights, and a single tiny phosphor-green glint as the only colour. The hero is drawn with a calm solid black wall on one side, so the title stands on the drawing's own emptiness.

### Subjects

- a lone CRT terminal in a dark operations room
- forensic archive interiors and empty consoles
- post-human writing systems and memory machines
- objects and figures treated as inked screentone plates

### Usage

One full-bleed landing hero in the ink-screentone technique, painted with var(--hero-image): the lit CRT lower right on a desk, the wall left as a flat black field for the type, and a tall version with the wall on top for phones. No scrim over it. Never illustration behind body text or on the thumbnail.

### Art Style Id

en-019ef80f-d766-7c82-96ba-c5e48af24a83
shadcn/ui theme file
```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tachikiri",
  "type": "registry:theme",
  "title": "Tachikiri shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A0A0B",
      "foreground": "#EDEAE2",
      "card": "#151517",
      "card-foreground": "#EDEAE2",
      "popover": "#151517",
      "popover-foreground": "#EDEAE2",
      "primary": "#EDEAE2",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#A7A59C",
      "muted-foreground": "#EDEAE2",
      "accent": "#7CFF9A",
      "accent-foreground": "#111111",
      "destructive": "#FF7A6B",
      "border": "#2A2A2E",
      "input": "#2A2A2E",
      "ring": "#7CFF9A",
      "chart-1": "#EDEAE2",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF9A",
      "chart-4": "#7CFF9A",
      "chart-5": "#E6C36A",
      "sidebar": "#151517",
      "sidebar-foreground": "#EDEAE2",
      "sidebar-primary": "#EDEAE2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9DB8C4",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A2A2E",
      "sidebar-ring": "#7CFF9A",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#EDEAE2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7CFF9A",
      "accent-foreground": "#111111",
      "destructive": "#FF7A6B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7CFF9A",
      "chart-1": "#EDEAE2",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF9A",
      "chart-4": "#7CFF9A",
      "chart-5": "#E6C36A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#EDEAE2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#7CFF9A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7CFF9A",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11415-7241-7cd1-bcaf-bc989ee93a8c",
    "slug": "tachikiri",
    "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",
        "info",
        "muted",
        "on_accent",
        "on_panel",
        "panel",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius"
      ]
    }
  }
}
```

shadcn/ui kit