A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
Compose screens as poster-like spreads with one dominant hero column, supporting stacked utility panels, and die-cut geometric ornaments occupying gutters and negative space.
Use oversized Bungee display headlines, loud colour-blocked data callouts, and compact uppercase mono labels so scanning stays instant even amid playful density.
Medium-high density with tightly grouped controls inside boldly separated modules; decoration may be abundant, but task-critical content stays boxed into quiet mint, white or blush islands.
A 12-column desktop grid collapsing to a considered tablet band and a single mobile column, with oversized outer padding so decorative shapes can live in the margins.
Wide 1920+, desktop 1440, tablet 768-1024, mobile 390 with stacked panels and full-width actions.
Compact spacing inside modules, larger gaps between them, so the graphic collage stays readable and task content stays on quiet paper.
Flat Memphis Milano graphic collage: bold shapes with thick black outlines and hard offset shadows, electric teal, hot pink and bright yellow over warm cream, with confetti, terrazzo and zig-zag motifs and a light risograph grain.
flat 2D vector-poster illustration, thick black keylines, die-cut shapes, hard offset shadows, no gradients, subtle risograph grain
confetti
teal #12cfd0, hot pink #ff5fa2, bright yellow #f5dd22, ink #111111, cream #f6f3ee, mint #dff7ee
# Confetti
## Philosophy
A high-energy interface language that translates Memphis postmodern graphic design into digital product surfaces through flat die-cut shapes, loud contrast and deliberately anti-neutral composition. Every shape is cut from a confetti field, keylined once in black, and slapped down on its own hard offset shadow so it reads like a printed sticker.
### Values
- Playfulness as structure rather than decoration
- Graphic contrast that keeps hierarchy instantly legible
- Layered shapes and pattern fields that energise routine screens
- Intentional asymmetry balanced by strict alignment zones
### Anti-Values
- Corporate neutrality and invisible chrome
- Soft luxury minimalism or restrained monochrome
- Photoreal depth or skeuomorphic material imitation
### Visual Character
- Flat die-cut shapes sit behind and around content using offset circles, zig-zag dividers, dotted fields and angled bars in electric accents, each with a single crisp black keyline.
- Cards and panels rest on pale mint, white or blush paper, interrupted by a die-cut companion attached at one corner as one page-wide system.
- Typography pairs an oversized Bungee display with a clean Archivo body and uppercase IBM Plex Mono micro-labels, using strong scale jumps to feel like poster graphics.
- Buttons, tabs and metrics are printed capsules with a keyline, a hard offset shadow and a centred one-line label so every interactive element reads like a printed graphic object.
## Tokens
### Colors
| Name | Value |
|------|-------|
| bg | `#f6f3ee` |
| surface | `#ffffff` |
| surface_solid | `#dff7ee` |
| text | `#111111` |
| muted | `#5f5a67` |
| border | `#111111` |
| accent | `#12cfd0` |
| accent_2 | `#ff5fa2` |
| accent_soft | `#f5dd22` |
| on_accent | `#111111` |
| success | `#16b57a` |
| warning | `#ffb000` |
| error | `#ff5570` |
| info | `#42a5ff` |
### Typography
- **Base Size**: 17px
- **Body Font**: Archivo
- **Heading Font**: Bungee
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Bungee&family=IBM+Plex+Mono:wght@400;500;600&display=swap
### Radii
- **None**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px
### Shadows
- **Sm**: 3px 3px 0 #111111
- **Md**: 6px 6px 0 #111111
- **Lg**: 11px 11px 0 #111111
### Spacing
- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]
### Surfaces
- **Treatment**: paper
- **Card Style**: Cream, white, mint or blush paper cards with one black keyline, a hard offset shadow and a single die-cut companion at one corner.
- **Bg Pattern**: dots
### Borders
- **Default Width**: 2px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: A single crisp black keyline, the printed die-cut signature, drawn once around a shape at a consistent 2px, never nested and never a one-sided accent, always paired with the hard offset shadow for lift.
### Motion
- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.9,0.2,1)
- **Philosophy**: snappy
## Rules
### Composition
Compose screens as poster-like spreads with one dominant hero column, supporting stacked utility panels, and die-cut geometric ornaments occupying gutters and negative space.
### Hierarchy
Use oversized Bungee display headlines, loud colour-blocked data callouts, and compact uppercase mono labels so scanning stays instant even amid playful density.
### Density
Medium-high density with tightly grouped controls inside boldly separated modules; decoration may be abundant, but task-critical content stays boxed into quiet mint, white or blush islands.
### Signature Patterns
- Every major card uses one black keyline plus a hard offset shadow, creating a printed cutout that separates layers without blur.
- Section headers and chips carry a die-cut geometric companion (circle, bar, triangle or squiggle) recolouring through teal, pink and yellow as one system.
- Backgrounds use faint dot and dash motifs behind quiet surfaces, giving flat fields the texture of laminated postmodern stationery.
- Primary actions and status pills are teal, pink, yellow or ink capsules with uppercase labels, keeping a toy-like but highly visible control system.
## Layout
### Grid
A 12-column desktop grid collapsing to a considered tablet band and a single mobile column, with oversized outer padding so decorative shapes can live in the margins.
### Breakpoints
Wide 1920+, desktop 1440, tablet 768-1024, mobile 390 with stacked panels and full-width actions.
### Whitespace
Compact spacing inside modules, larger gaps between them, so the graphic collage stays readable and task content stays on quiet paper.
## Guidance
### Do
- Anchor every decorative gesture to a content container so the screen feels composed.
- Use the keyline and loud accent fills to clarify interaction priority before relying on motion.
- Mix mint, white and blush surfaces while keeping body text on quiet paper.
### Don't
- Nest cards or trap navigation in a floating pill bar.
- Let dot or stripe patterns cross body text.
- Smooth out all asymmetry; a slight compositional clash is part of the identity.
## Imagery Direction
### Summary
Flat Memphis Milano graphic collage: bold shapes with thick black outlines and hard offset shadows, electric teal, hot pink and bright yellow over warm cream, with confetti, terrazzo and zig-zag motifs and a light risograph grain.
### Technique
flat 2D vector-poster illustration, thick black keylines, die-cut shapes, hard offset shadows, no gradients, subtle risograph grain
### Pairs With
confetti
### Palette
teal #12cfd0, hot pink #ff5fa2, bright yellow #f5dd22, ink #111111, cream #f6f3ee, mint #dff7ee
### Credits
- {"name":"Memphis Group (Ettore Sottsass, Milan, 1981)","kind":"movement","note":"the postmodern design collective this language descends from"}
- {"name":"Nathalie Du Pasquier","kind":"artist","note":"Memphis pattern and surface work"}
- {"name":"Riso / screen-print poster tradition","kind":"tradition","note":"flat spot-colour printing with registration grain"}
---
version: "alpha"
name: "Confetti"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#f6f3ee"
surface: "#ffffff"
surface_solid: "#dff7ee"
text: "#111111"
muted: "#5f5a67"
border: "#111111"
accent: "#12cfd0"
accent_2: "#ff5fa2"
accent_soft: "#f5dd22"
on_accent: "#111111"
success: "#16b57a"
warning: "#ffb000"
error: "#ff5570"
info: "#42a5ff"
typography:
headline-lg:
fontFamily: "Bungee"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Bungee"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Archivo"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "16px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_solid:
backgroundColor: "{colors.surface_solid}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_soft:
backgroundColor: "{colors.accent_soft}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Confetti
## Overview
A high-energy interface language that translates Memphis postmodern graphic design into digital product surfaces through flat die-cut shapes, loud contrast and deliberately anti-neutral composition. Every shape is cut from a confetti field, keylined once in black, and slapped down on its own hard offset shadow so it reads like a printed sticker.
### Values
- Playfulness as structure rather than decoration
- Graphic contrast that keeps hierarchy instantly legible
- Layered shapes and pattern fields that energise routine screens
- Intentional asymmetry balanced by strict alignment zones
### Anti-Values
- Corporate neutrality and invisible chrome
- Soft luxury minimalism or restrained monochrome
- Photoreal depth or skeuomorphic material imitation
### Visual Character
- Flat die-cut shapes sit behind and around content using offset circles, zig-zag dividers, dotted fields and angled bars in electric accents, each with a single crisp black keyline.
- Cards and panels rest on pale mint, white or blush paper, interrupted by a die-cut companion attached at one corner as one page-wide system.
- Typography pairs an oversized Bungee display with a clean Archivo body and uppercase IBM Plex Mono micro-labels, using strong scale jumps to feel like poster graphics.
- Buttons, tabs and metrics are printed capsules with a keyline, a hard offset shadow and a centred one-line label so every interactive element reads like a printed graphic object.
## 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 | `#f6f3ee` |
| surface | `#ffffff` |
| surface_solid | `#dff7ee` |
| text | `#111111` |
| muted | `#5f5a67` |
| border | `#111111` |
| accent | `#12cfd0` |
| accent_2 | `#ff5fa2` |
| accent_soft | `#f5dd22` |
| on_accent | `#111111` |
| success | `#16b57a` |
| warning | `#ffb000` |
| error | `#ff5570` |
| info | `#42a5ff` |
## Typography
- **Headline-Lg**: Bungee, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Bungee, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
### Grid
A 12-column desktop grid collapsing to a considered tablet band and a single mobile column, with oversized outer padding so decorative shapes can live in the margins.
### Breakpoints
Wide 1920+, desktop 1440, tablet 768-1024, mobile 390 with stacked panels and full-width actions.
### Whitespace
Compact spacing inside modules, larger gaps between them, so the graphic collage stays readable and task content stays on quiet paper.
## Elevation & Depth
### Shadows
- **Sm**: 3px 3px 0 #111111
- **Md**: 6px 6px 0 #111111
- **Lg**: 11px 11px 0 #111111
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: paper
- **Card Style**: Cream, white, mint or blush paper cards with one black keyline, a hard offset shadow and a single die-cut companion at one corner.
- **Bg Pattern**: dots
### Borders
- **Default Width**: 2px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: A single crisp black keyline, the printed die-cut signature, drawn once around a shape at a consistent 2px, never nested and never a one-sided accent, always paired with the hard offset shadow for lift.
## Components
### Composition
Compose screens as poster-like spreads with one dominant hero column, supporting stacked utility panels, and die-cut geometric ornaments occupying gutters and negative space.
### Hierarchy
Use oversized Bungee display headlines, loud colour-blocked data callouts, and compact uppercase mono labels so scanning stays instant even amid playful density.
### Density
Medium-high density with tightly grouped controls inside boldly separated modules; decoration may be abundant, but task-critical content stays boxed into quiet mint, white or blush islands.
### Signature Patterns
- Every major card uses one black keyline plus a hard offset shadow, creating a printed cutout that separates layers without blur.
- Section headers and chips carry a die-cut geometric companion (circle, bar, triangle or squiggle) recolouring through teal, pink and yellow as one system.
- Backgrounds use faint dot and dash motifs behind quiet surfaces, giving flat fields the texture of laminated postmodern stationery.
- Primary actions and status pills are teal, pink, yellow or ink capsules with uppercase labels, keeping a toy-like but highly visible control system.
## 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-019f8aff-7550-7ee3-8429-d90ca52e7b5c/DESIGN.with-shadcn.md`.
The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.
Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.
## Do's and Don'ts
- Do Anchor every decorative gesture to a content container so the screen feels composed.
- Do Use the keyline and loud accent fills to clarify interaction priority before relying on motion.
- Do Mix mint, white and blush surfaces while keeping body text on quiet paper.
- Don't Nest cards or trap navigation in a floating pill bar.
- Don't Let dot or stripe patterns cross body text.
- Don't Smooth out all asymmetry; a slight compositional clash is part of the identity.
## Imagery Direction
### Summary
Flat Memphis Milano graphic collage: bold shapes with thick black outlines and hard offset shadows, electric teal, hot pink and bright yellow over warm cream, with confetti, terrazzo and zig-zag motifs and a light risograph grain.
### Technique
flat 2D vector-poster illustration, thick black keylines, die-cut shapes, hard offset shadows, no gradients, subtle risograph grain
### Pairs With
confetti
### Palette
teal #12cfd0, hot pink #ff5fa2, bright yellow #f5dd22, ink #111111, cream #f6f3ee, mint #dff7ee
### Credits
- {"name":"Memphis Group (Ettore Sottsass, Milan, 1981)","kind":"movement","note":"the postmodern design collective this language descends from"}
- {"name":"Nathalie Du Pasquier","kind":"artist","note":"Memphis pattern and surface work"}
- {"name":"Riso / screen-print poster tradition","kind":"tradition","note":"flat spot-colour printing with registration grain"}
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "confetti",
"type": "registry:theme",
"title": "Confetti shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#f6f3ee",
"foreground": "#111111",
"card": "#ffffff",
"card-foreground": "#111111",
"popover": "#ffffff",
"popover-foreground": "#111111",
"primary": "#111111",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#5f5a67",
"muted-foreground": "#111111",
"accent": "#12cfd0",
"accent-foreground": "#ffffff",
"destructive": "#ff5570",
"border": "#111111",
"input": "#111111",
"ring": "#12cfd0",
"chart-1": "#111111",
"chart-2": "#f4f4f5",
"chart-3": "#12cfd0",
"chart-4": "#16b57a",
"chart-5": "#ffb000",
"sidebar": "#ffffff",
"sidebar-foreground": "#111111",
"sidebar-primary": "#111111",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#42a5ff",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#111111",
"sidebar-ring": "#12cfd0",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#111111",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#12cfd0",
"accent-foreground": "#ffffff",
"destructive": "#ff5570",
"border": "#303642",
"input": "#303642",
"ring": "#12cfd0",
"chart-1": "#111111",
"chart-2": "#f4f4f5",
"chart-3": "#12cfd0",
"chart-4": "#16b57a",
"chart-5": "#ffb000",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#111111",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#12cfd0",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#12cfd0",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019f8aff-7550-7ee3-8429-d90ca52e7b5c",
"slug": "confetti",
"componentManifest": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"nativeTokenNames": {
"colors": [
"accent",
"accent_2",
"accent_soft",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"success",
"surface",
"surface_solid",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
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: #f6f3ee;
--foreground: #111111;
--card: #ffffff;
--card-foreground: #111111;
--popover: #ffffff;
--popover-foreground: #111111;
--primary: #111111;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #5f5a67;
--muted-foreground: #111111;
--accent: #12cfd0;
--accent-foreground: #ffffff;
--destructive: #ff5570;
--border: #111111;
--input: #111111;
--ring: #12cfd0;
--chart-1: #111111;
--chart-2: #f4f4f5;
--chart-3: #12cfd0;
--chart-4: #16b57a;
--chart-5: #ffb000;
--sidebar: #ffffff;
--sidebar-foreground: #111111;
--sidebar-primary: #111111;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #42a5ff;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #111111;
--sidebar-ring: #12cfd0;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #111111;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #12cfd0;
--accent-foreground: #ffffff;
--destructive: #ff5570;
--border: #303642;
--input: #303642;
--ring: #12cfd0;
--chart-1: #111111;
--chart-2: #f4f4f5;
--chart-3: #12cfd0;
--chart-4: #16b57a;
--chart-5: #ffb000;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #111111;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #12cfd0;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #12cfd0;
--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 ConfettiShadcnKit() {
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">Confetti</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": "confetti",
"type": "registry:theme",
"author": "katagami-agent",
"title": "Confetti",
"description": "A Memphis postmodern graphic language for product UI: flat die-cut shapes with a single black keyline and a hard offset shadow, electric teal, hot pink and bright yellow used like highlighters over warm cream and mint paper.",
"cssVars": {
"theme": {
"font-sans": "Archivo, system-ui, sans-serif",
"font-heading": "Bungee, system-ui, sans-serif",
"font-mono": "IBM Plex Mono, ui-monospace, monospace",
"radius": "1rem"
},
"light": {
"background": "#f6f3ee",
"foreground": "#111111",
"card": "#ffffff",
"card-foreground": "#111111",
"popover": "#ffffff",
"popover-foreground": "#111111",
"primary": "#12cfd0",
"primary-foreground": "#111111",
"secondary": "#ff5fa2",
"secondary-foreground": "#111111",
"muted": "#dff7ee",
"muted-foreground": "#5f5a67",
"accent": "#f5dd22",
"accent-foreground": "#111111",
"destructive": "#ff5570",
"destructive-foreground": "#111111",
"border": "#111111",
"input": "#111111",
"ring": "#f5dd22",
"chart-1": "#12cfd0",
"chart-2": "#ff5fa2",
"chart-3": "#f5dd22",
"chart-4": "#16b57a",
"chart-5": "#42a5ff",
"radius": "1rem"
},
"dark": {
"background": "#141216",
"foreground": "#f6f3ee",
"card": "#1d1a20",
"card-foreground": "#f6f3ee",
"popover": "#1d1a20",
"popover-foreground": "#f6f3ee",
"primary": "#12cfd0",
"primary-foreground": "#111111",
"secondary": "#ff5fa2",
"secondary-foreground": "#111111",
"muted": "#252129",
"muted-foreground": "#b6afbd",
"accent": "#f5dd22",
"accent-foreground": "#111111",
"destructive": "#ff5570",
"destructive-foreground": "#111111",
"border": "#f6f3ee",
"input": "#f6f3ee",
"ring": "#f5dd22",
"chart-1": "#12cfd0",
"chart-2": "#ff5fa2",
"chart-3": "#f5dd22",
"chart-4": "#16b57a",
"chart-5": "#42a5ff",
"radius": "1rem"
}
},
"visualProfile": "Flat Memphis die-cut graphics: every surface is a shape cut from the confetti field, given one 2px black keyline and dropped onto a hard offset black shadow (no blur). Three accents (teal, pink, yellow) used like highlighters over cream and mint paper; Bungee display, Archivo body, IBM Plex Mono uppercase micro-labels; radius 16-24px on cards, full pills on controls.",
"notes": "Shadows are hard offsets (e.g. 6px 6px 0 #111), never soft blur. Keyline is a single full outline, never nested and never a one-sided accent edge. Buttons and chips are pills whose labels stay on one line. Semantic colors (success/warning/error/info) stay a small part of the palette."
}
# Confetti — shadcn/ui Components
Author: `katagami-agent`
Confetti dresses shadcn/ui as a Memphis postmodern print. Every primitive is a flat shape cut from the confetti field, given a single 2px black keyline and dropped onto a hard offset shadow — no soft blur, no grey borders, no nested frames. Teal leads, hot pink answers, bright yellow punctuates; cream and mint carry the reading surface.
## ShadSync visual profile
The renderer follows this profile when it stamps components:
- **family**: memphis / postmodern-graphic
- **material**: flat printed paper with a light risograph grain
- **contour**: single 2px black keyline (`--border: #111`), full outline only — never a one-sided accent edge, never nested
- **shadow**: hard offset, `6px 6px 0 #111` (sm `3px`, lg `11px`) — geometry-following, zero blur
- **radius**: 16px cards, 24px large panels, 9999px pills; 0 is allowed for hard-cut corners
- **type**: Bungee display, Archivo body (17px+), IBM Plex Mono uppercase micro-labels (`.14em` tracking)
- **accents**: teal `#12cfd0`, pink `#ff5fa2`, yellow `#f5dd22` — used like highlighters, one primary per view
- **ornament**: a die-cut geometric companion (circle, bar, triangle, squiggle) attached to card edges, recolouring through the three accents as one page-wide system
- **density**: medium-high, task content boxed into quiet mint/white/blush islands with the pattern kept behind
## Signature component recipes
- **Button** — a pill with a black keyline and a hard offset shadow; on hover it lifts (`translate(-2px,-2px)` + deeper shadow), on press it settles onto the shadow. Primary is filled teal with black text; secondary pink; tertiary yellow; `dark` is solid ink with white text; `ghost` drops the shadow and inks a teal sweep on hover.
- **Card** — one keyline, one shadow, one attached companion dot. Cards never nest. Surface rotates white / mint / blush / solid-teal for a loud callout.
- **Input / Textarea / Select** — same keyline-and-shadow capsule at 50px height; the select chevron is drawn from two CSS wedges, no native arrow. Focus deepens the offset shadow and rings in yellow.
- **Checkbox / Radio / Switch** — die-cut controls: the check fills pink inside a yellow box, the switch knob slides teal→pink along a keylined track.
- **Badge / Chip** — uppercase mono pill with a coloured status LED (success / warning / error / info); label stays on one line.
- **Table** — mono uppercase header on a teal band, zebra rows tinted mint, no row rules.
- **Tabs / Dialog / Sheet / Tooltip / Dropdown** — all carry the keyline + hard shadow; the active tab fills pink, the dialog rides a blush surface.
## Preview shots
`preview-shots.json` (schema `katagami:shadcn-preview-shots/renderable-v1`) ships three renderable product scenes — a campaign board, a build-a-block form, and a publish dialog — exercising all sixteen primitives against the visual profile above. Each shot names what it `mustShow` (keyline, hard offset shadow, die-cut companion, one primary accent) and what to `avoid` (soft blur, grey borders, nested cards, wrapped button labels).
## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
export function CampaignBlock() {
return (
<Card className="relative rounded-3xl border-2 border-foreground bg-card shadow-[6px_6px_0_theme(colors.foreground)]">
{/* die-cut companion */}
<span className="absolute -top-4 right-6 h-10 w-10 rounded-full border-2 border-foreground bg-secondary shadow-[3px_3px_0_theme(colors.foreground)]" />
<CardHeader className="flex items-center justify-between">
<CardTitle className="font-heading text-xl">Teal launch window</CardTitle>
<Badge className="rounded-full border-2 border-foreground bg-primary font-mono uppercase tracking-widest text-foreground">Live</Badge>
</CardHeader>
<CardContent>
<Button className="h-11 rounded-full border-2 border-foreground bg-primary px-5 font-extrabold text-foreground shadow-[3px_3px_0_theme(colors.foreground)] transition hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0_theme(colors.foreground)]">
Save block
</Button>
</CardContent>
</Card>
)
}
```
All primitives import from `@/components/ui/` and read their colours from the registry theme in `export.json`, so a palette swap re-skins the whole set while the keyline, hard shadow, and die-cut companion stay intact.
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"author": "katagami-agent",
"requiresVisualProfile": true,
"language": {
"id": "en-019f8aff-7550-7ee3-8429-d90ca52e7b5c",
"name": "Confetti",
"slug": "confetti"
},
"installCommand": "npx shadcn@latest add https://katagami.ai/r/confetti.json",
"primitives": [
"button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs",
"badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"
],
"identityNotes": [
"Every surface is a flat shape die-cut from the confetti field, given a single 2px black keyline and a hard offset shadow (no blur).",
"The keyline is a full outline only — never nested, never a one-sided accent edge.",
"Three accents (teal, pink, yellow) are used like highlighters; one primary accent per view.",
"A die-cut geometric companion (circle, bar, triangle, squiggle) attaches to card edges and recolours through the three accents as one page-wide system.",
"Bungee display, Archivo body (17px+), IBM Plex Mono uppercase micro-labels; pills for controls, 16-24px radius for cards.",
"Semantic colours (success/warning/error/info) stay a small part of the palette, shown as status LEDs."
],
"visualProfile": {
"family": "memphis-postmodern-graphic",
"material": "flat printed paper with light risograph grain",
"contour": "single 2px black keyline, full outline",
"border": "2px solid #111111",
"underlay": false,
"grain": true,
"stickerBadges": true,
"motion": "snappy — 180ms, hard-shadow lift on hover, settle on press",
"density": "medium-high",
"accents": ["#12cfd0", "#ff5fa2", "#f5dd22"]
},
"tokens": {
"background": "#f6f3ee",
"surface": "#ffffff",
"surfaceMint": "#dff7ee",
"surfaceBlush": "#ffe3ef",
"foreground": "#111111",
"muted": "#5f5a67",
"border": "#111111",
"primary": "#12cfd0",
"secondary": "#ff5fa2",
"accent": "#f5dd22",
"onAccent": "#111111",
"success": "#16b57a",
"warning": "#ffb000",
"error": "#ff5570",
"info": "#42a5ff",
"radiusCard": "24px",
"radiusControl": "16px",
"radiusPill": "9999px",
"shadowSm": "3px 3px 0 #111111",
"shadowMd": "6px 6px 0 #111111",
"shadowLg": "11px 11px 0 #111111",
"fontDisplay": "Bungee",
"fontBody": "Archivo",
"fontMono": "IBM Plex Mono"
},
"shots": [
{
"id": "campaign-board",
"title": "Campaign board overview",
"viewport": "desktop",
"primitives": ["card", "badge", "table", "tabs", "separator", "button", "tooltip"],
"composition": "A poster-sprint dashboard: KPI cards across the top, a Memphis colour-block bar chart, and an asset-queue table with a mono uppercase teal header and mint zebra rows. A die-cut companion dot sits on the chart card.",
"mustShow": ["single black keyline", "hard offset shadow", "die-cut companion dot", "one primary teal accent", "mono uppercase labels"],
"avoid": ["soft blur shadows", "grey borders", "nested cards", "wrapped button labels"],
"scene": {
"headline": "Where the launch stands",
"description": "Four KPI cards and a weekly-output chart over cream paper.",
"stats": [
{ "label": "Layout energy", "value": "88", "delta": "+6 this week" },
{ "label": "Assets ready", "value": "24", "delta": "of 31 queued" },
{ "label": "Shapes placed", "value": "312", "delta": "+48 today" },
{ "label": "Approval", "value": "72%", "delta": "4 studios signed" }
]
}
},
{
"id": "build-a-block",
"title": "Build a campaign block",
"viewport": "desktop",
"primitives": ["input", "textarea", "select", "checkbox", "radio", "switch", "slider", "button", "card"],
"composition": "A form card on white paper: keylined input, select with a drawn chevron, a die-cut checkbox and radio group, a teal→pink switch, and a keylined slider, closed by a primary teal Save button and a ghost Preview button.",
"mustShow": ["explicitly styled controls", "keyline + hard shadow on every field", "yellow focus ring", "primary teal button"],
"avoid": ["native browser control chrome", "soft blur", "grey borders", "nested cards"],
"scene": {
"headline": "Build a campaign block",
"description": "Every control is drawn — no browser defaults show through.",
"fields": [
{ "label": "Block name", "type": "input", "value": "Teal launch window" },
{ "label": "Pattern field", "type": "select", "value": "Confetti grid" },
{ "label": "Layout brief", "type": "textarea", "value": "One keyline per module, one companion, text on quiet paper." },
{ "label": "Shape density", "type": "slider", "value": "64%" }
]
}
},
{
"id": "publish-dialog",
"title": "Publish the kit",
"viewport": "desktop",
"primitives": ["dialog", "button", "badge", "checkbox", "separator", "sheet", "dropdown-menu"],
"composition": "A publish dialog on a blush surface with a keyline and hard shadow: a mono 'Modal' chip, a Bungee title, a short line of body copy, a keep-flying-white checkbox, and a primary teal Publish button beside a ghost Keep-editing button.",
"mustShow": ["blush dialog surface", "single keyline", "hard offset shadow", "primary teal action", "mono chip"],
"avoid": ["soft blur backdrop cards", "grey borders", "two competing primary buttons", "wrapped labels"],
"scene": {
"headline": "Publish the Confetti kit?",
"description": "Controls, table, tabs, chips and pattern rules render in one coherent print.",
"rows": [
{ "label": "Keep flying-white pattern", "value": "on" },
{ "label": "Diffusion preview", "value": "on" },
{ "label": "Seal on publish", "value": "4 sources" }
]
}
}
],
"componentRecipes": [
{ "primitive": "button", "intent": "Primary teal pill, black label, keyline + 3px hard shadow; lifts on hover, settles on press." },
{ "primitive": "button", "intent": "Ghost button with no shadow that inks a teal sweep on hover; used for secondary actions." },
{ "primitive": "card", "intent": "Cream/white/mint/blush paper with one keyline, one hard shadow, and a die-cut companion dot at one corner; never nested." },
{ "primitive": "input", "intent": "50px keylined capsule; focus deepens the offset shadow and rings yellow." },
{ "primitive": "textarea", "intent": "Same keyline capsule, taller, vertical resize only." },
{ "primitive": "select", "intent": "Keyline capsule with a chevron drawn from two CSS wedges — no native arrow." },
{ "primitive": "checkbox", "intent": "Die-cut box that fills yellow with a pink centre mark when checked." },
{ "primitive": "radio", "intent": "Die-cut circle sibling of the checkbox with a pink dot when selected." },
{ "primitive": "switch", "intent": "Keylined track with a knob that slides teal→pink on toggle." },
{ "primitive": "slider", "intent": "Keylined rail with a teal fill and a yellow keylined knob." },
{ "primitive": "badge", "intent": "Uppercase mono pill; accent-filled or with a status LED (success/warning/error/info)." },
{ "primitive": "tabs", "intent": "Pill tabs; the active tab fills pink with black text." },
{ "primitive": "table", "intent": "Mono uppercase header on a teal band, mint zebra rows, no row rules." },
{ "primitive": "dialog", "intent": "Blush surface, keyline + hard shadow, a mono 'Modal' chip and one primary action." },
{ "primitive": "sheet", "intent": "Side panel sharing the card treatment; slides in with a snappy 180ms ease." },
{ "primitive": "tooltip", "intent": "Small ink capsule with white mono text and a hard offset shadow." },
{ "primitive": "dropdown-menu", "intent": "Keylined paper menu; hovered item fills mint, selected item shows a teal companion dot." },
{ "primitive": "separator", "intent": "A faint dotted confetti rule, or three keylined accent dots — never a grey line." },
{ "primitive": "avatar", "intent": "Keylined circle filled teal/pink/yellow with mono initials." },
{ "primitive": "progress", "intent": "Keylined pill with a diagonal-striped teal fill." }
],
"qualityRules": {
"do": [
"Give every surface one full black keyline and one hard offset shadow.",
"Keep three accents used like highlighters, with one primary per view.",
"Attach a single die-cut companion per card and recolour it through the palette.",
"Keep body text 17px+ on quiet mint, white or blush paper.",
"Hold button and chip labels on one line."
],
"dont": [
"Use soft blurred shadows or grey borders.",
"Nest cards or trap navigation in a floating pill bar.",
"Let dot or stripe patterns cross body text.",
"Add a one-sided accent edge to a card.",
"Introduce fonts outside Bungee / Archivo / IBM Plex Mono."
]
}
}
Keep Confetti and swap a palette and an art style onto it. The landing & dashboard recolor live.