Ukiyo-e (Japanese Woodblock) 浮世绘（日本木版画）
Ukiyo-e is the look of Edo-period Japanese woodblock prints: bold black key-block outlines locked around flat, unmodulated blocks of color — Prussian indigo, vermilion, cream washi — with waves that break into claw-like foam fingers, distant cone mountains, and clouds drawn as pattern rather than perspective. Registration is crisp and shading is nearly absent; prints carry vertical title cartouches and red hanko seals. Cheap mass media in its day, it now reads as instant classical Japan.
浮世绘是日本江户时代木版画的观感：粗黑的轮廓主线（key block）框住一块块扁平无调子的颜色 —— 普鲁士靛蓝、朱红、米色和纸 —— 海浪碎成爪子般的浪花指，远处是圆锥形的山，云被画成图案而不是透视。套色精准，几乎没有明暗渲染；画面上带竖排的标题框和红色印章。它在当年是廉价的大众媒体，如今一眼就是「古典日本」。
Scope: Covers the woodblock-print visual language of the Hokusai/Hiroshige landscape school as adapted to UI and illustration — key lines, flat color blocks, wave and nature motifs. Hand-painted ukiyo-e, sumi-e ink wash, and modern anime-poster illustration are out of bounds; Risograph is the closest modern print neighbor.
范围：涵盖葛饰北斋／歌川广重风景一派的木版画视觉语言在 UI 和插画中的运用 —— 主墨线、扁平色块、海浪与自然母题。手绘浮世绘、水墨画（sumi-e）和现代动漫海报插画风不在本条范围内；Risograph（孔版印刷）是年代最近的印刷风邻居。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Bold black key-block outlines粗黑的主版轮廓线 geometry defining定义特征
Every shape is closed by a confident 2–3px sumi-ink contour printed from the key block; strokes swell and taper like a brush, never a uniform 1px vector line.
每个形状都被一条自信的 2–3px 墨线封闭，先由主版（key block）印出；线条像毛笔一样有粗细变化，绝不是均匀的 1px 矢量线。
-
Flat unmodulated color blocks扁平无调子的色块 color defining定义特征
Each outlined region carries exactly one pigment, printed from its own carved block; no gradients, no inner shading — at most one soft sky band (bokashi) in the whole piece.
每条轮廓围出的区域只上一种颜料，各自用一块刻版印出；没有渐变、没有内部明暗 —— 整张画最多只有一条柔和的天空渐变带（bokashi）。
-
Indigo, vermilion, cream靛蓝、朱红、米色 color defining定义特征
Prussian indigo #1f3a5f for water and shadow, vermilion #c3272b for accents and seals, foam white, cream washi #f5eeda as the ground; a handful of separate blocks, never full color.
水与暗部用普鲁士靛蓝 #1f3a5f，点缀和印章用朱红 #c3272b，浪花白，底色是米色和纸 #f5eeda；寥寥几块分版，绝不是全彩。
-
Claw waves and flat nature爪形浪花与扁平自然 imagery defining定义特征
Waves curl into claw-like foam fingers and water reads as repeating line pattern; cone mountains, clouds, and birds sit as flat silhouettes stacked in bands rather than perspective space.
海浪卷成爪子般的浪花指，水面用重复的线条图案表现；锥形山、云和鸟是扁平剪影，一层层叠出纵深，而不是透视空间。
-
Wood-grain line texture木纹线条纹理 surface supporting辅助特征
Fine parallel grain lines and slight pigment mottling from hand rubbing show inside flat fills at 5–10% strength — directional, never stochastic noise.
扁平色块里能看到手工拓印留下的细密平行木纹线和轻微颜料斑驳，强度 5–10% —— 有方向性，绝不是随机噪点。
-
Hanko seal and title cartouche印章与标题框 imagery supporting辅助特征
A small red square seal stamp and a vertical bordered cartouche holding the title, both sitting on the image like printed furniture.
一枚小小的红色方形印章加一个竖排带框的标题框（cartouche），像印刷品的固定配件一样压在画面上。
-
Warm washi paper ground温润的和纸底色 surface supporting辅助特征
The lightest tone is warm fibrous cream (#f5eeda), not pure white; the paper itself is part of the palette.
画面里最亮的颜色是带纤维感的暖米色（#f5eeda），不是纯白；纸本身就是配色的一部分。
-
Misregistration and ink grain套色错位与油墨颗粒 surface avoid避免
Offset color passes, stipple noise, neon spot inks, and stencil-rough edges are Risograph's accidents; ukiyo-e color sits tight inside its key lines.
色版偏移、网点噪点、荧光专色和模版毛边都是 Risograph 的「事故」；浮世绘的颜色严丝合缝地待在墨线里。
Often confused with: Risograph最容易混淆：孔版印刷风（Risograph / Riso）
Ukiyo-e (Japanese Woodblock)浮世绘（日本木版画）
Risograph孔版印刷风（Risograph / Riso）
This is Ukiyo-e because the color blocks sit crisp inside bold black key-block outlines — registration is exact, the palette is indigo and vermilion on cream washi, and the imagery is classical Japanese waves and mountains, not grainy misregistered spot ink.
这是浮世绘，因为色块严丝合缝地待在粗黑的主版轮廓线里 —— 套色精准，配色是米色和纸上的靛蓝与朱红，图像是经典的日本海浪与山岳，而不是颗粒感、错版的专色油墨。
It would become Risograph if you swapped the indigo and vermilion for hot pink and cyan, knocked the color passes 1–3px out of register, erased the key lines, and added soy-ink grain and stencil-rough edges.
如果把靛蓝朱红换成艳粉和青、把色版敲偏 1–3px、抹掉墨线、再加大豆油墨颗粒和模版毛边，就变成 Risograph 了。
In code — optional starting points代码写法 —— 可选起点
Key-line framed flat panel
background: #f5eeda; border: 3px solid #1a1712; border-radius: 3px; box-shadow: none; /* flat print: no soft shadows */Wood-grain line texture over flat indigo
background-color: #1f3a5f;
background-image: repeating-linear-gradient(91deg, rgba(245,238,218,.05) 0 1px, transparent 1px 6px), repeating-linear-gradient(87deg, rgba(26,23,18,.07) 0 1px, transparent 1px 9px);Ukiyo-e panel as utilities
bg-[#f5eeda] border-[3px] border-[#1a1712] rounded-[3px] shadow-none text-[#1a1712]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface in the spirit of Ukiyo-e, Japanese woodblock prints. Defining signals: every shape is closed by a bold black key-block outline (2–3px solid #1a1712, brush-tapered); color is laid as flat, unmodulated blocks exactly inside those outlines — zero gradients, zero soft shadows; the palette is Prussian indigo #1f3a5f, vermilion #c3272b, foam white #fdfcf6, cream washi #f5eeda as ground; imagery is classical Japanese: a wave breaking into claw-like foam fingers, a distant cone mountain; finish with a vermilion hanko seal and a vertical title cartouche. Texture is fine directional wood-grain lines at 5–10% opacity, never noise. Registration stays crisp — color never spills outside its outlines. Controls are rectangular with 2–4px radii, cream or indigo fill, 2.5px ink border; hover darkens, active nudges 1px — no drop shadows. Do not drift into Risograph; the decisive difference is crisp key-line registration and an indigo/vermilion palette versus misregistered grainy neon spot ink. Preserve 4.5:1 text contrast, visible focus states, and reduced-motion support.
按浮世绘（日本木版画）的精神创建这个界面。定义性信号：每个形状都被粗黑的主版轮廓线封闭（2–3px 实线 #1a1712，带毛笔般的粗细变化）；颜色以扁平无调子的色块精确铺在轮廓线内 —— 零渐变、零柔和阴影；配色是普鲁士靛蓝 #1f3a5f、朱红 #c3272b、浪花白 #fdfcf6，底色用米色和纸 #f5eeda；图像是经典日本题材：碎成爪形浪花指的海浪、远处一座锥形山；收尾加一枚朱红印章和一个竖排标题框。纹理用细密、有方向性的木纹线，不透明度 5–10%，不要用噪点。套色保持精准 —— 颜色绝不溢出轮廓线。控件用矩形、2–4px 圆角、米色或靛蓝填充、2.5px 墨线边框；hover 加深填充，active 下移 1px —— 不要投影。不要滑向 Risograph；决定性区别在于：这边是精准的墨线套印加靛蓝朱红古典配色，那边是错版的颗粒荧光专色油墨。保证文字对比度 4.5:1、焦点状态可见，并支持 reduced-motion。
Accessibility & misuse可访问性与误用
The palette is high-contrast by default — indigo #1f3a5f on cream #f5eeda runs about 10:1 and ink text is safe anywhere — but cream text on vermilion #c3272b sits near 5:1, so never dilute it with lighter tints and measure every text/ground pair at 4.5:1.
这套配色天然高对比 —— 靛蓝 #1f3a5f 配米色 #f5eeda 约 10:1，墨色文字放哪儿都安全 —— 但米色文字配朱红 #c3272b 只有 5:1 左右，别再用更浅的色调稀释它，每组文字／底色都实测 4.5:1。
Dense wave line-work and wood-grain texture destroy legibility under text: treat the print imagery as decoration only and set all labels on solid cream or indigo key-lined panels, never directly over the wave.
密集的海浪勾线和木纹纹理会毁掉文字可读性：把版画图像只当装饰，所有标签都放在米色或靛蓝的实底墨线面板上，绝不直接压在浪花上。
Vertical cartouches, seal-script marks, and stylized wave shimmer are ornamental — mark them aria-hidden, give controls real horizontal accessible names, and disable any looping wave or spray animation under prefers-reduced-motion.
竖排标题框、印文刻字和风格化的波光都是装饰 —— 标上 aria-hidden，给控件真正的横向无障碍名称，并在 prefers-reduced-motion 下停掉所有波浪或浪花的循环动画。
Origin起源
Ukiyo-e ('pictures of the floating world') flourished in Edo-period Japan from the late 17th to the 19th century as mass-produced woodblock prints. Katsushika Hokusai's 'Under the Wave off Kanagawa' (c. 1831), from Thirty-six Views of Mount Fuji, and Utagawa Hiroshige's 'The Fifty-three Stations of the Tōkaidō' (1833–1834) define the landscape genre; the vivid Prussian blue behind both only became available in Japan in the 1820s. Exported prints triggered Japonisme in Europe, influencing Monet and Van Gogh, and Debussy's 1905 'La mer' score cover quotes the Wave directly.
浮世绘（「浮世之绘」）从 17 世纪末到 19 世纪兴盛于日本江户时代，是量产的木版画。葛饰北斋的《神奈川冲浪里》（约 1831 年，出自《富岳三十六景》）和歌川广重的《东海道五十三次》（1833–1834 年）定义了风景画一派；两者背后那种鲜艳的普鲁士蓝直到 19 世纪 20 年代才传入日本。出口的版画在欧洲掀起了日本主义（Japonisme），影响了莫奈和梵高；德彪西 1905 年《大海》的总谱封面更是直接引用了那道巨浪。