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 as boards that resolve: a masthead cell-title, editorial body columns, and data set into departure-board rows. Content bands breathe; never box the chrome or trap nav in a pill bar.
Lead with Bricolage display against Schibsted body (extreme weight contrast); Martian mono runs cells, readouts, and micro-labels. Flare marks the one resolved/live/chosen element per view.
Airy editorial reading with tight mono readouts; generous padding above titles; one strict type scale, no one-off sizes.
Cadence chronophotographs: one subject caught across every phase of a move, silver on charcoal, a single molten flare on the resolved frame — woven through the landing as parallax plates and masked reveals.
cadence
stroboscopic long-exposure chronophotography; overlapping motion phases; single warm accent streak; deep charcoal negative space
silver and charcoal monochrome with one molten-orange flare on warm paper
# Vane ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F4F3EE` | | surface | `#FFFFFF` | | surface_solid | `#111318` | | text | `#0B0B0D` | | muted | `#6A6A66` | | border | `rgba(11,11,13,0.10)` | | accent | `#FF5B04` | | accent_2 | `#111318` | | accent_soft | `rgba(255,91,4,0.14)` | | on_accent | `#16130E` | | success | `#2E9E5B` | | warning | `#E8A200` | | error | `#D6402C` | | info | `#3B6FE0` | ### Typography - **Base Size**: 17px - **Body Font**: Schibsted Grotesk - **Heading Font**: Bricolage Grotesque - **Mono Font**: Martian Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Scale Ratio**: 1.28 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Schibsted+Grotesk:wght@400;500;600;700&family=Martian+Mono:wght@400;500;600;700&display=swap ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 2px 8px rgba(11,11,13,0.06) - **Md**: 0 12px 30px rgba(11,11,13,0.10) - **Lg**: 0 26px 60px rgba(11,11,13,0.16) ### Spacing - **Base**: 8px - **Scale**: ["8px","14px","20px","28px","44px","64px","96px","132px"] ### Surfaces - **Treatment**: split-flap board — matte paper ground with charcoal mechanical character-cells and a horizontal flap-seam hairline through each cell - **Card Style**: borderless white cards on warm paper with a mono cell-strip header and foot; the flap-seam hairline recurs as the ornament system - **Bg Pattern**: recurring horizontal flap-seam rule and tight vertical cell columns; chronophotograph motion imagery in Cadence ### Borders - **Default Width**: 0px - **Accent Width**: 2px - **Style**: none - **Character**: borderless; the only lines are the 1px flap-seam hairline through cells and the 2px flare underline links carry — never card borders or accent edges ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(0.2,0.9,0.1,1) - **Philosophy**: mechanical flip resolution — scramble is loading, the flip is the transition, the lock is confirmation; snappy 120-220ms on interaction, watchable on the landing film; settled resolved board is the reduced-motion default ## Rules ### Composition Compose as boards that resolve: a masthead cell-title, editorial body columns, and data set into departure-board rows. Content bands breathe; never box the chrome or trap nav in a pill bar. ### Hierarchy Lead with Bricolage display against Schibsted body (extreme weight contrast); Martian mono runs cells, readouts, and micro-labels. Flare marks the one resolved/live/chosen element per view. ### Density Airy editorial reading with tight mono readouts; generous padding above titles; one strict type scale, no one-off sizes. ### Signature Patterns - Split-flap character cells (slate/lit/paper) that riffle through glyphs and lock; a word resolves in cascade - The flap-seam hairline as the page-wide ornament system — through every cell, readout, and board row - One molten flare fired only on the resolved/live/chosen; dark ink glyph on the flare cell - Borderless white cards on warm paper with a mono cell-strip header/foot — never an accent edge - Departure-board data rows: mono time column, resolving cells, uppercase gate status ## Imagery Direction ### Summary Cadence chronophotographs: one subject caught across every phase of a move, silver on charcoal, a single molten flare on the resolved frame — woven through the landing as parallax plates and masked reveals. ### Pairs With cadence ### Technique stroboscopic long-exposure chronophotography; overlapping motion phases; single warm accent streak; deep charcoal negative space ### Palette silver and charcoal monochrome with one molten-orange flare on warm paper ### Reference Image File Ids - fl-019f8b12-5e5b-7ed1-90fe-4e904b2ace5d - fl-019f8b12-a812-7340-bdd3-2243a1fc08e9 - fl-019f8b12-f1b5-7fa1-866c-99afca461bfc - fl-019f8b13-3b1a-7df2-b419-a9663e5dcdee - fl-019f8b14-9e25-7c73-814c-95f95c00b6c8 - fl-019f8b14-ad96-7db1-b0f3-aa40b513f379
---
version: "alpha"
name: "Vane"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F4F3EE"
surface: "#FFFFFF"
surface_solid: "#111318"
text: "#0B0B0D"
muted: "#6A6A66"
accent: "#FF5B04"
accent_2: "#111318"
on_accent: "#16130E"
success: "#2E9E5B"
warning: "#E8A200"
error: "#D6402C"
info: "#3B6FE0"
typography:
headline-lg:
fontFamily: "Bricolage Grotesque"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Bricolage Grotesque"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Schibsted Grotesk"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Martian Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "16px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "8px"
sm: "14px"
md: "20px"
lg: "28px"
xl: "44px"
2xl: "64px"
3xl: "96px"
4xl: "132px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_solid:
backgroundColor: "{colors.surface_solid}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
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: "#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"
---
# Vane
## Overview
Vane is an agent-curated design language from Katagami.
## 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 | `#F4F3EE` |
| surface | `#FFFFFF` |
| surface_solid | `#111318` |
| text | `#0B0B0D` |
| muted | `#6A6A66` |
| accent | `#FF5B04` |
| accent_2 | `#111318` |
| on_accent | `#16130E` |
| success | `#2E9E5B` |
| warning | `#E8A200` |
| error | `#D6402C` |
| info | `#3B6FE0` |
## Typography
- **Headline-Lg**: Bricolage Grotesque, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Bricolage Grotesque, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Schibsted Grotesk, 17px, weight 400, line-height 1.5.
- **Label-Md**: Martian Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `8px`
- **Sm**: `14px`
- **Md**: `20px`
- **Lg**: `28px`
- **Xl**: `44px`
- **2xl**: `64px`
- **3xl**: `96px`
- **4xl**: `132px`
## Elevation & Depth
### Shadows
- **Sm**: 0 2px 8px rgba(11,11,13,0.06)
- **Md**: 0 12px 30px rgba(11,11,13,0.10)
- **Lg**: 0 26px 60px rgba(11,11,13,0.16)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: split-flap board — matte paper ground with charcoal mechanical character-cells and a horizontal flap-seam hairline through each cell
- **Card Style**: borderless white cards on warm paper with a mono cell-strip header and foot; the flap-seam hairline recurs as the ornament system
- **Bg Pattern**: recurring horizontal flap-seam rule and tight vertical cell columns; chronophotograph motion imagery in Cadence
### Borders
- **Default Width**: 0px
- **Accent Width**: 2px
- **Style**: none
- **Character**: borderless; the only lines are the 1px flap-seam hairline through cells and the 2px flare underline links carry — never card borders or accent edges
## Components
### Composition
Compose as boards that resolve: a masthead cell-title, editorial body columns, and data set into departure-board rows. Content bands breathe; never box the chrome or trap nav in a pill bar.
### Hierarchy
Lead with Bricolage display against Schibsted body (extreme weight contrast); Martian mono runs cells, readouts, and micro-labels. Flare marks the one resolved/live/chosen element per view.
### Density
Airy editorial reading with tight mono readouts; generous padding above titles; one strict type scale, no one-off sizes.
### Signature Patterns
- Split-flap character cells (slate/lit/paper) that riffle through glyphs and lock; a word resolves in cascade
- The flap-seam hairline as the page-wide ornament system — through every cell, readout, and board row
- One molten flare fired only on the resolved/live/chosen; dark ink glyph on the flare cell
- Borderless white cards on warm paper with a mono cell-strip header/foot — never an accent edge
- Departure-board data rows: mono time column, resolving cells, uppercase gate status
## 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-019f8b1b-dae8-7991-ae9b-9bf064aea581/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.
## Imagery Direction
### Summary
Cadence chronophotographs: one subject caught across every phase of a move, silver on charcoal, a single molten flare on the resolved frame — woven through the landing as parallax plates and masked reveals.
### Pairs With
cadence
### Technique
stroboscopic long-exposure chronophotography; overlapping motion phases; single warm accent streak; deep charcoal negative space
### Palette
silver and charcoal monochrome with one molten-orange flare on warm paper
### Reference Image File Ids
- fl-019f8b12-5e5b-7ed1-90fe-4e904b2ace5d
- fl-019f8b12-a812-7340-bdd3-2243a1fc08e9
- fl-019f8b12-f1b5-7fa1-866c-99afca461bfc
- fl-019f8b13-3b1a-7df2-b419-a9663e5dcdee
- fl-019f8b14-9e25-7c73-814c-95f95c00b6c8
- fl-019f8b14-ad96-7db1-b0f3-aa40b513f379
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "vane",
"type": "registry:theme",
"title": "Vane shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F4F3EE",
"foreground": "#0B0B0D",
"card": "#FFFFFF",
"card-foreground": "#0B0B0D",
"popover": "#FFFFFF",
"popover-foreground": "#0B0B0D",
"primary": "#0B0B0D",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#6A6A66",
"muted-foreground": "#0B0B0D",
"accent": "#FF5B04",
"accent-foreground": "#ffffff",
"destructive": "#D6402C",
"border": "rgba(11,11,13,0.10)",
"input": "rgba(11,11,13,0.10)",
"ring": "#FF5B04",
"chart-1": "#0B0B0D",
"chart-2": "#f4f4f5",
"chart-3": "#FF5B04",
"chart-4": "#2E9E5B",
"chart-5": "#E8A200",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#0B0B0D",
"sidebar-primary": "#0B0B0D",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#3B6FE0",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "rgba(11,11,13,0.10)",
"sidebar-ring": "#FF5B04",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#0B0B0D",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#FF5B04",
"accent-foreground": "#ffffff",
"destructive": "#D6402C",
"border": "#303642",
"input": "#303642",
"ring": "#FF5B04",
"chart-1": "#0B0B0D",
"chart-2": "#f4f4f5",
"chart-3": "#FF5B04",
"chart-4": "#2E9E5B",
"chart-5": "#E8A200",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#0B0B0D",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#FF5B04",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#FF5B04",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019f8b1b-dae8-7991-ae9b-9bf064aea581",
"slug": "vane",
"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_soft",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"success",
"surface",
"surface_solid",
"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"
],
"shadows": [
"lg",
"md",
"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 Vaneand 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: #F4F3EE;
--foreground: #0B0B0D;
--card: #FFFFFF;
--card-foreground: #0B0B0D;
--popover: #FFFFFF;
--popover-foreground: #0B0B0D;
--primary: #0B0B0D;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #6A6A66;
--muted-foreground: #0B0B0D;
--accent: #FF5B04;
--accent-foreground: #ffffff;
--destructive: #D6402C;
--border: rgba(11,11,13,0.10);
--input: rgba(11,11,13,0.10);
--ring: #FF5B04;
--chart-1: #0B0B0D;
--chart-2: #f4f4f5;
--chart-3: #FF5B04;
--chart-4: #2E9E5B;
--chart-5: #E8A200;
--sidebar: #FFFFFF;
--sidebar-foreground: #0B0B0D;
--sidebar-primary: #0B0B0D;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #3B6FE0;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: rgba(11,11,13,0.10);
--sidebar-ring: #FF5B04;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #0B0B0D;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #FF5B04;
--accent-foreground: #ffffff;
--destructive: #D6402C;
--border: #303642;
--input: #303642;
--ring: #FF5B04;
--chart-1: #0B0B0D;
--chart-2: #f4f4f5;
--chart-3: #FF5B04;
--chart-4: #2E9E5B;
--chart-5: #E8A200;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #0B0B0D;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #FF5B04;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #FF5B04;
--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 VaneShadcnKit() {
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">Vane</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": "vane",
"type": "registry:theme",
"author": "katagami-agent",
"title": "Vane — Split-flap kinetic typography",
"description": "A high-contrast monochrome design language where typography is the interface and meaning resolves like a split-flap board: charcoal slate cells, warm paper, and a single molten flare on the resolved. Bricolage display, Schibsted body, Martian mono cells.",
"cssVars": {
"theme": {
"font-sans": "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif",
"font-mono": "Martian Mono, ui-monospace, monospace",
"font-display": "Bricolage Grotesque, ui-sans-serif, sans-serif",
"radius": "16px"
},
"light": {
"background": "#F4F3EE",
"foreground": "#0B0B0D",
"card": "#FFFFFF",
"card-foreground": "#0B0B0D",
"popover": "#FFFFFF",
"popover-foreground": "#0B0B0D",
"primary": "#FF5B04",
"primary-foreground": "#16130E",
"secondary": "#111318",
"secondary-foreground": "#EDEEF2",
"muted": "#ECEAE3",
"muted-foreground": "#6A6A66",
"accent": "#FFE7D8",
"accent-foreground": "#7A2C05",
"destructive": "#D6402C",
"destructive-foreground": "#FFFFFF",
"border": "rgba(11,11,13,0.10)",
"input": "rgba(11,11,13,0.14)",
"ring": "#FF5B04",
"radius": "16px",
"chart-1": "#FF5B04",
"chart-2": "#111318",
"chart-3": "#2E9E5B",
"chart-4": "#E8A200",
"chart-5": "#3B6FE0"
},
"dark": {
"background": "#0E0F13",
"foreground": "#EDEEF2",
"card": "#15171C",
"card-foreground": "#EDEEF2",
"popover": "#15171C",
"popover-foreground": "#EDEEF2",
"primary": "#FF5B04",
"primary-foreground": "#16130E",
"secondary": "#20232B",
"secondary-foreground": "#EDEEF2",
"muted": "#1A1C22",
"muted-foreground": "#9A9CA3",
"accent": "#2A1B10",
"accent-foreground": "#FFB27A",
"destructive": "#E5573F",
"destructive-foreground": "#0E0F13",
"border": "rgba(237,238,242,0.12)",
"input": "rgba(237,238,242,0.16)",
"ring": "#FF5B04",
"radius": "16px",
"chart-1": "#FF5B04",
"chart-2": "#C9CBD2",
"chart-3": "#2E9E5B",
"chart-4": "#E8A200",
"chart-5": "#3B6FE0"
}
},
"visualProfile": {
"family": "editorial-mechanical grotesque",
"material": "split-flap character cells — charcoal slate leaves with a flap-seam hairline, on warm paper",
"contour": "hard-edged cells (radius 0) set into soft 24px cards",
"border": "borderless; the only line is the flap-seam hairline",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "mechanical flip resolution — scramble, flip, lock; snappy 120-220ms",
"density": "airy editorial with tight mono readouts",
"accents": ["#FF5B04", "#111318"]
},
"notes": "Primary is the molten flare (#FF5B04) fired only on the resolved/live/chosen; secondary is the charcoal slate board. Dark text on flare is intentional (dark glyph on an amber flap). No borders anywhere except the 1px flap-seam hairline; never give a card an accent edge. Radii from {0,16,24,9999}; body 17px floor; three type roles only (Bricolage display, Schibsted body, Martian mono)."
}
# Vane — shadcn/ui Components
> Component recipes for **Vane**, the split-flap kinetic-typography design language.
> Format: `component-recipes-v1`. Author: `katagami-agent`.
Vane sets language in mechanical character cells: charcoal slate leaves split by a flap-seam
hairline, on warm paper, with a single molten flare (`#FF5B04`) that fires only on the resolved,
the live, the chosen. Typography is the interface; motion is the reveal that confirms a value.
## ShadSync visual profile
- **Family** — editorial-mechanical grotesque (Bricolage display, Schibsted body, Martian mono).
- **Material** — split-flap character cells; a flap-seam hairline recurs through every cell,
readout, and board row as the page-wide ornament system.
- **Contour** — hard-edged cells (radius `0`) set into soft `24px` cards; pills at `9999px`.
- **Border** — borderless. The only line is the 1px flap-seam hairline; never give a card, input,
or nav an accent edge.
- **Underlay / grain / sticker badges** — none. Clean paper and slate; a single flare.
- **Motion** — mechanical flip resolution: scramble (loading), flip (transition), lock
(confirmation). Snappy 120–220ms; respect `prefers-reduced-motion`.
- **Density** — airy editorial reading, with tight Martian-mono readouts and labels.
- **Accents** — flare `#FF5B04` (primary, like a highlighter) and slate `#111318` (the board).
Map the profile onto shadcn tokens: `--primary` = flare, `--primary-foreground` = ink `#16130E`
(dark glyph on an amber flap), `--secondary` = slate, `--ring` = flare, `--radius` = `16px`.
Semantic hues (`success #2E9E5B`, `warning #E8A200`, `destructive #D6402C`, `info #3B6FE0`) stay
small and never become visually primary.
## Signature component recipes
The split-flap cell recolours through every primitive. A few load-bearing ones:
### Button
- **Primary** — flare background, ink `#16130E` label, pill (`rounded-full`), one per view; lifts
`translateY(-2px)` on hover. `bg-primary text-primary-foreground rounded-full px-5 h-11`.
- **Secondary** — slate background, silver label. `bg-secondary text-secondary-foreground`.
- **Ghost** — transparent with a 1.5px flare inset ring on hover; no permanent border.
- **Destructive** — `bg-destructive text-white` for discard/jam actions only.
- Text never wraps; label centred; every button shares one height.
### Input, Textarea, Select
Borderless with an `inset 0 0 0 1.5px var(--input)` ring that becomes a 2px flare ring on focus.
No visible browser defaults; the select caret is an inline SVG. A code field can render as a row of
split-flap cells (`.cell`) that resolve as the user types.
### Card
Borderless white on paper, `rounded-3xl` (24px), soft geometry-matched shadow. Header carries a mono
label and a status chip; a strip of cells sits at the foot. Never nest cards; never add an edge.
### Badge / Chip
Pill, mono `11px` uppercase, `0.12em` tracking. `flare` (accent-soft wash), `slate`, and semantic
variants. Text never wraps.
### Table
Row rhythm from the flap-seam hairline (`inset 0 1px 0 var(--border)`), never full borders. A mono
index or time column on the left (type, not a bar); status pills in the last column.
### Tabs, Switch, Slider, Tooltip, Dialog, Sheet, Dropdown-menu, Separator
Pill tabs (active = slate fill); flare switch; flare slider fill with a slate knob; slate tooltip
with a mono label; dialogs and sheets are borderless `24px` surfaces with the soft `lg` shadow; the
separator is the flap-seam hairline.
## Preview shots
Three renderable product scenes ship in `preview-shots.json` (schema `renderable-v1`): a live
departure board with the cell mechanic, a board-operations console with KPI tiles and a resolve
cascade, and an editorial reader card set. Each names the primitives it must show and what to avoid
(no borders, no second accent, no wrapped control text).
## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
export function ResolvedCard() {
return (
<Card className="rounded-3xl border-0 shadow-md">
<CardHeader className="flex flex-row items-center justify-between">
<Badge className="rounded-full bg-[color:var(--accent)] text-[color:var(--accent-foreground)] font-mono uppercase tracking-widest">
Locked
</Badge>
<span className="font-mono text-xs text-muted-foreground">08:55</span>
</CardHeader>
<CardContent>
<CardTitle className="font-[Bricolage_Grotesque] text-2xl">Confirmed intent</CardTitle>
<p className="mt-2 text-muted-foreground">
The lit cell fires once, then rests. One flare per decision.
</p>
<Button className="mt-5 rounded-full bg-primary text-primary-foreground h-11 px-5">
Resolve the board
</Button>
</CardContent>
</Card>
)
}
```
All primitives live under `@/components/ui/` and read the theme from `export.json` (registry
theme `vane`). Keep radius at `16px`, body at 17px, three type roles only, and the flare rationed
to the resolved.
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"author": "katagami-agent",
"requiresVisualProfile": true,
"language": { "id": "vane", "name": "Vane", "slug": "vane" },
"installCommand": "npx shadcn@latest add https://katagami.ai/r/vane.json",
"primitives": [
"button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs",
"badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"
],
"identityNotes": [
"Typography is the interface; meaning resolves like a split-flap board — cells riffle and lock.",
"One molten flare (#FF5B04) fires only on the resolved, the live, the chosen; slate (#111318) is the board.",
"Dark ink on flare is intentional — a dark glyph on an amber flap; never white-on-flare.",
"Borderless everywhere; the only line is the 1px flap-seam hairline running through cells and rows.",
"Three type roles only: Bricolage display, Schibsted body, Martian mono cells and labels.",
"Radii from {0,16,24,9999}: hard-edged cells inside soft 24px cards, pill controls."
],
"visualProfile": {
"family": "editorial-mechanical grotesque",
"material": "split-flap character cells — charcoal slate leaves with a flap-seam hairline, on warm paper",
"contour": "hard-edged cells (radius 0) set into soft 24px cards",
"border": "borderless; only the flap-seam hairline",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "mechanical flip resolution — scramble, flip, lock; snappy 120-220ms",
"density": "airy editorial with tight mono readouts",
"accents": ["#FF5B04", "#111318"]
},
"tokens": {
"background": "#F4F3EE",
"foreground": "#0B0B0D",
"card": "#FFFFFF",
"primary": "#FF5B04",
"primary-foreground": "#16130E",
"secondary": "#111318",
"secondary-foreground": "#EDEEF2",
"muted": "#ECEAE3",
"muted-foreground": "#6A6A66",
"border": "rgba(11,11,13,0.10)",
"ring": "#FF5B04",
"radius": "16px",
"success": "#2E9E5B",
"warning": "#E8A200",
"destructive": "#D6402C",
"info": "#3B6FE0",
"font-display": "Bricolage Grotesque",
"font-sans": "Schibsted Grotesk",
"font-mono": "Martian Mono"
},
"shots": [
{
"id": "departure-board",
"title": "Live departure board",
"viewport": "desktop",
"primitives": ["card", "badge", "table", "separator", "tooltip"],
"composition": "A dark slate board panel listing timed rows; each row is a set of split-flap cells with a mono time on the left and a gate status on the right. One row is fully lit in flare (resolved); a header badge reads Riffling.",
"mustShow": [
"split-flap character cells with the flap-seam hairline",
"one fully-lit flare row marking the resolved set",
"mono time column and uppercase gate labels",
"borderless card with a status chip in the header"
],
"avoid": ["card borders or accent edges", "white text on flare", "a second accent hue", "wrapped chip text"],
"scene": {
"headline": "The morning set is resolving",
"description": "Forty-two cells across seven gates — watch each board riffle and lock.",
"rows": [
{ "time": "07:42", "word": "MORNING", "gate": "Gate 07", "state": "Live" },
{ "time": "08:10", "word": "STANDBY", "gate": "Gate 12", "state": "Held" },
{ "time": "08:55", "word": "RESOLVED", "gate": "Gate 21", "state": "Locked" },
{ "time": "09:20", "word": "BOARDING", "gate": "Gate 04", "state": "Live" }
]
}
},
{
"id": "ops-console",
"title": "Board operations console",
"viewport": "desktop",
"primitives": ["card", "tabs", "table", "badge", "switch", "slider", "separator"],
"composition": "A dashboard: four KPI tiles across the top (no left bars), a resolve-cascade bar chart, a set-completion flip meter, and a gate-status table with status pills. Flare appears only on live/locked states and the meter fill.",
"mustShow": [
"KPI tiles with mono labels and display numerals",
"flip-cascade progress meter filled in flare",
"gate-status table with pill states (Live, Riffle, Locked, Held)",
"airy borderless panels on warm paper"
],
"avoid": ["borders between table rows (use the hairline)", "gradients", "emoji or glyph arrows in deltas", "oversized pillowy buttons"],
"scene": {
"headline": "Board operations — live",
"description": "Cells locked, boards live, average resolve time, and jams at a glance.",
"stats": [
{ "label": "Cells locked", "value": "1,284 / 1,340", "delta": "96% set — nominal" },
{ "label": "Boards live", "value": "7", "delta": "3 resolving · 4 locked" },
{ "label": "Avg resolve", "value": "1.9s", "delta": "0.3s faster today" },
{ "label": "Jams", "value": "1", "delta": "gate 12 flap stuck" }
]
}
},
{
"id": "editorial-reader",
"title": "Editorial reader card set",
"viewport": "desktop",
"primitives": ["card", "button", "badge", "input", "dropdown-menu", "checkbox"],
"composition": "Three borderless white cards on paper, each with a status chip, a Bricolage headline, body copy, and a foot strip of cells. A primary flare button and a quiet ghost button sit below; a search input resolves its value into cells.",
"mustShow": [
"borderless cell-headed cards with a foot cell strip",
"one primary flare button and quieter secondary/ghost buttons",
"a search input that reads its value as split-flap cells",
"Bricolage display headline against Schibsted body"
],
"avoid": ["a second accent color", "card borders", "centered body paragraphs", "wrapped button labels"],
"scene": {
"headline": "Type is the interface",
"description": "Every screen is a typographic composition where the flip confirms the intent.",
"fields": [
{ "label": "Board title", "value": "Departures" },
{ "label": "Gate", "value": "Gate 07 — Main hall" },
{ "label": "Code", "value": "VANE7" }
]
}
}
],
"componentRecipes": [
{ "primitive": "button", "intent": "Primary action fired in flare with an ink label; one per view, pill height, label never wraps." },
{ "primitive": "button", "intent": "Secondary slate button and a ghost button whose flare inset ring appears only on hover." },
{ "primitive": "card", "intent": "Borderless white card on paper, 24px radius, mono label plus status chip in the header and a foot strip of cells." },
{ "primitive": "input", "intent": "Borderless field with a 1.5px inset ring that becomes a 2px flare ring on focus; no browser defaults." },
{ "primitive": "textarea", "intent": "Same ring treatment, 1.5 line-height, resize vertical; used for board announcements." },
{ "primitive": "select", "intent": "Custom inline-SVG caret, pill-free rounded field, flare focus ring; gate picker." },
{ "primitive": "dialog", "intent": "Borderless 24px surface with the soft lg shadow; title in Bricolage, actions as one primary flare button." },
{ "primitive": "sheet", "intent": "Side sheet on slate for board settings; flap-seam hairline separators, mono section labels." },
{ "primitive": "tabs", "intent": "Pill tabs; active tab is a slate fill with silver label; others quiet muted text." },
{ "primitive": "badge", "intent": "Mono uppercase pill chips: flare (live/resolved), slate (held), semantic; text never wraps." },
{ "primitive": "separator", "intent": "The flap-seam hairline (inset 0 1px 0 border) — the only line in the system." },
{ "primitive": "checkbox", "intent": "Rounded square that fills flare with an ink check when set; flare focus ring." },
{ "primitive": "switch", "intent": "Flare track when on with a paper knob; slate-tinted track when off." },
{ "primitive": "slider", "intent": "Flare fill on a slate-tinted track with a slate knob; riffle-speed control." },
{ "primitive": "tooltip", "intent": "Slate bubble with a mono label showing cell status (SET 70% · 7 OF 10 LOCKED)." },
{ "primitive": "dropdown-menu", "intent": "Borderless paper menu, 16px radius, hairline separators, flare hover state on the active item." },
{ "primitive": "table", "intent": "Hairline row rhythm, mono index/time column on the left, status pills on the right; no full borders." },
{ "primitive": "badge", "intent": "Split-flap cell strip as a badge — a tiny row of resolving cells for inline status." }
],
"qualityRules": {
"do": [
"Ration flare to the resolved, the live, and the chosen — one detonation per view.",
"Keep the flap-seam hairline as the single page-wide ornament system.",
"Use dark ink (#16130E) on flare; keep body at 17px and three type roles only.",
"Set hard-edged cells (radius 0) inside soft 24px cards; pills at 9999px.",
"Let navigation breathe as type and space, never a boxed pill bar."
],
"dont": [
"Add borders or give any card an accent edge (top, side, or bottom).",
"Use white text on flare, or introduce a second bright accent.",
"Wrap button or chip text, or let a control clip its label.",
"Use gradients, grain, sticker badges, or glyph arrows (▲▼) in copy.",
"Nest cards or trap the nav in a floating rounded card."
]
}
}