katagami ✦ Impression

# Impression ## Philosophy Impression is a limited-edition risograph screenprint pressed into an interface. It keeps the loud, collectible, joyfully commercial soul of pop design but pulls its expression from the riso print shop instead of the comic-book panel. Every headline and key mark is built from two or three flat fluorescent spot-ink layers deliberately pulled a few pixels out of register, so type and shapes carry a bright chromatic double-vision fringe — the printer's happy accident, made the whole point. Where two inks cross they overprint into a third bloom. No ink outlines, no drop-shadow stickers, no halftone-dot wallpaper: a warm newsprint ground, three fluorescent inks, and the color-bar proof furniture as ornament. ### Values - collectible, limited-edition object energy - three-ink fluorescent brightness on warm paper - the misregister as signature, not defect - overprint colour instead of adjacent colour slabs - loud hierarchy that reads across the room ### Anti-Values - comic-book ink outlines and hard offset drop-shadows - halftone-dot backgrounds used as wallpaper - muted corporate pastels or monochrome restraint - grey borders and invisible card edges - graphic noise so dense the hierarchy dissolves ### Visual Character - The misregister knockout: headlines and marks render as offset spot-ink layers so every strong shape carries a cyan-and-pink double-pull ghost, the way a hand-pulled riso slips out of register. - Impression blooms: where pink crosses cyan the interface shows a real violet, where cyan crosses yellow a real green — colour arrives from ink multiplying, not from more slabs. - The color-bar rail: a strip of solid spot-ink swatches and a registration crosshair recur along section edges, the printer's proof furniture turned into the page's ornament system. - Warm newsprint ground with a fine paper grain everywhere, so even empty areas feel like stock pulled through a press, never a flat white screen. - Poster-weight display type set tight and huge, with mono color-bar labels underneath like the captions on an edition print. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F7F1E4` | | surface | `#FFFDF7` | | surface_solid | `#FFFDF7` | | text | `#1B1A17` | | muted | `#7C7566` | | border | `#1B1A17` | | accent | `#FF2E88` | | accent_2 | `#12B5C9` | | accent_soft | `#FFC300` | | on_accent | `#FFFDF7` | | success | `#2FB170` | | warning | `#FF8A1E` | | error | `#F0433A` | | info | `#12B5C9` | ### Typography - **Base Size**: 17px - **Body Font**: Space Grotesk, sans-serif - **Heading Font**: Archivo Black, sans-serif - **Mono Font**: Space Mono, monospace - **Heading Weight**: 400 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 2px 0 rgba(27,26,23,0.10) - **Md**: 0 10px 24px -12px rgba(27,26,23,0.30) - **Lg**: 0 20px 48px -20px rgba(27,26,23,0.34) ### Spacing - **Base**: 8px - **Scale**: [4,8,16,24,40,64,96] ### Surfaces - **Treatment**: newsprint paper with fine grain - **Card Style**: Warm off-white card on the newsprint ground, no border, lifted by a soft print shadow, headed by a mono color-bar caption and registration crosshair. - **Bg Pattern**: paper-grain + faint registration-crosshair field, never halftone-dot wallpaper ### Borders - **Default Width**: 0 - **Accent Width**: 0 - **Style**: none - **Character**: Separation comes from the misregister ghost and the color-bar rail, never from an ink outline or grey keyline. Inputs carry only an inset ink rule standing in for a plate edge. ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(0.2,0.9,0.2,1) - **Philosophy**: Controls press into the paper: on hover the misregister offset collapses toward zero, the mark snaps into register — a tactile in-the-press feel, never a soft float. ## Rules ### Composition Build screens as edition prints: a big pulled headline over a warm-paper field, a feature card carrying the hero pull, and a proof column of smaller cards, each captioned by a mono color-bar label and crosshair. Clusters break the grid only through overlapping swatch chips, never through skewed ribbons. ### Hierarchy Poster-weight display, set huge and tight, reads first. Mono color-bar labels annotate every block. Primary actions sit on solid pink fill; the misregister ghost makes them pop off the paper without a single border. ### Density Lively but balanced — bold chunks of ink separated by warm-paper gutters, so the eye gets a rest between the fluorescent moments and no region is crowded while another starves. ### Signature Patterns - Misregister knockout: strong headlines and marks render as offset spot-ink layers, carrying a cyan-and-pink double-pull ghost so shapes separate from paper without any outline. - Overprint blooms: accent inks that cross multiply into a real violet or green, so extra colour comes from overlap, not from more colour slabs. - The color-bar rail: solid spot-ink swatch strips plus a registration crosshair recur along section edges as one page-wide ornament system. - Mono color-bar captions head every card and section, set like the edition caption under a print. - Interactive controls press on the paper: on hover the misregister ghost snaps into register (the offset collapses toward zero). ## Layout ### Grid A calm 12-column editorial grid does the structural work so the loud ink can be loud without chaos. One oversized feature column pairs with a narrower proof column; clusters share baseline gutters. Density is balanced across the canvas. ### Breakpoints Desktop runs the feature-plus-proof two-column rhythm with the color-bar rail down the edges. The tablet band (768-1024) is its own layout: the rail moves to a top strip, the feature column goes full width, the proof column becomes a two-up row beneath it. Mobile stacks to one column, keeps the misregister on headlines only, and collapses the rail to a short swatch row so nothing overflows. ### Whitespace Warm paper is the rest between ink. Generous breathing strips wrap every cluster; titles always carry padding above them and are never stuck to a container top. ## Guidance ### Do - Build separation from the misregister ghost and the color-bar rail, never from ink outlines or grey borders. - Let overprint blooms supply extra colour where two inks cross, instead of adding a fourth slab. - Caption cards and sections with mono color-bar labels and a registration crosshair. - Keep the warm newsprint ground and its fine grain under everything, including empty states. - Keep the fluorescent inks to pink, cyan, and yellow, with violet/green only as overprints. ### Don't - Reach for comic-book ink outlines, hard offset drop-shadows, or sticker keylines. - Wallpaper backgrounds with halftone dots or burst rays. - Mute the palette into pastels or monochrome restraint. - Use browser-default form controls; every control carries the paper, radius, and misregister. - Crowd one region into noise while another starves — balance density across the canvas. ## Imagery Direction ### Pairs With impression ### Pairs With Art Style impression ### Summary Imagery is hand-pulled risograph screenprints in the Overprint art style: flat fluorescent spot-ink separations pulled out of register, overprint blooms where inks cross, on warm newsprint. Any subject — a market street, a face, a teapot — is dressed the same way. ### Hero A wide three-ink riso pull of an editorial scene (a night market), misregister ghost on every edge, room on one side for the overlay copy.

--- version: "alpha" name: "Impression" description: "Agent-curated design language exported from Katagami as DESIGN.md." colors: bg: "#F7F1E4" surface: "#FFFDF7" surface_solid: "#FFFDF7" text: "#1B1A17" muted: "#7C7566" border: "#1B1A17" accent: "#FF2E88" accent_2: "#12B5C9" accent_soft: "#FFC300" on_accent: "#FFFDF7" success: "#2FB170" warning: "#FF8A1E" error: "#F0433A" info: "#12B5C9" typography: headline-lg: fontFamily: "Archivo Black, sans-serif" fontSize: "2.075rem" fontWeight: 700 lineHeight: 1.1 letterSpacing: "-0.02em" headline-md: fontFamily: "Archivo Black, 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: "16px" lg: "24px" xl: "40px" 2xl: "64px" 3xl: "96px" 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" --- # Impression ## Overview Impression is a limited-edition risograph screenprint pressed into an interface. It keeps the loud, collectible, joyfully commercial soul of pop design but pulls its expression from the riso print shop instead of the comic-book panel. Every headline and key mark is built from two or three flat fluorescent spot-ink layers deliberately pulled a few pixels out of register, so type and shapes carry a bright chromatic double-vision fringe — the printer's happy accident, made the whole point. Where two inks cross they overprint into a third bloom. No ink outlines, no drop-shadow stickers, no halftone-dot wallpaper: a warm newsprint ground, three fluorescent inks, and the color-bar proof furniture as ornament. ### Values - collectible, limited-edition object energy - three-ink fluorescent brightness on warm paper - the misregister as signature, not defect - overprint colour instead of adjacent colour slabs - loud hierarchy that reads across the room ### Anti-Values - comic-book ink outlines and hard offset drop-shadows - halftone-dot backgrounds used as wallpaper - muted corporate pastels or monochrome restraint - grey borders and invisible card edges - graphic noise so dense the hierarchy dissolves ### Visual Character - The misregister knockout: headlines and marks render as offset spot-ink layers so every strong shape carries a cyan-and-pink double-pull ghost, the way a hand-pulled riso slips out of register. - Impression blooms: where pink crosses cyan the interface shows a real violet, where cyan crosses yellow a real green — colour arrives from ink multiplying, not from more slabs. - The color-bar rail: a strip of solid spot-ink swatches and a registration crosshair recur along section edges, the printer's proof furniture turned into the page's ornament system. - Warm newsprint ground with a fine paper grain everywhere, so even empty areas feel like stock pulled through a press, never a flat white screen. - Poster-weight display type set tight and huge, with mono color-bar labels underneath like the captions on an edition print. ## 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 | `#F7F1E4` | | surface | `#FFFDF7` | | surface_solid | `#FFFDF7` | | text | `#1B1A17` | | muted | `#7C7566` | | border | `#1B1A17` | | accent | `#FF2E88` | | accent_2 | `#12B5C9` | | accent_soft | `#FFC300` | | on_accent | `#FFFDF7` | | success | `#2FB170` | | warning | `#FF8A1E` | | error | `#F0433A` | | info | `#12B5C9` | ## Typography - **Headline-Lg**: Archivo Black, sans-serif, 2.075rem, weight 700, line-height 1.1. - **Headline-Md**: Archivo Black, 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**: `16px` - **Lg**: `24px` - **Xl**: `40px` - **2xl**: `64px` - **3xl**: `96px` ### Grid A calm 12-column editorial grid does the structural work so the loud ink can be loud without chaos. One oversized feature column pairs with a narrower proof column; clusters share baseline gutters. Density is balanced across the canvas. ### Breakpoints Desktop runs the feature-plus-proof two-column rhythm with the color-bar rail down the edges. The tablet band (768-1024) is its own layout: the rail moves to a top strip, the feature column goes full width, the proof column becomes a two-up row beneath it. Mobile stacks to one column, keeps the misregister on headlines only, and collapses the rail to a short swatch row so nothing overflows. ### Whitespace Warm paper is the rest between ink. Generous breathing strips wrap every cluster; titles always carry padding above them and are never stuck to a container top. ## Elevation & Depth ### Shadows - **Sm**: 0 2px 0 rgba(27,26,23,0.10) - **Md**: 0 10px 24px -12px rgba(27,26,23,0.30) - **Lg**: 0 20px 48px -20px rgba(27,26,23,0.34) ## Shapes ### Rounded - **None**: `0px` - **Md**: `16px` - **Lg**: `24px` - **Full**: `9999px` ### Surfaces - **Treatment**: newsprint paper with fine grain - **Card Style**: Warm off-white card on the newsprint ground, no border, lifted by a soft print shadow, headed by a mono color-bar caption and registration crosshair. - **Bg Pattern**: paper-grain + faint registration-crosshair field, never halftone-dot wallpaper ### Borders - **Default Width**: 0 - **Accent Width**: 0 - **Style**: none - **Character**: Separation comes from the misregister ghost and the color-bar rail, never from an ink outline or grey keyline. Inputs carry only an inset ink rule standing in for a plate edge. ## Components ### Composition Build screens as edition prints: a big pulled headline over a warm-paper field, a feature card carrying the hero pull, and a proof column of smaller cards, each captioned by a mono color-bar label and crosshair. Clusters break the grid only through overlapping swatch chips, never through skewed ribbons. ### Hierarchy Poster-weight display, set huge and tight, reads first. Mono color-bar labels annotate every block. Primary actions sit on solid pink fill; the misregister ghost makes them pop off the paper without a single border. ### Density Lively but balanced — bold chunks of ink separated by warm-paper gutters, so the eye gets a rest between the fluorescent moments and no region is crowded while another starves. ### Signature Patterns - Misregister knockout: strong headlines and marks render as offset spot-ink layers, carrying a cyan-and-pink double-pull ghost so shapes separate from paper without any outline. - Overprint blooms: accent inks that cross multiply into a real violet or green, so extra colour comes from overlap, not from more colour slabs. - The color-bar rail: solid spot-ink swatch strips plus a registration crosshair recur along section edges as one page-wide ornament system. - Mono color-bar captions head every card and section, set like the edition caption under a print. - Interactive controls press on the paper: on hover the misregister ghost snaps into register (the offset collapses toward zero). ## 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-019f3dcc-3bba-7572-b659-834730fc3cb0/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 separation from the misregister ghost and the color-bar rail, never from ink outlines or grey borders. - Do Let overprint blooms supply extra colour where two inks cross, instead of adding a fourth slab. - Do Caption cards and sections with mono color-bar labels and a registration crosshair. - Do Keep the warm newsprint ground and its fine grain under everything, including empty states. - Do Keep the fluorescent inks to pink, cyan, and yellow, with violet/green only as overprints. - Don't Reach for comic-book ink outlines, hard offset drop-shadows, or sticker keylines. - Don't Wallpaper backgrounds with halftone dots or burst rays. - Don't Mute the palette into pastels or monochrome restraint. - Don't Use browser-default form controls; every control carries the paper, radius, and misregister. - Don't Crowd one region into noise while another starves — balance density across the canvas. ## Imagery Direction ### Pairs With impression ### Pairs With Art Style impression ### Summary Imagery is hand-pulled risograph screenprints in the Overprint art style: flat fluorescent spot-ink separations pulled out of register, overprint blooms where inks cross, on warm newsprint. Any subject — a market street, a face, a teapot — is dressed the same way. ### Hero A wide three-ink riso pull of an editorial scene (a night market), misregister ghost on every edge, room on one side for the overlay copy.

```json { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "impression", "type": "registry:theme", "title": "Impression shadcn Theme", "cssVars": { "theme": {}, "light": { "background": "#F7F1E4", "foreground": "#1B1A17", "card": "#FFFDF7", "card-foreground": "#1B1A17", "popover": "#FFFDF7", "popover-foreground": "#1B1A17", "primary": "#1B1A17", "primary-foreground": "#ffffff", "secondary": "#f4f4f5", "secondary-foreground": "#111111", "muted": "#7C7566", "muted-foreground": "#1B1A17", "accent": "#FF2E88", "accent-foreground": "#ffffff", "destructive": "#F0433A", "border": "#1B1A17", "input": "#1B1A17", "ring": "#FF2E88", "chart-1": "#1B1A17", "chart-2": "#f4f4f5", "chart-3": "#FF2E88", "chart-4": "#2FB170", "chart-5": "#FF8A1E", "sidebar": "#FFFDF7", "sidebar-foreground": "#1B1A17", "sidebar-primary": "#1B1A17", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#12B5C9", "sidebar-accent-foreground": "#ffffff", "sidebar-border": "#1B1A17", "sidebar-ring": "#FF2E88", "radius": "16px" }, "dark": { "background": "#0f1115", "foreground": "#f8fafc", "card": "#181b22", "card-foreground": "#f8fafc", "popover": "#181b22", "popover-foreground": "#f8fafc", "primary": "#1B1A17", "primary-foreground": "#ffffff", "secondary": "#252a33", "secondary-foreground": "#f8fafc", "muted": "#252a33", "muted-foreground": "#a1a1aa", "accent": "#FF2E88", "accent-foreground": "#ffffff", "destructive": "#F0433A", "border": "#303642", "input": "#303642", "ring": "#FF2E88", "chart-1": "#1B1A17", "chart-2": "#f4f4f5", "chart-3": "#FF2E88", "chart-4": "#2FB170", "chart-5": "#FF8A1E", "sidebar": "#181b22", "sidebar-foreground": "#f8fafc", "sidebar-primary": "#1B1A17", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#FF2E88", "sidebar-accent-foreground": "#ffffff", "sidebar-border": "#303642", "sidebar-ring": "#FF2E88", "radius": "16px" } }, "meta": { "source": "katagami", "languageId": "en-019f3dcc-3bba-7572-b659-834730fc3cb0", "slug": "impression", "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" ] } } } ```

Typography

headline-lgArchivo Black · 33px · 700

The quick brown fox jumps

headline-mdArchivo Black · 27px · 600

The quick brown fox jumps

body-mdSpace Grotesk · 17px · 400

The quick brown fox jumps

label-mdSpace Mono · 12px · 600

The quick brown fox jumps

:root { --background: #F7F1E4; --foreground: #1B1A17; --card: #FFFDF7; --card-foreground: #1B1A17; --popover: #FFFDF7; --popover-foreground: #1B1A17; --primary: #1B1A17; --primary-foreground: #ffffff; --secondary: #f4f4f5; --secondary-foreground: #111111; --muted: #7C7566; --muted-foreground: #1B1A17; --accent: #FF2E88; --accent-foreground: #ffffff; --destructive: #F0433A; --border: #1B1A17; --input: #1B1A17; --ring: #FF2E88; --chart-1: #1B1A17; --chart-2: #f4f4f5; --chart-3: #FF2E88; --chart-4: #2FB170; --chart-5: #FF8A1E; --sidebar: #FFFDF7; --sidebar-foreground: #1B1A17; --sidebar-primary: #1B1A17; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #12B5C9; --sidebar-accent-foreground: #ffffff; --sidebar-border: #1B1A17; --sidebar-ring: #FF2E88; --radius: 16px; } .dark { --background: #0f1115; --foreground: #f8fafc; --card: #181b22; --card-foreground: #f8fafc; --popover: #181b22; --popover-foreground: #f8fafc; --primary: #1B1A17; --primary-foreground: #ffffff; --secondary: #252a33; --secondary-foreground: #f8fafc; --muted: #252a33; --muted-foreground: #a1a1aa; --accent: #FF2E88; --accent-foreground: #ffffff; --destructive: #F0433A; --border: #303642; --input: #303642; --ring: #FF2E88; --chart-1: #1B1A17; --chart-2: #f4f4f5; --chart-3: #FF2E88; --chart-4: #2FB170; --chart-5: #FF8A1E; --sidebar: #181b22; --sidebar-foreground: #f8fafc; --sidebar-primary: #1B1A17; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #FF2E88; --sidebar-accent-foreground: #ffffff; --sidebar-border: #303642; --sidebar-ring: #FF2E88; --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 ImpressionShadcnKit() { 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">Impression</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": "impression", "type": "registry:theme", "author": "katagami-agent", "title": "Impression", "description": "A limited-edition risograph screenprint pressed into an interface. Three fluorescent spot inks on warm newsprint, a deliberate misregister ghost on every strong mark, and overprint blooms where inks cross. No borders, no ink outlines, no sticker shadows.", "cssVars": { "theme": { "font-sans": "Space Grotesk, ui-sans-serif, system-ui, sans-serif", "font-mono": "Space Mono, ui-monospace, monospace", "font-display": "Archivo Black, sans-serif", "radius": "16px" }, "light": { "background": "#F7F1E4", "foreground": "#1B1A17", "card": "#FFFDF7", "card-foreground": "#1B1A17", "popover": "#FFFDF7", "popover-foreground": "#1B1A17", "primary": "#FF2E88", "primary-foreground": "#FFFDF7", "secondary": "#12B5C9", "secondary-foreground": "#1B1A17", "muted": "#EFE7D6", "muted-foreground": "#7C7566", "accent": "#FFC300", "accent-foreground": "#1B1A17", "destructive": "#F0433A", "destructive-foreground": "#FFFDF7", "success": "#2FB170", "warning": "#FF8A1E", "info": "#12B5C9", "border": "transparent", "input": "#1B1A17", "ring": "#12B5C9", "radius": "16px" }, "dark": { "background": "#1B1A17", "foreground": "#F7F1E4", "card": "#26241F", "card-foreground": "#F7F1E4", "popover": "#26241F", "popover-foreground": "#F7F1E4", "primary": "#FF2E88", "primary-foreground": "#1B1A17", "secondary": "#12B5C9", "secondary-foreground": "#1B1A17", "muted": "#312E28", "muted-foreground": "#B7AF9C", "accent": "#FFC300", "accent-foreground": "#1B1A17", "destructive": "#F0433A", "destructive-foreground": "#F7F1E4", "success": "#2FB170", "warning": "#FF8A1E", "info": "#12B5C9", "border": "transparent", "input": "#F7F1E4", "ring": "#12B5C9", "radius": "16px" } }, "visualProfile": { "family": "risograph-screenprint", "material": "warm newsprint paper with fine grain", "contour": "misregister ghost (offset spot-ink layers), never an ink outline", "border": "none", "underlay": true, "grain": true, "stickerBadges": false, "motion": "controls snap into register on hover; the offset collapses toward zero", "density": "balanced-lively", "accents": ["#FF2E88", "#12B5C9", "#FFC300"] }, "notes": "Separation comes from the misregister ghost and the color-bar rail, never from a border. The primary button carries a cyan overprint ghost behind it that snaps into register on hover. Overprint violet (#7A3E9D) and green (#1E9E86) are never declared as slabs; they are produced live with color-mix / mix-blend-mode:multiply where pink crosses cyan and cyan crosses yellow. Radius is drawn from {0, 16px, 24px, 9999px}. Display face is Archivo Black; body is Space Grotesk; captions are Space Mono set as color-bar labels." }

--- artifact: katagami:shadcn-components version: component-recipes-v1 language: Impression slug: impression author: katagami-agent --- # shadcn/ui Components — Impression Author: `katagami-agent` Impression is a limited-edition risograph screenprint pressed into an interface. These recipes adapt the standard shadcn/ui primitives to the language: three fluorescent spot inks (pink, cyan, yellow) on warm newsprint, a deliberate misregister ghost on every strong mark, overprint blooms where inks cross, and **no borders** — separation comes from the ghost and the color-bar rail, not from an ink outline or a grey keyline. ## ShadSync visual profile The renderer follows this profile so the generated components look like Impression itself, not a generic house chassis. - **family**: `risograph-screenprint` - **material**: warm newsprint paper (`#F7F1E4`) with a fine grain overlay; cards are a lighter off-white (`#FFFDF7`). - **contour**: the misregister ghost — strong marks render as offset spot-ink layers (a cyan ghost down-left, a pink ghost up-right). Never an ink outline, never a hard offset drop-shadow. - **border**: `none`. Inputs get an inset 2px ink rule (`box-shadow: inset 0 0 0 2px`) that reads as the plate edge, not a border box. - **radius**: drawn only from `{0, 16px, 24px, 9999px}`. Pills for buttons and chips; 16px for inputs and flat cards; 24px for feature cards. - **underlay**: `true` — the primary button carries a cyan newsprint layer behind it that snaps into register on hover. - **grain**: `true` — a subtle paper-grain noise sits under everything, including empty states. - **stickerBadges**: `false` — no comic-book sticker badges; badges are flat color-bar chips. - **motion**: on hover the misregister offset collapses toward zero (the mark "snaps into register"); `180ms cubic-bezier(.2,.9,.2,1)`; respects `prefers-reduced-motion`. - **density**: balanced-lively — bold ink chunks separated by warm-paper gutters. - **accents**: `#FF2E88` (pink), `#12B5C9` (cyan), `#FFC300` (yellow); overprint violet/green only where inks cross. ## Signature component recipes These are the recipes that carry Impression's identity into shadcn primitives. ### Button (primary) The primary button sits on solid `--primary` (pink) with a cyan newsprint layer behind it. Pill radius (`9999px`), Space Mono uppercase label, no border. ```tsx import { Button } from "@/components/ui/button" export function PullButton() { return ( <Button className="cw-btn-primary rounded-full font-mono uppercase tracking-wider"> Pull a proof </Button> ) } ``` ```css /* the misregister underlay — snaps into register on hover */ .cw-btn-primary { position: relative; background: var(--primary); color: var(--primary-foreground); border: 0; } .cw-btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--secondary); transform: translate(3px, 3px); mix-blend-mode: multiply; transition: transform 180ms cubic-bezier(.2,.9,.2,1); } .cw-btn-primary:hover::after { transform: translate(0, 0); } ``` ### Card A warm off-white card on the newsprint ground, lifted by a soft print shadow (no border), headed by a mono color-bar caption and its registration crosshair. ```tsx import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" export function EditionCard() { return ( <Card className="rounded-3xl border-0 shadow-[0_10px_24px_-12px_rgba(27,26,23,0.3)]"> <CardHeader> <span className="cw-colorbar" aria-hidden /> <CardTitle className="font-display">Riso Night Market</CardTitle> </CardHeader> <CardContent>Edition of 120 · signed on press</CardContent> </Card> ) } ``` ### Badge (color-bar chip) Flat spot-ink chips; text never wraps (the layout shrinks or stacks instead). ```tsx import { Badge } from "@/components/ui/badge" <Badge className="rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] font-mono uppercase whitespace-nowrap">In stock</Badge> ``` ### Input No border box — an inset 2px ink rule stands in for the plate edge; focus ring is a cyan newsprint glow. ```tsx import { Input } from "@/components/ui/input" <Input className="cw-input rounded-2xl border-0" placeholder="Print title" /> ``` ```css .cw-input { box-shadow: inset 0 0 0 2px var(--input); background: var(--card); } .cw-input:focus-visible { box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 3px color-mix(in srgb, var(--secondary) 45%, transparent); outline: none; } ``` ## Preview shots The renderable preview scenes live in `preview-shots.json` (`preview-shots-v1`, all 16 primitives, product scenes). Each shot names the primitives it exercises, what it `mustShow` (the misregister ghost, the color-bar rail, overprint blooms), and what to `avoid` (ink outlines, sticker shadows, halftone-dot wallpaper). The renderer honors the `visualProfile` above. Shots included: an **editions shelf** (cards, badges, buttons), an **order-the-edition form** (inputs, select, textarea, switch, checkbox, slider, dialog), and a **press-log dashboard** (table, tabs, tooltip, separator, dropdown-menu, sheet). ## Copy-paste component example A complete edition card with the misregister headline, color-bar caption, and pill actions — drop it in after installing the primitives. ```tsx import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" export function ImpressionEdition() { return ( <Card className="rounded-3xl border-0 bg-[var(--card)] shadow-[0_10px_24px_-12px_rgba(27,26,23,0.3)]"> <CardHeader className="space-y-3"> <span className="cw-colorbar h-2.5 w-24 rounded-full overflow-hidden flex" aria-hidden> <span className="flex-1 bg-[var(--primary)]" /> <span className="flex-1 bg-[var(--secondary)]" /> <span className="flex-1 bg-[var(--accent)]" /> </span> <CardTitle className="font-display text-3xl tracking-tight">Riso Night Market</CardTitle> </CardHeader> <CardContent className="space-y-4"> <p className="text-[var(--muted-foreground)]">A three-ink pull of the lantern stalls. Pink over cyan blooms violet in the awnings.</p> <div className="flex flex-wrap gap-2"> <Badge className="rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] font-mono uppercase whitespace-nowrap">In stock</Badge> <Badge className="rounded-full font-mono uppercase whitespace-nowrap" style={{ background: "color-mix(in srgb, var(--primary) 55%, var(--secondary) 45%)", color: "var(--primary-foreground)" }}>Impression</Badge> </div> <Button className="cw-btn-primary rounded-full font-mono uppercase tracking-wider">Add to shelf</Button> </CardContent> </Card> ) } ``` All primitives install from the standard registry path, e.g. `@/components/ui/button`, `@/components/ui/card`, `@/components/ui/badge`, `@/components/ui/input`. Apply the Impression theme from `export.json` and the recipes above; keep every control's radius in `{0, 16, 24, 9999}` and let the misregister ghost — never a border — do the separating.

{ "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": "impression", "name": "Impression", "slug": "impression" }, "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": [ "Separation comes from the misregister ghost and the color-bar rail — never a border or an ink outline.", "The primary button carries a cyan newsprint layer behind it that snaps into register on hover.", "Overprint violet and green appear only where pink crosses cyan and cyan crosses yellow, produced live with color-mix / mix-blend-mode:multiply.", "Cards and sections are headed by a mono color-bar caption (Space Mono) and a registration crosshair.", "Warm newsprint ground with a fine grain sits under everything, including empty states.", "Radius is drawn only from {0, 16px, 24px, 9999px}; buttons and chips are pills." ], "visualProfile": { "family": "risograph-screenprint", "material": "warm newsprint paper with fine grain", "contour": "misregister ghost (offset spot-ink layers)", "border": "none", "underlay": true, "grain": true, "stickerBadges": false, "motion": "controls snap into register on hover; the offset collapses toward zero", "density": "balanced-lively", "accents": ["#FF2E88", "#12B5C9", "#FFC300"] }, "tokens": { "background": "#F7F1E4", "foreground": "#1B1A17", "card": "#FFFDF7", "primary": "#FF2E88", "primary-foreground": "#FFFDF7", "secondary": "#12B5C9", "accent": "#FFC300", "muted": "#EFE7D6", "muted-foreground": "#7C7566", "destructive": "#F0433A", "success": "#2FB170", "warning": "#FF8A1E", "info": "#12B5C9", "overprint-violet": "#7A3E9D", "overprint-green": "#1E9E86", "input": "#1B1A17", "ring": "#12B5C9", "radius": "16px", "font-display": "Archivo Black, sans-serif", "font-sans": "Space Grotesk, sans-serif", "font-mono": "Space Mono, monospace" }, "shots": [ { "id": "editions-shelf", "title": "The editions shelf", "viewport": "desktop", "primitives": ["card", "badge", "button", "tabs", "separator", "tooltip"], "composition": "A filter tab row over a three-up grid of edition cards, each headed by a color-bar caption and crosshair, with pill badges and a primary pull button.", "mustShow": [ "misregister ghost on the card titles", "the color-bar rail caption on each card", "overprint-violet badge where pink crosses cyan", "pill buttons with the cyan newsprint underlay" ], "avoid": [ "any border or grey keyline on cards", "hard offset drop-shadow sticker look", "halftone-dot background wallpaper" ], "scene": { "headline": "Editions on the shelf", "description": "This week's limited screenprints, each captioned and numbered.", "rows": [ { "edition": "Riso Night Market", "inks": "P·C·Y", "run": "120", "status": "In stock" }, { "edition": "Water Tower", "inks": "P·C", "run": "80", "status": "Overprint" }, { "edition": "Ramen Bowl", "inks": "P·C·Y", "run": "150", "status": "On press" } ] } }, { "id": "order-edition-form", "title": "Order the edition", "viewport": "desktop", "primitives": ["input", "textarea", "select", "checkbox", "switch", "slider", "button", "dialog", "separator"], "composition": "A two-column order sheet: text fields and a select on the left, toggles/checkbox/slider on the right, with a confirmation dialog on submit.", "mustShow": [ "inputs with an inset ink rule instead of a border", "cyan newsprint focus ring on the active field", "the pink slider thumb carrying a cyan drop of ink", "color-bar caption over the form" ], "avoid": [ "browser-default form controls", "visible border boxes around fields", "muted pastel washes" ], "scene": { "headline": "Send it to press", "description": "Pick the ink set, note the printer, and choose your stock.", "fields": [ { "label": "Print title", "value": "Riso Night Market" }, { "label": "Ink set", "value": "Fluorescent pink · cyan · yellow" }, { "label": "Note to the printer", "value": "Push the misregister a touch on the awnings." }, { "label": "Ink saturation", "value": "72%" } ] } }, { "id": "press-log-dashboard", "title": "The press log", "viewport": "desktop", "primitives": ["table", "tabs", "badge", "dropdown-menu", "sheet", "tooltip", "separator", "button"], "composition": "A press-floor dashboard: KPI cards over a data table of active editions, with a status chip per row, a row dropdown-menu, and a side sheet for run detail.", "mustShow": [ "misregister ghost on the dashboard title", "color-bar captions on the KPI cards and table", "newsprint bars in the chart and progress fills", "status chips without any border" ], "avoid": [ "grey table gridlines or borders", "sticker-shadow KPI cards", "centering everything into a polite symmetrical grid" ], "scene": { "headline": "Two presses running", "description": "Today's floor: pulls, drift, ink stock, and every active edition.", "stats": [ { "label": "Prints pulled", "value": "1,284", "delta": "+12% wk" }, { "label": "Avg drift", "value": "3.4mm", "delta": "in band" }, { "label": "Ink usage", "value": "72%", "delta": "-4% wk" }, { "label": "Editions live", "value": "18", "delta": "+3 new" } ] } } ], "componentRecipes": [ { "primitive": "button", "intent": "Primary pull button on solid pink with a cyan newsprint underlay that snaps into register on hover; pill radius, Space Mono uppercase label, no border." }, { "primitive": "card", "intent": "Warm off-white card on newsprint, 24px radius, soft print shadow, headed by a color-bar caption and crosshair; never a border." }, { "primitive": "input", "intent": "No border box — an inset 2px ink rule stands in for the plate edge; cyan newsprint focus ring." }, { "primitive": "textarea", "intent": "Same inset-ink treatment as input, 16px radius, resizable vertically, grain-free surface." }, { "primitive": "select", "intent": "Custom chevron drawn as an SVG primitive; inset ink rule; menu surface is a lifted off-white card, no border." }, { "primitive": "dialog", "intent": "Centered off-white card with a color-bar caption at top; overlay is a warm ink scrim, not pure black; 24px radius." }, { "primitive": "sheet", "intent": "Side sheet slides in as a paper panel with a color-bar rail down its leading edge; no border, soft print shadow." }, { "primitive": "tabs", "intent": "Pill tabs on paper-tint; the active tab fills pink with the on-accent label; text never wraps." }, { "primitive": "badge", "intent": "Flat color-bar chip in a spot ink or an overprint bloom; pill radius; uppercase Space Mono; label never wraps." }, { "primitive": "separator", "intent": "A hairline of ink at 10% opacity, full-radius, standing in for the paper fold between clusters." }, { "primitive": "checkbox", "intent": "Square 6px-radius box with an inset ink rule; checked state fills cyan with an ink checkmark." }, { "primitive": "switch", "intent": "Pill track with an inset ink rule; on state fills pink; the knob is an off-white paper disc with a print-lift shadow." }, { "primitive": "slider", "intent": "Paper-tint track with an inset ink rule; pink thumb carrying a hard cyan ink drop offset behind it." }, { "primitive": "tooltip", "intent": "Ink-dark bubble with newsprint text in Space Mono; appears on hover, respects reduced motion." }, { "primitive": "dropdown-menu", "intent": "Lifted off-white menu card, no border; items highlight on paper-tint; a color-bar caption heads the menu." }, { "primitive": "table", "intent": "Row-as-card layout on off-white with paper gutters between rows; mono uppercase headers; status chips; no gridlines or borders." }, { "primitive": "badge", "intent": "Semantic status chip using success/warning/error/info as a small dot, kept a minor part of the palette, never visually primary." }, { "primitive": "card", "intent": "KPI card variant: mono label, oversized Archivo Black number in a spot ink, and a small delta chip; flat 16px radius." } ], "qualityRules": { "do": [ "Let the misregister ghost and the color-bar rail do all the separating.", "Use overprint violet/green only where two inks cross, produced live from the tokens.", "Caption cards and sections with mono color-bar labels and a registration crosshair.", "Keep every radius in {0, 16, 24, 9999} and every button/chip a pill with a non-wrapping label.", "Keep the warm newsprint ground and its grain under everything, including empty states." ], "dont": [ "Add borders, ink outlines, grey keylines, or hard offset drop-shadows.", "Wallpaper backgrounds with halftone dots or burst rays.", "Mute the palette into pastels or monochrome restraint.", "Ship browser-default form controls.", "Crowd one region into noise while another starves." ] } }

Impression

Download DESIGN.md

specification

try a remix

More like this

embodiments

at a glance

Typography

implementation kit

DESIGN.md with shadcn

DESIGN.md with shadcn

try a remix

More like this