design language·kukan-press-grid

Kukan Press Grid

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

Kukan Press Grid is a publication-driven interface language informed by Japanese culture magazines, compact urban newspapers, bookstore journals, event weeklies, and meticulously edited city guides. It treats the screen as an arranged spread where multiple stories, annotations, listings, and image captions coexist, allowing readers to scan laterally and build context through adjacency. The mood is metropolitan, observant, and typographically disciplined rather than product-marketing slick. Dense information is acceptable, but it must be sequenced through visible rules, folio markers, kickers, and contrasting text systems so the page still feels edited. In digital form, the language should preserve the sensation of a carefully art-directed print layout translated into a responsive reading environment.

values

Editorial density with visible structure and reading cuesTypographic contrast between literary display, practical body text, and coded metadataBrowsing by juxtaposition, annotation, and side-notes rather than single-funnel conversion flowsPaper-like tactility expressed through warm surfaces, crisp rules, and cropped image windows

anti-values

×Empty single-hero product landing pages×Uniform card systems where every module shares the same framing and priority×Glossy glass effects or startup-gradient sheen that erase the publication feeling×Interfaces that hide dates, districts, authorship, or issue context until hover or drill-down

tokens

colors12 items

primary

#111111

secondary

#5B5B5B

accent

#E94B35

background

#F4F0E8

surface

#FFFDF8

text

#151515

muted

#746E67

border

#1E1E1E

error

#C43D2F

success

#2E6B57

warning

#D08A22

info

#3D63A8

typography8 items

heading font: Cormorant Garamond
body font: Zen Kaku Gothic New
mono font: IBM Plex Mono
base size: 16px
scale ratio: 1.2
line height: 1.55
letter spacing: 0.01em
google fonts url: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

spacing5 items

base: 8px
scale: 4, 8, 12, 16, 24, 32, 40, 48, 64
outer margin: 24px
module padding: 18px
gutter: 18px

radii5 items

none: 0
sm: 6px
md: 12px
lg: 20px
full: 9999px

shadows3 items

sm: 0 1px 0 rgba(0,0,0,0.08)
md: 0 8px 24px rgba(17,17,17,0.08)
lg: 0 18px 50px rgba(17,17,17,0.12)

surfaces3 items

treatment: paper
card style: warm paper panels with crisp inset rules, full-width metadata strips, cropped media windows, and occasional tinted annotation slips that feel pasted into an editorial spread
bg pattern: grid

borders4 items

default width: 1px
accent width: 3px
style: solid
character: crisp newspaper-like rules with selective heavier dividers for feature packages, issue markers, and subscription stamps so borders actively create hierarchy rather than merely outlining boxes

motion3 items

duration: 180ms
easing: cubic-bezier(0.2, 0.8, 0.2, 1)
philosophy: snappy

rules

composition

Compose every screen as an unequal editorial spread built on a strict grid. Large features should sit beside narrow rails, diary notes, schedule strips, or citation columns so the eye can travel horizontally before it travels vertically. Keep modules rectangular and paper-like, but subdivide them internally with kickers, captions, inset sidebars, and rule-separated metadata.

hierarchy

Hierarchy should come from column span, crop proportion, type contrast, and the amount of visible metadata rather than oversized hero chrome. Feature stories earn larger serif headlines and bigger image windows, service information uses compact sans blocks, and navigation or filters read as monospace production controls. Calls to action should feel stamped, tabbed, or proof-marked instead of glossy.

density

Dense but edited. Every viewport should show multiple active stories, notes, and utilities at once, while consistent spacing, thin rules, and disciplined type scales prevent the page from collapsing into noise. The system should feel like an arranged publication board rather than a dashboard of interchangeable widgets.

signature patterns

Every major module starts with a full-width metadata band in uppercase monospace, separated from the content area by a thin bottom rule so each panel reads like a tagged editorial asset.Feature blocks use asymmetrical internal grids such as 8/4, 7/5, or stacked slice-plus-sidebar arrangements, with at least one narrow companion column carrying notes, figures, or captions beside the primary story.Salmon underline bars and small rotated district stickers overlap panel edges by a few pixels, creating deliberate editorial interruption that feels pasted or stamped onto the spread.Photo areas are framed as editorial crops—vertical slices, panoramic strips, or split panes—and every image frame includes visible captions, folio numbering, or archive references inside the module.Section transitions are marked by oversized low-contrast folio numerals paired with thin horizontal rules, simulating the pacing and sequencing of turning through a magazine issue.

layout

grid

Desktop uses a 12-column layout inside a 1440px frame with 18px gutters and 24px page padding. Tablet compresses to 8 columns while preserving metadata bands, narrow side notes, and paired story structures. Mobile becomes a 4-column stack where side rails convert into full-width slips but remain visibly attached to their parent modules.

breakpoints

Desktop: 1200px and above. Tablet: 700px to 1199px. Mobile: below 700px. At tablet, wide editorial spreads collapse into stacked feature packages with retained kicker bars and caption strips. At mobile, controls, article rails, and utility panels become full-width blocks while preserving folio markers and metadata visibility.

whitespace

Whitespace behaves like editorial pacing rather than luxury emptiness. Use active gutters between modules, blank paper bands to separate sections, and tighter internal spacing inside data-rich panels so density still feels intentionally sequenced.

density

Maintain visible richness at every size by showing several concurrent stories, notes, and controls without tabs or accordions hiding basic context.

guidance

Combine serif display, gothic sans body text, and monospace metadata so each text layer has a distinct editorial job.
Keep dates, districts, issue numbers, captions, and reading time visible inside modules instead of treating them as optional extras.
Use cropped media windows, caption strips, and narrow annotation rails so imagery feels selected and edited rather than dropped into generic cards.
Place at least one sidebar slip, quote rail, or stat column beside a major story in every viewport.
Style buttons, filters, checkboxes, selects, and tabs as printed production controls with rules, labels, and stamp-like emphasis.

avoid

Do not collapse the experience into a single centered hero followed by identical cards.
Do not apply the same image ratio, headline scale, and padding rhythm to every content block.
Do not introduce frosted glass, plush neumorphism, or glossy gradients that fight the paper-and-ink vocabulary.
Do not hide essential metadata behind hover states, nested menus, or secondary detail drawers.
Do not leave browser-default form controls or detached accent stickers that ignore the grid structure.

imagery

illustration style

Documentary photography, halftone textures, simple line annotations, and occasional collage fragments rather than glossy product renders.

hero image direction

Use tightly cropped city fragments, interiors, posters, shelves, streets, and hands-in-action; prioritize editorial crops over centered subject portraits.

icon style

Hairline editorial glyphs, arrows, folio marks, and transit-like labels.

image gen prompts

Japanese editorial magazine spread aesthetic, warm paper texture, urban culture coverage, tightly cropped photography, crisp black rules, subtle red accent labelsCity guide newspaper layout with vertical photo slices, serif headlines, mono metadata, paper background, disciplined editorial spacing

generative

webgl techniques

none by default

canvas effects

subtle grain overlayoptional scrolling underline reveal

shader palette

#F4F0E8#FFFDF8#E94B35#151515

animation philosophy

Motion should feel like paper pieces sliding into place or underlines advancing across a proof, never like immersive cinematic spectacle.

katagami spec

# Kukan Press Grid

## Philosophy

Kukan Press Grid is a publication-driven interface language informed by Japanese culture magazines, compact urban newspapers, bookstore journals, event weeklies, and meticulously edited city guides. It treats the screen as an arranged spread where multiple stories, annotations, listings, and image captions coexist, allowing readers to scan laterally and build context through adjacency. The mood is metropolitan, observant, and typographically disciplined rather than product-marketing slick. Dense information is acceptable, but it must be sequenced through visible rules, folio markers, kickers, and contrasting text systems so the page still feels edited. In digital form, the language should preserve the sensation of a carefully art-directed print layout translated into a responsive reading environment.

### Values

- Editorial density with visible structure and reading cues
- Typographic contrast between literary display, practical body text, and coded metadata
- Browsing by juxtaposition, annotation, and side-notes rather than single-funnel conversion flows
- Paper-like tactility expressed through warm surfaces, crisp rules, and cropped image windows

### Anti-Values

- Empty single-hero product landing pages
- Uniform card systems where every module shares the same framing and priority
- Glossy glass effects or startup-gradient sheen that erase the publication feeling
- Interfaces that hide dates, districts, authorship, or issue context until hover or drill-down

### Visual Character

- Warm paper-colored surfaces sit over a faintly ruled background grid, while every major module is enclosed by precise 1px black editorial rules and selected story groups receive heavier 3px dividers to establish spread hierarchy.
- Display headlines use a high-contrast serif with long vertical stress, body copy uses a disciplined Japanese gothic sans, and dates, districts, issue numbers, and timing labels run in compact monospace uppercase strips that read like production metadata.
- Primary screens are composed as asymmetrical multi-column spreads with narrow side rails, stacked annotation slips, and inset caption columns, creating several simultaneous reading paths instead of one centered content funnel.
- Accent gestures appear as salmon underline bars, pale ink side slips, and rotated district stickers that overlap panel edges by a few pixels, introducing controlled interruption without breaking the base grid.
- Imagery is always cropped into editorial windows such as tall vertical slices, narrow panoramic strips, and split photo panes, with each frame carrying visible captions, folio numbering, or archive labels rather than floating as decorative wallpaper.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#111111` |
| secondary | `#5B5B5B` |
| accent | `#E94B35` |
| background | `#F4F0E8` |
| surface | `#FFFDF8` |
| text | `#151515` |
| muted | `#746E67` |
| border | `#1E1E1E` |
| error | `#C43D2F` |
| success | `#2E6B57` |
| warning | `#D08A22` |
| info | `#3D63A8` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,40,48,64]
- **Outer Margin**: 24px
- **Module Padding**: 18px
- **Gutter**: 18px

### Radii

- **None**: 0
- **Sm**: 6px
- **Md**: 12px
- **Lg**: 20px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.08)
- **Md**: 0 8px 24px rgba(17,17,17,0.08)
- **Lg**: 0 18px 50px rgba(17,17,17,0.12)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm paper panels with crisp inset rules, full-width metadata strips, cropped media windows, and occasional tinted annotation slips that feel pasted into an editorial spread
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: crisp newspaper-like rules with selective heavier dividers for feature packages, issue markers, and subscription stamps so borders actively create hierarchy rather than merely outlining boxes

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy

## Rules

### Composition

Compose every screen as an unequal editorial spread built on a strict grid. Large features should sit beside narrow rails, diary notes, schedule strips, or citation columns so the eye can travel horizontally before it travels vertically. Keep modules rectangular and paper-like, but subdivide them internally with kickers, captions, inset sidebars, and rule-separated metadata.

### Hierarchy

Hierarchy should come from column span, crop proportion, type contrast, and the amount of visible metadata rather than oversized hero chrome. Feature stories earn larger serif headlines and bigger image windows, service information uses compact sans blocks, and navigation or filters read as monospace production controls. Calls to action should feel stamped, tabbed, or proof-marked instead of glossy.

### Density

Dense but edited. Every viewport should show multiple active stories, notes, and utilities at once, while consistent spacing, thin rules, and disciplined type scales prevent the page from collapsing into noise. The system should feel like an arranged publication board rather than a dashboard of interchangeable widgets.

### Signature Patterns

- Every major module starts with a full-width metadata band in uppercase monospace, separated from the content area by a thin bottom rule so each panel reads like a tagged editorial asset.
- Feature blocks use asymmetrical internal grids such as 8/4, 7/5, or stacked slice-plus-sidebar arrangements, with at least one narrow companion column carrying notes, figures, or captions beside the primary story.
- Salmon underline bars and small rotated district stickers overlap panel edges by a few pixels, creating deliberate editorial interruption that feels pasted or stamped onto the spread.
- Photo areas are framed as editorial crops—vertical slices, panoramic strips, or split panes—and every image frame includes visible captions, folio numbering, or archive references inside the module.
- Section transitions are marked by oversized low-contrast folio numerals paired with thin horizontal rules, simulating the pacing and sequencing of turning through a magazine issue.

## Layout

### Grid

Desktop uses a 12-column layout inside a 1440px frame with 18px gutters and 24px page padding. Tablet compresses to 8 columns while preserving metadata bands, narrow side notes, and paired story structures. Mobile becomes a 4-column stack where side rails convert into full-width slips but remain visibly attached to their parent modules.

### Breakpoints

Desktop: 1200px and above. Tablet: 700px to 1199px. Mobile: below 700px. At tablet, wide editorial spreads collapse into stacked feature packages with retained kicker bars and caption strips. At mobile, controls, article rails, and utility panels become full-width blocks while preserving folio markers and metadata visibility.

### Whitespace

Whitespace behaves like editorial pacing rather than luxury emptiness. Use active gutters between modules, blank paper bands to separate sections, and tighter internal spacing inside data-rich panels so density still feels intentionally sequenced.

### Density

Maintain visible richness at every size by showing several concurrent stories, notes, and controls without tabs or accordions hiding basic context.

## Guidance

### Do

- Combine serif display, gothic sans body text, and monospace metadata so each text layer has a distinct editorial job.
- Keep dates, districts, issue numbers, captions, and reading time visible inside modules instead of treating them as optional extras.
- Use cropped media windows, caption strips, and narrow annotation rails so imagery feels selected and edited rather than dropped into generic cards.
- Place at least one sidebar slip, quote rail, or stat column beside a major story in every viewport.
- Style buttons, filters, checkboxes, selects, and tabs as printed production controls with rules, labels, and stamp-like emphasis.

### Don't

- Do not collapse the experience into a single centered hero followed by identical cards.
- Do not apply the same image ratio, headline scale, and padding rhythm to every content block.
- Do not introduce frosted glass, plush neumorphism, or glossy gradients that fight the paper-and-ink vocabulary.
- Do not hide essential metadata behind hover states, nested menus, or secondary detail drawers.
- Do not leave browser-default form controls or detached accent stickers that ignore the grid structure.

## Imagery Direction

### Illustration Style

Documentary photography, halftone textures, simple line annotations, and occasional collage fragments rather than glossy product renders.

### Hero Image Direction

Use tightly cropped city fragments, interiors, posters, shelves, streets, and hands-in-action; prioritize editorial crops over centered subject portraits.

### Icon Style

Hairline editorial glyphs, arrows, folio marks, and transit-like labels.

### Image Gen Prompts

- Japanese editorial magazine spread aesthetic, warm paper texture, urban culture coverage, tightly cropped photography, crisp black rules, subtle red accent labels
- City guide newspaper layout with vertical photo slices, serif headlines, mono metadata, paper background, disciplined editorial spacing

## Generative Canvas

### Webgl Techniques

- none by default

### Canvas Effects

- subtle grain overlay
- optional scrolling underline reveal

### Shader Palette

- #F4F0E8
- #FFFDF8
- #E94B35
- #151515

### Animation Philosophy

Motion should feel like paper pieces sliding into place or underlines advancing across a proof, never like immersive cinematic spectacle.

DESIGN.md

---
version: "alpha"
name: "Kukan Press Grid"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#111111"
  secondary: "#5B5B5B"
  accent: "#E94B35"
  background: "#F4F0E8"
  surface: "#FFFDF8"
  text: "#151515"
  muted: "#746E67"
  border: "#1E1E1E"
  error: "#C43D2F"
  success: "#2E6B57"
  warning: "#D08A22"
  info: "#3D63A8"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.728rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0.01em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.44rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "0.01em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "6px"
  md: "12px"
  lg: "20px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "40px"
  4xl: "48px"
  step-8: "64px"
  outer_margin: "24px"
  module_padding: "18px"
  gutter: "18px"
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: "#ffffff"
    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"
---

# Kukan Press Grid

## Overview

Kukan Press Grid is a publication-driven interface language informed by Japanese culture magazines, compact urban newspapers, bookstore journals, event weeklies, and meticulously edited city guides. It treats the screen as an arranged spread where multiple stories, annotations, listings, and image captions coexist, allowing readers to scan laterally and build context through adjacency. The mood is metropolitan, observant, and typographically disciplined rather than product-marketing slick. Dense information is acceptable, but it must be sequenced through visible rules, folio markers, kickers, and contrasting text systems so the page still feels edited. In digital form, the language should preserve the sensation of a carefully art-directed print layout translated into a responsive reading environment.

### Values

- Editorial density with visible structure and reading cues
- Typographic contrast between literary display, practical body text, and coded metadata
- Browsing by juxtaposition, annotation, and side-notes rather than single-funnel conversion flows
- Paper-like tactility expressed through warm surfaces, crisp rules, and cropped image windows

### Anti-Values

- Empty single-hero product landing pages
- Uniform card systems where every module shares the same framing and priority
- Glossy glass effects or startup-gradient sheen that erase the publication feeling
- Interfaces that hide dates, districts, authorship, or issue context until hover or drill-down

### Visual Character

- Warm paper-colored surfaces sit over a faintly ruled background grid, while every major module is enclosed by precise 1px black editorial rules and selected story groups receive heavier 3px dividers to establish spread hierarchy.
- Display headlines use a high-contrast serif with long vertical stress, body copy uses a disciplined Japanese gothic sans, and dates, districts, issue numbers, and timing labels run in compact monospace uppercase strips that read like production metadata.
- Primary screens are composed as asymmetrical multi-column spreads with narrow side rails, stacked annotation slips, and inset caption columns, creating several simultaneous reading paths instead of one centered content funnel.
- Accent gestures appear as salmon underline bars, pale ink side slips, and rotated district stickers that overlap panel edges by a few pixels, introducing controlled interruption without breaking the base grid.
- Imagery is always cropped into editorial windows such as tall vertical slices, narrow panoramic strips, and split photo panes, with each frame carrying visible captions, folio numbering, or archive labels rather than floating as decorative wallpaper.

## 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 | `#111111` |
| secondary | `#5B5B5B` |
| accent | `#E94B35` |
| background | `#F4F0E8` |
| surface | `#FFFDF8` |
| text | `#151515` |
| muted | `#746E67` |
| border | `#1E1E1E` |
| error | `#C43D2F` |
| success | `#2E6B57` |
| warning | `#D08A22` |
| info | `#3D63A8` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 1.728rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.44rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 16px, weight 400, line-height 1.55.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `40px`
- **4xl**: `48px`
- **Step-8**: `64px`
- **Outer Margin**: `24px`
- **Module Padding**: `18px`
- **Gutter**: `18px`

### Grid

Desktop uses a 12-column layout inside a 1440px frame with 18px gutters and 24px page padding. Tablet compresses to 8 columns while preserving metadata bands, narrow side notes, and paired story structures. Mobile becomes a 4-column stack where side rails convert into full-width slips but remain visibly attached to their parent modules.

### Breakpoints

Desktop: 1200px and above. Tablet: 700px to 1199px. Mobile: below 700px. At tablet, wide editorial spreads collapse into stacked feature packages with retained kicker bars and caption strips. At mobile, controls, article rails, and utility panels become full-width blocks while preserving folio markers and metadata visibility.

### Whitespace

Whitespace behaves like editorial pacing rather than luxury emptiness. Use active gutters between modules, blank paper bands to separate sections, and tighter internal spacing inside data-rich panels so density still feels intentionally sequenced.

### Density

Maintain visible richness at every size by showing several concurrent stories, notes, and controls without tabs or accordions hiding basic context.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.08)
- **Md**: 0 8px 24px rgba(17,17,17,0.08)
- **Lg**: 0 18px 50px rgba(17,17,17,0.12)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `6px`
- **Md**: `12px`
- **Lg**: `20px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: paper
- **Card Style**: warm paper panels with crisp inset rules, full-width metadata strips, cropped media windows, and occasional tinted annotation slips that feel pasted into an editorial spread
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: crisp newspaper-like rules with selective heavier dividers for feature packages, issue markers, and subscription stamps so borders actively create hierarchy rather than merely outlining boxes

## Components

### Composition

Compose every screen as an unequal editorial spread built on a strict grid. Large features should sit beside narrow rails, diary notes, schedule strips, or citation columns so the eye can travel horizontally before it travels vertically. Keep modules rectangular and paper-like, but subdivide them internally with kickers, captions, inset sidebars, and rule-separated metadata.

### Hierarchy

Hierarchy should come from column span, crop proportion, type contrast, and the amount of visible metadata rather than oversized hero chrome. Feature stories earn larger serif headlines and bigger image windows, service information uses compact sans blocks, and navigation or filters read as monospace production controls. Calls to action should feel stamped, tabbed, or proof-marked instead of glossy.

### Density

Dense but edited. Every viewport should show multiple active stories, notes, and utilities at once, while consistent spacing, thin rules, and disciplined type scales prevent the page from collapsing into noise. The system should feel like an arranged publication board rather than a dashboard of interchangeable widgets.

### Signature Patterns

- Every major module starts with a full-width metadata band in uppercase monospace, separated from the content area by a thin bottom rule so each panel reads like a tagged editorial asset.
- Feature blocks use asymmetrical internal grids such as 8/4, 7/5, or stacked slice-plus-sidebar arrangements, with at least one narrow companion column carrying notes, figures, or captions beside the primary story.
- Salmon underline bars and small rotated district stickers overlap panel edges by a few pixels, creating deliberate editorial interruption that feels pasted or stamped onto the spread.
- Photo areas are framed as editorial crops—vertical slices, panoramic strips, or split panes—and every image frame includes visible captions, folio numbering, or archive references inside the module.
- Section transitions are marked by oversized low-contrast folio numerals paired with thin horizontal rules, simulating the pacing and sequencing of turning through a magazine issue.

## 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-019d9bb9-d467-7b22-8da7-f084d22d27a8/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 Combine serif display, gothic sans body text, and monospace metadata so each text layer has a distinct editorial job.
- Do Keep dates, districts, issue numbers, captions, and reading time visible inside modules instead of treating them as optional extras.
- Do Use cropped media windows, caption strips, and narrow annotation rails so imagery feels selected and edited rather than dropped into generic cards.
- Do Place at least one sidebar slip, quote rail, or stat column beside a major story in every viewport.
- Do Style buttons, filters, checkboxes, selects, and tabs as printed production controls with rules, labels, and stamp-like emphasis.
- Don't Do not collapse the experience into a single centered hero followed by identical cards.
- Don't Do not apply the same image ratio, headline scale, and padding rhythm to every content block.
- Don't Do not introduce frosted glass, plush neumorphism, or glossy gradients that fight the paper-and-ink vocabulary.
- Don't Do not hide essential metadata behind hover states, nested menus, or secondary detail drawers.
- Don't Do not leave browser-default form controls or detached accent stickers that ignore the grid structure.

## Imagery Direction

### Illustration Style

Documentary photography, halftone textures, simple line annotations, and occasional collage fragments rather than glossy product renders.

### Hero Image Direction

Use tightly cropped city fragments, interiors, posters, shelves, streets, and hands-in-action; prioritize editorial crops over centered subject portraits.

### Icon Style

Hairline editorial glyphs, arrows, folio marks, and transit-like labels.

### Image Gen Prompts

- Japanese editorial magazine spread aesthetic, warm paper texture, urban culture coverage, tightly cropped photography, crisp black rules, subtle red accent labels
- City guide newspaper layout with vertical photo slices, serif headlines, mono metadata, paper background, disciplined editorial spacing

## Generative Canvas

### Webgl Techniques

- none by default

### Canvas Effects

- subtle grain overlay
- optional scrolling underline reveal

### Shader Palette

- #F4F0E8
- #FFFDF8
- #E94B35
- #151515

### Animation Philosophy

Motion should feel like paper pieces sliding into place or underlines advancing across a proof, never like immersive cinematic spectacle.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kukan-press-grid",
  "type": "registry:theme",
  "title": "Kukan Press Grid shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F0E8",
      "foreground": "#151515",
      "card": "#FFFDF8",
      "card-foreground": "#151515",
      "popover": "#FFFDF8",
      "popover-foreground": "#151515",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#5B5B5B",
      "secondary-foreground": "#ffffff",
      "muted": "#746E67",
      "muted-foreground": "#151515",
      "accent": "#E94B35",
      "accent-foreground": "#ffffff",
      "destructive": "#C43D2F",
      "border": "#1E1E1E",
      "input": "#1E1E1E",
      "ring": "#E94B35",
      "chart-1": "#111111",
      "chart-2": "#5B5B5B",
      "chart-3": "#E94B35",
      "chart-4": "#2E6B57",
      "chart-5": "#D08A22",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#151515",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3D63A8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1E1E1E",
      "sidebar-ring": "#E94B35",
      "radius": "12px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E94B35",
      "accent-foreground": "#ffffff",
      "destructive": "#C43D2F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E94B35",
      "chart-1": "#111111",
      "chart-2": "#5B5B5B",
      "chart-3": "#E94B35",
      "chart-4": "#2E6B57",
      "chart-5": "#D08A22",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E94B35",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E94B35",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019d9bb9-d467-7b22-8da7-f084d22d27a8",
    "slug": "kukan-press-grid",
    "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",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "spacing": [
        "base",
        "gutter",
        "module_padding",
        "outer_margin",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · kukan-press-grid

DESIGN.md

at a glance

Palette

Typography

headline-lgCormorant Garamond · 28px · 700

The quick brown fox jumps

headline-mdCormorant Garamond · 23px · 600

The quick brown fox jumps

body-mdZen Kaku Gothic New · 16px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

Components

New

Card title

Components rendered with this language’s tokens — colors, type, and rounded corners as specified.

Spacing

base8px
xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl40px
4xl48px
step-864px
outer_margin24px
module_padding18px
gutter18px

Shape

none0px

sm6px

md12px

lg20px

full9999px

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #F4F0E8;
  --foreground: #151515;
  --card: #FFFDF8;
  --card-foreground: #151515;
  --popover: #FFFDF8;
  --popover-foreground: #151515;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #5B5B5B;
  --secondary-foreground: #ffffff;
  --muted: #746E67;
  --muted-foreground: #151515;
  --accent: #E94B35;
  --accent-foreground: #ffffff;
  --destructive: #C43D2F;
  --border: #1E1E1E;
  --input: #1E1E1E;
  --ring: #E94B35;
  --chart-1: #111111;
  --chart-2: #5B5B5B;
  --chart-3: #E94B35;
  --chart-4: #2E6B57;
  --chart-5: #D08A22;
  --sidebar: #FFFDF8;
  --sidebar-foreground: #151515;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3D63A8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #1E1E1E;
  --sidebar-ring: #E94B35;
  --radius: 12px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #E94B35;
  --accent-foreground: #ffffff;
  --destructive: #C43D2F;
  --border: #303642;
  --input: #303642;
  --ring: #E94B35;
  --chart-1: #111111;
  --chart-2: #5B5B5B;
  --chart-3: #E94B35;
  --chart-4: #2E6B57;
  --chart-5: #D08A22;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #E94B35;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #E94B35;
  --radius: 12px;
}

tsx starter

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 KukanPressGridShadcnKit() {
  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">Kukan Press Grid</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>
  );
}

theme JSONcompatibility fallback

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kukan-press-grid",
  "type": "registry:theme",
  "title": "Kukan Press Grid shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F0E8",
      "foreground": "#151515",
      "card": "#FFFDF8",
      "card-foreground": "#151515",
      "popover": "#FFFDF8",
      "popover-foreground": "#151515",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#5B5B5B",
      "secondary-foreground": "#ffffff",
      "muted": "#746E67",
      "muted-foreground": "#151515",
      "accent": "#E94B35",
      "accent-foreground": "#ffffff",
      "destructive": "#C43D2F",
      "border": "#1E1E1E",
      "input": "#1E1E1E",
      "ring": "#E94B35",
      "chart-1": "#111111",
      "chart-2": "#5B5B5B",
      "chart-3": "#E94B35",
      "chart-4": "#2E6B57",
      "chart-5": "#D08A22",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#151515",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3D63A8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1E1E1E",
      "sidebar-ring": "#E94B35",
      "radius": "12px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E94B35",
      "accent-foreground": "#ffffff",
      "destructive": "#C43D2F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E94B35",
      "chart-1": "#111111",
      "chart-2": "#5B5B5B",
      "chart-3": "#E94B35",
      "chart-4": "#2E6B57",
      "chart-5": "#D08A22",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E94B35",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E94B35",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019d9bb9-d467-7b22-8da7-f084d22d27a8",
    "slug": "kukan-press-grid",
    "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",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "spacing": [
        "base",
        "gutter",
        "module_padding",
        "outer_margin",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}

component recipescompatibility fallback

# Kukan Press Grid shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019d9bb9-d467-7b22-8da7-f084d22d27a8`
Slug: `kukan-press-grid`

## Intent

Kukan Press Grid is a publication-driven interface language informed by Japanese culture magazines, compact urban newspapers, bookstore journals, event weeklies, and meticulously edited city guides. It treats the screen as an arranged spread where multiple stories, annotations, listings, and image captions coexist, allowing readers to scan laterally and build context through adjacency. The mood is metropolitan, observant, and typographically disciplined rather than product-marketing slick. Dense information is acceptable, but it must be sequenced through visible rules, folio markers, kickers, and contrasting text systems so the page still feels edited. In digital form, the language should preserve the sensation of a carefully art-directed print layout translated into a responsive reading environment.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

## Token cues

Colors:

{
  "primary": "#111111",
  "secondary": "#5B5B5B",
  "accent": "#E94B35",
  "background": "#F4F0E8",
  "surface": "#FFFDF8",
  "text": "#151515",
  "muted": "#746E67",
  "border": "#1E1E1E",
  "error": "#C43D2F",
  "success": "#2E6B57",
  "warning": "#D08A22",
  "info": "#3D63A8"
}

Typography:

{
  "heading_font": "Cormorant Garamond",
  "body_font": "Zen Kaku Gothic New",
  "mono_font": "IBM Plex Mono",
  "base_size": "16px",
  "scale_ratio": 1.2,
  "line_height": 1.55,
  "letter_spacing": "0.01em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap"
}

## Visual character to preserve

- Warm paper-colored surfaces sit over a faintly ruled background grid, while every major module is enclosed by precise 1px black editorial rules and selected story groups receive heavier 3px dividers to establish spread hierarchy.
- Display headlines use a high-contrast serif with long vertical stress, body copy uses a disciplined Japanese gothic sans, and dates, districts, issue numbers, and timing labels run in compact monospace uppercase strips that read like production metadata.
- Primary screens are composed as asymmetrical multi-column spreads with narrow side rails, stacked annotation slips, and inset caption columns, creating several simultaneous reading paths instead of one centered content funnel.
- Accent gestures appear as salmon underline bars, pale ink side slips, and rotated district stickers that overlap panel edges by a few pixels, introducing controlled interruption without breaking the base grid.
- Imagery is always cropped into editorial windows such as tall vertical slices, narrow panoramic strips, and split photo panes, with each frame carrying visible captions, folio numbering, or archive labels rather than floating as decorative wallpaper.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": true,
  "stickerBadges": true,
  "motion": "lift-rotate",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/kukan-press-grid/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Combine serif display, gothic sans body text, and monospace metadata so each text layer has a distinct editorial job.; Keep dates, districts, issue numbers, captions, and reading time visible inside modules instead of treating them as optional extras.; Use cropped media windows, caption strips, and narrow annotation rails so imagery feels selected and edited rather than dropped into generic cards.; Place at least one sidebar slip, quote rail, or stat column beside a major story in every viewport.; Style buttons, filters, checkboxes, selects, and tabs as printed production controls with rules, labels, and stamp-like emphasis.
- Do not: Do not collapse the experience into a single centered hero followed by identical cards.; Do not apply the same image ratio, headline scale, and padding rhythm to every content block.; Do not introduce frosted glass, plush neumorphism, or glossy gradients that fight the paper-and-ink vocabulary.; Do not hide essential metadata behind hover states, nested menus, or secondary detail drawers.; Do not leave browser-default form controls or detached accent stickers that ignore the grid structure.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function KukanPressGridShadcnKit() {
  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">Kukan Press Grid</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "grid": "Desktop uses a 12-column layout inside a 1440px frame with 18px gutters and 24px page padding. Tablet compresses to 8 columns while preserving metadata bands, narrow side notes, and paired story structures. Mobile becomes a 4-column stack where side rails convert into full-width slips but remain visibly attached to their parent modules.",
  "breakpoints": "Desktop: 1200px and above. Tablet: 700px to 1199px. Mobile: below 700px. At tablet, wide editorial spreads collapse into stacked feature packages with retained kicker bars and caption strips. At mobile, controls, article rails, and utility panels become full-width blocks while preserving folio markers and metadata visibility.",
  "whitespace": "Whitespace behaves like editorial pacing rather than luxury emptiness. Use active gutters between modules, blank paper bands to separate sections, and tighter internal spacing inside data-rich panels so density still feels intentionally sequenced.",
  "density": "Maintain visible richness at every size by showing several concurrent stories, notes, and controls without tabs or accordions hiding basic context."
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019d9bb9-d467-7b22-8da7-f084d22d27a8",
    "name": "Kukan Press Grid",
    "slug": "kukan-press-grid"
  },
  "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": [
    "Warm paper-colored surfaces sit over a faintly ruled background grid, while every major module is enclosed by precise 1px black editorial rules and selected story groups receive heavier 3px dividers to establish spread hierarchy.",
    "Display headlines use a high-contrast serif with long vertical stress, body copy uses a disciplined Japanese gothic sans, and dates, districts, issue numbers, and timing labels run in compact monospace uppercase strips that read like production metadata.",
    "Primary screens are composed as asymmetrical multi-column spreads with narrow side rails, stacked annotation slips, and inset caption columns, creating several simultaneous reading paths instead of one centered content funnel.",
    "Accent gestures appear as salmon underline bars, pale ink side slips, and rotated district stickers that overlap panel edges by a few pixels, introducing controlled interruption without breaking the base grid.",
    "Imagery is always cropped into editorial windows such as tall vertical slices, narrow panoramic strips, and split photo panes, with each frame carrying visible captions, folio numbering, or archive labels rather than floating as decorative wallpaper."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": true,
    "stickerBadges": true,
    "motion": "lift-rotate",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Kukan Press Grid launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Combine serif display, gothic sans body text, and monospace metadata so each text layer has a distinct editorial job.",
      "Keep dates, districts, issue numbers, captions, and reading time visible inside modules instead of treating them as optional extras.",
      "Use cropped media windows, caption strips, and narrow annotation rails so imagery feels selected and edited rather than dropped into generic cards.",
      "Place at least one sidebar slip, quote rail, or stat column beside a major story in every viewport.",
      "Style buttons, filters, checkboxes, selects, and tabs as printed production controls with rules, labels, and stamp-like emphasis."
    ],
    "dont": [
      "Do not collapse the experience into a single centered hero followed by identical cards.",
      "Do not apply the same image ratio, headline scale, and padding rhythm to every content block.",
      "Do not introduce frosted glass, plush neumorphism, or glossy gradients that fight the paper-and-ink vocabulary.",
      "Do not hide essential metadata behind hover states, nested menus, or secondary detail drawers.",
      "Do not leave browser-default form controls or detached accent stickers that ignore the grid structure."
    ]
  }
}

More like this

Buncho Scrapbookshares japanese-ma · paper-texture · asymmetric-space Bungu Minimalshares japanese-ma · paper-texture · asymmetric-space Fusen Boardshares japanese-ma · paper-texture · asymmetric-space Ink Wash Motionshares japanese-ma · paper-texture · asymmetric-space Japanese Stationery Grid Systemshares japanese-ma · paper-texture · asymmetric-space Shuimo Mistshares japanese-ma · paper-texture · asymmetric-space