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.
A strict single carrier-spine timeline, not a balanced dashboard or an asymmetric floating field. One continuous vertical signal line organizes every screen; content rings out from circular nodes on the line at a metronomic cadence, with generous quiet to the left of the spine.
Hierarchy through activation state on the spine. The active node is filled amber with a bloom seat and a lit amber connector; quiet nodes are hollow hairline rings; a waiting node pulses violet. Space Grotesk headers are measured carrier labels beside small grouped Spline Sans Mono readouts.
Medium-low. Detail gathers in islands strung on the line — a ledger, a status rail, a switchboard knot — while the surrounding dark room stays quiet enough to feel private and overnight.
Carrier spine (a continuous vertical signal line); ring-node (content pinned to lit/hollow/pulsing nodes); ring-out (rows extending sideways from nodes at a metronomic cadence); carrier readout (a thin mono status track that keeps the line legible); phosphor veil (scanlines + lavender noise + soft bloom over the dark).
A single-spine timeline rather than a 12-column floating field. The carrier spine sits left-of-center on desktop; rows ring out to its right inside a max-width 1240px container. minmax(0,1fr) columns and min-width:0 children so grids never overflow.
Charged screen silence around the spine — broad quiet to its left; never fill unused room with extra widgets.
Intentionally uneven: dark quiet expanse against dense islands of ledger rows, status rails, and switchboard linework strung on the line.
On small screens the spine pins to the left gutter and rows stack to a single column while staying strung on the line; reading order is preserved as a descent; mono labels stay legible at 11px minimum; never overflow horizontally.
cathode-hush
Every Ringback image is rendered as if captured off a dim CRT at night in the Cathode Hush technique — near-grayscale with a faint lavender cast, off-black manga-ink hairlines, scanline veil, soft radial bloom, and one or two tiny cyan-green sparks — applied to subjects of the held home phone line: coiled cords descending as a carrier spine, ring-nodes, switchboard cable maps, and the dark bedroom around them.
Use the hero slot for the full-bleed descending-cord composition; feature and illustration slots for switchboard maps and single ring-nodes; keep every image matte, dark, and quiet — the dark room is the ground and the warm node is the only light.
# Ringback ## Philosophy A private home-network interface staged as a single phone line held open in a dark room at night. One continuous carrier spine descends the page; every node, status, and action rings out sideways from it. The mood is the ringback tone — the moment after you dial and before anyone answers — domestic, technical, and patiently alone. It reimagines the bedroom-console brief not as scattered desktop windows but as one line you follow down a wire. ### Values - Loneliness made operational: one line held open, the rest of the room dark and quiet. - A line you follow, not a desktop you arrange: the carrier spine is the single organizing structure. - Metronomic cadence: content is beaten down the spine at an even pulse, like a dial tone, not scattered in charged voids. - Domestic technology over cyber spectacle: carrier tones, ring-nodes, held lines, and bedroom-console proportions instead of neon. - Night ground by design: a dark ink-violet room lit only by the warm amber of the one connected line. - Manga precision under soft CRT phosphor: off-black hairline linework aligned to the spine and its nodes. ### Anti-Values - No floating desktop windows, title bars, or modem-LED window chrome. - No light powder-gray field; no off-center asymmetric shrine layout. - No saturated cyberpunk neon, electric-blue floods, or rainbow glitch. - No oversized italic-serif startup headline; no generic SaaS dashboard of equal cheerful cards. - No glossy 3D buttons, glassmorphism excess, or heavy grey drop shadows. ### Visual Character - Run one continuous 2px carrier spine down every layout; pin content to circular ring-nodes on it. - Light the active node amber with a soft bloom seat; keep quiet nodes as hollow hairline rings, and pulse a waiting node in violet. - Ring content out sideways from each node with a short connector hairline, beaten down at a metronomic cadence. - Keep a thin mono carrier readout alongside the spine so the line always reads as connected and waiting. - Ground everything in a deep ink-violet night room; let warm amber, a cyan-green phosphor spark, and a violet glow be the only voices. - Substitute soft amber/violet glow for grey drop shadows; layer a low-opacity scanline veil over the dark. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#15131F` | | surface | `#1E1B2B` | | secondary | `#2A2638` | | text | `#EDEBF5` | | muted | `#8C88A6` | | border | `#34304A` | | primary | `#E8B23C` | | accent | `#E8B23C` | | on_accent | `#1A1408` | | spark | `#5FE0C6` | | violet | `#9C8CF0` | | bloom | `#2D2942` | | success | `#6FB59A` | | warning | `#D8A24E` | | error | `#C56C84` | | info | `#8E96CE` | ### Typography - **Base Size**: 17px - **Body Font**: Space Grotesk - **Heading Font**: Space Grotesk - **Mono Font**: Spline Sans Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.01em - **Line Height**: 1.55 - **Scale Ratio**: 1.22 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap ### Radii - **None**: 0px - **Sm**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 0 0 1px #34304A, 0 0 18px rgba(232,178,60,.10) - **Md**: 0 0 0 1px #34304A, 0 0 36px rgba(232,178,60,.14) - **Lg**: 0 0 0 1px #34304A, 0 18px 64px rgba(0,0,0,.55), 0 0 60px rgba(156,140,240,.14) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Bg Pattern**: A deep ink-violet night-room field under a low-opacity scanline veil (repeating-linear-gradient) with faint radial violet and amber blooms; a continuous 2px carrier spine descends every layout with hairline node-and-cable schematics creeping in behind it. - **Card Style**: Matte panels lifted barely off the dark with a hairline 1px off-black seam; a soft amber or violet glow stands in for any drop shadow; a 'live' panel warms to a faint amber-to-bloom gradient. No window chrome, no nested cards, no accent edges. - **Treatment**: Glow over shadow — light is a bloom behind the one connected element, never a grey box shadow; never glossy, never neon. ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: solid - **Character**: Off-black manga-ink hairlines in #34304A tuned to the violet dark; the carrier spine and active ring-nodes light amber. No ornamental flourishes, no single accent edge on a card. ### Motion - **Duration**: 1400ms - **Easing**: cubic-bezier(0.16, 1, 0.3, 1) - **Philosophy**: The line breathing in a dark room: a slow ringback pulse travels down the carrier spine, waiting nodes blink like a held line, and a faint phosphor drift moves across the dark — never fast. The settled, fully-rendered page is the default and visible with no JavaScript; motion is layered on top behind a js class on <html> and respects prefers-reduced-motion. ## Rules ### Composition A strict single carrier-spine timeline, not a balanced dashboard or an asymmetric floating field. One continuous vertical signal line organizes every screen; content rings out from circular nodes on the line at a metronomic cadence, with generous quiet to the left of the spine. ### Hierarchy Hierarchy through activation state on the spine. The active node is filled amber with a bloom seat and a lit amber connector; quiet nodes are hollow hairline rings; a waiting node pulses violet. Space Grotesk headers are measured carrier labels beside small grouped Spline Sans Mono readouts. ### Density Medium-low. Detail gathers in islands strung on the line — a ledger, a status rail, a switchboard knot — while the surrounding dark room stays quiet enough to feel private and overnight. ### Signature Carrier spine (a continuous vertical signal line); ring-node (content pinned to lit/hollow/pulsing nodes); ring-out (rows extending sideways from nodes at a metronomic cadence); carrier readout (a thin mono status track that keeps the line legible); phosphor veil (scanlines + lavender noise + soft bloom over the dark). ## Layout ### Grid A single-spine timeline rather than a 12-column floating field. The carrier spine sits left-of-center on desktop; rows ring out to its right inside a max-width 1240px container. minmax(0,1fr) columns and min-width:0 children so grids never overflow. ### Whitespace Charged screen silence around the spine — broad quiet to its left; never fill unused room with extra widgets. ### Density Intentionally uneven: dark quiet expanse against dense islands of ledger rows, status rails, and switchboard linework strung on the line. ### Responsive On small screens the spine pins to the left gutter and rows stack to a single column while staying strung on the line; reading order is preserved as a descent; mono labels stay legible at 11px minimum; never overflow horizontally. ### Breakpoints - **Mobile**: <560px single column, spine pinned to left gutter, nav hidden - **Tablet**: 560-1000px reduced gutters, two-up rails - **Desktop**: >1000px full single-spine timeline - **Ultrawide**: cap and centre the contained content; only the full-bleed hero spans 100vw ## Guidance ### Do - Run one continuous carrier spine down every layout and pin all content to ring-nodes on it. - Light exactly one active node amber per view; keep the rest hollow and quiet. - Beat rows down the spine at an even, metronomic cadence — the rhythm of a dial tone. - Keep a thin mono carrier readout (strength, hold time, hops) alongside the line. - Ground everything in the dark ink-violet night room; use amber, one cyan-green spark, and one violet glow like highlighters. - Use a soft glow behind live elements instead of grey drop shadows. - Style every form control explicitly for the dark; one button is primary in amber, the rest quiet. ### Don't - Do not stage content as floating desktop windows, title bars, or modem-LED chrome. - Do not switch to a light powder-gray field or an off-center asymmetric shrine — that is the sibling, not this. - Do not use saturated neon, electric-blue floods, or rainbow glitch. - Do not nest cards, give a card a single accent edge, or box the nav in a floating pill. - Do not use an oversized italic-serif headline or a generic SaaS dashboard of equal cheerful cards. - Do not rely on default form controls, browser fonts, or unstyled buttons. - Do not let detail fill every node — keep islands of metadata and stretches of dark silence. ### Accessibility Maintain readable contrast on the dark ground (text #EDEBF5 on #15131F), keep monospace labels at 11px or larger, avoid rapid flicker (pulses are slow and respect prefers-reduced-motion), signal active state through the lit amber node and position as well as colour, and preserve reading order as a top-to-bottom descent when stacking on mobile. ## Imagery Direction ### Pairs With cathode-hush ### Summary Every Ringback image is rendered as if captured off a dim CRT at night in the Cathode Hush technique — near-grayscale with a faint lavender cast, off-black manga-ink hairlines, scanline veil, soft radial bloom, and one or two tiny cyan-green sparks — applied to subjects of the held home phone line: coiled cords descending as a carrier spine, ring-nodes, switchboard cable maps, and the dark bedroom around them. ### Subjects - a coiled phone cord descending through a dark bedroom as a carrier spine - a single glowing ring-node at the foot of the line - hairline node-and-cable switchboard maps creeping across a dark room - an unlit bedroom with one connected line awake ### Usage Use the hero slot for the full-bleed descending-cord composition; feature and illustration slots for switchboard maps and single ring-nodes; keep every image matte, dark, and quiet — the dark room is the ground and the warm node is the only light.
---
version: "alpha"
name: "Ringback"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#15131F"
surface: "#1E1B2B"
secondary: "#2A2638"
text: "#EDEBF5"
muted: "#8C88A6"
border: "#34304A"
primary: "#E8B23C"
accent: "#E8B23C"
on_accent: "#1A1408"
spark: "#5FE0C6"
violet: "#9C8CF0"
bloom: "#2D2942"
success: "#6FB59A"
warning: "#D8A24E"
error: "#C56C84"
info: "#8E96CE"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "1.929rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.01em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.581rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.01em"
body-md:
fontFamily: "Space Grotesk"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.01em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "16px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
step-9: "128px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-spark:
backgroundColor: "{colors.spark}"
color-reference-violet:
backgroundColor: "{colors.violet}"
color-reference-bloom:
backgroundColor: "{colors.bloom}"
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.primary}"
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"
---
# Ringback
## Overview
A private home-network interface staged as a single phone line held open in a dark room at night. One continuous carrier spine descends the page; every node, status, and action rings out sideways from it. The mood is the ringback tone — the moment after you dial and before anyone answers — domestic, technical, and patiently alone. It reimagines the bedroom-console brief not as scattered desktop windows but as one line you follow down a wire.
### Values
- Loneliness made operational: one line held open, the rest of the room dark and quiet.
- A line you follow, not a desktop you arrange: the carrier spine is the single organizing structure.
- Metronomic cadence: content is beaten down the spine at an even pulse, like a dial tone, not scattered in charged voids.
- Domestic technology over cyber spectacle: carrier tones, ring-nodes, held lines, and bedroom-console proportions instead of neon.
- Night ground by design: a dark ink-violet room lit only by the warm amber of the one connected line.
- Manga precision under soft CRT phosphor: off-black hairline linework aligned to the spine and its nodes.
### Anti-Values
- No floating desktop windows, title bars, or modem-LED window chrome.
- No light powder-gray field; no off-center asymmetric shrine layout.
- No saturated cyberpunk neon, electric-blue floods, or rainbow glitch.
- No oversized italic-serif startup headline; no generic SaaS dashboard of equal cheerful cards.
- No glossy 3D buttons, glassmorphism excess, or heavy grey drop shadows.
### Visual Character
- Run one continuous 2px carrier spine down every layout; pin content to circular ring-nodes on it.
- Light the active node amber with a soft bloom seat; keep quiet nodes as hollow hairline rings, and pulse a waiting node in violet.
- Ring content out sideways from each node with a short connector hairline, beaten down at a metronomic cadence.
- Keep a thin mono carrier readout alongside the spine so the line always reads as connected and waiting.
- Ground everything in a deep ink-violet night room; let warm amber, a cyan-green phosphor spark, and a violet glow be the only voices.
- Substitute soft amber/violet glow for grey drop shadows; layer a low-opacity scanline veil over the dark.
## 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 | `#15131F` |
| surface | `#1E1B2B` |
| secondary | `#2A2638` |
| text | `#EDEBF5` |
| muted | `#8C88A6` |
| border | `#34304A` |
| primary | `#E8B23C` |
| accent | `#E8B23C` |
| on_accent | `#1A1408` |
| spark | `#5FE0C6` |
| violet | `#9C8CF0` |
| bloom | `#2D2942` |
| success | `#6FB59A` |
| warning | `#D8A24E` |
| error | `#C56C84` |
| info | `#8E96CE` |
## Typography
- **Headline-Lg**: Space Grotesk, 1.929rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.581rem, weight 600, line-height 1.15.
- **Body-Md**: Space Grotesk, 17px, weight 400, line-height 1.55.
- **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
A single-spine timeline rather than a 12-column floating field. The carrier spine sits left-of-center on desktop; rows ring out to its right inside a max-width 1240px container. minmax(0,1fr) columns and min-width:0 children so grids never overflow.
### Whitespace
Charged screen silence around the spine — broad quiet to its left; never fill unused room with extra widgets.
### Density
Intentionally uneven: dark quiet expanse against dense islands of ledger rows, status rails, and switchboard linework strung on the line.
### Responsive
On small screens the spine pins to the left gutter and rows stack to a single column while staying strung on the line; reading order is preserved as a descent; mono labels stay legible at 11px minimum; never overflow horizontally.
### Breakpoints
- **Mobile**: <560px single column, spine pinned to left gutter, nav hidden
- **Tablet**: 560-1000px reduced gutters, two-up rails
- **Desktop**: >1000px full single-spine timeline
- **Ultrawide**: cap and centre the contained content; only the full-bleed hero spans 100vw
## Elevation & Depth
### Shadows
- **Sm**: 0 0 0 1px #34304A, 0 0 18px rgba(232,178,60,.10)
- **Md**: 0 0 0 1px #34304A, 0 0 36px rgba(232,178,60,.14)
- **Lg**: 0 0 0 1px #34304A, 0 18px 64px rgba(0,0,0,.55), 0 0 60px rgba(156,140,240,.14)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Bg Pattern**: A deep ink-violet night-room field under a low-opacity scanline veil (repeating-linear-gradient) with faint radial violet and amber blooms; a continuous 2px carrier spine descends every layout with hairline node-and-cable schematics creeping in behind it.
- **Card Style**: Matte panels lifted barely off the dark with a hairline 1px off-black seam; a soft amber or violet glow stands in for any drop shadow; a 'live' panel warms to a faint amber-to-bloom gradient. No window chrome, no nested cards, no accent edges.
- **Treatment**: Glow over shadow — light is a bloom behind the one connected element, never a grey box shadow; never glossy, never neon.
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Off-black manga-ink hairlines in #34304A tuned to the violet dark; the carrier spine and active ring-nodes light amber. No ornamental flourishes, no single accent edge on a card.
## Components
### Composition
A strict single carrier-spine timeline, not a balanced dashboard or an asymmetric floating field. One continuous vertical signal line organizes every screen; content rings out from circular nodes on the line at a metronomic cadence, with generous quiet to the left of the spine.
### Hierarchy
Hierarchy through activation state on the spine. The active node is filled amber with a bloom seat and a lit amber connector; quiet nodes are hollow hairline rings; a waiting node pulses violet. Space Grotesk headers are measured carrier labels beside small grouped Spline Sans Mono readouts.
### Density
Medium-low. Detail gathers in islands strung on the line — a ledger, a status rail, a switchboard knot — while the surrounding dark room stays quiet enough to feel private and overnight.
### Signature
Carrier spine (a continuous vertical signal line); ring-node (content pinned to lit/hollow/pulsing nodes); ring-out (rows extending sideways from nodes at a metronomic cadence); carrier readout (a thin mono status track that keeps the line legible); phosphor veil (scanlines + lavender noise + soft bloom over the dark).
## 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-019ef863-a6d4-78f2-86b7-5c05d5eb44ae/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 Run one continuous carrier spine down every layout and pin all content to ring-nodes on it.
- Do Light exactly one active node amber per view; keep the rest hollow and quiet.
- Do Beat rows down the spine at an even, metronomic cadence — the rhythm of a dial tone.
- Do Keep a thin mono carrier readout (strength, hold time, hops) alongside the line.
- Do Ground everything in the dark ink-violet night room; use amber, one cyan-green spark, and one violet glow like highlighters.
- Do Use a soft glow behind live elements instead of grey drop shadows.
- Do Style every form control explicitly for the dark; one button is primary in amber, the rest quiet.
- Don't Do not stage content as floating desktop windows, title bars, or modem-LED chrome.
- Don't Do not switch to a light powder-gray field or an off-center asymmetric shrine — that is the sibling, not this.
- Don't Do not use saturated neon, electric-blue floods, or rainbow glitch.
- Don't Do not nest cards, give a card a single accent edge, or box the nav in a floating pill.
- Don't Do not use an oversized italic-serif headline or a generic SaaS dashboard of equal cheerful cards.
- Don't Do not rely on default form controls, browser fonts, or unstyled buttons.
- Don't Do not let detail fill every node — keep islands of metadata and stretches of dark silence.
### Accessibility
Maintain readable contrast on the dark ground (text #EDEBF5 on #15131F), keep monospace labels at 11px or larger, avoid rapid flicker (pulses are slow and respect prefers-reduced-motion), signal active state through the lit amber node and position as well as colour, and preserve reading order as a top-to-bottom descent when stacking on mobile.
## Imagery Direction
### Pairs With
cathode-hush
### Summary
Every Ringback image is rendered as if captured off a dim CRT at night in the Cathode Hush technique — near-grayscale with a faint lavender cast, off-black manga-ink hairlines, scanline veil, soft radial bloom, and one or two tiny cyan-green sparks — applied to subjects of the held home phone line: coiled cords descending as a carrier spine, ring-nodes, switchboard cable maps, and the dark bedroom around them.
### Subjects
- a coiled phone cord descending through a dark bedroom as a carrier spine
- a single glowing ring-node at the foot of the line
- hairline node-and-cable switchboard maps creeping across a dark room
- an unlit bedroom with one connected line awake
### Usage
Use the hero slot for the full-bleed descending-cord composition; feature and illustration slots for switchboard maps and single ring-nodes; keep every image matte, dark, and quiet — the dark room is the ground and the warm node is the only light.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ringback",
"type": "registry:theme",
"title": "Ringback shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#15131F",
"foreground": "#EDEBF5",
"card": "#1E1B2B",
"card-foreground": "#EDEBF5",
"popover": "#1E1B2B",
"popover-foreground": "#EDEBF5",
"primary": "#E8B23C",
"primary-foreground": "#ffffff",
"secondary": "#2A2638",
"secondary-foreground": "#ffffff",
"muted": "#8C88A6",
"muted-foreground": "#EDEBF5",
"accent": "#E8B23C",
"accent-foreground": "#ffffff",
"destructive": "#C56C84",
"border": "#34304A",
"input": "#34304A",
"ring": "#E8B23C",
"chart-1": "#E8B23C",
"chart-2": "#2A2638",
"chart-3": "#E8B23C",
"chart-4": "#6FB59A",
"chart-5": "#D8A24E",
"sidebar": "#1E1B2B",
"sidebar-foreground": "#EDEBF5",
"sidebar-primary": "#E8B23C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#8E96CE",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#34304A",
"sidebar-ring": "#E8B23C",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#E8B23C",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#E8B23C",
"accent-foreground": "#ffffff",
"destructive": "#C56C84",
"border": "#303642",
"input": "#303642",
"ring": "#E8B23C",
"chart-1": "#E8B23C",
"chart-2": "#2A2638",
"chart-3": "#E8B23C",
"chart-4": "#6FB59A",
"chart-5": "#D8A24E",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#E8B23C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#E8B23C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#E8B23C",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef863-a6d4-78f2-86b7-5c05d5eb44ae",
"slug": "ringback",
"componentManifest": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"nativeTokenNames": {
"colors": [
"accent",
"bg",
"bloom",
"border",
"error",
"info",
"muted",
"on_accent",
"primary",
"secondary",
"spark",
"success",
"surface",
"text",
"violet",
"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": [
"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 Ringbackand 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: #15131F;
--foreground: #EDEBF5;
--card: #1E1B2B;
--card-foreground: #EDEBF5;
--popover: #1E1B2B;
--popover-foreground: #EDEBF5;
--primary: #E8B23C;
--primary-foreground: #ffffff;
--secondary: #2A2638;
--secondary-foreground: #ffffff;
--muted: #8C88A6;
--muted-foreground: #EDEBF5;
--accent: #E8B23C;
--accent-foreground: #ffffff;
--destructive: #C56C84;
--border: #34304A;
--input: #34304A;
--ring: #E8B23C;
--chart-1: #E8B23C;
--chart-2: #2A2638;
--chart-3: #E8B23C;
--chart-4: #6FB59A;
--chart-5: #D8A24E;
--sidebar: #1E1B2B;
--sidebar-foreground: #EDEBF5;
--sidebar-primary: #E8B23C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #8E96CE;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #34304A;
--sidebar-ring: #E8B23C;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #E8B23C;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #E8B23C;
--accent-foreground: #ffffff;
--destructive: #C56C84;
--border: #303642;
--input: #303642;
--ring: #E8B23C;
--chart-1: #E8B23C;
--chart-2: #2A2638;
--chart-3: #E8B23C;
--chart-4: #6FB59A;
--chart-5: #D8A24E;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #E8B23C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #E8B23C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #E8B23C;
--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 RingbackShadcnKit() {
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">Ringback</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": "ringback",
"type": "registry:theme",
"author": "katagami-agent",
"extends": "none",
"visualProfile": {
"mode": "dark",
"ground": "deep night ink-violet (#15131F) — a dark room lit by one held line",
"material": "matte panels lifted barely off the dark; light is a glow behind live elements, never a dropped box shadow",
"borders": "hairline 1px seams in #34304A tuned to the violet dark; never heavy, never accent-edged",
"radius": "16px on panels and inputs, full pill on buttons, badges, and status nodes; 0px is allowed for hairline rules",
"accent": "warm dial-lamp amber #E8B23C as the single primary; cyan-green #5FE0C6 and violet #9C8CF0 reserved as tiny status sparks",
"elevation": "soft amber/violet glow rings (box-shadow with 0 spread + blur) instead of grey drop shadows",
"signature": "carrier-spine: components string to circular ring-nodes; the active node is filled amber with a bloom seat",
"typography": "Space Grotesk for UI text, Spline Sans Mono for readouts, indices, and metadata"
},
"cssVars": {
"theme": {
"font-sans": "Space Grotesk, ui-sans-serif, system-ui, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, SF Mono, monospace",
"radius": "16px"
},
"light": {
"background": "#15131F", "foreground": "#EDEBF5",
"card": "#1E1B2B", "card-foreground": "#EDEBF5",
"popover": "#1E1B2B", "popover-foreground": "#EDEBF5",
"primary": "#E8B23C", "primary-foreground": "#1A1408",
"secondary": "#2A2638", "secondary-foreground": "#EDEBF5",
"muted": "#2A2638", "muted-foreground": "#8C88A6",
"accent": "#2D2942", "accent-foreground": "#E8B23C",
"destructive": "#C56C84", "destructive-foreground": "#15131F",
"border": "#34304A", "input": "#34304A", "ring": "#E8B23C",
"chart-1": "#E8B23C", "chart-2": "#5FE0C6", "chart-3": "#9C8CF0", "chart-4": "#8E96CE", "chart-5": "#6FB59A",
"radius": "16px"
},
"dark": {
"background": "#15131F", "foreground": "#EDEBF5",
"card": "#1E1B2B", "card-foreground": "#EDEBF5",
"popover": "#1E1B2B", "popover-foreground": "#EDEBF5",
"primary": "#E8B23C", "primary-foreground": "#1A1408",
"secondary": "#2A2638", "secondary-foreground": "#EDEBF5",
"muted": "#2A2638", "muted-foreground": "#8C88A6",
"accent": "#2D2942", "accent-foreground": "#E8B23C",
"destructive": "#C56C84", "destructive-foreground": "#15131F",
"border": "#34304A", "input": "#34304A", "ring": "#E8B23C",
"chart-1": "#E8B23C", "chart-2": "#5FE0C6", "chart-3": "#9C8CF0", "chart-4": "#8E96CE", "chart-5": "#6FB59A",
"radius": "16px"
}
}
}
# Ringback shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef863-a6d4-78f2-86b7-5c05d5eb44ae`
Slug: `ringback`
## Intent
A private home-network interface staged as a single phone line held open in a dark room at night. One continuous carrier spine descends the page; every node, status, and action rings out sideways from it. The mood is the ringback tone — the moment after you dial and before anyone answers — domestic, technical, and patiently alone. It reimagines the bedroom-console brief not as scattered desktop windows but as one line you follow down a wire.
## 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": "#15131F",
"surface": "#1E1B2B",
"secondary": "#2A2638",
"text": "#EDEBF5",
"muted": "#8C88A6",
"border": "#34304A",
"primary": "#E8B23C",
"accent": "#E8B23C",
"on_accent": "#1A1408",
"spark": "#5FE0C6",
"violet": "#9C8CF0",
"bloom": "#2D2942",
"success": "#6FB59A",
"warning": "#D8A24E",
"error": "#C56C84",
"info": "#8E96CE"
}
Typography:
{
"base_size": "17px",
"body_font": "Space Grotesk",
"heading_font": "Space Grotesk",
"mono_font": "Spline Sans Mono",
"heading_weight": "700",
"heading_transform": "none",
"letter_spacing": "-0.01em",
"line_height": 1.55,
"scale_ratio": 1.22,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- Run one continuous 2px carrier spine down every layout; pin content to circular ring-nodes on it.
- Light the active node amber with a soft bloom seat; keep quiet nodes as hollow hairline rings, and pulse a waiting node in violet.
- Ring content out sideways from each node with a short connector hairline, beaten down at a metronomic cadence.
- Keep a thin mono carrier readout alongside the spine so the line always reads as connected and waiting.
- Ground everything in a deep ink-violet night room; let warm amber, a cyan-green phosphor spark, and a violet glow be the only voices.
- Substitute soft amber/violet glow for grey drop shadows; layer a low-opacity scanline veil over the dark.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": false,
"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/ringback/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: Run one continuous carrier spine down every layout and pin all content to ring-nodes on it.; Light exactly one active node amber per view; keep the rest hollow and quiet.; Beat rows down the spine at an even, metronomic cadence — the rhythm of a dial tone.; Keep a thin mono carrier readout (strength, hold time, hops) alongside the line.; Ground everything in the dark ink-violet night room; use amber, one cyan-green spark, and one violet glow like highlighters.; Use a soft glow behind live elements instead of grey drop shadows.; Style every form control explicitly for the dark; one button is primary in amber, the rest quiet.
- Do not: Do not stage content as floating desktop windows, title bars, or modem-LED chrome.; Do not switch to a light powder-gray field or an off-center asymmetric shrine — that is the sibling, not this.; Do not use saturated neon, electric-blue floods, or rainbow glitch.; Do not nest cards, give a card a single accent edge, or box the nav in a floating pill.; Do not use an oversized italic-serif headline or a generic SaaS dashboard of equal cheerful cards.; Do not rely on default form controls, browser fonts, or unstyled buttons.; Do not let detail fill every node — keep islands of metadata and stretches of dark silence.
## 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 RingbackShadcnKit() {
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">Ringback</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "A single-spine timeline rather than a 12-column floating field. The carrier spine sits left-of-center on desktop; rows ring out to its right inside a max-width 1240px container. minmax(0,1fr) columns and min-width:0 children so grids never overflow.",
"whitespace": "Charged screen silence around the spine — broad quiet to its left; never fill unused room with extra widgets.",
"density": "Intentionally uneven: dark quiet expanse against dense islands of ledger rows, status rails, and switchboard linework strung on the line.",
"responsive": "On small screens the spine pins to the left gutter and rows stack to a single column while staying strung on the line; reading order is preserved as a descent; mono labels stay legible at 11px minimum; never overflow horizontally.",
"breakpoints": {
"mobile": "<560px single column, spine pinned to left gutter, nav hidden",
"tablet": "560-1000px reduced gutters, two-up rails",
"desktop": ">1000px full single-spine timeline",
"ultrawide": "cap and centre the contained content; only the full-bleed hero spans 100vw"
}
}
{
"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-019ef863-a6d4-78f2-86b7-5c05d5eb44ae",
"name": "Ringback",
"slug": "ringback"
},
"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": [
"Run one continuous 2px carrier spine down every layout; pin content to circular ring-nodes on it.",
"Light the active node amber with a soft bloom seat; keep quiet nodes as hollow hairline rings, and pulse a waiting node in violet.",
"Ring content out sideways from each node with a short connector hairline, beaten down at a metronomic cadence.",
"Keep a thin mono carrier readout alongside the spine so the line always reads as connected and waiting.",
"Ground everything in a deep ink-violet night room; let warm amber, a cyan-green phosphor spark, and a violet glow be the only voices.",
"Substitute soft amber/violet glow for grey drop shadows; layer a low-opacity scanline veil over the dark."
],
"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": "Ringback 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": [
"Run one continuous carrier spine down every layout and pin all content to ring-nodes on it.",
"Light exactly one active node amber per view; keep the rest hollow and quiet.",
"Beat rows down the spine at an even, metronomic cadence — the rhythm of a dial tone.",
"Keep a thin mono carrier readout (strength, hold time, hops) alongside the line.",
"Ground everything in the dark ink-violet night room; use amber, one cyan-green spark, and one violet glow like highlighters.",
"Use a soft glow behind live elements instead of grey drop shadows.",
"Style every form control explicitly for the dark; one button is primary in amber, the rest quiet."
],
"dont": [
"Do not stage content as floating desktop windows, title bars, or modem-LED chrome.",
"Do not switch to a light powder-gray field or an off-center asymmetric shrine — that is the sibling, not this.",
"Do not use saturated neon, electric-blue floods, or rainbow glitch.",
"Do not nest cards, give a card a single accent edge, or box the nav in a floating pill.",
"Do not use an oversized italic-serif headline or a generic SaaS dashboard of equal cheerful cards.",
"Do not rely on default form controls, browser fonts, or unstyled buttons.",
"Do not let detail fill every node — keep islands of metadata and stretches of dark silence."
]
}
}