Ukiyo-e Woodblock

---
name: ukiyo-e-woodblock
description: Apply the Ukiyo-e Woodblock visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Ukiyo-e Woodblock, mentions ukiyo-e, japanese woodblock, hokusai style, or describes warm washi paper ground, sumi ink keyblock outlines, prussian blue and vermilion palette — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Ukiyo-e Woodblock Design System

The Edo-period woodblock print as an interface: warm washi paper grounds, sumi-ink text inside crisp keyblock outlines, Prussian-blue waves and vermilion seals, seigaiha wave and cloud-band motifs, bokashi gradient skies, and vertical caption strips with a red artist's seal. Flat color laid inside drawn lines, with the paper always showing through.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Ukiyo-e Woodblock.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (ukiyo-e, japanese woodblock, hokusai style, edo print, mokuhanga, floating world), or describes its traits: warm washi paper ground; sumi ink keyblock outlines; prussian blue and vermilion palette; seigaiha wave and cloud-band motifs; bokashi graduated-ink gradients; vertical caption strips and red seals.

## Design tokens

### Color palette

- Washi paper — warm, slightly fibrous cream: `#f2e8d5` (--color-bg)
- Lighter paper for cards and inset panels: `#faf4e6` (--color-surface)
- Sumi ink — warm near-black: `#2a2522` (--color-text)
- Diluted ink for captions and secondary text: `#6b5f4e` (--color-text-muted)
- Vermilion — seals, key actions, and highlight strokes: `#b0331d` (--color-accent)
- Prussian/berlin blue — waves, links, and cool fills: `#29508f` (--color-indigo)
- Deep wave shadow blue for pattern depth and dark strips: `#1c3766` (--color-indigo-deep)
- Pine green for landscape fills and success states: `#4a6d51` (--color-pine)
- Faded blossom pink for soft washes and tags: `#e7b8ad` (--color-blossom)

### Typography

- Display / headings: Shippori Mincho (fallback: Hiragino Mincho ProN, Yu Mincho, serif)
- Body: Noto Serif JP (fallback: Hiragino Mincho ProN, Georgia, serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.3, letter-spacing 0.04em
- Body: line-height 1.8, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Composed like a print: strong asymmetric margins, generous line-height for serif text, and motifs allowed to occupy real space — emptiness (ma) is an element, not leftover.
- Border radius: none 0px, sm 2px — Blocks are cut square; 2px softening at most on cards so edges still read as carved.
- Border treatment: 1px solid #2a2522 — The keyblock line: thin sumi outlines around panels and images, thickening to 2px for focal frames. Never gray borders — always ink.

### Shadows

- none: `none` — Prints are flat; separation comes from outlines and paper tone
- print-lift: `0 2px 10px rgba(42, 37, 34, 0.14)` — Only for overlays and modals that sit physically above the sheet

### Layout

- Max content width: 1080px
- Asymmetric composition: focal mass to one side, balancing motif or caption strip opposite
- Vertical caption strips (writing-mode: vertical-rl) label sections like print cartouches
- Wave, cloud, and mountain motifs enter from edges and are cropped by the frame
- The seal-and-cartouche pair anchors a consistent corner across pages

### Effects

- Paper grain: faint fibrous noise texture over background at very low opacity
- Bokashi gradients: horizontal bands fading from indigo or blossom into paper at section tops
- Seigaiha repeating wave-scale pattern in indigo tones as strip or fill
- Cloud bands (flat rounded shapes) drifting across section seams to mask transitions
- Slight misregistration: 1px offset between a fill and its outline on decorative elements only

### Motion

- Easing: cubic-bezier(0.33, 0, 0.2, 1); durations 160ms / 300ms / 600ms
- Restraint above all: fades and gentle horizontal slides, as if sliding a print from its folio
- Bokashi gradients may deepen slightly on scroll; nothing bounces
- Hover states ink elements in — fill arriving inside an existing outline

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f2e8d5;
  --color-surface: #faf4e6;
  --color-text: #2a2522;
  --color-text-muted: #6b5f4e;
  --color-accent: #b0331d;
  --color-indigo: #29508f;
  --color-indigo-deep: #1c3766;
  --color-pine: #4a6d51;
  --color-blossom: #e7b8ad;
  --radius-none: 0px;
  --radius-sm: 2px;
  --shadow-print-lift: 0 2px 10px rgba(42, 37, 34, 0.14);
  --border-default: 1px solid #2a2522;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.3;
  --leading-body: 1.8;
  --tracking-heading: 0.04em;
  --tracking-body: 0.02em;
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Noto+Serif+JP:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A paper bar with a sumi keyline beneath: ink wordmark left (with a small vermilion seal square), widely spaced serif links, and the active page marked by a short vermilion stroke beneath the word.
- **Hero:** A print composition: large mincho-serif headline set asymmetrically on washi, a cropped indigo wave or mountain motif rising from one edge under a bokashi sky band, and the seal-and-cartouche pair in the lower corner holding the CTA line.
- **Card:** An outlined print panel: 1px sumi keyblock border, paper surface, an optional seigaiha or bokashi header strip, serif title and diluted-ink description; a small colored tag (blossom or pine) sits like a censor seal.
- **Button (primary):** A vermilion seal-block: #b0331d fill, paper-colored serif label, square corners, 1px darker ink outline; hover deepens the vermilion like a fresh impression.
- **Button (secondary):** Outline-only ink block: 1px sumi border, ink label on paper; hover pours a pale indigo wash inside the outline.
- **Form fields:** A ruled paper field: transparent fill, 1px ink underline (full box only for multiline), serif input text, caption-sized muted label above; focus adds a vermilion stroke at the underline's left end.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The seal-and-cartouche pair: a small vermilion square seal with paper-colored marks beside a vertical caption strip, sitting in the corner of every major composition exactly where the printmaker signed. Spend boldness here; keep everything else quiet.

## Do

- Keep every colored area inside a drawn ink outline — flat fills with keylines are the medium
- Use bokashi gradients only at edges of sections, fading into paper
- Let motifs be cropped by the frame; partial waves and clouds feel like prints, centered ones feel like clip-art
- Reserve vermilion for seals and the most important action on the page

## Don't

- Don't use drop shadows or glossy effects — depth belongs to overlapping flat planes
- Don't saturate the palette to modern brights; every hue is ink on absorbent paper
- Don't scatter Japanese text as decoration if the site isn't in Japanese — use the vertical strips for real labels
- Don't confuse this with japanese-wabi-sabi minimalism: ukiyo-e is graphic, patterned, and outlined, not austere

## Accessibility notes

- All checked pairs pass AA on washi (ink 12:1, diluted ink 5.1:1, vermilion 5.2:1), but blossom pink and pale washes are decorative-only and must never carry text.
- Vertical-rl caption strips are read correctly by screen readers but can confuse sighted scanning — duplicate any essential label horizontally.
- The paper-grain texture must stay below ~5% opacity so long-form serif text keeps clean edges.

## Reference sites

- Ukiyo-e — the art historical background: https://en.wikipedia.org/wiki/Ukiyo-e
- Ukiyo-e.org print database: https://ukiyo-e.org/
- Hokusai's Great Wave at the Met (JP1847): https://www.metmuseum.org/art/collection/search/45434

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip ukiyo-e-woodblock.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/ukiyo-e-woodblock.json

Settings → Capabilities → Skills → Upload skill → ukiyo-e-woodblock.zip