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.
Use a visible 12-column modular grid with uneven spans, letting one dominant lead block (7-8 cols) carry the argument while metadata and controls occupy narrow adjacent rails (4-5 cols).
Build hierarchy through scale, weight, and alignment; headlines are oversized Space Grotesk set tight, while labels, timestamps, and figures use compact uppercase IBM Plex Mono.
Moderate to high density with intentional compression, kept legible by generous page-edge margins and rule-based separation rather than roomy lifestyle-SaaS spacing.
The origin rule introduces every section: a 4px vermilion segment at the left origin followed by a hairline graphite rule carrying the mono label; oversized type and tabular-mono figures act as the primary graphic device; data reads as editorial tables, not rounded widgets.
Desktop uses a 12-column editorial grid with 24px gutters and frequent 3/5/7/8 column spans; tablet reduces to 6 columns and mobile collapses to a single stacked flow while preserving rule-based separators. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing.
Whitespace is structural and measured in 8px grid increments; strong margins at the page edge, compact rhythmically-separated interior modules divided by rules, not floating gaps.
Compact interior with measured breathing room for legibility.
Every artifact renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column and hides non-essential nav/columns; ultra-wide caps contained content at 1280px and lets only the hero span 100vw.
hochdruck
Two-colour relief prints — ink black on warm off-white with one solid vermilion accent, carved gouge texture, flat high-contrast planes. Subjects read as carved grids, columns, and register marks, echoing the printer's tradition Swiss modernism descends from.
One full-bleed relief-print hero behind the landing; spot relief illustrations may anchor empty states. Keep strictly two-colour with a single vermilion accent; never add a third colour or render the press itself.
# Raster ## Philosophy Swiss grid modernism, refined for digital surfaces: a visible modular column lattice, oversized grotesk headlines, mono meta labels, and a single vermilion register mark at the origin of every heading. Order is the only decoration — alignment, scale, and weight do the work colour and ornament do elsewhere. ### Values - objective communication over expressive ornament - grid logic as the primary source of visual order - high legibility through scale, alignment, and contrast ### Anti-Values - soft decorative whimsy and rounded app chrome - skeuomorphic texture, glass, or gradient fills - centred symmetry used without informational purpose ### Visual Character - A strict 12-column editorial grid governs every region, with modules snapping to visible alignment so whitespace reads as measured rather than atmospheric. - Oversized Space Grotesk headlines sit flush to the grid with tight breaks; small uppercase IBM Plex Mono meta labels and tabular figures build hierarchy through scale contrast, not colour abundance. - The origin rule introduces every section: a short 4px vermilion segment at the left origin, then a hairline graphite rule carrying the mono label. - Flat cool-white panels on warm paper, hairline graphite dividers, and one vermilion register accent per region — never a full-surface fill, gradient, or accent card edge. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F4F4F0` | | surface | `#FBFBF8` | | surface_2 | `#ECECE6` | | text | `#141414` | | muted | `#6B7178` | | border | `#D7D7D1` | | rule | `#1A1A1A` | | accent | `#C63A2B` | | accent_ink | `#9E2A1E` | | on_accent | `#FBFBF8` | | success | `#1F6B4F` | | warning | `#A15C00` | | error | `#B42318` | | info | `#245D8C` | ### Typography - **Base Size**: 17px - **Body Font**: IBM Plex Sans - **Heading Font**: Space Grotesk - **Mono Font**: IBM Plex Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap ### Radii - **None**: 0 - **Sm**: 0 - **Md**: 0 - **Lg**: 0 - **Full**: 9999px ### Shadows - **Sm**: none - **Md**: 0 1px 0 rgba(20,20,20,0.05) - **Lg**: 0 18px 48px rgba(20,20,20,0.10) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Treatment**: paper - **Card Style**: Flat matte panels with cool-white fill on a warm-paper ground, separated by hairline graphite rules and space — no glass, no shadow elevation, no gradient. - **Bg Pattern**: grid ### Borders - **Default Width**: 1px - **Rule Width**: 2px - **Origin Width**: 4px - **Style**: solid - **Character**: Hairline graphite dividers (warm-tuned) for separation; 2px structural rules at key edges; a 4px vermilion origin segment marks the left origin of each heading. Never an accent edge on a card. ### Motion - **Duration**: 200ms - **Easing**: cubic-bezier(0.2,0.8,0.2,1) - **Philosophy**: Snappy and structural. The settled page is the default and renders with no JS; an inline script gates the hidden start-state (a class on <html>) and a scroll-reveal lifts each module 18px into place. prefers-reduced-motion disables it. ## Rules ### Composition Use a visible 12-column modular grid with uneven spans, letting one dominant lead block (7-8 cols) carry the argument while metadata and controls occupy narrow adjacent rails (4-5 cols). ### Hierarchy Build hierarchy through scale, weight, and alignment; headlines are oversized Space Grotesk set tight, while labels, timestamps, and figures use compact uppercase IBM Plex Mono. ### Density Moderate to high density with intentional compression, kept legible by generous page-edge margins and rule-based separation rather than roomy lifestyle-SaaS spacing. ### Signature The origin rule introduces every section: a 4px vermilion segment at the left origin followed by a hairline graphite rule carrying the mono label; oversized type and tabular-mono figures act as the primary graphic device; data reads as editorial tables, not rounded widgets. ## Layout ### Grid Desktop uses a 12-column editorial grid with 24px gutters and frequent 3/5/7/8 column spans; tablet reduces to 6 columns and mobile collapses to a single stacked flow while preserving rule-based separators. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing. ### Whitespace Whitespace is structural and measured in 8px grid increments; strong margins at the page edge, compact rhythmically-separated interior modules divided by rules, not floating gaps. ### Density Compact interior with measured breathing room for legibility. ### Responsive Every artifact renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column and hides non-essential nav/columns; ultra-wide caps contained content at 1280px and lets only the hero span 100vw. ### Breakpoints - **Mobile**: 390-560 - **Tablet**: 561-900 - **Desktop**: 901-1440 - **Ultrawide**: 1441+ ## Guidance ### Do - Anchor on graphite type on a warm-paper field; build sections from grid, rule, and baseline before any accent. - Reserve vermilion for the origin mark, counts, and the one primary action per region. - Keep all figures in tabular IBM Plex Mono; let oversized headlines be the primary graphic device. ### Don't - Do not round corners, float glassy cards, or add gradient/shadow elevation. - Do not centre everything; asymmetry is part of the language. - Do not give a card an accent edge or solve hierarchy with extra accent colours. ### Accessibility Body text 17px+, table rows 14.5px+; graphite ink on warm paper holds high contrast. Hero overlay text is paper-white over a legible scrim. Form controls are fully styled with a vermilion focus ring; status uses outline badges plus text, never colour alone. Motion respects prefers-reduced-motion and the no-JS settled state shows the full page. ## Imagery Direction ### Pairs With hochdruck ### Summary Two-colour relief prints — ink black on warm off-white with one solid vermilion accent, carved gouge texture, flat high-contrast planes. Subjects read as carved grids, columns, and register marks, echoing the printer's tradition Swiss modernism descends from. ### Subjects - a carved modular grid of overlapping column bars - a register mark snapping to a grid intersection - stacked printed columns of a page - a typographic lattice of rules and baselines ### Usage One full-bleed relief-print hero behind the landing; spot relief illustrations may anchor empty states. Keep strictly two-colour with a single vermilion accent; never add a third colour or render the press itself.
---
version: "alpha"
name: "Raster"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F4F4F0"
surface: "#FBFBF8"
surface_2: "#ECECE6"
text: "#141414"
muted: "#6B7178"
border: "#D7D7D1"
rule: "#1A1A1A"
accent: "#C63A2B"
accent_ink: "#9E2A1E"
on_accent: "#FBFBF8"
success: "#1F6B4F"
warning: "#A15C00"
error: "#B42318"
info: "#245D8C"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "IBM Plex Sans"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.02em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "0px"
lg: "0px"
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-rule:
backgroundColor: "{colors.rule}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_ink:
backgroundColor: "{colors.accent_ink}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#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"
---
# Raster
## Overview
Swiss grid modernism, refined for digital surfaces: a visible modular column lattice, oversized grotesk headlines, mono meta labels, and a single vermilion register mark at the origin of every heading. Order is the only decoration — alignment, scale, and weight do the work colour and ornament do elsewhere.
### Values
- objective communication over expressive ornament
- grid logic as the primary source of visual order
- high legibility through scale, alignment, and contrast
### Anti-Values
- soft decorative whimsy and rounded app chrome
- skeuomorphic texture, glass, or gradient fills
- centred symmetry used without informational purpose
### Visual Character
- A strict 12-column editorial grid governs every region, with modules snapping to visible alignment so whitespace reads as measured rather than atmospheric.
- Oversized Space Grotesk headlines sit flush to the grid with tight breaks; small uppercase IBM Plex Mono meta labels and tabular figures build hierarchy through scale contrast, not colour abundance.
- The origin rule introduces every section: a short 4px vermilion segment at the left origin, then a hairline graphite rule carrying the mono label.
- Flat cool-white panels on warm paper, hairline graphite dividers, and one vermilion register accent per region — never a full-surface fill, gradient, or accent card edge.
## 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 | `#F4F4F0` |
| surface | `#FBFBF8` |
| surface_2 | `#ECECE6` |
| text | `#141414` |
| muted | `#6B7178` |
| border | `#D7D7D1` |
| rule | `#1A1A1A` |
| accent | `#C63A2B` |
| accent_ink | `#9E2A1E` |
| on_accent | `#FBFBF8` |
| success | `#1F6B4F` |
| warning | `#A15C00` |
| error | `#B42318` |
| info | `#245D8C` |
## Typography
- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.55.
- **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 12-column editorial grid with 24px gutters and frequent 3/5/7/8 column spans; tablet reduces to 6 columns and mobile collapses to a single stacked flow while preserving rule-based separators. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing.
### Whitespace
Whitespace is structural and measured in 8px grid increments; strong margins at the page edge, compact rhythmically-separated interior modules divided by rules, not floating gaps.
### Density
Compact interior with measured breathing room for legibility.
### Responsive
Every artifact renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column and hides non-essential nav/columns; ultra-wide caps contained content at 1280px and lets only the hero span 100vw.
### Breakpoints
- **Mobile**: 390-560
- **Tablet**: 561-900
- **Desktop**: 901-1440
- **Ultrawide**: 1441+
## Elevation & Depth
### Shadows
- **Sm**: none
- **Md**: 0 1px 0 rgba(20,20,20,0.05)
- **Lg**: 0 18px 48px rgba(20,20,20,0.10)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: paper
- **Card Style**: Flat matte panels with cool-white fill on a warm-paper ground, separated by hairline graphite rules and space — no glass, no shadow elevation, no gradient.
- **Bg Pattern**: grid
### Borders
- **Default Width**: 1px
- **Rule Width**: 2px
- **Origin Width**: 4px
- **Style**: solid
- **Character**: Hairline graphite dividers (warm-tuned) for separation; 2px structural rules at key edges; a 4px vermilion origin segment marks the left origin of each heading. Never an accent edge on a card.
## Components
### Composition
Use a visible 12-column modular grid with uneven spans, letting one dominant lead block (7-8 cols) carry the argument while metadata and controls occupy narrow adjacent rails (4-5 cols).
### Hierarchy
Build hierarchy through scale, weight, and alignment; headlines are oversized Space Grotesk set tight, while labels, timestamps, and figures use compact uppercase IBM Plex Mono.
### Density
Moderate to high density with intentional compression, kept legible by generous page-edge margins and rule-based separation rather than roomy lifestyle-SaaS spacing.
### Signature
The origin rule introduces every section: a 4px vermilion segment at the left origin followed by a hairline graphite rule carrying the mono label; oversized type and tabular-mono figures act as the primary graphic device; data reads as editorial tables, not rounded widgets.
## 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-019ef6da-17f7-7163-bb34-b4c65092d655/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 Anchor on graphite type on a warm-paper field; build sections from grid, rule, and baseline before any accent.
- Do Reserve vermilion for the origin mark, counts, and the one primary action per region.
- Do Keep all figures in tabular IBM Plex Mono; let oversized headlines be the primary graphic device.
- Don't Do not round corners, float glassy cards, or add gradient/shadow elevation.
- Don't Do not centre everything; asymmetry is part of the language.
- Don't Do not give a card an accent edge or solve hierarchy with extra accent colours.
### Accessibility
Body text 17px+, table rows 14.5px+; graphite ink on warm paper holds high contrast. Hero overlay text is paper-white over a legible scrim. Form controls are fully styled with a vermilion focus ring; status uses outline badges plus text, never colour alone. Motion respects prefers-reduced-motion and the no-JS settled state shows the full page.
## Imagery Direction
### Pairs With
hochdruck
### Summary
Two-colour relief prints — ink black on warm off-white with one solid vermilion accent, carved gouge texture, flat high-contrast planes. Subjects read as carved grids, columns, and register marks, echoing the printer's tradition Swiss modernism descends from.
### Subjects
- a carved modular grid of overlapping column bars
- a register mark snapping to a grid intersection
- stacked printed columns of a page
- a typographic lattice of rules and baselines
### Usage
One full-bleed relief-print hero behind the landing; spot relief illustrations may anchor empty states. Keep strictly two-colour with a single vermilion accent; never add a third colour or render the press itself.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "raster",
"type": "registry:theme",
"title": "Raster shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F4F4F0",
"foreground": "#141414",
"card": "#FBFBF8",
"card-foreground": "#141414",
"popover": "#FBFBF8",
"popover-foreground": "#141414",
"primary": "#141414",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#6B7178",
"muted-foreground": "#141414",
"accent": "#C63A2B",
"accent-foreground": "#ffffff",
"destructive": "#B42318",
"border": "#D7D7D1",
"input": "#D7D7D1",
"ring": "#C63A2B",
"chart-1": "#141414",
"chart-2": "#f4f4f5",
"chart-3": "#C63A2B",
"chart-4": "#1F6B4F",
"chart-5": "#A15C00",
"sidebar": "#FBFBF8",
"sidebar-foreground": "#141414",
"sidebar-primary": "#141414",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#245D8C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#D7D7D1",
"sidebar-ring": "#C63A2B",
"radius": "0"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#141414",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#C63A2B",
"accent-foreground": "#ffffff",
"destructive": "#B42318",
"border": "#303642",
"input": "#303642",
"ring": "#C63A2B",
"chart-1": "#141414",
"chart-2": "#f4f4f5",
"chart-3": "#C63A2B",
"chart-4": "#1F6B4F",
"chart-5": "#A15C00",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#141414",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#C63A2B",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#C63A2B",
"radius": "0"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef6da-17f7-7163-bb34-b4c65092d655",
"slug": "raster",
"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_ink",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"rule",
"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",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"character",
"default_width",
"origin_width",
"rule_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 Rasterand 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: #F4F4F0;
--foreground: #141414;
--card: #FBFBF8;
--card-foreground: #141414;
--popover: #FBFBF8;
--popover-foreground: #141414;
--primary: #141414;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #6B7178;
--muted-foreground: #141414;
--accent: #C63A2B;
--accent-foreground: #ffffff;
--destructive: #B42318;
--border: #D7D7D1;
--input: #D7D7D1;
--ring: #C63A2B;
--chart-1: #141414;
--chart-2: #f4f4f5;
--chart-3: #C63A2B;
--chart-4: #1F6B4F;
--chart-5: #A15C00;
--sidebar: #FBFBF8;
--sidebar-foreground: #141414;
--sidebar-primary: #141414;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #245D8C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #D7D7D1;
--sidebar-ring: #C63A2B;
--radius: 0;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #141414;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #C63A2B;
--accent-foreground: #ffffff;
--destructive: #B42318;
--border: #303642;
--input: #303642;
--ring: #C63A2B;
--chart-1: #141414;
--chart-2: #f4f4f5;
--chart-3: #C63A2B;
--chart-4: #1F6B4F;
--chart-5: #A15C00;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #141414;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #C63A2B;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #C63A2B;
--radius: 0;
}
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 RasterShadcnKit() {
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">Raster</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": "raster",
"type": "registry:theme",
"cssVars": {
"theme": {
"font-sans": "IBM Plex Sans, Helvetica Neue, Arial, sans-serif",
"font-mono": "IBM Plex Mono, ui-monospace, Menlo, monospace",
"font-heading": "Space Grotesk, Helvetica Neue, Arial, sans-serif",
"radius": "0rem"
},
"light": {
"background": "#F4F4F0",
"foreground": "#141414",
"card": "#FBFBF8",
"card-foreground": "#141414",
"popover": "#FBFBF8",
"popover-foreground": "#141414",
"primary": "#C63A2B",
"primary-foreground": "#FBFBF8",
"secondary": "#ECECE6",
"secondary-foreground": "#141414",
"muted": "#ECECE6",
"muted-foreground": "#6B7178",
"accent": "#141414",
"accent-foreground": "#FBFBF8",
"destructive": "#B42318",
"destructive-foreground": "#FBFBF8",
"border": "#D7D7D1",
"input": "#D7D7D1",
"ring": "#C63A2B",
"radius": "0rem",
"chart-1": "#C63A2B",
"chart-2": "#141414",
"chart-3": "#6B7178",
"chart-4": "#245D8C",
"chart-5": "#1F6B4F"
},
"dark": {
"background": "#141414",
"foreground": "#FBFBF8",
"card": "#1C1C1C",
"card-foreground": "#FBFBF8",
"popover": "#1C1C1C",
"popover-foreground": "#FBFBF8",
"primary": "#C63A2B",
"primary-foreground": "#FBFBF8",
"secondary": "#2A2A2A",
"secondary-foreground": "#FBFBF8",
"muted": "#2A2A2A",
"muted-foreground": "#A5ABB1",
"accent": "#FBFBF8",
"accent-foreground": "#141414",
"destructive": "#E5564A",
"destructive-foreground": "#141414",
"border": "#333333",
"input": "#333333",
"ring": "#C63A2B"
}
},
"visualProfile": {
"id": "raster",
"radius": "square",
"elevation": "flat",
"material": "matte-paper",
"border": "hairline",
"accentUsage": "single-register",
"typography": {
"heading": "Space Grotesk",
"body": "IBM Plex Sans",
"mono": "IBM Plex Mono",
"headingTransform": "none",
"metaTransform": "uppercase",
"letterSpacingDisplay": "-0.02em",
"letterSpacingMeta": "0.14em"
},
"signature": "Origin rule: a 4px vermilion segment + hairline graphite rule introducing each section; oversized grotesk figures in tabular mono.",
"notes": "Zero radius, flat matte surfaces, no glass or shadow, one vermilion accent per region, editorial-table data cards, no accent card edges."
}
}
# Raster shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef6da-17f7-7163-bb34-b4c65092d655`
Slug: `raster`
## Intent
Swiss grid modernism, refined for digital surfaces: a visible modular column lattice, oversized grotesk headlines, mono meta labels, and a single vermilion register mark at the origin of every heading. Order is the only decoration — alignment, scale, and weight do the work colour and ornament do elsewhere.
## 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": "#F4F4F0",
"surface": "#FBFBF8",
"surface_2": "#ECECE6",
"text": "#141414",
"muted": "#6B7178",
"border": "#D7D7D1",
"rule": "#1A1A1A",
"accent": "#C63A2B",
"accent_ink": "#9E2A1E",
"on_accent": "#FBFBF8",
"success": "#1F6B4F",
"warning": "#A15C00",
"error": "#B42318",
"info": "#245D8C"
}
Typography:
{
"base_size": "17px",
"body_font": "IBM Plex Sans",
"heading_font": "Space Grotesk",
"mono_font": "IBM Plex Mono",
"heading_weight": "700",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": 1.55,
"scale_ratio": 1.25,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap"
}
## Visual character to preserve
- A strict 12-column editorial grid governs every region, with modules snapping to visible alignment so whitespace reads as measured rather than atmospheric.
- Oversized Space Grotesk headlines sit flush to the grid with tight breaks; small uppercase IBM Plex Mono meta labels and tabular figures build hierarchy through scale contrast, not colour abundance.
- The origin rule introduces every section: a short 4px vermilion segment at the left origin, then a hairline graphite rule carrying the mono label.
- Flat cool-white panels on warm paper, hairline graphite dividers, and one vermilion register accent per region — never a full-surface fill, gradient, or accent card edge.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"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/raster/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: Anchor on graphite type on a warm-paper field; build sections from grid, rule, and baseline before any accent.; Reserve vermilion for the origin mark, counts, and the one primary action per region.; Keep all figures in tabular IBM Plex Mono; let oversized headlines be the primary graphic device.
- Do not: Do not round corners, float glassy cards, or add gradient/shadow elevation.; Do not centre everything; asymmetry is part of the language.; Do not give a card an accent edge or solve hierarchy with extra accent colours.
## 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 RasterShadcnKit() {
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">Raster</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 12-column editorial grid with 24px gutters and frequent 3/5/7/8 column spans; tablet reduces to 6 columns and mobile collapses to a single stacked flow while preserving rule-based separators. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing.",
"whitespace": "Whitespace is structural and measured in 8px grid increments; strong margins at the page edge, compact rhythmically-separated interior modules divided by rules, not floating gaps.",
"density": "Compact interior with measured breathing room for legibility.",
"responsive": "Every artifact renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column and hides non-essential nav/columns; ultra-wide caps contained content at 1280px and lets only the hero span 100vw.",
"breakpoints": {
"mobile": "390-560",
"tablet": "561-900",
"desktop": "901-1440",
"ultrawide": "1441+"
}
}
{
"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-019ef6da-17f7-7163-bb34-b4c65092d655",
"name": "Raster",
"slug": "raster"
},
"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": [
"A strict 12-column editorial grid governs every region, with modules snapping to visible alignment so whitespace reads as measured rather than atmospheric.",
"Oversized Space Grotesk headlines sit flush to the grid with tight breaks; small uppercase IBM Plex Mono meta labels and tabular figures build hierarchy through scale contrast, not colour abundance.",
"The origin rule introduces every section: a short 4px vermilion segment at the left origin, then a hairline graphite rule carrying the mono label.",
"Flat cool-white panels on warm paper, hairline graphite dividers, and one vermilion register accent per region — never a full-surface fill, gradient, or accent card edge."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"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": "Raster 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": [
"Anchor on graphite type on a warm-paper field; build sections from grid, rule, and baseline before any accent.",
"Reserve vermilion for the origin mark, counts, and the one primary action per region.",
"Keep all figures in tabular IBM Plex Mono; let oversized headlines be the primary graphic device."
],
"dont": [
"Do not round corners, float glassy cards, or add gradient/shadow elevation.",
"Do not centre everything; asymmetry is part of the language.",
"Do not give a card an accent edge or solve hierarchy with extra accent colours."
]
}
}