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.
Lay every view as a contact-sheet collage on a dark wall: scraps of varied size pinned with intentional overlap, anchored to a shared baseline gutter so the riot still scans. Dark wall is the reset between clusters of ink. Not a lead-column-plus-proof-rail; not a polite symmetrical grid.
A heavy poster grotesque sets the primary line with one highlighter ink-mark word; spot-ink dots and offset plates flag the most important numbers and actions; small-caps mono press-labels caption the rest.
Lively but pasted: cluster content into scraps with real dark breathing strips between them, so saturated ink always lands against open wall and never turns into a muddy field.
The torn cutout: every emphatic surface is a deckle-edge paper scrap with an offset spot-ink misregistration halo; overlaps multiply to violet; the scraps paste in on load.
A contact-sheet collage: scraps of varied size pinned across the dark wall with intentional overlap, anchored to shared baseline gutters so the riot scans cleanly. Overlap is where ink plates overprint to violet.
The dark wall is the reset between bursts of ink. Keep breathing strips around every scrap so saturated spot colour always meets open wall.
high-but-punctuated
Desktop keeps overlapping cutouts of varied size and full ink-plate offsets; tablet reduces overlap depth and stacks to fewer columns; mobile is one column with plate offsets shrunk to ~4px so nothing clips, the sidebar/nav wraps under, and display headlines shrink with clamp() and wrap.
misprint-riso
Risograph spot-ink screen-print imagery built from deliberately offset ink layers (misregistration halos, overprint-violet seams) and coarse halftone — applied here to torn-cutout subjects pinned on a dark wall, so the imagery reads as a hand-pulled paste-up.
Hero is a full-bleed riso paste-up of torn cutouts clustered to one side with open dark wall left for the headline overlay; features and avatars use the same misregistration technique on their own cut-out subjects. Never illustrated art in the gallery thumbnail.
# Decoupage ## Philosophy Decoupage is a paste-up wall for interfaces. It takes the loud, collectible, joyfully-commercial energy of pop art and editorial collage and stages it the way a zine spread or a fly-poster wall actually gets made: torn-paper cutouts pinned and overlapping on a dark ink wall. Brightness comes from electric spot inks glowing against near-black, not from outlining boxes or stamping toy stickers on everything. ### Values - the torn cutout as the unit of everything — deckle edge, ink halo, overprint seam - saturated spot-ink brightness glowing on a dark ink wall - depth built by pasting one scrap over another, never by grey shadow - loud but legible — open dark wall out-areas the ink - collectible, hand-torn, joyfully commercial character ### Anti-Values - thick black keylines stamped on every box - one shape used as wallpaper until it means nothing - muddy over-dense maximalism with no breathing room - white digital-glossy SaaS neutrality - soft drop-shadow elevation ### Visual Character - Every emphatic surface is a torn paper cutout: an irregular deckle silhouette (clip-path), never a rounded rectangle, so cards read as scraps pasted on a wall. - The shadow is an offset spot-ink plate shifted a few pixels behind the scrap — a magenta, cyan or yellow misregistration halo — never a grey drop shadow. - Where two cutouts overlap, the seam multiplies to violet; overlap is how depth and hierarchy read, exactly like overprinting two spot inks. - The ground is a dark ink wall with a coarse halftone dot field, so the surface reads as a printed wall before content loads; warm paper-white type sits high-contrast on top. - Display type is a heavy poster grotesque set tight, with one word carrying a flat highlighter ink-mark; supporting labels are small-caps mono press annotations. Status uses the three spot inks as solid ink-dots. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#14111A` | | surface | `#1E1A26` | | surface-2 | `#272031` | | text | `#F6F0E2` | | muted | `#9A8FB0` | | border | `#2C2536` | | accent | `#FF1F8E` | | accent-2 | `#19C9FF` | | accent-3 | `#FFE03A` | | overprint | `#7B2FF7` | | on-accent | `#14111A` | | on-magenta | `#FFFFFF` | | on-yellow | `#14111A` | | success | `#2ED98A` | | warning | `#FFE03A` | | error | `#FF1F8E` | | info | `#7B2FF7` | ### Typography - **Base Size**: 17px - **Body Font**: Space Grotesk, sans-serif - **Heading Font**: Archivo Expanded, Archivo, sans-serif - **Mono Font**: Space Mono, monospace - **Heading Weight**: 900 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.5 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@700;800;900&family=Archivo:wght@700;800;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,72,112] ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Ink-Magenta**: 8px 9px 0 0 #FF1F8E - **Ink-Cyan**: 8px 9px 0 0 #19C9FF - **Ink-Yellow**: 8px 9px 0 0 #FFE03A - **Note**: the canonical 'shadow' is an offset deckle ink PLATE behind the scrap, not a CSS box-shadow ### Surfaces - **Treatment**: torn-paper cutout on a dark ink wall - **Card Style**: A dark paper scrap (surface) with a deckle clip-path silhouette and an offset spot-ink plate behind it as the misregistration halo; overlaps multiply to violet. No borders, no grey shadows. - **Bg Pattern**: halftone-dots-on-dark ### Borders - **Default Width**: 0px - **Accent Width**: 0px - **Style**: none - **Character**: Cutouts carry no outline; the deckle edge, the offset ink halo and the open dark wall do all the separating. ### Motion - **Duration**: 620ms - **Easing**: cubic-bezier(0.2,0.9,0.25,1.1) - **Philosophy**: Cutouts PASTE IN on load — each scrap drops and settles onto the wall, as if pinned up one by one. The fully-pasted wall is the no-JS default; motion is added on top behind an html-class gate and lands on the settled state. Hover lifts a scrap (its ink halo grows); press settles it back down. ## Rules ### Composition Lay every view as a contact-sheet collage on a dark wall: scraps of varied size pinned with intentional overlap, anchored to a shared baseline gutter so the riot still scans. Dark wall is the reset between clusters of ink. Not a lead-column-plus-proof-rail; not a polite symmetrical grid. ### Hierarchy A heavy poster grotesque sets the primary line with one highlighter ink-mark word; spot-ink dots and offset plates flag the most important numbers and actions; small-caps mono press-labels caption the rest. ### Density Lively but pasted: cluster content into scraps with real dark breathing strips between them, so saturated ink always lands against open wall and never turns into a muddy field. ### Signature The torn cutout: every emphatic surface is a deckle-edge paper scrap with an offset spot-ink misregistration halo; overlaps multiply to violet; the scraps paste in on load. ### Signature Patterns - Cards, KPI tiles and buttons render as two layers: a deckle paper scrap plus an offset spot-ink plate behind it, so the 'shadow' is a magenta/cyan/yellow halo, never grey. - Headings carry a flat highlighter ink-mark behind one word (magenta, cyan or yellow); the rest stays warm paper-white on the dark wall. - Where two cutouts overlap (a badge over a card, a tag over an image) the seam multiplies to violet, marking depth by overprint. - The dark wall carries a coarse halftone dot field so the surface reads as a printed wall before content resolves; empty states drift a faint dot screen. - Status, links and metrics use the three spot inks as solid ink-dots; on load each scrap pastes in (drops and settles), on hover it lifts off the wall and on press it settles back. ## Layout ### Grid A contact-sheet collage: scraps of varied size pinned across the dark wall with intentional overlap, anchored to shared baseline gutters so the riot scans cleanly. Overlap is where ink plates overprint to violet. ### Whitespace The dark wall is the reset between bursts of ink. Keep breathing strips around every scrap so saturated spot colour always meets open wall. ### Density high-but-punctuated ### Responsive Desktop keeps overlapping cutouts of varied size and full ink-plate offsets; tablet reduces overlap depth and stacks to fewer columns; mobile is one column with plate offsets shrunk to ~4px so nothing clips, the sidebar/nav wraps under, and display headlines shrink with clamp() and wrap. ### Breakpoints - **Mobile**: 390px - **Tablet**: 768px - **Desktop**: 1100px - **Wide**: 1600px ## Guidance ### Do - Build every surface as a torn cutout: a deckle clip-path scrap with an offset spot-ink halo behind it. - Keep the wall dark; let the three spot inks glow like highlighters against near-black. - Use overlap to build depth — let the seam multiply to violet instead of adding a shadow. - Pair a heavy poster headline with one highlighter ink-mark word and small-caps mono labels. - Style every form control explicitly — deckle checkboxes, ticket toggles, cyan focus rings. ### Don't - Stamp a thick black keyline on every box, or add grey drop shadows for elevation. - Round the corners — the deckle silhouette is the identity. - Let the inks blend into mud; keep each spot flat and distinct, reserve violet for real overprints. - Default to a white or pastel ground; light mode is not this language. - Use one shape as wallpaper, or fill the wall so densely that the open dark gaps disappear. ### Accessibility Warm paper-white #F6F0E2 on the dark wall #14111A clears AA for body and large text. Spot inks are used for emphasis and fills with sufficient-contrast text (white on magenta, #14111A on cyan/yellow). Status is never colour-only — ink-dots pair with text labels. Focus states use a 2px cyan ring. Motion is gated behind prefers-reduced-motion and the settled wall renders with no JavaScript. ## Imagery Direction ### Pairs With misprint-riso ### Summary Risograph spot-ink screen-print imagery built from deliberately offset ink layers (misregistration halos, overprint-violet seams) and coarse halftone — applied here to torn-cutout subjects pinned on a dark wall, so the imagery reads as a hand-pulled paste-up. ### Subjects - torn-paper cutout collages on a dark wall - megaphones, hands, bursts, records and zine ephemera - pop-culture objects as cut-out scraps - portraits printed as layered spot-ink cutouts - still-life objects as overlapping scraps ### Usage Hero is a full-bleed riso paste-up of torn cutouts clustered to one side with open dark wall left for the headline overlay; features and avatars use the same misregistration technique on their own cut-out subjects. Never illustrated art in the gallery thumbnail.
---
version: "alpha"
name: "Decoupage"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#14111A"
surface: "#1E1A26"
surface-2: "#272031"
text: "#F6F0E2"
muted: "#9A8FB0"
border: "#2C2536"
accent: "#FF1F8E"
accent-2: "#19C9FF"
accent-3: "#FFE03A"
overprint: "#7B2FF7"
on-accent: "#14111A"
on-magenta: "#FFFFFF"
on-yellow: "#14111A"
success: "#2ED98A"
warning: "#FFE03A"
error: "#FF1F8E"
info: "#7B2FF7"
typography:
headline-lg:
fontFamily: "Archivo Expanded, Archivo, sans-serif"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Archivo Expanded, Archivo, sans-serif"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Space Grotesk, sans-serif"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Space Mono, monospace"
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: "72px"
step-8: "112px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface-2:
backgroundColor: "{colors.surface-2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent-2:
backgroundColor: "{colors.accent-2}"
color-reference-accent-3:
backgroundColor: "{colors.accent-3}"
color-reference-overprint:
backgroundColor: "{colors.overprint}"
color-reference-on-accent:
backgroundColor: "{colors.on-accent}"
color-reference-on-magenta:
backgroundColor: "{colors.on-magenta}"
color-reference-on-yellow:
backgroundColor: "{colors.on-yellow}"
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"
---
# Decoupage
## Overview
Decoupage is a paste-up wall for interfaces. It takes the loud, collectible, joyfully-commercial energy of pop art and editorial collage and stages it the way a zine spread or a fly-poster wall actually gets made: torn-paper cutouts pinned and overlapping on a dark ink wall. Brightness comes from electric spot inks glowing against near-black, not from outlining boxes or stamping toy stickers on everything.
### Values
- the torn cutout as the unit of everything — deckle edge, ink halo, overprint seam
- saturated spot-ink brightness glowing on a dark ink wall
- depth built by pasting one scrap over another, never by grey shadow
- loud but legible — open dark wall out-areas the ink
- collectible, hand-torn, joyfully commercial character
### Anti-Values
- thick black keylines stamped on every box
- one shape used as wallpaper until it means nothing
- muddy over-dense maximalism with no breathing room
- white digital-glossy SaaS neutrality
- soft drop-shadow elevation
### Visual Character
- Every emphatic surface is a torn paper cutout: an irregular deckle silhouette (clip-path), never a rounded rectangle, so cards read as scraps pasted on a wall.
- The shadow is an offset spot-ink plate shifted a few pixels behind the scrap — a magenta, cyan or yellow misregistration halo — never a grey drop shadow.
- Where two cutouts overlap, the seam multiplies to violet; overlap is how depth and hierarchy read, exactly like overprinting two spot inks.
- The ground is a dark ink wall with a coarse halftone dot field, so the surface reads as a printed wall before content loads; warm paper-white type sits high-contrast on top.
- Display type is a heavy poster grotesque set tight, with one word carrying a flat highlighter ink-mark; supporting labels are small-caps mono press annotations. Status uses the three spot inks as solid ink-dots.
## 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 | `#14111A` |
| surface | `#1E1A26` |
| surface-2 | `#272031` |
| text | `#F6F0E2` |
| muted | `#9A8FB0` |
| border | `#2C2536` |
| accent | `#FF1F8E` |
| accent-2 | `#19C9FF` |
| accent-3 | `#FFE03A` |
| overprint | `#7B2FF7` |
| on-accent | `#14111A` |
| on-magenta | `#FFFFFF` |
| on-yellow | `#14111A` |
| success | `#2ED98A` |
| warning | `#FFE03A` |
| error | `#FF1F8E` |
| info | `#7B2FF7` |
## Typography
- **Headline-Lg**: Archivo Expanded, Archivo, sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Expanded, Archivo, sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Space Grotesk, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space Mono, monospace, 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**: `72px`
- **Step-8**: `112px`
### Grid
A contact-sheet collage: scraps of varied size pinned across the dark wall with intentional overlap, anchored to shared baseline gutters so the riot scans cleanly. Overlap is where ink plates overprint to violet.
### Whitespace
The dark wall is the reset between bursts of ink. Keep breathing strips around every scrap so saturated spot colour always meets open wall.
### Density
high-but-punctuated
### Responsive
Desktop keeps overlapping cutouts of varied size and full ink-plate offsets; tablet reduces overlap depth and stacks to fewer columns; mobile is one column with plate offsets shrunk to ~4px so nothing clips, the sidebar/nav wraps under, and display headlines shrink with clamp() and wrap.
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1100px
- **Wide**: 1600px
## Elevation & Depth
### Shadows
- **Ink-Magenta**: 8px 9px 0 0 #FF1F8E
- **Ink-Cyan**: 8px 9px 0 0 #19C9FF
- **Ink-Yellow**: 8px 9px 0 0 #FFE03A
- **Note**: the canonical 'shadow' is an offset deckle ink PLATE behind the scrap, not a CSS box-shadow
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: torn-paper cutout on a dark ink wall
- **Card Style**: A dark paper scrap (surface) with a deckle clip-path silhouette and an offset spot-ink plate behind it as the misregistration halo; overlaps multiply to violet. No borders, no grey shadows.
- **Bg Pattern**: halftone-dots-on-dark
### Borders
- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: Cutouts carry no outline; the deckle edge, the offset ink halo and the open dark wall do all the separating.
## Components
### Composition
Lay every view as a contact-sheet collage on a dark wall: scraps of varied size pinned with intentional overlap, anchored to a shared baseline gutter so the riot still scans. Dark wall is the reset between clusters of ink. Not a lead-column-plus-proof-rail; not a polite symmetrical grid.
### Hierarchy
A heavy poster grotesque sets the primary line with one highlighter ink-mark word; spot-ink dots and offset plates flag the most important numbers and actions; small-caps mono press-labels caption the rest.
### Density
Lively but pasted: cluster content into scraps with real dark breathing strips between them, so saturated ink always lands against open wall and never turns into a muddy field.
### Signature
The torn cutout: every emphatic surface is a deckle-edge paper scrap with an offset spot-ink misregistration halo; overlaps multiply to violet; the scraps paste in on load.
### Signature Patterns
- Cards, KPI tiles and buttons render as two layers: a deckle paper scrap plus an offset spot-ink plate behind it, so the 'shadow' is a magenta/cyan/yellow halo, never grey.
- Headings carry a flat highlighter ink-mark behind one word (magenta, cyan or yellow); the rest stays warm paper-white on the dark wall.
- Where two cutouts overlap (a badge over a card, a tag over an image) the seam multiplies to violet, marking depth by overprint.
- The dark wall carries a coarse halftone dot field so the surface reads as a printed wall before content resolves; empty states drift a faint dot screen.
- Status, links and metrics use the three spot inks as solid ink-dots; on load each scrap pastes in (drops and settles), on hover it lifts off the wall and on press it settles back.
## 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-019efd3b-65eb-75a0-b9b0-9c91a6638e43/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 Build every surface as a torn cutout: a deckle clip-path scrap with an offset spot-ink halo behind it.
- Do Keep the wall dark; let the three spot inks glow like highlighters against near-black.
- Do Use overlap to build depth — let the seam multiply to violet instead of adding a shadow.
- Do Pair a heavy poster headline with one highlighter ink-mark word and small-caps mono labels.
- Do Style every form control explicitly — deckle checkboxes, ticket toggles, cyan focus rings.
- Don't Stamp a thick black keyline on every box, or add grey drop shadows for elevation.
- Don't Round the corners — the deckle silhouette is the identity.
- Don't Let the inks blend into mud; keep each spot flat and distinct, reserve violet for real overprints.
- Don't Default to a white or pastel ground; light mode is not this language.
- Don't Use one shape as wallpaper, or fill the wall so densely that the open dark gaps disappear.
### Accessibility
Warm paper-white #F6F0E2 on the dark wall #14111A clears AA for body and large text. Spot inks are used for emphasis and fills with sufficient-contrast text (white on magenta, #14111A on cyan/yellow). Status is never colour-only — ink-dots pair with text labels. Focus states use a 2px cyan ring. Motion is gated behind prefers-reduced-motion and the settled wall renders with no JavaScript.
## Imagery Direction
### Pairs With
misprint-riso
### Summary
Risograph spot-ink screen-print imagery built from deliberately offset ink layers (misregistration halos, overprint-violet seams) and coarse halftone — applied here to torn-cutout subjects pinned on a dark wall, so the imagery reads as a hand-pulled paste-up.
### Subjects
- torn-paper cutout collages on a dark wall
- megaphones, hands, bursts, records and zine ephemera
- pop-culture objects as cut-out scraps
- portraits printed as layered spot-ink cutouts
- still-life objects as overlapping scraps
### Usage
Hero is a full-bleed riso paste-up of torn cutouts clustered to one side with open dark wall left for the headline overlay; features and avatars use the same misregistration technique on their own cut-out subjects. Never illustrated art in the gallery thumbnail.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "decoupage",
"type": "registry:theme",
"title": "Decoupage shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#14111A",
"foreground": "#F6F0E2",
"card": "#1E1A26",
"card-foreground": "#F6F0E2",
"popover": "#1E1A26",
"popover-foreground": "#F6F0E2",
"primary": "#F6F0E2",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#9A8FB0",
"muted-foreground": "#F6F0E2",
"accent": "#FF1F8E",
"accent-foreground": "#ffffff",
"destructive": "#FF1F8E",
"border": "#2C2536",
"input": "#2C2536",
"ring": "#FF1F8E",
"chart-1": "#F6F0E2",
"chart-2": "#f4f4f5",
"chart-3": "#FF1F8E",
"chart-4": "#2ED98A",
"chart-5": "#FFE03A",
"sidebar": "#1E1A26",
"sidebar-foreground": "#F6F0E2",
"sidebar-primary": "#F6F0E2",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#7B2FF7",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#2C2536",
"sidebar-ring": "#FF1F8E",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#F6F0E2",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#FF1F8E",
"accent-foreground": "#ffffff",
"destructive": "#FF1F8E",
"border": "#303642",
"input": "#303642",
"ring": "#FF1F8E",
"chart-1": "#F6F0E2",
"chart-2": "#f4f4f5",
"chart-3": "#FF1F8E",
"chart-4": "#2ED98A",
"chart-5": "#FFE03A",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#F6F0E2",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#FF1F8E",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#FF1F8E",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efd3b-65eb-75a0-b9b0-9c91a6638e43",
"slug": "decoupage",
"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",
"border",
"error",
"info",
"muted",
"on-accent",
"on-magenta",
"on-yellow",
"overprint",
"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"
],
"spacing": [
"base",
"scale"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"ink-cyan",
"ink-magenta",
"ink-yellow",
"note"
],
"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
produced by opus-4.8 · sourced by opus-4.8 · images by gpt-image-2
Keep Decoupageand 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: #14111A;
--foreground: #F6F0E2;
--card: #1E1A26;
--card-foreground: #F6F0E2;
--popover: #1E1A26;
--popover-foreground: #F6F0E2;
--primary: #F6F0E2;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #9A8FB0;
--muted-foreground: #F6F0E2;
--accent: #FF1F8E;
--accent-foreground: #ffffff;
--destructive: #FF1F8E;
--border: #2C2536;
--input: #2C2536;
--ring: #FF1F8E;
--chart-1: #F6F0E2;
--chart-2: #f4f4f5;
--chart-3: #FF1F8E;
--chart-4: #2ED98A;
--chart-5: #FFE03A;
--sidebar: #1E1A26;
--sidebar-foreground: #F6F0E2;
--sidebar-primary: #F6F0E2;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #7B2FF7;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #2C2536;
--sidebar-ring: #FF1F8E;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #F6F0E2;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #FF1F8E;
--accent-foreground: #ffffff;
--destructive: #FF1F8E;
--border: #303642;
--input: #303642;
--ring: #FF1F8E;
--chart-1: #F6F0E2;
--chart-2: #f4f4f5;
--chart-3: #FF1F8E;
--chart-4: #2ED98A;
--chart-5: #FFE03A;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #F6F0E2;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #FF1F8E;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #FF1F8E;
--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 DecoupageShadcnKit() {
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">Decoupage</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": "decoupage",
"type": "registry:theme",
"title": "Decoupage",
"description": "A paste-up wall for interfaces: torn ink cutouts on a dark wall, three spot inks plus a violet overprint, deckle edges and offset misregistration halos instead of grey shadows.",
"cssVars": {
"theme": {
"font-sans": "Space Grotesk, ui-sans-serif, system-ui, sans-serif",
"font-mono": "Space Mono, ui-monospace, monospace",
"font-display": "Archivo Expanded, Archivo, sans-serif",
"radius": "0px"
},
"light": {
"background": "#14111A",
"foreground": "#F6F0E2",
"card": "#1E1A26",
"card-foreground": "#F6F0E2",
"popover": "#1E1A26",
"popover-foreground": "#F6F0E2",
"primary": "#FF1F8E",
"primary-foreground": "#FFFFFF",
"secondary": "#19C9FF",
"secondary-foreground": "#14111A",
"muted": "#272031",
"muted-foreground": "#9A8FB0",
"accent": "#FFE03A",
"accent-foreground": "#14111A",
"destructive": "#FF1F8E",
"destructive-foreground": "#FFFFFF",
"border": "#2C2536",
"input": "#272031",
"ring": "#19C9FF",
"chart-1": "#FF1F8E",
"chart-2": "#19C9FF",
"chart-3": "#FFE03A",
"chart-4": "#7B2FF7",
"chart-5": "#2ED98A"
},
"dark": {
"background": "#14111A",
"foreground": "#F6F0E2",
"card": "#1E1A26",
"card-foreground": "#F6F0E2",
"popover": "#1E1A26",
"popover-foreground": "#F6F0E2",
"primary": "#FF1F8E",
"primary-foreground": "#FFFFFF",
"secondary": "#19C9FF",
"secondary-foreground": "#14111A",
"muted": "#272031",
"muted-foreground": "#9A8FB0",
"accent": "#FFE03A",
"accent-foreground": "#14111A",
"destructive": "#FF1F8E",
"destructive-foreground": "#FFFFFF",
"border": "#2C2536",
"input": "#272031",
"ring": "#19C9FF",
"chart-1": "#FF1F8E",
"chart-2": "#19C9FF",
"chart-3": "#FFE03A",
"chart-4": "#7B2FF7",
"chart-5": "#2ED98A"
}
}
}
# Decoupage shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efd3b-65eb-75a0-b9b0-9c91a6638e43`
Slug: `decoupage`
## Intent
Decoupage is a paste-up wall for interfaces. It takes the loud, collectible, joyfully-commercial energy of pop art and editorial collage and stages it the way a zine spread or a fly-poster wall actually gets made: torn-paper cutouts pinned and overlapping on a dark ink wall. Brightness comes from electric spot inks glowing against near-black, not from outlining boxes or stamping toy stickers on everything.
## 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": "#14111A",
"surface": "#1E1A26",
"surface-2": "#272031",
"text": "#F6F0E2",
"muted": "#9A8FB0",
"border": "#2C2536",
"accent": "#FF1F8E",
"accent-2": "#19C9FF",
"accent-3": "#FFE03A",
"overprint": "#7B2FF7",
"on-accent": "#14111A",
"on-magenta": "#FFFFFF",
"on-yellow": "#14111A",
"success": "#2ED98A",
"warning": "#FFE03A",
"error": "#FF1F8E",
"info": "#7B2FF7"
}
Typography:
{
"base_size": "17px",
"body_font": "Space Grotesk, sans-serif",
"heading_font": "Archivo Expanded, Archivo, sans-serif",
"mono_font": "Space Mono, monospace",
"heading_weight": "900",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": "1.5",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@700;800;900&family=Archivo:wght@700;800;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap"
}
## Visual character to preserve
- Every emphatic surface is a torn paper cutout: an irregular deckle silhouette (clip-path), never a rounded rectangle, so cards read as scraps pasted on a wall.
- The shadow is an offset spot-ink plate shifted a few pixels behind the scrap — a magenta, cyan or yellow misregistration halo — never a grey drop shadow.
- Where two cutouts overlap, the seam multiplies to violet; overlap is how depth and hierarchy read, exactly like overprinting two spot inks.
- The ground is a dark ink wall with a coarse halftone dot field, so the surface reads as a printed wall before content loads; warm paper-white type sits high-contrast on top.
- Display type is a heavy poster grotesque set tight, with one word carrying a flat highlighter ink-mark; supporting labels are small-caps mono press annotations. Status uses the three spot inks as solid ink-dots.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "blob",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": true,
"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/decoupage/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: Build every surface as a torn cutout: a deckle clip-path scrap with an offset spot-ink halo behind it.; Keep the wall dark; let the three spot inks glow like highlighters against near-black.; Use overlap to build depth — let the seam multiply to violet instead of adding a shadow.; Pair a heavy poster headline with one highlighter ink-mark word and small-caps mono labels.; Style every form control explicitly — deckle checkboxes, ticket toggles, cyan focus rings.
- Do not: Stamp a thick black keyline on every box, or add grey drop shadows for elevation.; Round the corners — the deckle silhouette is the identity.; Let the inks blend into mud; keep each spot flat and distinct, reserve violet for real overprints.; Default to a white or pastel ground; light mode is not this language.; Use one shape as wallpaper, or fill the wall so densely that the open dark gaps disappear.
## 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 DecoupageShadcnKit() {
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">Decoupage</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 contact-sheet collage: scraps of varied size pinned across the dark wall with intentional overlap, anchored to shared baseline gutters so the riot scans cleanly. Overlap is where ink plates overprint to violet.",
"whitespace": "The dark wall is the reset between bursts of ink. Keep breathing strips around every scrap so saturated spot colour always meets open wall.",
"density": "high-but-punctuated",
"responsive": "Desktop keeps overlapping cutouts of varied size and full ink-plate offsets; tablet reduces overlap depth and stacks to fewer columns; mobile is one column with plate offsets shrunk to ~4px so nothing clips, the sidebar/nav wraps under, and display headlines shrink with clamp() and wrap.",
"breakpoints": {
"mobile": "390px",
"tablet": "768px",
"desktop": "1100px",
"wide": "1600px"
}
}
{
"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-019efd3b-65eb-75a0-b9b0-9c91a6638e43",
"name": "Decoupage",
"slug": "decoupage"
},
"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": [
"Every emphatic surface is a torn paper cutout: an irregular deckle silhouette (clip-path), never a rounded rectangle, so cards read as scraps pasted on a wall.",
"The shadow is an offset spot-ink plate shifted a few pixels behind the scrap — a magenta, cyan or yellow misregistration halo — never a grey drop shadow.",
"Where two cutouts overlap, the seam multiplies to violet; overlap is how depth and hierarchy read, exactly like overprinting two spot inks.",
"The ground is a dark ink wall with a coarse halftone dot field, so the surface reads as a printed wall before content loads; warm paper-white type sits high-contrast on top.",
"Display type is a heavy poster grotesque set tight, with one word carrying a flat highlighter ink-mark; supporting labels are small-caps mono press annotations. Status uses the three spot inks as solid ink-dots."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "blob",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": true,
"motion": "lift",
"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": "Decoupage 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": [
"Build every surface as a torn cutout: a deckle clip-path scrap with an offset spot-ink halo behind it.",
"Keep the wall dark; let the three spot inks glow like highlighters against near-black.",
"Use overlap to build depth — let the seam multiply to violet instead of adding a shadow.",
"Pair a heavy poster headline with one highlighter ink-mark word and small-caps mono labels.",
"Style every form control explicitly — deckle checkboxes, ticket toggles, cyan focus rings."
],
"dont": [
"Stamp a thick black keyline on every box, or add grey drop shadows for elevation.",
"Round the corners — the deckle silhouette is the identity.",
"Let the inks blend into mud; keep each spot flat and distinct, reserve violet for real overprints.",
"Default to a white or pastel ground; light mode is not this language.",
"Use one shape as wallpaper, or fill the wall so densely that the open dark gaps disappear."
]
}
}