--- version: "alpha" name: "Plakat" description: "Agent-curated design language exported from Katagami as DESIGN.md." colors: bg: "#FFF4F8" surface: "#FFFFFF" surface_solid: "#FFFFFF" text: "#141414" muted: "#6A5A66" border: "#141414" accent: "#FF2D7A" accent_2: "#00C7F2" accent_soft: "#FFD84D" on_accent: "#141414" success: "#17B978" warning: "#FF9F1C" error: "#FF3B30" info: "#00C7F2" typography: display-lg: fontFamily: "Bungee, sans-serif" fontSize: "3.5rem" fontWeight: 400 lineHeight: 0.96 letterSpacing: "0.01em" display-md: fontFamily: "Bungee, sans-serif" fontSize: "2.5rem" fontWeight: 400 lineHeight: 1.02 letterSpacing: "0.01em" body-md: fontFamily: "Space Grotesk, sans-serif" fontSize: "17px" fontWeight: 400 lineHeight: 1.5 letterSpacing: "0.005em" label-mono: fontFamily: "IBM Plex Mono, monospace" fontSize: "0.8125rem" fontWeight: 600 lineHeight: 1 letterSpacing: "0.11em" rounded: none: "0px" md: "16px" lg: "24px" full: "9999px" spacing: base: "8px" xs: "4px" sm: "8px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.accent}" textColor: "#FFFFFF" typography: "{typography.label-mono}" rounded: "{rounded.none}" padding: "{spacing.md}" card-cutout: backgroundColor: "{colors.surface}" textColor: "{colors.text}" rounded: "{rounded.none}" padding: "{spacing.lg}" input-default: backgroundColor: "{colors.surface}" textColor: "{colors.text}" rounded: "{rounded.none}" height: "48px" --- # Plakat ## Overview Plakat is a maximalist pop system. It presses an interface the way a studio presses a limited-run poster — thick comic-ink keylines, ben-day halftone fields, adjacent slabs of saturated color, and die-cut cards that stack like stickers on a wall. It keeps the loud, collectible, joyfully commercial character of pop art and Memphis-era exuberance, but holds all of it inside a strict grid and one clear hierarchy so the noise always scans. The name (German for *poster*) points at the single strongest motif: every surface is a cutout poster you could peel off and pin up. ### Values - Graphic excess held together by legible structure - Consumer-culture brightness and instant readability - Playful, collectible, toy-shelf energy - Editorial collage layering with deliberate overlap - High-contrast hierarchy that reads from across the room ### Anti-Values - Timid neutrality and invisible card edges - Austere restraint or quiet monochrome polish - Corporate pastel washes and frictionless sameness - Noise so dense that hierarchy disappears ### Visual Character - Every major surface wears a bold black comic-ink keyline with a hard, offset drop shadow, so cards read like cutout posters pasted on a wall rather than soft digital glass. - Hero and header zones combine a page-wide ben-day halftone dot field, radiating burst rays, circular sticker badges and slightly rotated ribbon labels into a layered collage. - Display type is oversized and uppercase (Bungee); supporting labels use compact monospace to mimic packaging callouts and magazine captions. - Color blocking uses hot pink, electric cyan and saturated yellow in adjacent flat slabs against black-on-white — never tonal gradients. - Containers use die-cut geometry: one clipped corner, circular KPI stickers that overlap the grid, and pill badges — the collectible-object rhythm. ## The signature mechanic — the die-cut cutout The ownable move is the **die-cut cutout card**: a white (or candy-tinted) panel wrapped in a bold black keyline, dropped over a hard offset shadow, and clipped at one corner like a piece of packaging. Circular KPI stickers and rotated ribbon labels overlap its edges to break the grid on purpose. On interaction the card or button translates a few pixels while its offset shadow collapses — a tactile "pressed print" effect instead of soft elevation. This mechanic recolors through every semantic role, so a palette swap re-inks the whole system. ## Colors Use the YAML color tokens as the normative palette. Hot pink leads; electric cyan answers; saturated yellow marks the moment. A single comic-ink black (`#141414`) does all the keylines and shadows. Semantic colors stay in their lane and never become the visual lead. | Token | Value | Role | |-------|-------|------| | bg | `#FFF4F8` | Page ground (barely-pink white) | | surface | `#FFFFFF` | Card and panel fill | | text | `#141414` | Comic-ink body and headings | | muted | `#6A5A66` | Secondary text | | border | `#141414` | Keyline / offset-shadow ink | | accent | `#FF2D7A` | Hot pink — primary accent | | accent_2 | `#00C7F2` | Electric cyan — secondary accent | | accent_soft | `#FFD84D` | Saturated yellow — highlighter accent | | on_accent | `#141414` | Text on cyan / yellow fills | | success | `#17B978` | Success only | | warning | `#FF9F1C` | Warning only | | error | `#FF3B30` | Error only | | info | `#00C7F2` | Info (shares cyan) | Three accents, used like highlighters. That is the whole loud palette; everything else is ink and white. ## Typography - **Display-Lg**: Bungee, 3.5rem, weight 400, line-height 0.96 — hero and section mastheads, uppercase. - **Display-Md**: Bungee, 2.5rem, weight 400, line-height 1.02 — card and section titles, uppercase. - **Body-Md**: Space Grotesk, 17px, weight 400, line-height 1.5 — all body copy. - **Label-Mono**: IBM Plex Mono, 0.8125rem, weight 600, letter-spacing 0.11em — buttons, chips, ribbons, captions. One strict scale, three declared roles: Bungee for display, Space Grotesk for body, IBM Plex Mono for labels. No stray faces, no one-off sizes. ## Layout ### Spacing Tokens - **Base**: `8px` - **Xs**: `4px` · **Sm**: `8px` · **Md**: `16px` · **Lg**: `24px` · **Xl**: `32px` · **2xl**: `48px` · **3xl**: `64px` ### Grid Build screens as editorial collages: one dominant slab, several overlapping support cards, and a rhythm of badges and ribbons anchored to shared baseline gutters, so the deliberate chaos still scans cleanly. Contained content caps and centers on ultra-wide; only the full-bleed hero spans 100vw. ### Breakpoints - **Desktop (>1024)**: overlapping cards, floating stickers, full collage depth. - **Tablet (768–1024)**: its own considered layout — a 2-column stack with reduced overlap, sticker badges tucked closer, ribbons kept shallow. Never the mobile column stretched wide. - **Mobile (<640)**: a single column; badges move inside cards; oversized display headlines shrink with clamp() and wrap — never clip; the nav wraps to rows; tables scroll inside their own wrapper. ### Whitespace Whitespace is the reset between bursts of color and type. Breathing strips around each cluster keep the composition curated, never cluttered, and density stays balanced across the canvas — no crowded corner beside a starved void. ## Elevation & Depth ### Shadows Shadows are hard, offset, and un-blurred — the mark of a cutout pasted on a wall. They follow the element's own square geometry (0px radius cards get square shadows; pill badges keep their shadow tight). - **Sm**: `4px 4px 0 0 #141414` - **Md**: `7px 7px 0 0 #141414` - **Lg**: `12px 12px 0 0 #141414` ## Shapes ### Rounded - **None**: `0px` — die-cut cards, buttons, inputs (the default). - **Md**: `16px` — softened panels when a run needs it. - **Lg**: `24px` — large feature surfaces. - **Full**: `9999px` — circular KPI stickers, pill chips, toggles. Radii come only from {0, 16, 24, 9999}. One coherent geometry, no arbitrary in-between values. ### Surfaces - **Treatment**: paper / cutout poster. - **Card Style**: bright white or candy-tinted cards over a page-wide halftone dot field, wrapped in black keylines with hard offset shadows and one die-cut clipped corner. - **Bg Pattern**: ben-day halftone dots, applied page-wide as one recurring ornament system (with burst rays in hero zones). ### Borders - **Default Width**: 3px · **Accent Width**: 4px · **Style**: solid. - **Character**: borders are comic-book ink contours — dark, assertive, always visible enough to separate overlapping layers. This black keyline is the language's identity, not a timid grey edge; it wraps whole surfaces (never a single accent edge on one side of a card). ### Motion - **Duration**: 150–180ms · **Easing**: cubic-bezier(0.2, 0.9, 0.2, 1) · **Philosophy**: snappy, pressed-print. - Controls translate a few pixels on press while their offset shadow collapses. The landing's fully-rendered state is the default (visible with no JavaScript); reveal motion is layered on top and respects `prefers-reduced-motion`. ## Components ### Composition One dominant hero slab, several overlapping die-cut support cards, and a rhythm of circular stickers, rotated ribbons and mini-panels that feel intentionally collected rather than uniformly tiled. ### Hierarchy Oversized Bungee headlines, saturated color bands, circular KPI stickers and black keylines make primary actions and numbers readable from a distance before body copy resolves. One button is clearly primary (hot-pink fill); the rest are quieter (cyan, yellow, or ghost) but share one shape and height. ### Signature Patterns - **Die-cut cutout card** — panels clip one corner and drop a hard offset shadow, reading like die-cut packaging instead of a rounded rectangle. - **Ribbon section header** — headers sit on a slightly rotated cyan ribbon with an uppercase mono label and offset shadow, like a pasted editorial annotation. - **Circular KPI sticker** — statistic callouts live in circular or pill badges that overlap adjacent cards and break the grid. - **Halftone + burst field** — backgrounds carry a page-wide ben-day dot field with burst rays in hero zones, so the language is visibly pop-graphic before content loads. - **Pressed-print interaction** — controls translate a few pixels on hover/press as their offset shadow collapses. ### Links Links carry the language's own gesture: a yellow highlighter sweep inks up under the label on hover (never a bare default underline). ## Do's and Don'ts - Do wrap every important surface in a black keyline with a hard offset shadow. - Do pair oversized Bungee display type with compact mono labels and badges. - Do overlap stickers, ribbons and circular metrics so some elements break the grid. - Do use saturated adjacent color slabs instead of quiet tonal palettes. - Do fully style every form control, including selects, checkboxes, switches and ranges. - Don't rely on subtle grey borders or invisible card edges. - Don't center everything into a polite, symmetrical dashboard. - Don't mute the palette into corporate pastels or monochrome restraint. - Don't use browser-default form controls. - Don't pile noise so thickly that hierarchy disappears. ## Imagery Pair Plakat with the **Plakat Pop Screenprint** art style: pop-art comic screenprint with thick black ink outlines, ben-day halftone shading, saturated pink/cyan/yellow color blocking on white, die-cut sticker cutouts with hard offset shadows and burst rays. A transferable technique — it dresses a boombox, a face, a skyline or a teapot equally. Attributable to Roy Lichtenstein, Andy Warhol, and the Memphis-Milano and mid-century silkscreen poster traditions. ## 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-019f3dbe-fcec-7783-a8a6-24c3d4a48736/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.