A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
Compose screens as a confidential case file processed for release: a tall single reading column on a wide left marginalia rail, read top-to-bottom like a filed report. One dominant redacted record, supporting record cards in asymmetric ratios (never equal triples), and edge OCR rails. Square corners; radius only for the round chop and pills.
From stencil title cards (Saira Stencil One) to uppercase Archivo-Narrow field labels to typewriter document body to mono IDs and OCR ticks. Vermilion never fills large areas; it marks exactly one cleared line, the declassification chop, and a single status. White space is the margin of an official page.
Alternate severe emptiness with one compressed typed cluster so the page reads like a filed document, never uniformly busy. Dense zones occupy less area but carry more microtext.
The redaction bar — solid ink rectangles striking out typed lines, with exactly one cleared line wearing a vermilion highlight band; plus the circular declassification chop, the marginalia rail (case numbers, hand ticks, paperclip, officer notes), registration crop marks, and the carbon under-sheet offset.
Document ledger: a wide marginalia rail (~236px) beside a single reading column, max width ~1180px. Record cards use asymmetric ratios (1.6/1, 1.4/1/1) to prevent equal-card rhythm. minmax(0,1fr) columns and min-width:0 children so grids never blow out; carbon under-sheets clamped inside the viewport on mobile.
64-96px voids around title cards; 4-16px gaps inside diagnostic clusters; high spacing contrast — the page breathes like an official margin.
High contrast between open editorial fields and one compact typed cluster per section.
From ~390px mobile to 2560px+ ultra-wide. Mobile stacks to a single column, the marginalia rail moves above content, nav links hide, banners wrap, and nothing overflows horizontally (overflow-x hidden as a guard). Ultra-wide caps and centres contained content; only the hero spans 100vw.
stakeout-bureau
High-contrast black-and-white surveillance-manga ink treatment applied to confidential paperwork: redacted manila case files, declassification chops, carbon copies, crop marks. Tone built from halftone dot fields and hard ink cuts; one surgical vermilion strip marks the cleared passage.
One full-bleed landing hero — a top-down flat-lay of a heavily-redacted manila case file with a circular declassification chop and a single vermilion-highlighted cleared line. Edge-to-edge, no text.
# Carbon ## Philosophy A declassified case-file design language. The screen is a confidential record processed for release: typed on a carbon copy, most lines blacked out under solid redaction bars, exactly one passage cleared and marked by a single surgical stamp-vermilion highlight. The ornament is the paperwork itself — classification banners, a circular declassification chop, marginalia in the officer's hand, registration crop marks, and the torn carbon sheet beneath. It reinterprets the confidential-dossier brief as a paper file held in the hand, not a dark surveillance screen. ### Values - Hide first: content defaults to sealed; the page is governed by what is withheld, not what is watched. - One clearance: exactly one passage carries the vermilion highlight; the accent is a clearance, never decoration. - Type the record: every line is typewritten on a carbon copy; stencil stamps mark the chrome; the voice is the instrument. - Document rhythm: a tall ledger read top-to-bottom on a wide marginalia rail — severe emptiness alternating with one dense typed cluster. - Paper material over screen glow: aged manila ground, ink-black bars, carbon under-sheet depth instead of drop shadows. ### Anti-Values - Neon cyberpunk gradients, rainbow glows, gamer HUD decoration. - Equal-card SaaS dashboards, friendly rounded app chrome, anonymous analytics screens. - Glassmorphism as the surface language; cute manga stickers, kawaii expressions, comic-book colour fills. - Drop-shadow stacks, arbitrary rounded corners, dark-surveillance-screen pastiche. ### Visual Character - Aged manila / bone document ground (#E7DDC8) with ink-black type and solid black redaction bars; never white, never a dark screen. - The redaction bar is the dominant rhythm: solid ink rectangles strike out typed lines; one cleared line wears a vermilion highlight band. - A circular declassification chop (vermilion ring) struck at a slight angle marks released records. - A wide left marginalia rail carries case numbers, hand-checked ticks, a paperclip motif, and officer notes set in typewriter face. - Square corners, registration crop marks at document-panel corners, and a carbon under-sheet offset giving filed-stack depth without shadows. - Stencil display (Saira Stencil One) for stamps and headlines; typewriter (Special Elite) for the document body; mono (Spline Sans Mono) for IDs and OCR rails. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#E7DDC8` | | bg_2 | `#DED2B8` | | surface | `#F1E9D7` | | surface_2 | `#EADFC6` | | text | `#16130D` | | ink | `#16130D` | | muted | `#6E6450` | | faint | `#9A8E73` | | border | `#16130D1F` | | rule | `#16130D33` | | accent | `#D8412B` | | accent_deep | `#A82A1A` | | on_accent | `#FBF6EC` | | redact | `#16130D` | | carbon | `#2A2419` | | success | `#3F6B3A` | | warning | `#A86A1E` | | error | `#C0392B` | | info | `#3C5A6B` | ### Typography - **Base Size**: 17px - **Body Font**: Special Elite - **Heading Font**: Saira Stencil One - **Mono Font**: Spline Sans Mono - **Label Font**: Archivo Narrow - **Heading Weight**: 400 - **Heading Transform**: none - **Letter Spacing**: -0.01em - **Line Height**: 1.6 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Special+Elite&family=Spline+Sans+Mono:wght@400;500;600&family=Archivo+Narrow:wght@400;500;600;700&display=swap ### Radii - **None**: 0px - **Sm**: 0px - **Md**: 0px - **Pill**: 9999px - **Chop**: 9999px - **Full**: 9999px ### Shadows - **None**: none - **Carbon Offset**: filed under-sheet at +7px x/y, no drop shadow ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Bg Pattern**: Faint halftone dot field over aged manila paper; OCR-style mono tick strings run along document edges. - **Card Style**: Square-corner manila sheets with a carbon under-sheet offset (no drop shadow), registration crop marks at corners, solid ink redaction bars as the dominant material, and one cleared line carrying a vermilion highlight band. - **Treatment**: Matte ink black type and bars on warm manila ground; the only colour is the single stamp-vermilion clearance / declassification chop. ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: dotted ink hairline rules; 2px solid ink baselines under headers; no grey borders, no card borders - **Character**: Separation is hairline-dotted ink rules and the carbon under-sheet offset; never a boxed border or accent edge. ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(.2,.8,.1,1) - **Philosophy**: Settled state is the default (visible with no JS). A .anim class set by an inline script gates the hidden start-state; reveal-on-scroll and the redaction-bar declassify (scaleX collapse on hover) are layered on top. Respects prefers-reduced-motion. ## Rules ### Composition Compose screens as a confidential case file processed for release: a tall single reading column on a wide left marginalia rail, read top-to-bottom like a filed report. One dominant redacted record, supporting record cards in asymmetric ratios (never equal triples), and edge OCR rails. Square corners; radius only for the round chop and pills. ### Hierarchy From stencil title cards (Saira Stencil One) to uppercase Archivo-Narrow field labels to typewriter document body to mono IDs and OCR ticks. Vermilion never fills large areas; it marks exactly one cleared line, the declassification chop, and a single status. White space is the margin of an official page. ### Density Alternate severe emptiness with one compressed typed cluster so the page reads like a filed document, never uniformly busy. Dense zones occupy less area but carry more microtext. ### Signature The redaction bar — solid ink rectangles striking out typed lines, with exactly one cleared line wearing a vermilion highlight band; plus the circular declassification chop, the marginalia rail (case numbers, hand ticks, paperclip, officer notes), registration crop marks, and the carbon under-sheet offset. ## Layout ### Grid Document ledger: a wide marginalia rail (~236px) beside a single reading column, max width ~1180px. Record cards use asymmetric ratios (1.6/1, 1.4/1/1) to prevent equal-card rhythm. minmax(0,1fr) columns and min-width:0 children so grids never blow out; carbon under-sheets clamped inside the viewport on mobile. ### Whitespace 64-96px voids around title cards; 4-16px gaps inside diagnostic clusters; high spacing contrast — the page breathes like an official margin. ### Density High contrast between open editorial fields and one compact typed cluster per section. ### Responsive From ~390px mobile to 2560px+ ultra-wide. Mobile stacks to a single column, the marginalia rail moves above content, nav links hide, banners wrap, and nothing overflows horizontally (overflow-x hidden as a guard). Ultra-wide caps and centres contained content; only the hero spans 100vw. ### Breakpoints - **Mobile**: <=900px single column - **Tablet**: 900-1200px - **Desktop**: >=1200px document ledger spread - **Ultrawide**: >=1700px capped at 1380px ## Guidance ### Do - Default content to sealed under solid ink redaction bars; clear exactly one line and mark it with the vermilion highlight band. - Use the circular declassification chop, registration crop marks, and the marginalia rail as the ornament system. - Set the document body in the typewriter face and stamps/headlines in the stencil; keep IDs and OCR rails in mono. - Build separation from hairline-dotted ink rules and the carbon under-sheet offset, not borders or drop shadows. - Write copy as terse case-file evidence: case numbers, clearance sections (§3/§7), cleared/sealed/pending status. ### Don't - Do not use neon cyberpunk, rainbow glows, or a dark surveillance-screen ground. - Do not let vermilion fill large areas or appear more than once per record as decoration. - Do not box the nav into a pill/floating card, nest cards, or add grey borders and drop-shadow stacks. - Do not use arbitrary rounded corners, glassmorphism, emoji, or symbol glyphs. - Do not build three identical cards in a row or generic SaaS dashboard widgets. ### Accessibility Maintain strong ink-on-manila contrast for body copy (>= 17px); pair vermilion clearance state with text/border changes, never colour alone; keep touch targets >= 44px; style every form control explicitly with no browser defaults; offer reduced motion for reveal and declassify effects. ## Imagery Direction ### Pairs With stakeout-bureau ### Summary High-contrast black-and-white surveillance-manga ink treatment applied to confidential paperwork: redacted manila case files, declassification chops, carbon copies, crop marks. Tone built from halftone dot fields and hard ink cuts; one surgical vermilion strip marks the cleared passage. ### Subjects - redacted case file flat-lay - declassification stamp impression - carbon-copy document stack - manila evidence folder - typed transcript sheet ### Usage One full-bleed landing hero — a top-down flat-lay of a heavily-redacted manila case file with a circular declassification chop and a single vermilion-highlighted cleared line. Edge-to-edge, no text.
---
version: "alpha"
name: "Carbon"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#E7DDC8"
bg_2: "#DED2B8"
surface: "#F1E9D7"
surface_2: "#EADFC6"
text: "#16130D"
ink: "#16130D"
muted: "#6E6450"
faint: "#9A8E73"
accent: "#D8412B"
accent_deep: "#A82A1A"
on_accent: "#FBF6EC"
redact: "#16130D"
carbon: "#2A2419"
success: "#3F6B3A"
warning: "#A86A1E"
error: "#C0392B"
info: "#3C5A6B"
typography:
headline-lg:
fontFamily: "Saira Stencil One"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.01em"
headline-md:
fontFamily: "Saira Stencil One"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.01em"
body-md:
fontFamily: "Special Elite"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "-0.01em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "0px"
pill: "9999px"
chop: "9999px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-bg_2:
backgroundColor: "{colors.bg_2}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-ink:
backgroundColor: "{colors.ink}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-faint:
backgroundColor: "{colors.faint}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_deep:
backgroundColor: "{colors.accent_deep}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-redact:
backgroundColor: "{colors.redact}"
color-reference-carbon:
backgroundColor: "{colors.carbon}"
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: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Carbon
## Overview
A declassified case-file design language. The screen is a confidential record processed for release: typed on a carbon copy, most lines blacked out under solid redaction bars, exactly one passage cleared and marked by a single surgical stamp-vermilion highlight. The ornament is the paperwork itself — classification banners, a circular declassification chop, marginalia in the officer's hand, registration crop marks, and the torn carbon sheet beneath. It reinterprets the confidential-dossier brief as a paper file held in the hand, not a dark surveillance screen.
### Values
- Hide first: content defaults to sealed; the page is governed by what is withheld, not what is watched.
- One clearance: exactly one passage carries the vermilion highlight; the accent is a clearance, never decoration.
- Type the record: every line is typewritten on a carbon copy; stencil stamps mark the chrome; the voice is the instrument.
- Document rhythm: a tall ledger read top-to-bottom on a wide marginalia rail — severe emptiness alternating with one dense typed cluster.
- Paper material over screen glow: aged manila ground, ink-black bars, carbon under-sheet depth instead of drop shadows.
### Anti-Values
- Neon cyberpunk gradients, rainbow glows, gamer HUD decoration.
- Equal-card SaaS dashboards, friendly rounded app chrome, anonymous analytics screens.
- Glassmorphism as the surface language; cute manga stickers, kawaii expressions, comic-book colour fills.
- Drop-shadow stacks, arbitrary rounded corners, dark-surveillance-screen pastiche.
### Visual Character
- Aged manila / bone document ground (#E7DDC8) with ink-black type and solid black redaction bars; never white, never a dark screen.
- The redaction bar is the dominant rhythm: solid ink rectangles strike out typed lines; one cleared line wears a vermilion highlight band.
- A circular declassification chop (vermilion ring) struck at a slight angle marks released records.
- A wide left marginalia rail carries case numbers, hand-checked ticks, a paperclip motif, and officer notes set in typewriter face.
- Square corners, registration crop marks at document-panel corners, and a carbon under-sheet offset giving filed-stack depth without shadows.
- Stencil display (Saira Stencil One) for stamps and headlines; typewriter (Special Elite) for the document body; mono (Spline Sans Mono) for IDs and OCR rails.
## 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 | `#E7DDC8` |
| bg_2 | `#DED2B8` |
| surface | `#F1E9D7` |
| surface_2 | `#EADFC6` |
| text | `#16130D` |
| ink | `#16130D` |
| muted | `#6E6450` |
| faint | `#9A8E73` |
| accent | `#D8412B` |
| accent_deep | `#A82A1A` |
| on_accent | `#FBF6EC` |
| redact | `#16130D` |
| carbon | `#2A2419` |
| success | `#3F6B3A` |
| warning | `#A86A1E` |
| error | `#C0392B` |
| info | `#3C5A6B` |
## Typography
- **Headline-Lg**: Saira Stencil One, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Saira Stencil One, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Special Elite, 17px, weight 400, line-height 1.6.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
### Grid
Document ledger: a wide marginalia rail (~236px) beside a single reading column, max width ~1180px. Record cards use asymmetric ratios (1.6/1, 1.4/1/1) to prevent equal-card rhythm. minmax(0,1fr) columns and min-width:0 children so grids never blow out; carbon under-sheets clamped inside the viewport on mobile.
### Whitespace
64-96px voids around title cards; 4-16px gaps inside diagnostic clusters; high spacing contrast — the page breathes like an official margin.
### Density
High contrast between open editorial fields and one compact typed cluster per section.
### Responsive
From ~390px mobile to 2560px+ ultra-wide. Mobile stacks to a single column, the marginalia rail moves above content, nav links hide, banners wrap, and nothing overflows horizontally (overflow-x hidden as a guard). Ultra-wide caps and centres contained content; only the hero spans 100vw.
### Breakpoints
- **Mobile**: <=900px single column
- **Tablet**: 900-1200px
- **Desktop**: >=1200px document ledger spread
- **Ultrawide**: >=1700px capped at 1380px
## Elevation & Depth
### Shadows
- **None**: none
- **Carbon Offset**: filed under-sheet at +7px x/y, no drop shadow
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Pill**: `9999px`
- **Chop**: `9999px`
- **Full**: `9999px`
### Surfaces
- **Bg Pattern**: Faint halftone dot field over aged manila paper; OCR-style mono tick strings run along document edges.
- **Card Style**: Square-corner manila sheets with a carbon under-sheet offset (no drop shadow), registration crop marks at corners, solid ink redaction bars as the dominant material, and one cleared line carrying a vermilion highlight band.
- **Treatment**: Matte ink black type and bars on warm manila ground; the only colour is the single stamp-vermilion clearance / declassification chop.
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: dotted ink hairline rules; 2px solid ink baselines under headers; no grey borders, no card borders
- **Character**: Separation is hairline-dotted ink rules and the carbon under-sheet offset; never a boxed border or accent edge.
## Components
### Composition
Compose screens as a confidential case file processed for release: a tall single reading column on a wide left marginalia rail, read top-to-bottom like a filed report. One dominant redacted record, supporting record cards in asymmetric ratios (never equal triples), and edge OCR rails. Square corners; radius only for the round chop and pills.
### Hierarchy
From stencil title cards (Saira Stencil One) to uppercase Archivo-Narrow field labels to typewriter document body to mono IDs and OCR ticks. Vermilion never fills large areas; it marks exactly one cleared line, the declassification chop, and a single status. White space is the margin of an official page.
### Density
Alternate severe emptiness with one compressed typed cluster so the page reads like a filed document, never uniformly busy. Dense zones occupy less area but carry more microtext.
### Signature
The redaction bar — solid ink rectangles striking out typed lines, with exactly one cleared line wearing a vermilion highlight band; plus the circular declassification chop, the marginalia rail (case numbers, hand ticks, paperclip, officer notes), registration crop marks, and the carbon under-sheet offset.
## 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-019ef891-9252-7d23-b7d4-01d21cba159b/DESIGN.with-shadcn.md`.
The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.
Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.
## Do's and Don'ts
- Do Default content to sealed under solid ink redaction bars; clear exactly one line and mark it with the vermilion highlight band.
- Do Use the circular declassification chop, registration crop marks, and the marginalia rail as the ornament system.
- Do Set the document body in the typewriter face and stamps/headlines in the stencil; keep IDs and OCR rails in mono.
- Do Build separation from hairline-dotted ink rules and the carbon under-sheet offset, not borders or drop shadows.
- Do Write copy as terse case-file evidence: case numbers, clearance sections (§3/§7), cleared/sealed/pending status.
- Don't Do not use neon cyberpunk, rainbow glows, or a dark surveillance-screen ground.
- Don't Do not let vermilion fill large areas or appear more than once per record as decoration.
- Don't Do not box the nav into a pill/floating card, nest cards, or add grey borders and drop-shadow stacks.
- Don't Do not use arbitrary rounded corners, glassmorphism, emoji, or symbol glyphs.
- Don't Do not build three identical cards in a row or generic SaaS dashboard widgets.
### Accessibility
Maintain strong ink-on-manila contrast for body copy (>= 17px); pair vermilion clearance state with text/border changes, never colour alone; keep touch targets >= 44px; style every form control explicitly with no browser defaults; offer reduced motion for reveal and declassify effects.
## Imagery Direction
### Pairs With
stakeout-bureau
### Summary
High-contrast black-and-white surveillance-manga ink treatment applied to confidential paperwork: redacted manila case files, declassification chops, carbon copies, crop marks. Tone built from halftone dot fields and hard ink cuts; one surgical vermilion strip marks the cleared passage.
### Subjects
- redacted case file flat-lay
- declassification stamp impression
- carbon-copy document stack
- manila evidence folder
- typed transcript sheet
### Usage
One full-bleed landing hero — a top-down flat-lay of a heavily-redacted manila case file with a circular declassification chop and a single vermilion-highlighted cleared line. Edge-to-edge, no text.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "carbon",
"type": "registry:theme",
"title": "Carbon shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#E7DDC8",
"foreground": "#16130D",
"card": "#F1E9D7",
"card-foreground": "#16130D",
"popover": "#F1E9D7",
"popover-foreground": "#16130D",
"primary": "#16130D",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#6E6450",
"muted-foreground": "#16130D",
"accent": "#D8412B",
"accent-foreground": "#ffffff",
"destructive": "#C0392B",
"border": "#16130D1F",
"input": "#16130D1F",
"ring": "#D8412B",
"chart-1": "#16130D",
"chart-2": "#f4f4f5",
"chart-3": "#D8412B",
"chart-4": "#3F6B3A",
"chart-5": "#A86A1E",
"sidebar": "#F1E9D7",
"sidebar-foreground": "#16130D",
"sidebar-primary": "#16130D",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#3C5A6B",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#16130D1F",
"sidebar-ring": "#D8412B",
"radius": "0px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#16130D",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#D8412B",
"accent-foreground": "#ffffff",
"destructive": "#C0392B",
"border": "#303642",
"input": "#303642",
"ring": "#D8412B",
"chart-1": "#16130D",
"chart-2": "#f4f4f5",
"chart-3": "#D8412B",
"chart-4": "#3F6B3A",
"chart-5": "#A86A1E",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#16130D",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#D8412B",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#D8412B",
"radius": "0px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef891-9252-7d23-b7d4-01d21cba159b",
"slug": "carbon",
"componentManifest": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"nativeTokenNames": {
"colors": [
"accent",
"accent_deep",
"bg",
"bg_2",
"border",
"carbon",
"error",
"faint",
"info",
"ink",
"muted",
"on_accent",
"redact",
"rule",
"success",
"surface",
"surface_2",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"label_font",
"letter_spacing",
"line_height",
"mono_font"
],
"radii": [
"chop",
"full",
"md",
"none",
"pill",
"sm"
],
"shadows": [
"carbon_offset",
"none"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
Keep Carbonand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #E7DDC8;
--foreground: #16130D;
--card: #F1E9D7;
--card-foreground: #16130D;
--popover: #F1E9D7;
--popover-foreground: #16130D;
--primary: #16130D;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #6E6450;
--muted-foreground: #16130D;
--accent: #D8412B;
--accent-foreground: #ffffff;
--destructive: #C0392B;
--border: #16130D1F;
--input: #16130D1F;
--ring: #D8412B;
--chart-1: #16130D;
--chart-2: #f4f4f5;
--chart-3: #D8412B;
--chart-4: #3F6B3A;
--chart-5: #A86A1E;
--sidebar: #F1E9D7;
--sidebar-foreground: #16130D;
--sidebar-primary: #16130D;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #3C5A6B;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #16130D1F;
--sidebar-ring: #D8412B;
--radius: 0px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #16130D;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #D8412B;
--accent-foreground: #ffffff;
--destructive: #C0392B;
--border: #303642;
--input: #303642;
--ring: #D8412B;
--chart-1: #16130D;
--chart-2: #f4f4f5;
--chart-3: #D8412B;
--chart-4: #3F6B3A;
--chart-5: #A86A1E;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #16130D;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #D8412B;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #D8412B;
--radius: 0px;
}
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
export function CarbonShadcnKit() {
return (
<section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
<div className="flex items-start justify-between gap-4">
<div>
<Badge variant="outline">shadcn/ui</Badge>
<h2 className="mt-3 text-2xl font-semibold tracking-tight">Carbon</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "carbon",
"type": "registry:theme",
"title": "Carbon",
"description": "Declassified case-file design language — aged manila ground, solid ink redaction bars, one surgical stamp vermilion. Square corners, typewriter voice, no borders, no shadows.",
"cssVars": {
"theme": {
"font-sans": "Archivo Narrow, Arial Narrow, sans-serif",
"font-serif": "Saira Stencil One, Impact, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "0px"
},
"light": {
"background": "#E7DDC8",
"foreground": "#16130D",
"card": "#F1E9D7",
"card-foreground": "#16130D",
"popover": "#F1E9D7",
"popover-foreground": "#16130D",
"primary": "#D8412B",
"primary-foreground": "#FBF6EC",
"secondary": "#16130D",
"secondary-foreground": "#E7DDC8",
"muted": "#EADFC6",
"muted-foreground": "#6E6450",
"accent": "#D8412B",
"accent-foreground": "#FBF6EC",
"destructive": "#C0392B",
"destructive-foreground": "#FBF6EC",
"border": "#16130D33",
"input": "#16130D",
"ring": "#D8412B",
"radius": "0px",
"chart-1": "#D8412B",
"chart-2": "#16130D",
"chart-3": "#6E6450",
"chart-4": "#A82A1A",
"chart-5": "#9A8E73"
},
"dark": {
"background": "#16130D",
"foreground": "#E7DDC8",
"card": "#1E1A12",
"card-foreground": "#E7DDC8",
"popover": "#1E1A12",
"popover-foreground": "#E7DDC8",
"primary": "#D8412B",
"primary-foreground": "#FBF6EC",
"secondary": "#E7DDC8",
"secondary-foreground": "#16130D",
"muted": "#241F16",
"muted-foreground": "#9A8E73",
"accent": "#D8412B",
"accent-foreground": "#FBF6EC",
"destructive": "#C0392B",
"destructive-foreground": "#FBF6EC",
"border": "#E7DDC826",
"input": "#E7DDC8",
"ring": "#D8412B",
"radius": "0px"
}
}
}
# Carbon shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef891-9252-7d23-b7d4-01d21cba159b`
Slug: `carbon`
## Intent
A declassified case-file design language. The screen is a confidential record processed for release: typed on a carbon copy, most lines blacked out under solid redaction bars, exactly one passage cleared and marked by a single surgical stamp-vermilion highlight. The ornament is the paperwork itself — classification banners, a circular declassification chop, marginalia in the officer's hand, registration crop marks, and the torn carbon sheet beneath. It reinterprets the confidential-dossier brief as a paper file held in the hand, not a dark surveillance screen.
## Required primitives
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
## Token cues
Colors:
{
"bg": "#E7DDC8",
"bg_2": "#DED2B8",
"surface": "#F1E9D7",
"surface_2": "#EADFC6",
"text": "#16130D",
"ink": "#16130D",
"muted": "#6E6450",
"faint": "#9A8E73",
"border": "#16130D1F",
"rule": "#16130D33",
"accent": "#D8412B",
"accent_deep": "#A82A1A",
"on_accent": "#FBF6EC",
"redact": "#16130D",
"carbon": "#2A2419",
"success": "#3F6B3A",
"warning": "#A86A1E",
"error": "#C0392B",
"info": "#3C5A6B"
}
Typography:
{
"base_size": "17px",
"body_font": "Special Elite",
"heading_font": "Saira Stencil One",
"mono_font": "Spline Sans Mono",
"label_font": "Archivo Narrow",
"heading_weight": "400",
"heading_transform": "none",
"letter_spacing": "-0.01em",
"line_height": 1.6,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Special+Elite&family=Spline+Sans+Mono:wght@400;500;600&family=Archivo+Narrow:wght@400;500;600;700&display=swap"
}
## Visual character to preserve
- Aged manila / bone document ground (#E7DDC8) with ink-black type and solid black redaction bars; never white, never a dark screen.
- The redaction bar is the dominant rhythm: solid ink rectangles strike out typed lines; one cleared line wears a vermilion highlight band.
- A circular declassification chop (vermilion ring) struck at a slight angle marks released records.
- A wide left marginalia rail carries case numbers, hand-checked ticks, a paperclip motif, and officer notes set in typewriter face.
- Square corners, registration crop marks at document-panel corners, and a carbon under-sheet offset giving filed-stack depth without shadows.
- Stencil display (Saira Stencil One) for stamps and headlines; typewriter (Special Elite) for the document body; mono (Spline Sans Mono) for IDs and OCR rails.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": true,
"motion": "lift",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/carbon/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Default content to sealed under solid ink redaction bars; clear exactly one line and mark it with the vermilion highlight band.; Use the circular declassification chop, registration crop marks, and the marginalia rail as the ornament system.; Set the document body in the typewriter face and stamps/headlines in the stencil; keep IDs and OCR rails in mono.; Build separation from hairline-dotted ink rules and the carbon under-sheet offset, not borders or drop shadows.; Write copy as terse case-file evidence: case numbers, clearance sections (§3/§7), cleared/sealed/pending status.
- Do not: Do not use neon cyberpunk, rainbow glows, or a dark surveillance-screen ground.; Do not let vermilion fill large areas or appear more than once per record as decoration.; Do not box the nav into a pill/floating card, nest cards, or add grey borders and drop-shadow stacks.; Do not use arbitrary rounded corners, glassmorphism, emoji, or symbol glyphs.; Do not build three identical cards in a row or generic SaaS dashboard widgets.
## Copy-paste component example
This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.
```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
export function CarbonShadcnKit() {
return (
<section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
<div className="flex items-start justify-between gap-4">
<div>
<Badge variant="outline">shadcn/ui</Badge>
<h2 className="mt-3 text-2xl font-semibold tracking-tight">Carbon</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "Document ledger: a wide marginalia rail (~236px) beside a single reading column, max width ~1180px. Record cards use asymmetric ratios (1.6/1, 1.4/1/1) to prevent equal-card rhythm. minmax(0,1fr) columns and min-width:0 children so grids never blow out; carbon under-sheets clamped inside the viewport on mobile.",
"whitespace": "64-96px voids around title cards; 4-16px gaps inside diagnostic clusters; high spacing contrast — the page breathes like an official margin.",
"density": "High contrast between open editorial fields and one compact typed cluster per section.",
"responsive": "From ~390px mobile to 2560px+ ultra-wide. Mobile stacks to a single column, the marginalia rail moves above content, nav links hide, banners wrap, and nothing overflows horizontally (overflow-x hidden as a guard). Ultra-wide caps and centres contained content; only the hero spans 100vw.",
"breakpoints": {
"mobile": "<=900px single column",
"tablet": "900-1200px",
"desktop": ">=1200px document ledger spread",
"ultrawide": ">=1700px capped at 1380px"
}
}
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"generator": "katagami-ui-compatibility-projection",
"generatedBy": "katagami-ui-projection",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": {
"id": "en-019ef891-9252-7d23-b7d4-01d21cba159b",
"name": "Carbon",
"slug": "carbon"
},
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"identityNotes": [
"Aged manila / bone document ground (#E7DDC8) with ink-black type and solid black redaction bars; never white, never a dark screen.",
"The redaction bar is the dominant rhythm: solid ink rectangles strike out typed lines; one cleared line wears a vermilion highlight band.",
"A circular declassification chop (vermilion ring) struck at a slight angle marks released records.",
"A wide left marginalia rail carries case numbers, hand-checked ticks, a paperclip motif, and officer notes set in typewriter face.",
"Square corners, registration crop marks at document-panel corners, and a carbon under-sheet offset giving filed-stack depth without shadows.",
"Stencil display (Saira Stencil One) for stamps and headlines; typewriter (Special Elite) for the document body; mono (Spline Sans Mono) for IDs and OCR rails."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": true,
"motion": "lift",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "Carbon launch room",
"description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
"primaryAction": "Apply theme",
"secondaryAction": "Review states",
"stats": [
{
"label": "components",
"value": "16",
"tone": "accent"
},
{
"label": "states",
"value": "ready"
},
{
"label": "density",
"value": "balanced",
"tone": "warning"
}
],
"rows": [
{
"label": "Primary flow",
"value": "mapped",
"status": "active"
},
{
"label": "Token coverage",
"value": "semantic",
"status": "synced"
},
{
"label": "Responsive proof",
"value": "queued",
"status": "review"
}
],
"statuses": [
"Active",
"Synced",
"Draft"
]
}
},
{
"id": "detail-editor",
"title": "Detail editor",
"viewport": "tablet",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"checkbox",
"switch",
"slider",
"dialog",
"sheet"
],
"composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
"mustShow": [
"focus ring",
"error or destructive state",
"dialog or sheet treatment",
"written guidance content"
],
"avoid": [
"unstyled browser controls",
"floating cards inside cards",
"missing labels"
],
"scene": {
"eyebrow": "editing flow",
"headline": "Language recipe editor",
"description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
"primaryAction": "Save recipe",
"secondaryAction": "Open sheet",
"fields": [
{
"label": "Component family",
"value": "Narrative cards"
},
{
"label": "State treatment",
"value": "Visible focus + validation"
},
{
"label": "Motion",
"value": "Small lift, no opacity-only fade"
}
],
"statuses": [
"Focus",
"Invalid",
"Confirmed"
]
}
},
{
"id": "data-operations",
"title": "Data operations",
"viewport": "mobile",
"primitives": [
"button",
"tabs",
"badge",
"dropdown-menu",
"table",
"tooltip",
"separator"
],
"composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
"mustShow": [
"responsive reflow",
"dense row styling",
"menu affordance",
"status badge system"
],
"avoid": [
"desktop-only tables",
"text overflow",
"default shadcn spacing without Katagami character"
],
"scene": {
"eyebrow": "operations",
"headline": "Compact review queue",
"description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
"primaryAction": "Resolve",
"secondaryAction": "Filter",
"rows": [
{
"label": "Button hierarchy",
"value": "approved",
"status": "ok"
},
{
"label": "Table rhythm",
"value": "needs pass",
"status": "watch"
},
{
"label": "Empty state",
"value": "designed",
"status": "done"
}
],
"statuses": [
"Queued",
"Blocked",
"Done"
]
}
}
],
"componentRecipes": [
{
"primitive": "button",
"intent": "Prove action hierarchy, focus, disabled, and destructive states."
},
{
"primitive": "card",
"intent": "Carry the language surface, border, elevation, and density rules."
},
{
"primitive": "input",
"intent": "Show labels, focus rings, validation, and spacing rhythm."
},
{
"primitive": "textarea",
"intent": "Show longer guidance, validation copy, and writing density."
},
{
"primitive": "select",
"intent": "Show filtering, selection contrast, and menu trigger styling."
},
{
"primitive": "dialog",
"intent": "Show centered decision states and overlay treatment."
},
{
"primitive": "sheet",
"intent": "Show contextual side panels and responsive editing."
},
{
"primitive": "tabs",
"intent": "Show navigational structure and active/inactive contrast."
},
{
"primitive": "badge",
"intent": "Show compact status vocabulary and semantic colors."
},
{
"primitive": "separator",
"intent": "Show section rhythm without generic gray dividers."
},
{
"primitive": "checkbox",
"intent": "Show binary selection with visible focus and checked states."
},
{
"primitive": "switch",
"intent": "Show settings toggles and on/off contrast."
},
{
"primitive": "slider",
"intent": "Show numeric adjustment with track/thumb styling."
},
{
"primitive": "tooltip",
"intent": "Show concise explanation styling above compact controls."
},
{
"primitive": "dropdown-menu",
"intent": "Show action menus, destructive items, and grouped choices."
},
{
"primitive": "table",
"intent": "Show dense operational data, separators, row states, and responsive behavior."
}
],
"qualityRules": {
"do": [
"Default content to sealed under solid ink redaction bars; clear exactly one line and mark it with the vermilion highlight band.",
"Use the circular declassification chop, registration crop marks, and the marginalia rail as the ornament system.",
"Set the document body in the typewriter face and stamps/headlines in the stencil; keep IDs and OCR rails in mono.",
"Build separation from hairline-dotted ink rules and the carbon under-sheet offset, not borders or drop shadows.",
"Write copy as terse case-file evidence: case numbers, clearance sections (§3/§7), cleared/sealed/pending status."
],
"dont": [
"Do not use neon cyberpunk, rainbow glows, or a dark surveillance-screen ground.",
"Do not let vermilion fill large areas or appear more than once per record as decoration.",
"Do not box the nav into a pill/floating card, nest cards, or add grey borders and drop-shadow stacks.",
"Do not use arbitrary rounded corners, glassmorphism, emoji, or symbol glyphs.",
"Do not build three identical cards in a row or generic SaaS dashboard widgets."
]
}
}