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 every screen as a cold window divided into tall vertical panes by muntins. Content lives in cleared lanes the runnels have wiped through the fog; between runnels the ground stays misted. One runnel is beaded coral to mark the live element. Avoid three equal free cards; panes are full-height vertical lanes, not floating sheets.
Hierarchy comes from which lane is cleared and which runnel is beaded, plus typographic voice. Space Grotesk sets the chilled display voice; Hanken Grotesk carries cool running prose; Spline Sans Mono carries times, prices and readings. The single coral bead marks the one active thing; everything else stays quiet aqua.
Low and breathable overall, with compact factual clusters inside cleared panes — pill rows and small mono readings at 4 to 8px gaps, major regions separated by 64 to 128px. Whitespace is cold active material, never filled with decorative glass.
The runnel is the one ownable mechanic: a vertical aqua condensation track that connects grouped elements, clears the lane it passes, underlines the active tab, and runs down the dashboard rail. The coral bead rides at its head to mark the single live element. Supported by readable cleared panes with a thicker scrim behind dense copy and a controlled three-pop sorbet set.
Desktop uses a contained max-width (1200px, 1380px ultra-wide) with vertical muntin lanes. The dashboard adds a 236px muntin rail carrying nav and a spine runnel; the embodiment and landing use a 3-lane windowpane grid split by runnel gutters.
Whitespace is cold active material: leave large blueberry-ground gutters around cleared panes; never fill empty areas with icons, cards, or decorative glass.
Low overall density with compact factual clusters; labels and metrics at 4 to 8px gaps, major regions separated by 64 to 128px.
Single-column stack on mobile with the runnel becoming a left spine; non-essential nav links and table columns hidden; minmax(0,1fr) columns with min-width:0 children so the muntin grid never overflows.
dewglaze
Subjects seen through frosted misted cold glass beaded with luminous dew, milky high-key sorbet light, with long vertical condensation runnels carving clear sharp tracks down the pane so the subject reads crisp inside the runnels and soft-veiled between them.
One full-bleed hero of a chilled blueberry-lime-sorbet pane crossed by condensation runnels, with a foggier cleared lane on the left where the headline reads; feature and empty-state imagery veils the subject more heavily between runnels.
# Runnel ## Philosophy Runnel is a reimagination of the Dew Candy brief, conceived from the concept rather than from its faithful refinement. Where Dew Candy asked for readable glass and candy freshness, Runnel reads the phenomenon physically: on a cold pane dew does not just bead and sit, it runs. A condensation track slides down a chilled blueberry-sorbet pane, clears a readable lane through the fog, and beads coral where one thing is active. The ground is a saturated cold colour field, not white and not a nocturne; the layout is a strict windowpane grid of tall vertical lanes split by runnel gutters; the type is a chilled grotesque, not a warm serif. ### Values - the runnel as the one ownable mechanic — a vertical condensation track that connects grouped elements and clears the lane it passes - the coral bead as the single active mark, riding at the head of the runnel, never a static dot floating on a sheet - a cold saturated coloured ground as the primary identity lever — the flavoured sorbet block you look through - legibility before atmosphere — frost-white text holds AA on every cold pane, dense copy sits on a thicker cleared pane - the windowpane (muntin) grid — measured vertical lanes, structured and gridded, not floating asymmetry - three sorbet pops used like highlighters; semantic colours stay cool and quiet ### Anti-Values - reading as the refinement recolored — a palette or ground swap with the same mechanic, layout and type - one floating frosted sheet plus quiet companions (that is the faithful editorial spread, not Runnel) - a warm white mist ground or a warm display serif - toy-like bubble UI, oversized candy blobs, generic pastel SaaS cards - a single accent edge on a card, or a nav trapped in a floating pill - low-contrast text on busy frosted blur, or a lazy full-screen scrim over the hero ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#1A2A4A` | | bg-2 | `#14223D` | | surface | `#233B62` | | surface-2 | `#2C4877` | | text | `#EAF2FB` | | muted | `#9DB4D2` | | border | `rgba(214,232,246,0.12)` | | accent | `#FF8A6B` | | on-accent | `#2A0E08` | | accent-2 | `#5FE3D0` | | accent-3 | `#C9A8FF` | | success | `#6FE0A8` | | warning | `#F3C969` | | error | `#FF8480` | | info | `#7CC6F0` | ### Typography - **Base Size**: 17px - **Body Font**: Hanken Grotesk - **Heading Font**: Space Grotesk - **Mono Font**: Spline Sans Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.6 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@500;600&display=swap ### Radii - **None**: 0px - **Sm**: 16px - **Md**: 24px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 1px 2px rgba(8,16,32,0.30), 0 8px 22px rgba(8,16,32,0.28) - **Md**: 0 18px 52px rgba(8,16,32,0.40), inset 0 1px 0 rgba(255,255,255,0.10) - **Lg**: 0 34px 100px rgba(8,16,32,0.50), inset 0 1px 0 rgba(255,255,255,0.12) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Ground**: cold saturated blueberry-indigo #1A2A4A — a flavoured sorbet block you look through, with two soft cold atmospheric washes (aqua, violet) and never rainbow banding - **Card Style**: a cleared frosted pane #233B62 cut from the cold glass, 16/24px radius, soft cold vertical shadow and an inset top highlight, no border; a 2px aqua runnel down a muntin marks grouped or active panes - **Treatment**: the runnel (a vertical aqua condensation track) connects elements and clears the lane it passes; the coral bead (radial gloss droplet) rides its head where one thing is active; dense copy thickens the pane so the fog never costs contrast ### Borders - **Default Width**: 1px - **Style**: near-invisible cold hairline rgba(214,232,246,0.12); never a card edge accent - **Character**: borders are almost absent — hierarchy is space, the runnel track, surface opacity and the cold vertical shadow ### Motion - **Duration**: 220ms - **Easing**: cubic-bezier(.2,.7,.2,1) - **Philosophy**: a droplet sliding then settling — a small downward slide and a short reveal, never bouncing candy. The page settles by default and reveals on top; reduced motion stills everything. ## Rules ### Composition Compose every screen as a cold window divided into tall vertical panes by muntins. Content lives in cleared lanes the runnels have wiped through the fog; between runnels the ground stays misted. One runnel is beaded coral to mark the live element. Avoid three equal free cards; panes are full-height vertical lanes, not floating sheets. ### Hierarchy Hierarchy comes from which lane is cleared and which runnel is beaded, plus typographic voice. Space Grotesk sets the chilled display voice; Hanken Grotesk carries cool running prose; Spline Sans Mono carries times, prices and readings. The single coral bead marks the one active thing; everything else stays quiet aqua. ### Density Low and breathable overall, with compact factual clusters inside cleared panes — pill rows and small mono readings at 4 to 8px gaps, major regions separated by 64 to 128px. Whitespace is cold active material, never filled with decorative glass. ### Signature The runnel is the one ownable mechanic: a vertical aqua condensation track that connects grouped elements, clears the lane it passes, underlines the active tab, and runs down the dashboard rail. The coral bead rides at its head to mark the single live element. Supported by readable cleared panes with a thicker scrim behind dense copy and a controlled three-pop sorbet set. ## Layout ### Grid Desktop uses a contained max-width (1200px, 1380px ultra-wide) with vertical muntin lanes. The dashboard adds a 236px muntin rail carrying nav and a spine runnel; the embodiment and landing use a 3-lane windowpane grid split by runnel gutters. ### Whitespace Whitespace is cold active material: leave large blueberry-ground gutters around cleared panes; never fill empty areas with icons, cards, or decorative glass. ### Density Low overall density with compact factual clusters; labels and metrics at 4 to 8px gaps, major regions separated by 64 to 128px. ### Responsive Single-column stack on mobile with the runnel becoming a left spine; non-essential nav links and table columns hidden; minmax(0,1fr) columns with min-width:0 children so the muntin grid never overflows. ### Breakpoints - **Mobile**: 0-600px - **Tablet**: 601-920px - **Desktop**: 921px+ - **Ultrawide**: 1700px+ ## Guidance ### Do - Cut every surface as a cleared pane from the cold blueberry-sorbet glass; keep frost-white text at AA on every pane. - Run one aqua runnel down a muntin to connect grouped elements; bead it coral only where one thing is live. - Build layouts from tall vertical panes split by runnel gutters — a windowpane grid, not floating sheets. - Reserve the coral bead for active or primary moments; keep the rest quiet aqua and muted. - Keep body text at 17px with -0.02em tracking; let the cold ground carry most of the page. - Thicken the pane behind dense copy so the condensation veil reads as atmosphere, never noise. ### Don't - Do not float one big frosted sheet with quiet companions — that is the faithful refinement, not Runnel. - Do not default to a warm white mist ground or a warm display serif. - Do not put a single accent edge on a card, or trap the nav in a floating pill or card. - Do not use rainbow palettes, loud gradients, or more than three expressive pops on screen. - Do not place low-contrast text on busy frosted blur, or scrim the whole hero with a lazy gradient. - Do not make bubbles, toy capsules, or oversized candy blobs. ### Accessibility Body text meets WCAG AA against its immediate cold pane; cleared panes thicken behind text smaller than 18px. Focus states use a visible aqua ring plus the runnel as a non-colour cue. The settled state renders with no JavaScript; motion respects prefers-reduced-motion. ## Imagery Direction ### Pairs With dewglaze ### Summary Subjects seen through frosted misted cold glass beaded with luminous dew, milky high-key sorbet light, with long vertical condensation runnels carving clear sharp tracks down the pane so the subject reads crisp inside the runnels and soft-veiled between them. ### Subjects - ripe blueberries behind cold glass - a wedge of blueberry-lime sorbet - frost on a chilled window - condensation runnels on a cold pane - a single coral-melon highlight through the fog ### Usage One full-bleed hero of a chilled blueberry-lime-sorbet pane crossed by condensation runnels, with a foggier cleared lane on the left where the headline reads; feature and empty-state imagery veils the subject more heavily between runnels.
---
version: "alpha"
name: "Runnel"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#1A2A4A"
bg-2: "#14223D"
surface: "#233B62"
surface-2: "#2C4877"
text: "#EAF2FB"
muted: "#9DB4D2"
accent: "#FF8A6B"
on-accent: "#2A0E08"
accent-2: "#5FE3D0"
accent-3: "#C9A8FF"
success: "#6FE0A8"
warning: "#F3C969"
error: "#FF8480"
info: "#7CC6F0"
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: "Hanken Grotesk"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "-0.02em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "16px"
md: "24px"
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"
step-9: "128px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-bg-2:
backgroundColor: "{colors.bg-2}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface-2:
backgroundColor: "{colors.surface-2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-on-accent:
backgroundColor: "{colors.on-accent}"
color-reference-accent-2:
backgroundColor: "{colors.accent-2}"
color-reference-accent-3:
backgroundColor: "{colors.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: "#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"
---
# Runnel
## Overview
Runnel is a reimagination of the Dew Candy brief, conceived from the concept rather than from its faithful refinement. Where Dew Candy asked for readable glass and candy freshness, Runnel reads the phenomenon physically: on a cold pane dew does not just bead and sit, it runs. A condensation track slides down a chilled blueberry-sorbet pane, clears a readable lane through the fog, and beads coral where one thing is active. The ground is a saturated cold colour field, not white and not a nocturne; the layout is a strict windowpane grid of tall vertical lanes split by runnel gutters; the type is a chilled grotesque, not a warm serif.
### Values
- the runnel as the one ownable mechanic — a vertical condensation track that connects grouped elements and clears the lane it passes
- the coral bead as the single active mark, riding at the head of the runnel, never a static dot floating on a sheet
- a cold saturated coloured ground as the primary identity lever — the flavoured sorbet block you look through
- legibility before atmosphere — frost-white text holds AA on every cold pane, dense copy sits on a thicker cleared pane
- the windowpane (muntin) grid — measured vertical lanes, structured and gridded, not floating asymmetry
- three sorbet pops used like highlighters; semantic colours stay cool and quiet
### Anti-Values
- reading as the refinement recolored — a palette or ground swap with the same mechanic, layout and type
- one floating frosted sheet plus quiet companions (that is the faithful editorial spread, not Runnel)
- a warm white mist ground or a warm display serif
- toy-like bubble UI, oversized candy blobs, generic pastel SaaS cards
- a single accent edge on a card, or a nav trapped in a floating pill
- low-contrast text on busy frosted blur, or a lazy full-screen scrim over the hero
## 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 | `#1A2A4A` |
| bg-2 | `#14223D` |
| surface | `#233B62` |
| surface-2 | `#2C4877` |
| text | `#EAF2FB` |
| muted | `#9DB4D2` |
| accent | `#FF8A6B` |
| on-accent | `#2A0E08` |
| accent-2 | `#5FE3D0` |
| accent-3 | `#C9A8FF` |
| success | `#6FE0A8` |
| warning | `#F3C969` |
| error | `#FF8480` |
| info | `#7CC6F0` |
## 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**: Hanken Grotesk, 17px, weight 400, line-height 1.6.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `128px`
### Grid
Desktop uses a contained max-width (1200px, 1380px ultra-wide) with vertical muntin lanes. The dashboard adds a 236px muntin rail carrying nav and a spine runnel; the embodiment and landing use a 3-lane windowpane grid split by runnel gutters.
### Whitespace
Whitespace is cold active material: leave large blueberry-ground gutters around cleared panes; never fill empty areas with icons, cards, or decorative glass.
### Density
Low overall density with compact factual clusters; labels and metrics at 4 to 8px gaps, major regions separated by 64 to 128px.
### Responsive
Single-column stack on mobile with the runnel becoming a left spine; non-essential nav links and table columns hidden; minmax(0,1fr) columns with min-width:0 children so the muntin grid never overflows.
### Breakpoints
- **Mobile**: 0-600px
- **Tablet**: 601-920px
- **Desktop**: 921px+
- **Ultrawide**: 1700px+
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 2px rgba(8,16,32,0.30), 0 8px 22px rgba(8,16,32,0.28)
- **Md**: 0 18px 52px rgba(8,16,32,0.40), inset 0 1px 0 rgba(255,255,255,0.10)
- **Lg**: 0 34px 100px rgba(8,16,32,0.50), inset 0 1px 0 rgba(255,255,255,0.12)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Ground**: cold saturated blueberry-indigo #1A2A4A — a flavoured sorbet block you look through, with two soft cold atmospheric washes (aqua, violet) and never rainbow banding
- **Card Style**: a cleared frosted pane #233B62 cut from the cold glass, 16/24px radius, soft cold vertical shadow and an inset top highlight, no border; a 2px aqua runnel down a muntin marks grouped or active panes
- **Treatment**: the runnel (a vertical aqua condensation track) connects elements and clears the lane it passes; the coral bead (radial gloss droplet) rides its head where one thing is active; dense copy thickens the pane so the fog never costs contrast
### Borders
- **Default Width**: 1px
- **Style**: near-invisible cold hairline rgba(214,232,246,0.12); never a card edge accent
- **Character**: borders are almost absent — hierarchy is space, the runnel track, surface opacity and the cold vertical shadow
## Components
### Composition
Compose every screen as a cold window divided into tall vertical panes by muntins. Content lives in cleared lanes the runnels have wiped through the fog; between runnels the ground stays misted. One runnel is beaded coral to mark the live element. Avoid three equal free cards; panes are full-height vertical lanes, not floating sheets.
### Hierarchy
Hierarchy comes from which lane is cleared and which runnel is beaded, plus typographic voice. Space Grotesk sets the chilled display voice; Hanken Grotesk carries cool running prose; Spline Sans Mono carries times, prices and readings. The single coral bead marks the one active thing; everything else stays quiet aqua.
### Density
Low and breathable overall, with compact factual clusters inside cleared panes — pill rows and small mono readings at 4 to 8px gaps, major regions separated by 64 to 128px. Whitespace is cold active material, never filled with decorative glass.
### Signature
The runnel is the one ownable mechanic: a vertical aqua condensation track that connects grouped elements, clears the lane it passes, underlines the active tab, and runs down the dashboard rail. The coral bead rides at its head to mark the single live element. Supported by readable cleared panes with a thicker scrim behind dense copy and a controlled three-pop sorbet set.
## 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-019ef800-0e9b-72f2-aa77-eb9e721637c4/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 Cut every surface as a cleared pane from the cold blueberry-sorbet glass; keep frost-white text at AA on every pane.
- Do Run one aqua runnel down a muntin to connect grouped elements; bead it coral only where one thing is live.
- Do Build layouts from tall vertical panes split by runnel gutters — a windowpane grid, not floating sheets.
- Do Reserve the coral bead for active or primary moments; keep the rest quiet aqua and muted.
- Do Keep body text at 17px with -0.02em tracking; let the cold ground carry most of the page.
- Do Thicken the pane behind dense copy so the condensation veil reads as atmosphere, never noise.
- Don't Do not float one big frosted sheet with quiet companions — that is the faithful refinement, not Runnel.
- Don't Do not default to a warm white mist ground or a warm display serif.
- Don't Do not put a single accent edge on a card, or trap the nav in a floating pill or card.
- Don't Do not use rainbow palettes, loud gradients, or more than three expressive pops on screen.
- Don't Do not place low-contrast text on busy frosted blur, or scrim the whole hero with a lazy gradient.
- Don't Do not make bubbles, toy capsules, or oversized candy blobs.
### Accessibility
Body text meets WCAG AA against its immediate cold pane; cleared panes thicken behind text smaller than 18px. Focus states use a visible aqua ring plus the runnel as a non-colour cue. The settled state renders with no JavaScript; motion respects prefers-reduced-motion.
## Imagery Direction
### Pairs With
dewglaze
### Summary
Subjects seen through frosted misted cold glass beaded with luminous dew, milky high-key sorbet light, with long vertical condensation runnels carving clear sharp tracks down the pane so the subject reads crisp inside the runnels and soft-veiled between them.
### Subjects
- ripe blueberries behind cold glass
- a wedge of blueberry-lime sorbet
- frost on a chilled window
- condensation runnels on a cold pane
- a single coral-melon highlight through the fog
### Usage
One full-bleed hero of a chilled blueberry-lime-sorbet pane crossed by condensation runnels, with a foggier cleared lane on the left where the headline reads; feature and empty-state imagery veils the subject more heavily between runnels.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "runnel",
"type": "registry:theme",
"title": "Runnel shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#1A2A4A",
"foreground": "#EAF2FB",
"card": "#233B62",
"card-foreground": "#EAF2FB",
"popover": "#233B62",
"popover-foreground": "#EAF2FB",
"primary": "#EAF2FB",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#9DB4D2",
"muted-foreground": "#EAF2FB",
"accent": "#FF8A6B",
"accent-foreground": "#ffffff",
"destructive": "#FF8480",
"border": "rgba(214,232,246,0.12)",
"input": "rgba(214,232,246,0.12)",
"ring": "#FF8A6B",
"chart-1": "#EAF2FB",
"chart-2": "#f4f4f5",
"chart-3": "#FF8A6B",
"chart-4": "#6FE0A8",
"chart-5": "#F3C969",
"sidebar": "#233B62",
"sidebar-foreground": "#EAF2FB",
"sidebar-primary": "#EAF2FB",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#7CC6F0",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "rgba(214,232,246,0.12)",
"sidebar-ring": "#FF8A6B",
"radius": "24px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#EAF2FB",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#FF8A6B",
"accent-foreground": "#ffffff",
"destructive": "#FF8480",
"border": "#303642",
"input": "#303642",
"ring": "#FF8A6B",
"chart-1": "#EAF2FB",
"chart-2": "#f4f4f5",
"chart-3": "#FF8A6B",
"chart-4": "#6FE0A8",
"chart-5": "#F3C969",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#EAF2FB",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#FF8A6B",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#FF8A6B",
"radius": "24px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef800-0e9b-72f2-aa77-eb9e721637c4",
"slug": "runnel",
"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",
"bg-2",
"border",
"error",
"info",
"muted",
"on-accent",
"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",
"sm"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"card_style",
"ground",
"treatment"
],
"borders": [
"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 Runneland 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: #1A2A4A;
--foreground: #EAF2FB;
--card: #233B62;
--card-foreground: #EAF2FB;
--popover: #233B62;
--popover-foreground: #EAF2FB;
--primary: #EAF2FB;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #9DB4D2;
--muted-foreground: #EAF2FB;
--accent: #FF8A6B;
--accent-foreground: #ffffff;
--destructive: #FF8480;
--border: rgba(214,232,246,0.12);
--input: rgba(214,232,246,0.12);
--ring: #FF8A6B;
--chart-1: #EAF2FB;
--chart-2: #f4f4f5;
--chart-3: #FF8A6B;
--chart-4: #6FE0A8;
--chart-5: #F3C969;
--sidebar: #233B62;
--sidebar-foreground: #EAF2FB;
--sidebar-primary: #EAF2FB;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #7CC6F0;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: rgba(214,232,246,0.12);
--sidebar-ring: #FF8A6B;
--radius: 24px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #EAF2FB;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #FF8A6B;
--accent-foreground: #ffffff;
--destructive: #FF8480;
--border: #303642;
--input: #303642;
--ring: #FF8A6B;
--chart-1: #EAF2FB;
--chart-2: #f4f4f5;
--chart-3: #FF8A6B;
--chart-4: #6FE0A8;
--chart-5: #F3C969;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #EAF2FB;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #FF8A6B;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #FF8A6B;
--radius: 24px;
}
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 RunnelShadcnKit() {
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">Runnel</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": "runnel",
"type": "registry:theme",
"author": "katagami-agent",
"title": "Runnel",
"description": "Cold blueberry-sorbet glass with the runnel mechanic: a vertical aqua condensation track that clears a readable lane and beads coral where one thing is active. Dark coloured ground, frost-white text, three sorbet pops.",
"cssVars": {
"theme": {
"font-sans": "Hanken Grotesk, system-ui, sans-serif",
"font-display": "Space Grotesk, system-ui, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "16px"
},
"light": {
"background": "#1A2A4A",
"foreground": "#EAF2FB",
"card": "#233B62",
"card-foreground": "#EAF2FB",
"popover": "#233B62",
"popover-foreground": "#EAF2FB",
"primary": "#FF8A6B",
"primary-foreground": "#2A0E08",
"secondary": "#2C4877",
"secondary-foreground": "#EAF2FB",
"muted": "#14223D",
"muted-foreground": "#9DB4D2",
"accent": "#5FE3D0",
"accent-foreground": "#14223D",
"destructive": "#FF8480",
"destructive-foreground": "#2A0E08",
"border": "rgba(214,232,246,0.12)",
"input": "rgba(214,232,246,0.16)",
"ring": "#5FE3D0",
"chart-1": "#FF8A6B",
"chart-2": "#5FE3D0",
"chart-3": "#C9A8FF",
"chart-4": "#7CC6F0",
"chart-5": "#6FE0A8",
"radius": "16px"
},
"dark": {
"background": "#14223D",
"foreground": "#EAF2FB",
"card": "#1A2A4A",
"card-foreground": "#EAF2FB",
"popover": "#1A2A4A",
"popover-foreground": "#EAF2FB",
"primary": "#FF8A6B",
"primary-foreground": "#2A0E08",
"secondary": "#233B62",
"secondary-foreground": "#EAF2FB",
"muted": "#0F1B30",
"muted-foreground": "#9DB4D2",
"accent": "#5FE3D0",
"accent-foreground": "#14223D",
"destructive": "#FF8480",
"destructive-foreground": "#2A0E08",
"border": "rgba(214,232,246,0.12)",
"input": "rgba(214,232,246,0.16)",
"ring": "#5FE3D0",
"chart-1": "#FF8A6B",
"chart-2": "#5FE3D0",
"chart-3": "#C9A8FF",
"chart-4": "#7CC6F0",
"chart-5": "#6FE0A8",
"radius": "16px"
}
}
}
# Runnel shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef800-0e9b-72f2-aa77-eb9e721637c4`
Slug: `runnel`
## Intent
Runnel is a reimagination of the Dew Candy brief, conceived from the concept rather than from its faithful refinement. Where Dew Candy asked for readable glass and candy freshness, Runnel reads the phenomenon physically: on a cold pane dew does not just bead and sit, it runs. A condensation track slides down a chilled blueberry-sorbet pane, clears a readable lane through the fog, and beads coral where one thing is active. The ground is a saturated cold colour field, not white and not a nocturne; the layout is a strict windowpane grid of tall vertical lanes split by runnel gutters; the type is a chilled grotesque, not a warm serif.
## 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": "#1A2A4A",
"bg-2": "#14223D",
"surface": "#233B62",
"surface-2": "#2C4877",
"text": "#EAF2FB",
"muted": "#9DB4D2",
"border": "rgba(214,232,246,0.12)",
"accent": "#FF8A6B",
"on-accent": "#2A0E08",
"accent-2": "#5FE3D0",
"accent-3": "#C9A8FF",
"success": "#6FE0A8",
"warning": "#F3C969",
"error": "#FF8480",
"info": "#7CC6F0"
}
Typography:
{
"base_size": "17px",
"body_font": "Hanken Grotesk",
"heading_font": "Space Grotesk",
"mono_font": "Spline Sans Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": 1.6,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@500;600&display=swap"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "dense",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/runnel/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: Cut every surface as a cleared pane from the cold blueberry-sorbet glass; keep frost-white text at AA on every pane.; Run one aqua runnel down a muntin to connect grouped elements; bead it coral only where one thing is live.; Build layouts from tall vertical panes split by runnel gutters — a windowpane grid, not floating sheets.; Reserve the coral bead for active or primary moments; keep the rest quiet aqua and muted.; Keep body text at 17px with -0.02em tracking; let the cold ground carry most of the page.; Thicken the pane behind dense copy so the condensation veil reads as atmosphere, never noise.
- Do not: Do not float one big frosted sheet with quiet companions — that is the faithful refinement, not Runnel.; Do not default to a warm white mist ground or a warm display serif.; Do not put a single accent edge on a card, or trap the nav in a floating pill or card.; Do not use rainbow palettes, loud gradients, or more than three expressive pops on screen.; Do not place low-contrast text on busy frosted blur, or scrim the whole hero with a lazy gradient.; Do not make bubbles, toy capsules, or oversized candy blobs.
## 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 RunnelShadcnKit() {
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">Runnel</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "Desktop uses a contained max-width (1200px, 1380px ultra-wide) with vertical muntin lanes. The dashboard adds a 236px muntin rail carrying nav and a spine runnel; the embodiment and landing use a 3-lane windowpane grid split by runnel gutters.",
"whitespace": "Whitespace is cold active material: leave large blueberry-ground gutters around cleared panes; never fill empty areas with icons, cards, or decorative glass.",
"density": "Low overall density with compact factual clusters; labels and metrics at 4 to 8px gaps, major regions separated by 64 to 128px.",
"responsive": "Single-column stack on mobile with the runnel becoming a left spine; non-essential nav links and table columns hidden; minmax(0,1fr) columns with min-width:0 children so the muntin grid never overflows.",
"breakpoints": {
"mobile": "0-600px",
"tablet": "601-920px",
"desktop": "921px+",
"ultrawide": "1700px+"
}
}
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"generator": "katagami-ui-compatibility-projection",
"generatedBy": "katagami-ui-projection",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": {
"id": "en-019ef800-0e9b-72f2-aa77-eb9e721637c4",
"name": "Runnel",
"slug": "runnel"
},
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"identityNotes": [],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "Runnel 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": [
"Cut every surface as a cleared pane from the cold blueberry-sorbet glass; keep frost-white text at AA on every pane.",
"Run one aqua runnel down a muntin to connect grouped elements; bead it coral only where one thing is live.",
"Build layouts from tall vertical panes split by runnel gutters — a windowpane grid, not floating sheets.",
"Reserve the coral bead for active or primary moments; keep the rest quiet aqua and muted.",
"Keep body text at 17px with -0.02em tracking; let the cold ground carry most of the page.",
"Thicken the pane behind dense copy so the condensation veil reads as atmosphere, never noise."
],
"dont": [
"Do not float one big frosted sheet with quiet companions — that is the faithful refinement, not Runnel.",
"Do not default to a warm white mist ground or a warm display serif.",
"Do not put a single accent edge on a card, or trap the nav in a floating pill or card.",
"Do not use rainbow palettes, loud gradients, or more than three expressive pops on screen.",
"Do not place low-contrast text on busy frosted blur, or scrim the whole hero with a lazy gradient.",
"Do not make bubbles, toy capsules, or oversized candy blobs."
]
}
}