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 each screen like a Bauhaus poster translated into product UI: a dominant geometric block, a counterweighted utility rail, and black drafting rules that make every zone legible at a glance.
Hierarchy comes from scale, weight, and flat colour planes rather than soft shadow; headlines claim area, metrics sit in framed units, labels compress into mono caption strips.
Moderate density with clear segmentation: every cluster gets its own ruled container and negative-space buffer.
Intersecting black drafting rules; one oversized primary circle cropped by the container edge; flat fills on hard offset slab shadows; asymmetric split with a dominant block and a stacked numbered rail; uppercase heading locks and mono label strips that participate in the geometry.
A 12-column desktop grid with a dominant 7-column narrative area and a 5-column utility rail; tablet collapses to 8 columns, mobile to a single stacked flow.
Deliberate negative space around geometric anchors; generous padding inside panels, tighter outer gaps to preserve the poster composition; always pad above titles.
Operational but segmented; each module ruled and buffered.
Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with hidden non-essential nav and scrollable tables; full-bleed hero spans 100vw; contained content caps at 1240px and centres on ultra-wide; minmax(0,1fr) columns and min-width:0 children so grids never overflow.
werkblock
Imagery is geometric-reduction print: subjects rebuilt entirely from flat primary shapes snapped to a construction grid, in vermilion / cobalt / mustard on an ivory ground, held by hard black drafting rules. Completely flat colour, no shading or gradients, disciplined asymmetry, fills the frame edge to edge.
Full-bleed landing hero composed with dense geometric construction on one side and calm ivory negative space on the other for a legible overlay plate. Drive with background-image: var(--hero-image).
# Gerüst ## Philosophy Bauhaus workshop logic translated into interface structure: primary geometry, visible black construction rules, disciplined asymmetry, and typography treated as architecture, pinned to a warm ivory drafting field. The frame is never hidden — it carries the work. Colour blocks are navigational anchors; black rules are the skeleton that keeps expressive geometry functional. ### Values - Function stated through form - Geometric clarity before ornament - Typography as structural framing - Asymmetry balanced by grid discipline ### Anti-Values - Soft decorative luxury styling - Glassy atmospheric gradients - Invisible containers and vague hierarchy ### Visual Character - Large flat rectangles and circles in vermilion, cobalt, and mustard pinned against a warm ivory field, acting as spatial anchors rather than small accent flourishes. - Every major panel is defined by crisp charcoal drafting rules between 2px and 4px, with visible divider lines that make the composition feel drafted and constructed like a workshop poster. - Headings use oversized uppercase League Spartan with tight line height; labels and metrics sit in disciplined Space Mono caption strips that resemble instructional signage. - Layouts are intentionally asymmetric: one oversized block is counterweighted by a narrow stacked utility rail, with deliberate negative space preserving order around bold geometric forms. - Interactive elements use flat fills, square corners, and hard offset slab shadows so controls feel fabricated and mounted, not soft or skeuomorphic. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F3EBD9` | | surface | `#FFF9EE` | | surface_2 | `#ECE0C7` | | text | `#1E1B18` | | muted | `#5C5347` | | border | `#1F1A17` | | accent | `#C63A2F` | | accent_2 | `#2E5FA5` | | accent_3 | `#C99A1E` | | on_accent | `#FFF9EE` | | on_accent_3 | `#1E1B18` | | success | `#3C7A4B` | | warning | `#BA7A16` | | error | `#B23A32` | | info | `#2E5FA5` | ### Typography - **Base Size**: 17px - **Body Font**: Archivo - **Heading Font**: League Spartan - **Mono Font**: Space Mono - **Heading Weight**: 800 - **Heading Transform**: uppercase - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=League+Spartan:wght@500;700;800&family=Space+Mono:wght@400;700&display=swap ### Radii - **None**: 0 - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Slab Sm**: 5px 5px 0 #1F1A17 - **Slab Md**: 9px 9px 0 #1F1A17 ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Treatment**: flat-paper - **Card Style**: Warm paper panels with flat colour insets, exposed charcoal divider rules, and occasional cropped circular overlays that read like printed geometric studies on an ivory drafting field. - **Bg Pattern**: 32px ruled construction grid ### Borders - **Default Width**: 2px - **Accent Width**: 4px - **Style**: solid - **Character**: Assertive charcoal drafting rules: dark, straight, and always visible enough to separate modules with poster-like authority. ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1) - **Philosophy**: snappy; controls translate into their offset slab on press; settled state visible with no JS, reveal gated behind html.js; respects prefers-reduced-motion ## Rules ### Composition Compose each screen like a Bauhaus poster translated into product UI: a dominant geometric block, a counterweighted utility rail, and black drafting rules that make every zone legible at a glance. ### Hierarchy Hierarchy comes from scale, weight, and flat colour planes rather than soft shadow; headlines claim area, metrics sit in framed units, labels compress into mono caption strips. ### Density Moderate density with clear segmentation: every cluster gets its own ruled container and negative-space buffer. ### Signature Intersecting black drafting rules; one oversized primary circle cropped by the container edge; flat fills on hard offset slab shadows; asymmetric split with a dominant block and a stacked numbered rail; uppercase heading locks and mono label strips that participate in the geometry. ## Layout ### Grid A 12-column desktop grid with a dominant 7-column narrative area and a 5-column utility rail; tablet collapses to 8 columns, mobile to a single stacked flow. ### Whitespace Deliberate negative space around geometric anchors; generous padding inside panels, tighter outer gaps to preserve the poster composition; always pad above titles. ### Density Operational but segmented; each module ruled and buffered. ### Responsive Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with hidden non-essential nav and scrollable tables; full-bleed hero spans 100vw; contained content caps at 1240px and centres on ultra-wide; minmax(0,1fr) columns and min-width:0 children so grids never overflow. ### Breakpoints - **Mobile**: 680px - **Tablet**: 900px - **Desktop**: 1240px ## Guidance ### Do - Let one geometric element dominate each composition. - Keep borders, divider rules, and label bands visibly structural. - Use the three primaries boldly on large planes and sparingly as accents. - Make typography blocky, uppercase, and clearly staged by scale. ### Don't - Do not soften the system with frosted transparency or blurred gradients. - Do not hide structure behind borderless floating cards, or give a card a single accent edge. - Do not use pastel ambiguity or more than three accent colours. - Do not centre everything; disciplined asymmetry is part of the identity. ### Accessibility Body text 17px+; high contrast throughout (charcoal ink on ivory/paper, paper on vermilion/cobalt, ink on mustard); every form control explicitly styled with a visible cobalt focus ring; icons are SVG primitives, never symbol glyphs; respects prefers-reduced-motion. ## Imagery Direction ### Pairs With werkblock ### Summary Imagery is geometric-reduction print: subjects rebuilt entirely from flat primary shapes snapped to a construction grid, in vermilion / cobalt / mustard on an ivory ground, held by hard black drafting rules. Completely flat colour, no shading or gradients, disciplined asymmetry, fills the frame edge to edge. ### Subjects - workshop drafting tools - fabrication benches and jigs - building blocks and primary solids - instructional workshop scenes ### Usage Full-bleed landing hero composed with dense geometric construction on one side and calm ivory negative space on the other for a legible overlay plate. Drive with background-image: var(--hero-image).
---
version: "alpha"
name: "Gerüst"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F3EBD9"
surface: "#FFF9EE"
surface_2: "#ECE0C7"
text: "#1E1B18"
muted: "#5C5347"
border: "#1F1A17"
accent: "#C63A2F"
accent_2: "#2E5FA5"
accent_3: "#C99A1E"
on_accent: "#FFF9EE"
on_accent_3: "#1E1B18"
success: "#3C7A4B"
warning: "#BA7A16"
error: "#B23A32"
info: "#2E5FA5"
typography:
headline-lg:
fontFamily: "League Spartan"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "League Spartan"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Archivo"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Space 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-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_3:
backgroundColor: "{colors.accent_3}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-on_accent_3:
backgroundColor: "{colors.on_accent_3}"
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: "#ffffff"
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"
---
# Gerüst
## Overview
Bauhaus workshop logic translated into interface structure: primary geometry, visible black construction rules, disciplined asymmetry, and typography treated as architecture, pinned to a warm ivory drafting field. The frame is never hidden — it carries the work. Colour blocks are navigational anchors; black rules are the skeleton that keeps expressive geometry functional.
### Values
- Function stated through form
- Geometric clarity before ornament
- Typography as structural framing
- Asymmetry balanced by grid discipline
### Anti-Values
- Soft decorative luxury styling
- Glassy atmospheric gradients
- Invisible containers and vague hierarchy
### Visual Character
- Large flat rectangles and circles in vermilion, cobalt, and mustard pinned against a warm ivory field, acting as spatial anchors rather than small accent flourishes.
- Every major panel is defined by crisp charcoal drafting rules between 2px and 4px, with visible divider lines that make the composition feel drafted and constructed like a workshop poster.
- Headings use oversized uppercase League Spartan with tight line height; labels and metrics sit in disciplined Space Mono caption strips that resemble instructional signage.
- Layouts are intentionally asymmetric: one oversized block is counterweighted by a narrow stacked utility rail, with deliberate negative space preserving order around bold geometric forms.
- Interactive elements use flat fills, square corners, and hard offset slab shadows so controls feel fabricated and mounted, not soft or skeuomorphic.
## 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 | `#F3EBD9` |
| surface | `#FFF9EE` |
| surface_2 | `#ECE0C7` |
| text | `#1E1B18` |
| muted | `#5C5347` |
| border | `#1F1A17` |
| accent | `#C63A2F` |
| accent_2 | `#2E5FA5` |
| accent_3 | `#C99A1E` |
| on_accent | `#FFF9EE` |
| on_accent_3 | `#1E1B18` |
| success | `#3C7A4B` |
| warning | `#BA7A16` |
| error | `#B23A32` |
| info | `#2E5FA5` |
## Typography
- **Headline-Lg**: League Spartan, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: League Spartan, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space 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
A 12-column desktop grid with a dominant 7-column narrative area and a 5-column utility rail; tablet collapses to 8 columns, mobile to a single stacked flow.
### Whitespace
Deliberate negative space around geometric anchors; generous padding inside panels, tighter outer gaps to preserve the poster composition; always pad above titles.
### Density
Operational but segmented; each module ruled and buffered.
### Responsive
Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with hidden non-essential nav and scrollable tables; full-bleed hero spans 100vw; contained content caps at 1240px and centres on ultra-wide; minmax(0,1fr) columns and min-width:0 children so grids never overflow.
### Breakpoints
- **Mobile**: 680px
- **Tablet**: 900px
- **Desktop**: 1240px
## Elevation & Depth
### Shadows
- **Slab Sm**: 5px 5px 0 #1F1A17
- **Slab Md**: 9px 9px 0 #1F1A17
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: flat-paper
- **Card Style**: Warm paper panels with flat colour insets, exposed charcoal divider rules, and occasional cropped circular overlays that read like printed geometric studies on an ivory drafting field.
- **Bg Pattern**: 32px ruled construction grid
### Borders
- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Assertive charcoal drafting rules: dark, straight, and always visible enough to separate modules with poster-like authority.
## Components
### Composition
Compose each screen like a Bauhaus poster translated into product UI: a dominant geometric block, a counterweighted utility rail, and black drafting rules that make every zone legible at a glance.
### Hierarchy
Hierarchy comes from scale, weight, and flat colour planes rather than soft shadow; headlines claim area, metrics sit in framed units, labels compress into mono caption strips.
### Density
Moderate density with clear segmentation: every cluster gets its own ruled container and negative-space buffer.
### Signature
Intersecting black drafting rules; one oversized primary circle cropped by the container edge; flat fills on hard offset slab shadows; asymmetric split with a dominant block and a stacked numbered rail; uppercase heading locks and mono label strips that participate in the geometry.
## 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-019ef945-b735-7443-918a-8e881983ab8a/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 Let one geometric element dominate each composition.
- Do Keep borders, divider rules, and label bands visibly structural.
- Do Use the three primaries boldly on large planes and sparingly as accents.
- Do Make typography blocky, uppercase, and clearly staged by scale.
- Don't Do not soften the system with frosted transparency or blurred gradients.
- Don't Do not hide structure behind borderless floating cards, or give a card a single accent edge.
- Don't Do not use pastel ambiguity or more than three accent colours.
- Don't Do not centre everything; disciplined asymmetry is part of the identity.
### Accessibility
Body text 17px+; high contrast throughout (charcoal ink on ivory/paper, paper on vermilion/cobalt, ink on mustard); every form control explicitly styled with a visible cobalt focus ring; icons are SVG primitives, never symbol glyphs; respects prefers-reduced-motion.
## Imagery Direction
### Pairs With
werkblock
### Summary
Imagery is geometric-reduction print: subjects rebuilt entirely from flat primary shapes snapped to a construction grid, in vermilion / cobalt / mustard on an ivory ground, held by hard black drafting rules. Completely flat colour, no shading or gradients, disciplined asymmetry, fills the frame edge to edge.
### Subjects
- workshop drafting tools
- fabrication benches and jigs
- building blocks and primary solids
- instructional workshop scenes
### Usage
Full-bleed landing hero composed with dense geometric construction on one side and calm ivory negative space on the other for a legible overlay plate. Drive with background-image: var(--hero-image).
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "geruest",
"type": "registry:theme",
"title": "Gerüst shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F3EBD9",
"foreground": "#1E1B18",
"card": "#FFF9EE",
"card-foreground": "#1E1B18",
"popover": "#FFF9EE",
"popover-foreground": "#1E1B18",
"primary": "#1E1B18",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#5C5347",
"muted-foreground": "#1E1B18",
"accent": "#C63A2F",
"accent-foreground": "#ffffff",
"destructive": "#B23A32",
"border": "#1F1A17",
"input": "#1F1A17",
"ring": "#C63A2F",
"chart-1": "#1E1B18",
"chart-2": "#f4f4f5",
"chart-3": "#C63A2F",
"chart-4": "#3C7A4B",
"chart-5": "#BA7A16",
"sidebar": "#FFF9EE",
"sidebar-foreground": "#1E1B18",
"sidebar-primary": "#1E1B18",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2E5FA5",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#1F1A17",
"sidebar-ring": "#C63A2F",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#1E1B18",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#C63A2F",
"accent-foreground": "#ffffff",
"destructive": "#B23A32",
"border": "#303642",
"input": "#303642",
"ring": "#C63A2F",
"chart-1": "#1E1B18",
"chart-2": "#f4f4f5",
"chart-3": "#C63A2F",
"chart-4": "#3C7A4B",
"chart-5": "#BA7A16",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#1E1B18",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#C63A2F",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#C63A2F",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef945-b735-7443-918a-8e881983ab8a",
"slug": "geruest",
"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_2",
"accent_3",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"on_accent_3",
"success",
"surface",
"surface_2",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"slab_md",
"slab_sm"
],
"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 Gerüstand 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: #F3EBD9;
--foreground: #1E1B18;
--card: #FFF9EE;
--card-foreground: #1E1B18;
--popover: #FFF9EE;
--popover-foreground: #1E1B18;
--primary: #1E1B18;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #5C5347;
--muted-foreground: #1E1B18;
--accent: #C63A2F;
--accent-foreground: #ffffff;
--destructive: #B23A32;
--border: #1F1A17;
--input: #1F1A17;
--ring: #C63A2F;
--chart-1: #1E1B18;
--chart-2: #f4f4f5;
--chart-3: #C63A2F;
--chart-4: #3C7A4B;
--chart-5: #BA7A16;
--sidebar: #FFF9EE;
--sidebar-foreground: #1E1B18;
--sidebar-primary: #1E1B18;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2E5FA5;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #1F1A17;
--sidebar-ring: #C63A2F;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #1E1B18;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #C63A2F;
--accent-foreground: #ffffff;
--destructive: #B23A32;
--border: #303642;
--input: #303642;
--ring: #C63A2F;
--chart-1: #1E1B18;
--chart-2: #f4f4f5;
--chart-3: #C63A2F;
--chart-4: #3C7A4B;
--chart-5: #BA7A16;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #1E1B18;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #C63A2F;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #C63A2F;
--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 GerStShadcnKit() {
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">Gerüst</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": "geruest",
"type": "registry:theme",
"title": "Gerüst",
"author": "katagami-agent",
"visualProfile": {
"ground": "ivory",
"material": "flat-paper",
"borders": "assertive-charcoal-rules",
"border_width": "2px",
"border_width_accent": "4px",
"radius": "0",
"radius_scale": [0, 16, 24, 9999],
"elevation": "offset-slab",
"shadow_default": "5px 5px 0 #1F1A17",
"shadow_raised": "9px 9px 0 #1F1A17",
"accent_count": 3,
"tone": "constructivist, drafted, poster-grade, never soft"
},
"cssVars": {
"theme": {
"font-sans": "Archivo, system-ui, sans-serif",
"font-mono": "Space Mono, ui-monospace, monospace",
"font-heading": "League Spartan, system-ui, sans-serif",
"radius": "0px"
},
"light": {
"background": "#F3EBD9",
"foreground": "#1E1B18",
"card": "#FFF9EE",
"card-foreground": "#1E1B18",
"popover": "#FFF9EE",
"popover-foreground": "#1E1B18",
"primary": "#C63A2F",
"primary-foreground": "#FFF9EE",
"secondary": "#2E5FA5",
"secondary-foreground": "#FFF9EE",
"muted": "#ECE0C7",
"muted-foreground": "#5C5347",
"accent": "#C99A1E",
"accent-foreground": "#1E1B18",
"destructive": "#B23A32",
"destructive-foreground": "#FFF9EE",
"success": "#3C7A4B",
"warning": "#BA7A16",
"info": "#2E5FA5",
"border": "#1F1A17",
"input": "#1F1A17",
"ring": "#2E5FA5",
"chart-1": "#C63A2F",
"chart-2": "#2E5FA5",
"chart-3": "#C99A1E",
"chart-4": "#3C7A4B",
"chart-5": "#5C5347"
},
"dark": {
"background": "#1F1A17",
"foreground": "#F3EBD9",
"card": "#262019",
"card-foreground": "#F3EBD9",
"popover": "#262019",
"popover-foreground": "#F3EBD9",
"primary": "#C63A2F",
"primary-foreground": "#FFF9EE",
"secondary": "#2E5FA5",
"secondary-foreground": "#FFF9EE",
"muted": "#2A241D",
"muted-foreground": "#CFC6B6",
"accent": "#C99A1E",
"accent-foreground": "#1E1B18",
"destructive": "#B23A32",
"destructive-foreground": "#FFF9EE",
"border": "#000000",
"input": "#000000",
"ring": "#C99A1E"
}
}
}
# Gerüst shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef945-b735-7443-918a-8e881983ab8a`
Slug: `geruest`
## Intent
Bauhaus workshop logic translated into interface structure: primary geometry, visible black construction rules, disciplined asymmetry, and typography treated as architecture, pinned to a warm ivory drafting field. The frame is never hidden — it carries the work. Colour blocks are navigational anchors; black rules are the skeleton that keeps expressive geometry functional.
## 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": "#F3EBD9",
"surface": "#FFF9EE",
"surface_2": "#ECE0C7",
"text": "#1E1B18",
"muted": "#5C5347",
"border": "#1F1A17",
"accent": "#C63A2F",
"accent_2": "#2E5FA5",
"accent_3": "#C99A1E",
"on_accent": "#FFF9EE",
"on_accent_3": "#1E1B18",
"success": "#3C7A4B",
"warning": "#BA7A16",
"error": "#B23A32",
"info": "#2E5FA5"
}
Typography:
{
"base_size": "17px",
"body_font": "Archivo",
"heading_font": "League Spartan",
"mono_font": "Space Mono",
"heading_weight": "800",
"heading_transform": "uppercase",
"letter_spacing": "-0.02em",
"line_height": "1.55",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=League+Spartan:wght@500;700;800&family=Space+Mono:wght@400;700&display=swap"
}
## Visual character to preserve
- Large flat rectangles and circles in vermilion, cobalt, and mustard pinned against a warm ivory field, acting as spatial anchors rather than small accent flourishes.
- Every major panel is defined by crisp charcoal drafting rules between 2px and 4px, with visible divider lines that make the composition feel drafted and constructed like a workshop poster.
- Headings use oversized uppercase League Spartan with tight line height; labels and metrics sit in disciplined Space Mono caption strips that resemble instructional signage.
- Layouts are intentionally asymmetric: one oversized block is counterweighted by a narrow stacked utility rail, with deliberate negative space preserving order around bold geometric forms.
- Interactive elements use flat fills, square corners, and hard offset slab shadows so controls feel fabricated and mounted, not soft or skeuomorphic.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": false,
"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/geruest/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: Let one geometric element dominate each composition.; Keep borders, divider rules, and label bands visibly structural.; Use the three primaries boldly on large planes and sparingly as accents.; Make typography blocky, uppercase, and clearly staged by scale.
- Do not: Do not soften the system with frosted transparency or blurred gradients.; Do not hide structure behind borderless floating cards, or give a card a single accent edge.; Do not use pastel ambiguity or more than three accent colours.; Do not centre everything; disciplined asymmetry is part of the identity.
## 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 GerStShadcnKit() {
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">Gerüst</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": "A 12-column desktop grid with a dominant 7-column narrative area and a 5-column utility rail; tablet collapses to 8 columns, mobile to a single stacked flow.",
"whitespace": "Deliberate negative space around geometric anchors; generous padding inside panels, tighter outer gaps to preserve the poster composition; always pad above titles.",
"density": "Operational but segmented; each module ruled and buffered.",
"responsive": "Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with hidden non-essential nav and scrollable tables; full-bleed hero spans 100vw; contained content caps at 1240px and centres on ultra-wide; minmax(0,1fr) columns and min-width:0 children so grids never overflow.",
"breakpoints": {
"mobile": "680px",
"tablet": "900px",
"desktop": "1240px"
}
}
{
"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-019ef945-b735-7443-918a-8e881983ab8a",
"name": "Gerüst",
"slug": "geruest"
},
"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": [
"Large flat rectangles and circles in vermilion, cobalt, and mustard pinned against a warm ivory field, acting as spatial anchors rather than small accent flourishes.",
"Every major panel is defined by crisp charcoal drafting rules between 2px and 4px, with visible divider lines that make the composition feel drafted and constructed like a workshop poster.",
"Headings use oversized uppercase League Spartan with tight line height; labels and metrics sit in disciplined Space Mono caption strips that resemble instructional signage.",
"Layouts are intentionally asymmetric: one oversized block is counterweighted by a narrow stacked utility rail, with deliberate negative space preserving order around bold geometric forms.",
"Interactive elements use flat fills, square corners, and hard offset slab shadows so controls feel fabricated and mounted, not soft or skeuomorphic."
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": false,
"stickerBadges": false,
"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": "Gerüst 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": [
"Let one geometric element dominate each composition.",
"Keep borders, divider rules, and label bands visibly structural.",
"Use the three primaries boldly on large planes and sparingly as accents.",
"Make typography blocky, uppercase, and clearly staged by scale."
],
"dont": [
"Do not soften the system with frosted transparency or blurred gradients.",
"Do not hide structure behind borderless floating cards, or give a card a single accent edge.",
"Do not use pastel ambiguity or more than three accent colours.",
"Do not centre everything; disciplined asymmetry is part of the identity."
]
}
}