--- version: "alpha" name: "Nijimi" description: "An authored Tokyo illustration annual rendered as an interface: cream paper grounds, pale gouache washes bleeding off-register from black sumi-ink figure lines, and small editorial notes that frame each moment as a cropped poster fragment." colors: bg: "#f5eedf" surface: "#fff9ef" surface_solid: "#fbf4e6" text: "#241f1b" muted: "#6b5e54" border: "#27211c" accent: "#4f7c8b" accent_2: "#b06a5d" accent_soft: "#d9e2e0" accent_deep: "#2f5561" on_accent: "#fbf4e6" success: "#4f6a47" warning: "#a9762e" error: "#a5403a" info: "#4a637a" typography: heading: "Aoboshi One" body: "Zen Old Mincho" mono: "IBM Plex Mono" base_size: "17px" rounded: "16px poster cards and controls, 9999px pills and stamps, 0px hard paper edges; radius set {0, 16, 24, 9999}" spacing: base: "8px" scale: - 4 - 8 - 12 - 16 - 24 - 32 - 48 - 64 - 96 components: - button - input - select - checkbox - radio - toggle - card - modal - alert - table - tabs - badge - avatar - pagination - accordion - progress art_style: name: Nijimi Wash slug: nijimi-wash url: "https://katagami.ai/art-styles/en-019f9a34-be9a-7f42-a3c4-e26e4a7d6c75" --- # Nijimi ## Overview Nijimi is the interface of an authored Tokyo illustration annual — the kind of hand-assembled zine an illustrator pulls off a risograph, not a startup dashboard. Its name is the printmaker's word for the bleed: the moment a gouache wash spreads a few millimetres past the ink line it was meant to sit inside. Every surface is built from that one physical truth — a black sumi-ink figure-line pass and a pale colour-wash pass laid down on separate passes that never quite align. Cream paper grounds, no pure-white expanses, small mono editorial notes anchoring corners, and cropped illustration vignettes that break their frames. ## The signature mechanic — off-register wash Behind every panel sits a soft gouache wash blob, translated 6–12px off the ink keyline that describes the panel. The colour and the line disagree, on purpose, exactly the width of a hand-press misregistration. On the landing this becomes literal: scrolling pulls the wash pass and the ink pass into and out of register, and the climax is the moment they lock. The mechanic is mapped onto semantic roles, so a palette swap recolours the bleed everywhere at once. ## Colors - `bg` `#f5eedf` — cream paper ground; radial grain overlay, warm edge tint, never a pure-white field. - `surface` `#fff9ef` — warm poster-card paper. - `surface_solid` `#fbf4e6` — deeper cream for solid cards and rails. - `text` `#241f1b` — sumi ink; primary reading colour. - `muted` `#6b5e54` — secondary ink for captions and metadata. - `border` `#27211c` — the 1.5px ink keyline; 3px for stamp circles and accent rules. - `accent` `#4f7c8b` — dusty teal wash (primary accent, used as a field). - `accent_2` `#b06a5d` — faded terracotta wash (secondary accent). - `accent_soft` `#d9e2e0` — pale teal underpainting for fills. - `accent_deep` `#2f5561` — deep teal reserved for accent-coloured TEXT (reaches ~7:1 on cream); bright teal stays a field colour, never small glyphs. - `on_accent` `#fbf4e6` — cream text placed only on the ink-fill inversion (active states), never on a mid-tone wash. - `success` `#4f6a47` · `warning` `#a9762e` · `error` `#a5403a` · `info` `#4a637a` — muted semantic inks; small parts of the palette, never visually primary. Accents arrive in irregular fields, never as rainbow category coding or synthetic neon. ## Typography Display uses **Aoboshi One** with -0.02em tracking — the masthead and the scene numerals live here, up to viewport scale. Reading text uses **Zen Old Mincho** at 17px, 1.55 line-height, -0.02em. Metadata, folios, and captions use **IBM Plex Mono** uppercase at 11–13px. One strict scale, ratio 1.2: 11 / 13 / 17 / 20 / 24 / 29 / 35 / 51 px, plus a viewport display register for the masthead. No stray sizes, no fourth typeface. ## Layout A 12-column poster grid on desktop, collapsing to 8 then 4 columns; the hero vignette spans 7 columns, the editorial rail spans 5, and lower fragments interlock with deliberate asymmetry. Desktop ≥ 1200px, tablet 760–1199px, mobile ≤ 759px. On smaller screens the rail stacks beneath the hero while keeping cropped framing and corner captions. Generous page margins and card padding emulate print borders; tighter spacing is allowed only inside caption clusters and metadata strips. ## Elevation & Depth Near-paper shadows, used sparingly: sm `0 2px 0 rgba(39,33,28,0.08)`, md `0 10px 30px rgba(74,55,34,0.10)`, lg `0 20px 60px rgba(74,55,34,0.14)`. Shadow softness agrees with the 16px card corners. ## Shapes Radii from {0, 16, 24, 9999} only: 16px poster cards and controls, 9999px pills and stamp circles, 0px for hard paper edges and inner vignette frames; 24px stays in the set for oversized full-bleed panels but the standard card corner is 16px. No arbitrary in-between radius. ## Components Buttons, inputs, selects, checkboxes, radios, toggles, cards, modals, alerts, tables, tabs, badges, avatars, pagination, accordions, and progress all read as clipped paper labels: 1.5px ink keylines, pale wash fills, mono metadata, and the offset wash behind each surface. One button is clearly primary (terracotta wash); the rest are quieter. The active state inverts to a solid ink fill with cream text — the only place `on_accent` appears. ## Do's and Don'ts ### Do - use hand-drawn line motifs and imperfect registration to make digital layouts feel authored - pair restrained Zen Old Mincho reading text with tiny IBM Plex Mono metadata for editorial credibility - treat each section like a gallery poster excerpt rather than a product module - keep the palette washed and nuanced, with accent hues arriving in irregular fields - crop illustration panels asymmetrically and let captions anchor corners instead of centering content - use near-paper shadows and ink keylines sparingly so the poster construction stays the signature ### Don't - do not introduce SaaS dashboard cards or metric-heavy panels - do not use ultra-bold geometric sans for primary reading text - do not centre everything symmetrically - do not polish away offset edges, texture, or illustration marks - do not add synthetic neon accents or rainbow category coding - do not render browser-default controls; inputs and selects must look like clipped paper labels ## Visual Character - cream paper ground `#f5eedf` with subtle radial grain, warm edge tint, and no pure-white expanses - black ink outlines as 1.5px `#27211c` keylines sitting slightly off-register from pale gouache wash shapes via transform offsets - poster-framed panels with 32–48px margins, hard paper edges, 16px soft outer corners on cards, and asymmetric cropping so illustrations break the frame - compact editorial captions in IBM Plex Mono uppercase at 11px, thin rules, issue/date metadata, corner anchoring - softly misaligned stamps, underlines, accent bars, and side rules shifted 3–8px to imply hand assembly ## Signature Patterns - every major panel has an oversized poster margin, a 1.5px ink keyline, and an inner figure vignette cropped off at least one edge with overflow hidden - wash blobs sit behind content with a 6–12px transform offset from the ink outline layer using translucent `#b06a5d` and `#4f7c8b` fields - captions use tiny uppercase IBM Plex Mono labels with thin horizontal rules, issue/date metadata, and tight 4–8px internal spacing - select accent details — stamps, underlines, side rules — are intentionally misaligned by 3–8px using rotate and translate - buttons and inputs read like clipped paper labels with 1.5px ink keylines, 16px radii, and pale wash fills rather than glossy controls ## Imagery Direction Black sumi-ink figure-line illustrations over pale gouache wash blocks on cream paper, printed off-register; cropped Tokyo vignettes — backstreets, kissaten storefronts, alley lanterns, platforms, rooftops — plus stamp circles and editorial zine captions. Pairs with the **Nijimi Wash** art style. ## Generative Canvas Subtle paper grain and radial ink-wash overlays; a scroll- and pointer-driven registration field on the landing where the wash pass and ink pass slide relative to each other. Motion stays deliberate and tactile; effects fire at purposeful moments, not as ambient weather. ## Art Style This design language is paired with **[Nijimi Wash](https://katagami.ai/art-styles/en-019f9a34-be9a-7f42-a3c4-e26e4a7d6c75)** (`nijimi-wash`). Fetch that page for the full recipe (prompt, proofs, slot recipes). **MUST generate real images** in this art style. Do not substitute CSS blobs, gradients, stock photography, Unsplash, placeholders, or emoji. Consume rasters through `var(--hero-image)` and `var(--plate-N)`. - **URL:** https://katagami.ai/art-styles/en-019f9a34-be9a-7f42-a3c4-e26e4a7d6c75 - **Medium:** gouache and ink - **Canonical prompt:** `Create a matte ink-and-gouache illustration on warm cream paper, with the layered appearance of small-run stencil printing. Draw fine confident black contours and selected interior brush strokes over broad pale colour shapes with soft feathered boundaries. Describe recognizable subject forms with fine outline drawing and selected structural details, retaining believable proportions while treating the wash layers as flat printed colour shapes. Keep each painted shape predominantly one pale flat tone, using only restrained overlapping wash patches and occasional darker pigment at their boundaries; do not model volume with highlights, reflected light, gradual light-to-dark shading or cast shadows. Use dusty teal and soft sage for cool areas, faded terracotta and muted ochre for warm accents, and exposed cream paper for light and empty areas. Arrange one clear focal subject in a cropped editorial composition with generous quiet paper around its principal forms; reduce any setting to a few simple supporting shapes rather than a detailed scene. Offset selected pale colour shapes visibly from the fine black drawing, extending a wash beyond one side of a contour and leaving a small exposed cream gap along the opposite side; retain subtle paper grain, feathered wash edges and occasional pooling at wash boundaries. Exclude lettering, logos, signatures, watermarks, neon colour, glossy surfaces, photographic realism, dramatic light beams, smooth digital gradients, heavy impasto and imitation of an individual artist or franchise.` - **Negative:** `text, letters, words, logos, watermark, signature, gloss, glossy highlights, neon, saturated rainbow, gradient mesh, 3d render, photograph, harsh contrast, cluttered busy background` ## 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-019f9a34-c1bf-7242-972d-431822bc3b5c/DESIGN.with-shadcn.md`. Machine-readable companions for automation: `/language/en-019f9a34-c1bf-7242-972d-431822bc3b5c/shadcn.json` (registry theme), `/language/en-019f9a34-c1bf-7242-972d-431822bc3b5c/shadcn-components.md` (component recipes) and `/language/en-019f9a34-c1bf-7242-972d-431822bc3b5c/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.