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
Typography
Each face set in this language's own words.
Tachikiri
Tachikiri
Tachikiri is a koma-noir interface language for systems that feel observed rather than operated.
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
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"
]
}
}
}
```