katagami ✦ Akte

# Akte ## Philosophy Akte is the night-shift archive terminal: a case file is summoned out of the dark, audited against the accession ledger, and stamped before it is returned to the drawer. It reinterprets the state-archive idea — records that judge — but moves it off beige paper onto a warm carbon ground, where the drawer and the command line are one surface. The redaction bar is the primary graphic shape; phosphor green is the only light, and only when the machine is speaking. ### Values - the redaction bar as the primary graphic shape, not decoration - paper and terminal as one continuous dark surface - phosphor reserved for the system's voice — prompt, active field, verdict - withheld blankness is a disposition, not empty space - machine judgment made legible through accession numbers and stamps - high-contrast bone-on-carbon utility that stays austere and premium ### Anti-Values - glossy holographic sci-fi gradients - rounded glass cards, blur, glossy chrome - neon rainbow terminal palettes beyond one phosphor and one rare stamp - decorative grunge or vintage scrapbook distress - generic admin chrome without document logic - defaulting to a white minimal ground ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#12120E` | | surface | `#1C1B15` | | surface-2 | `#26241A` | | text | `#EDE8D6` | | muted | `#8E866E` | | border | `rgba(237,232,214,0.12)` | | accent | `#46F08A` | | on-accent | `#0B0B08` | | redaction | `#000000` | | stamp | `#E8541E` | | info | `#5FB6C4` | | warning | `#E8A33B` | | error | `#E8541E` | | success | `#46F08A` | ### Typography - **Base Size**: 17px - **Body Font**: IBM Plex Sans - **Heading Font**: Archivo Narrow - **Mono Font**: IBM Plex Mono - **Heading Weight**: 700 - **Heading Transform**: uppercase - **Letter Spacing**: -0.02em - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 1px 0 rgba(0,0,0,.6) - **Md**: 0 16px 40px rgba(0,0,0,.55) - **Lg**: 0 28px 70px rgba(0,0,0,.6) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Ground**: warm carbon #12120E with a faint phosphor scanline and a single soft phosphor bloom - **Card Style**: square dossier cards: classified header strip on #0B0B08, ruled rows, machine verdict, no border - **Treatment**: hard printed shadows, hairline ledger rules, opaque black redaction bars, tractor-feed sprocket rails ### Borders - **Default Width**: 1px - **Style**: hairline ledger rule only (rgba(237,232,214,.12)); never a card edge accent - **Character**: rules separate rows and bands; the opaque censor bar is graphic, not a border ### Motion - **Duration**: 160ms - **Easing**: steps(2, end) - **Philosophy**: procedural, not expressive: cursor blink, prompt tick, row focus, stamp arrival, scroll reveal. The landing settles by default and reveals on scroll. Reduced motion stills the cursor and scanline. ## Rules ### Composition Compose every screen as an official record: a classified header band, an accession identifier, a central evidence form or ledger, and a machine verdict. Lock content to receipt columns and ledger baselines; break the grid only with an opaque black redaction bar or a deliberate withheld void. ### Hierarchy Hierarchy runs section header to case identifier to verdict to evidence rows. Carry rank with weight, surface, and the hairline rule — not coloured edges. A black bar outranks a phosphor prompt; a vermilion stamp is rarer than both and means audit exception only. ### Density High density inside ledgers and forms, surrounded by wide administrative margins and one deliberate withheld void per dense view. Every module reads as a document, never a floating widget. ### Signature The redaction bar is the primary graphic shape: it crops labels, blacks out fields, and opens a withheld void. Supported by the phosphor command prompt, tractor-feed sprocket rails, the accession ledger, and rare rotated rubber-stamp dispositions. ## Layout ### Grid Desktop uses a contained max-width (1180px, 1340px ultra-wide) with a sprocket-rail margin; dashboard adds a 228px rail. Tablet collapses multi-column dossier/ledger grids to fewer columns. ### Whitespace Administrative: wide document margins, ruled gaps, and one withheld void that implies a missing page. Measured form intervals, not soft breathing room. ### Density Dense ledgers balanced by high margins and a deliberate void — a file-room terminal, not a maximalist dashboard. ### Responsive Single-column stack on mobile; sprocket rails hidden; non-essential table columns dropped; never overflow horizontally. minmax(0,1fr) columns with min-width:0 children. ### Breakpoints - **Mobile**: 0-600px - **Tablet**: 601-1000px - **Desktop**: 1001px+ - **Ultrawide**: 1700px+ ## Guidance ### Do - Start from carbon and bone; add phosphor only when the system is actively speaking. - Make every panel read as a document: classified header, accession number, ruled rows, verdict. - Let the opaque black bar obscure things that look important — withholding is the disposition. - Style every form control as a printable square field; no browser defaults. - Keep stamps small, rotated, and procedural: APPROVED, WITHHELD, TRACE. - Render sprocket holes, scanlines, and rules with CSS, not bitmap textures. - Hold global -0.02em tracking and monospaced tabular alignment across data. ### Don't - Do not add a second bright colour or a neon palette beyond one phosphor and one rare vermilion. - Do not use rounded glass cards, blur, or glossy chrome. - Do not make the dashboard generic admin chrome; every module has file, form, or terminal logic. - Do not over-distress the surface into vintage scrapbook; legibility first. - Do not fill the withheld void with widgets — blankness is part of the system. - Do not put symbol glyphs in copy; use SVG primitives and CSS marks. ### Accessibility Bone text on warm carbon holds strong contrast. Phosphor green is used for large prompt text, active states, and verdicts, always with bone or near-black support, never as small text on carbon. Vermilion audit states carry text plus a stamp frame. Focus uses a 2px phosphor inset ring. Reduced motion disables cursor blink and scanline drift. ## Imagery Direction ### Pairs With overprint ### Summary Risograph overprint: dense black-ink linework with crisp halftone-dot shading and fine engraved hatching, one luminous phosphor-green (#00ff66) layer slightly misregistered over the black on a clean off-white ground. The printed-archive look — the same machine that prints the fanfold record prints the image. ### Subjects - towering archive cabinet walls and ledger drawers - a single drawer pulled open overflowing with dossiers - file-room corridors and stacked record boxes - terminals and line-printers - rubber stamps and seals ### Usage One full-bleed hero rendered in the overprint technique sits behind a dark ink mast on the landing; the same image fills the feature split. Imagery is archival and surveillant, never illustrated character art.

--- version: "alpha" name: "Akte" description: "Agent-curated design language exported from Katagami as DESIGN.md." colors: bg: "#12120E" surface: "#1C1B15" surface-2: "#26241A" text: "#EDE8D6" muted: "#8E866E" accent: "#46F08A" on-accent: "#0B0B08" redaction: "#000000" stamp: "#E8541E" info: "#5FB6C4" warning: "#E8A33B" error: "#E8541E" success: "#46F08A" typography: headline-lg: fontFamily: "Archivo Narrow" fontSize: "2.075rem" fontWeight: 700 lineHeight: 1.1 letterSpacing: "-0.02em" headline-md: fontFamily: "Archivo Narrow" fontSize: "1.66rem" fontWeight: 600 lineHeight: 1.15 letterSpacing: "-0.02em" body-md: fontFamily: "IBM Plex Sans" fontSize: "17px" fontWeight: 400 lineHeight: 1.5 letterSpacing: "-0.02em" label-md: fontFamily: "IBM Plex Mono" fontSize: "0.75rem" fontWeight: 600 lineHeight: 1 letterSpacing: "0.08em" rounded: none: "0px" md: "16px" lg: "24px" full: "9999px" spacing: base: "8px" xs: "4px" sm: "8px" md: "12px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "48px" 4xl: "64px" step-8: "96px" components: color-reference-bg: backgroundColor: "{colors.bg}" color-reference-surface: backgroundColor: "{colors.surface}" color-reference-surface-2: backgroundColor: "{colors.surface-2}" color-reference-text: backgroundColor: "{colors.text}" color-reference-muted: backgroundColor: "{colors.muted}" color-reference-accent: backgroundColor: "{colors.accent}" color-reference-on-accent: backgroundColor: "{colors.on-accent}" color-reference-redaction: backgroundColor: "{colors.redaction}" color-reference-stamp: backgroundColor: "{colors.stamp}" color-reference-info: backgroundColor: "{colors.info}" color-reference-warning: backgroundColor: "{colors.warning}" color-reference-error: backgroundColor: "{colors.error}" color-reference-success: backgroundColor: "{colors.success}" 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" --- # Akte ## Overview Akte is the night-shift archive terminal: a case file is summoned out of the dark, audited against the accession ledger, and stamped before it is returned to the drawer. It reinterprets the state-archive idea — records that judge — but moves it off beige paper onto a warm carbon ground, where the drawer and the command line are one surface. The redaction bar is the primary graphic shape; phosphor green is the only light, and only when the machine is speaking. ### Values - the redaction bar as the primary graphic shape, not decoration - paper and terminal as one continuous dark surface - phosphor reserved for the system's voice — prompt, active field, verdict - withheld blankness is a disposition, not empty space - machine judgment made legible through accession numbers and stamps - high-contrast bone-on-carbon utility that stays austere and premium ### Anti-Values - glossy holographic sci-fi gradients - rounded glass cards, blur, glossy chrome - neon rainbow terminal palettes beyond one phosphor and one rare stamp - decorative grunge or vintage scrapbook distress - generic admin chrome without document logic - defaulting to a white minimal ground ## 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 | `#12120E` | | surface | `#1C1B15` | | surface-2 | `#26241A` | | text | `#EDE8D6` | | muted | `#8E866E` | | accent | `#46F08A` | | on-accent | `#0B0B08` | | redaction | `#000000` | | stamp | `#E8541E` | | info | `#5FB6C4` | | warning | `#E8A33B` | | error | `#E8541E` | | success | `#46F08A` | ## Typography - **Headline-Lg**: Archivo Narrow, 2.075rem, weight 700, line-height 1.1. - **Headline-Md**: Archivo Narrow, 1.66rem, weight 600, line-height 1.15. - **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.5. - **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1. ## Layout ### Spacing Tokens - **Base**: `8px` - **Xs**: `4px` - **Sm**: `8px` - **Md**: `12px` - **Lg**: `16px` - **Xl**: `24px` - **2xl**: `32px` - **3xl**: `48px` - **4xl**: `64px` - **Step-8**: `96px` ### Grid Desktop uses a contained max-width (1180px, 1340px ultra-wide) with a sprocket-rail margin; dashboard adds a 228px rail. Tablet collapses multi-column dossier/ledger grids to fewer columns. ### Whitespace Administrative: wide document margins, ruled gaps, and one withheld void that implies a missing page. Measured form intervals, not soft breathing room. ### Density Dense ledgers balanced by high margins and a deliberate void — a file-room terminal, not a maximalist dashboard. ### Responsive Single-column stack on mobile; sprocket rails hidden; non-essential table columns dropped; never overflow horizontally. minmax(0,1fr) columns with min-width:0 children. ### Breakpoints - **Mobile**: 0-600px - **Tablet**: 601-1000px - **Desktop**: 1001px+ - **Ultrawide**: 1700px+ ## Elevation & Depth ### Shadows - **Sm**: 0 1px 0 rgba(0,0,0,.6) - **Md**: 0 16px 40px rgba(0,0,0,.55) - **Lg**: 0 28px 70px rgba(0,0,0,.6) ## Shapes ### Rounded - **None**: `0px` - **Md**: `16px` - **Lg**: `24px` - **Full**: `9999px` ### Surfaces - **Ground**: warm carbon #12120E with a faint phosphor scanline and a single soft phosphor bloom - **Card Style**: square dossier cards: classified header strip on #0B0B08, ruled rows, machine verdict, no border - **Treatment**: hard printed shadows, hairline ledger rules, opaque black redaction bars, tractor-feed sprocket rails ### Borders - **Default Width**: 1px - **Style**: hairline ledger rule only (rgba(237,232,214,.12)); never a card edge accent - **Character**: rules separate rows and bands; the opaque censor bar is graphic, not a border ## Components ### Composition Compose every screen as an official record: a classified header band, an accession identifier, a central evidence form or ledger, and a machine verdict. Lock content to receipt columns and ledger baselines; break the grid only with an opaque black redaction bar or a deliberate withheld void. ### Hierarchy Hierarchy runs section header to case identifier to verdict to evidence rows. Carry rank with weight, surface, and the hairline rule — not coloured edges. A black bar outranks a phosphor prompt; a vermilion stamp is rarer than both and means audit exception only. ### Density High density inside ledgers and forms, surrounded by wide administrative margins and one deliberate withheld void per dense view. Every module reads as a document, never a floating widget. ### Signature The redaction bar is the primary graphic shape: it crops labels, blacks out fields, and opens a withheld void. Supported by the phosphor command prompt, tractor-feed sprocket rails, the accession ledger, and rare rotated rubber-stamp dispositions. ## 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-019ef67b-cc07-74f1-874e-5b7167445c95/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 Start from carbon and bone; add phosphor only when the system is actively speaking. - Do Make every panel read as a document: classified header, accession number, ruled rows, verdict. - Do Let the opaque black bar obscure things that look important — withholding is the disposition. - Do Style every form control as a printable square field; no browser defaults. - Do Keep stamps small, rotated, and procedural: APPROVED, WITHHELD, TRACE. - Do Render sprocket holes, scanlines, and rules with CSS, not bitmap textures. - Do Hold global -0.02em tracking and monospaced tabular alignment across data. - Don't Do not add a second bright colour or a neon palette beyond one phosphor and one rare vermilion. - Don't Do not use rounded glass cards, blur, or glossy chrome. - Don't Do not make the dashboard generic admin chrome; every module has file, form, or terminal logic. - Don't Do not over-distress the surface into vintage scrapbook; legibility first. - Don't Do not fill the withheld void with widgets — blankness is part of the system. - Don't Do not put symbol glyphs in copy; use SVG primitives and CSS marks. ### Accessibility Bone text on warm carbon holds strong contrast. Phosphor green is used for large prompt text, active states, and verdicts, always with bone or near-black support, never as small text on carbon. Vermilion audit states carry text plus a stamp frame. Focus uses a 2px phosphor inset ring. Reduced motion disables cursor blink and scanline drift. ## Imagery Direction ### Pairs With overprint ### Summary Risograph overprint: dense black-ink linework with crisp halftone-dot shading and fine engraved hatching, one luminous phosphor-green (#00ff66) layer slightly misregistered over the black on a clean off-white ground. The printed-archive look — the same machine that prints the fanfold record prints the image. ### Subjects - towering archive cabinet walls and ledger drawers - a single drawer pulled open overflowing with dossiers - file-room corridors and stacked record boxes - terminals and line-printers - rubber stamps and seals ### Usage One full-bleed hero rendered in the overprint technique sits behind a dark ink mast on the landing; the same image fills the feature split. Imagery is archival and surveillant, never illustrated character art.

```json { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "akte", "type": "registry:theme", "title": "Akte shadcn Theme", "cssVars": { "theme": {}, "light": { "background": "#12120E", "foreground": "#EDE8D6", "card": "#1C1B15", "card-foreground": "#EDE8D6", "popover": "#1C1B15", "popover-foreground": "#EDE8D6", "primary": "#EDE8D6", "primary-foreground": "#111111", "secondary": "#f4f4f5", "secondary-foreground": "#111111", "muted": "#8E866E", "muted-foreground": "#EDE8D6", "accent": "#46F08A", "accent-foreground": "#111111", "destructive": "#E8541E", "border": "rgba(237,232,214,0.12)", "input": "rgba(237,232,214,0.12)", "ring": "#46F08A", "chart-1": "#EDE8D6", "chart-2": "#f4f4f5", "chart-3": "#46F08A", "chart-4": "#46F08A", "chart-5": "#E8A33B", "sidebar": "#1C1B15", "sidebar-foreground": "#EDE8D6", "sidebar-primary": "#EDE8D6", "sidebar-primary-foreground": "#111111", "sidebar-accent": "#5FB6C4", "sidebar-accent-foreground": "#ffffff", "sidebar-border": "rgba(237,232,214,0.12)", "sidebar-ring": "#46F08A", "radius": "16px" }, "dark": { "background": "#0f1115", "foreground": "#f8fafc", "card": "#181b22", "card-foreground": "#f8fafc", "popover": "#181b22", "popover-foreground": "#f8fafc", "primary": "#EDE8D6", "primary-foreground": "#111111", "secondary": "#252a33", "secondary-foreground": "#f8fafc", "muted": "#252a33", "muted-foreground": "#a1a1aa", "accent": "#46F08A", "accent-foreground": "#111111", "destructive": "#E8541E", "border": "#303642", "input": "#303642", "ring": "#46F08A", "chart-1": "#EDE8D6", "chart-2": "#f4f4f5", "chart-3": "#46F08A", "chart-4": "#46F08A", "chart-5": "#E8A33B", "sidebar": "#181b22", "sidebar-foreground": "#f8fafc", "sidebar-primary": "#EDE8D6", "sidebar-primary-foreground": "#111111", "sidebar-accent": "#46F08A", "sidebar-accent-foreground": "#111111", "sidebar-border": "#303642", "sidebar-ring": "#46F08A", "radius": "16px" } }, "meta": { "source": "katagami", "languageId": "en-019ef67b-cc07-74f1-874e-5b7167445c95", "slug": "akte", "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", "redaction", "stamp", "success", "surface", "surface-2", "text", "warning" ], "typography": [ "base_size", "body_font", "google_fonts_url", "heading_font", "heading_transform", "heading_weight", "letter_spacing", "mono_font" ], "radii": [ "full", "lg", "md", "none" ], "shadows": [ "lg", "md", "sm" ], "spacing": [ "base", "scale" ], "surfaces": [ "card_style", "ground", "treatment" ], "borders": [ "character", "default_width", "style" ], "motion": [ "duration", "easing", "philosophy" ] } } } ```

Typography

headline-lgArchivo Narrow · 33px · 700

The quick brown fox jumps

headline-mdArchivo Narrow · 27px · 600

The quick brown fox jumps

body-mdIBM Plex Sans · 17px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

:root { --background: #12120E; --foreground: #EDE8D6; --card: #1C1B15; --card-foreground: #EDE8D6; --popover: #1C1B15; --popover-foreground: #EDE8D6; --primary: #EDE8D6; --primary-foreground: #111111; --secondary: #f4f4f5; --secondary-foreground: #111111; --muted: #8E866E; --muted-foreground: #EDE8D6; --accent: #46F08A; --accent-foreground: #111111; --destructive: #E8541E; --border: rgba(237,232,214,0.12); --input: rgba(237,232,214,0.12); --ring: #46F08A; --chart-1: #EDE8D6; --chart-2: #f4f4f5; --chart-3: #46F08A; --chart-4: #46F08A; --chart-5: #E8A33B; --sidebar: #1C1B15; --sidebar-foreground: #EDE8D6; --sidebar-primary: #EDE8D6; --sidebar-primary-foreground: #111111; --sidebar-accent: #5FB6C4; --sidebar-accent-foreground: #ffffff; --sidebar-border: rgba(237,232,214,0.12); --sidebar-ring: #46F08A; --radius: 16px; } .dark { --background: #0f1115; --foreground: #f8fafc; --card: #181b22; --card-foreground: #f8fafc; --popover: #181b22; --popover-foreground: #f8fafc; --primary: #EDE8D6; --primary-foreground: #111111; --secondary: #252a33; --secondary-foreground: #f8fafc; --muted: #252a33; --muted-foreground: #a1a1aa; --accent: #46F08A; --accent-foreground: #111111; --destructive: #E8541E; --border: #303642; --input: #303642; --ring: #46F08A; --chart-1: #EDE8D6; --chart-2: #f4f4f5; --chart-3: #46F08A; --chart-4: #46F08A; --chart-5: #E8A33B; --sidebar: #181b22; --sidebar-foreground: #f8fafc; --sidebar-primary: #EDE8D6; --sidebar-primary-foreground: #111111; --sidebar-accent: #46F08A; --sidebar-accent-foreground: #111111; --sidebar-border: #303642; --sidebar-ring: #46F08A; --radius: 16px; }

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 AkteShadcnKit() { 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">Akte</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": "akte", "type": "registry:theme", "author": "katagami-agent", "visualProfile": { "mode": "dark", "ground": "#12120E", "radius": "0", "borders": "hairline-only", "elevation": "hard-shadow", "accentUse": "phosphor-as-system-voice", "typography": { "display": "Archivo Narrow", "body": "IBM Plex Sans", "mono": "IBM Plex Mono", "displayTransform": "uppercase", "tracking": "-0.02em" }, "signature": "redaction-bar" }, "cssVars": { "theme": { "font-sans": "IBM Plex Sans, system-ui, sans-serif", "font-mono": "IBM Plex Mono, ui-monospace, monospace", "font-display": "Archivo Narrow, sans-serif", "radius": "0px" }, "light": { "background": "#12120E", "foreground": "#EDE8D6", "card": "#1C1B15", "card-foreground": "#EDE8D6", "popover": "#0B0B08", "popover-foreground": "#EDE8D6", "primary": "#46F08A", "primary-foreground": "#0B0B08", "secondary": "#26241A", "secondary-foreground": "#EDE8D6", "muted": "#26241A", "muted-foreground": "#8E866E", "accent": "#46F08A", "accent-foreground": "#0B0B08", "destructive": "#E8541E", "destructive-foreground": "#EDE8D6", "border": "rgba(237,232,214,0.12)", "input": "#26241A", "ring": "#46F08A", "chart-1": "#46F08A", "chart-2": "#5FB6C4", "chart-3": "#E8A33B", "chart-4": "#E8541E", "chart-5": "#8E866E" }, "dark": { "background": "#12120E", "foreground": "#EDE8D6", "card": "#1C1B15", "card-foreground": "#EDE8D6", "popover": "#0B0B08", "popover-foreground": "#EDE8D6", "primary": "#46F08A", "primary-foreground": "#0B0B08", "secondary": "#26241A", "secondary-foreground": "#EDE8D6", "muted": "#26241A", "muted-foreground": "#8E866E", "accent": "#46F08A", "accent-foreground": "#0B0B08", "destructive": "#E8541E", "destructive-foreground": "#EDE8D6", "border": "rgba(237,232,214,0.12)", "input": "#26241A", "ring": "#46F08A", "chart-1": "#46F08A", "chart-2": "#5FB6C4", "chart-3": "#E8A33B", "chart-4": "#E8541E", "chart-5": "#8E866E" } } }

# Akte shadcn/ui Components Artifact: `component-recipes-v1` Author: `katagami-ui-projection` Language ID: `en-019ef67b-cc07-74f1-874e-5b7167445c95` Slug: `akte` ## Intent Akte is the night-shift archive terminal: a case file is summoned out of the dark, audited against the accession ledger, and stamped before it is returned to the drawer. It reinterprets the state-archive idea — records that judge — but moves it off beige paper onto a warm carbon ground, where the drawer and the command line are one surface. The redaction bar is the primary graphic shape; phosphor green is the only light, and only when the machine is speaking. ## 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": "#12120E", "surface": "#1C1B15", "surface-2": "#26241A", "text": "#EDE8D6", "muted": "#8E866E", "border": "rgba(237,232,214,0.12)", "accent": "#46F08A", "on-accent": "#0B0B08", "redaction": "#000000", "stamp": "#E8541E", "info": "#5FB6C4", "warning": "#E8A33B", "error": "#E8541E", "success": "#46F08A" } Typography: { "base_size": "17px", "body_font": "IBM Plex Sans", "heading_font": "Archivo Narrow", "mono_font": "IBM Plex Mono", "heading_weight": "700", "heading_transform": "uppercase", "letter_spacing": "-0.02em", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" } ## Visual character to preserve - Make the source language's structural identity visible in every component state. ## ShadSync visual profile { "family": "system", "material": "flat", "contour": "default", "border": "solid", "underlay": false, "grain": false, "stickerBadges": true, "motion": "still", "density": "dense", "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/akte/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: Start from carbon and bone; add phosphor only when the system is actively speaking.; Make every panel read as a document: classified header, accession number, ruled rows, verdict.; Let the opaque black bar obscure things that look important — withholding is the disposition.; Style every form control as a printable square field; no browser defaults.; Keep stamps small, rotated, and procedural: APPROVED, WITHHELD, TRACE.; Render sprocket holes, scanlines, and rules with CSS, not bitmap textures.; Hold global -0.02em tracking and monospaced tabular alignment across data. - Do not: Do not add a second bright colour or a neon palette beyond one phosphor and one rare vermilion.; Do not use rounded glass cards, blur, or glossy chrome.; Do not make the dashboard generic admin chrome; every module has file, form, or terminal logic.; Do not over-distress the surface into vintage scrapbook; legibility first.; Do not fill the withheld void with widgets — blankness is part of the system.; Do not put symbol glyphs in copy; use SVG primitives and CSS marks. ## 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 AkteShadcnKit() { 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">Akte</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": "Desktop uses a contained max-width (1180px, 1340px ultra-wide) with a sprocket-rail margin; dashboard adds a 228px rail. Tablet collapses multi-column dossier/ledger grids to fewer columns.", "whitespace": "Administrative: wide document margins, ruled gaps, and one withheld void that implies a missing page. Measured form intervals, not soft breathing room.", "density": "Dense ledgers balanced by high margins and a deliberate void — a file-room terminal, not a maximalist dashboard.", "responsive": "Single-column stack on mobile; sprocket rails hidden; non-essential table columns dropped; never overflow horizontally. minmax(0,1fr) columns with min-width:0 children.", "breakpoints": { "mobile": "0-600px", "tablet": "601-1000px", "desktop": "1001px+", "ultrawide": "1700px+" } }

{ "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-019ef67b-cc07-74f1-874e-5b7167445c95", "name": "Akte", "slug": "akte" }, "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": [], "visualProfile": { "family": "system", "material": "flat", "contour": "default", "border": "solid", "underlay": false, "grain": false, "stickerBadges": false, "motion": "still", "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": "Akte 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": [ "Start from carbon and bone; add phosphor only when the system is actively speaking.", "Make every panel read as a document: classified header, accession number, ruled rows, verdict.", "Let the opaque black bar obscure things that look important — withholding is the disposition.", "Style every form control as a printable square field; no browser defaults.", "Keep stamps small, rotated, and procedural: APPROVED, WITHHELD, TRACE.", "Render sprocket holes, scanlines, and rules with CSS, not bitmap textures.", "Hold global -0.02em tracking and monospaced tabular alignment across data." ], "dont": [ "Do not add a second bright colour or a neon palette beyond one phosphor and one rare vermilion.", "Do not use rounded glass cards, blur, or glossy chrome.", "Do not make the dashboard generic admin chrome; every module has file, form, or terminal logic.", "Do not over-distress the surface into vintage scrapbook; legibility first.", "Do not fill the withheld void with widgets — blankness is part of the system.", "Do not put symbol glyphs in copy; use SVG primitives and CSS marks." ] } }

Akte

Download DESIGN.md

specification

try a remix

More like this

embodiments

at a glance

Typography

implementation kit

DESIGN.md with shadcn

More like this

DESIGN.md with shadcn

try a remix