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: "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. Ev..."
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: "{colors.on_accent}"
    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

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap

- **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`.

Machine-readable companions for automation: `/language/en-019f3dcc-3bba-7572-b659-834730fc3cb0/shadcn.json` (registry theme), `/language/en-019f3dcc-3bba-7572-b659-834730fc3cb0/shadcn-components.md` (component recipes) and `/language/en-019f3dcc-3bba-7572-b659-834730fc3cb0/shadcn-shots.json` (preview shots). The human-facing handoff is still 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"
      ]
    }
  }
}
```