---
version: "alpha"
name: "Impression"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#FF2E88"
  secondary: "#12B5C9"
  accent: "#FFC300"
  background: "#F7F1E4"
  surface: "#FFFDF7"
  text: "#1B1A17"
  muted: "#7C7566"
  border: "#1B1A17"
  error: "#F0433A"
  success: "#2FB170"
  warning: "#FF8A1E"
  info: "#12B5C9"
typography:
  display-xl:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: "3.815rem"
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: "-0.02em"
  display-lg:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: "3.052rem"
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: "-0.02em"
  heading-md:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: "1.953rem"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  body-lg:
    fontFamily: "Space Grotesk, sans-serif"
    fontSize: "1.25rem"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "0"
  body-md:
    fontFamily: "Space Grotesk, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "0"
  label-mono:
    fontFamily: "Space Mono, monospace"
    fontSize: "0.8rem"
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.14em"
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-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFDF7"
    typography: "{typography.label-mono}"
    rounded: "{rounded.full}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "48px"
---

# Impression

## Overview

Impression is a limited-edition screenprint pressed into an interface. It keeps the loud, collectible, joyfully commercial soul of pop design but pulls its expression from the risograph print shop instead of the comic-book panel. Every headline and key surface is built from two or three flat 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. There are no ink outlines, no drop-shadow stickers, no halftone-dot wallpaper. The page reads like a pull off the press: warm newsprint ground, three fluorescent inks, registration marks in the margins.

### Values

- collectible, limited-edition object energy
- three-ink fluorescent brightness on warm paper
- the misregister as signature, not defect
- newsprint color instead of adjacent color 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.
- Overprint 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 |
|-------|-------|
| primary | `#FF2E88` |
| secondary | `#12B5C9` |
| accent | `#FFC300` |
| background | `#F7F1E4` |
| surface | `#FFFDF7` |
| text | `#1B1A17` |
| muted | `#7C7566` |
| border | `#1B1A17` |
| error | `#F0433A` |
| success | `#2FB170` |
| warning | `#FF8A1E` |
| info | `#12B5C9` |

The overprint violet `#7A3E9D` and overprint green `#1E9E86` are never declared as slabs; they appear only where two ink accents cross, produced live with `color-mix`/`mix-blend-mode: multiply`.

## Typography

- **Display-Xl**: Archivo Black, 3.815rem, line-height 1.02, letter-spacing -0.02em — the pulled poster headline.
- **Display-Lg**: Archivo Black, 3.052rem, line-height 1.05.
- **Heading-Md**: Archivo Black, 1.953rem, line-height 1.1.
- **Body-Lg**: Space Grotesk, 1.25rem, line-height 1.55.
- **Body-Md**: Space Grotesk, 17px, line-height 1.55.
- **Label-Mono**: Space Mono, 0.8rem, weight 700, letter-spacing 0.14em — the color-bar caption.

One strict scale (ratio 1.25). Every size on the page is one of the six roles above; no one-off sizes. Display is Archivo Black, body is Space Grotesk, captions are Space Mono — three faces, three roles, nothing stray.

## 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 — no crowded corner beside a starved void.

### 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 single 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)` — a low print-lift, square corners.
- **Md**: `0 10px 24px -12px rgba(27,26,23,0.30)` — softens with the 16px radius it sits under.
- **Lg**: `0 20px 48px -20px rgba(27,26,23,0.34)` — for the 24px radius feature cards.

Shadows follow their element's geometry: the softness and spread agree with the corner radius; the flat 0-radius chips carry only the crisp print-lift.

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: newsprint paper with fine grain
- **Card Style**: warm off-white cards on the newsprint ground, no border, lifted by a soft print shadow, headed by a mono color-bar caption and its registration crosshair.
- **Bg Pattern**: paper-grain + a 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. Surfaces are edge-defined by paper, colour, and print-lift.

## 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), a tactile in-the-press feel instead of a soft float.

## 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 newsprints.
- 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.

## 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.