The Floating World Design System
浮世絵 - 版画 - 江戸
Ukiyo-e, "pictures of the floating world," captured the fleeting beauty of Edo-period Japan through woodblock printing. Each color was a separate carved block, pressed layer by layer onto mulberry paper. This design system channels the flat color planes, bold outlines, and contemplative spirit of masters like Hokusai, Hiroshige, and Utamaro.
色面
Each hue printed from its own carved block. Bold, unmodulated fields of color define forms without gradient or shadow.
墨線
The key block, carved in sumi ink, creates the defining outlines. Every element is bounded by decisive, confident lines.
自然
Waves, mountains, cherry blossoms, pine. The natural world is not backdrop but subject, revealing the sublime in the everyday.
色彩
Traditional pigments ground from minerals and plants: indigo from fermented leaves, vermillion from cinnabar, ochre from iron-rich earth, and soot-black sumi ink.
書体
Noto Serif JP for the gravitas of carved woodblocks. Playfair Display for Western text with the weight and contrast befitting the Edo print tradition.
Body text uses Noto Sans JP at regular weight with generous line height. The letterforms carry the quiet authority of characters that might appear in the margins of a print, identifying the artist and publisher. Readability is paramount, allowing the content to breathe on the washi-toned background.
The Western companion typeface, Playfair Display, brings high-contrast serifs that echo the thick-to-thin transitions of a woodblock carver's chisel. Its elegance pairs naturally with the ukiyo-e aesthetic.
間隔
A 4px base unit governs all spacing. Like the careful registration of each color block in a multi-block print, precision in spacing creates harmony across the composition.
釦
Controls with the weight and presence of carved blocks. Bold outlines and flat color fields, with print-style shadows that shift on press like ink under a baren.
Hover transitions mimic the slight shift of a woodblock under pressure. The shadow compresses as the element moves, suggesting the physical act of printing.
入力
Input fields framed with bold outlines, like cartouches on a print identifying title, artist, and publisher. Focus states deepen the indigo border, drawing the eye with quiet authority.
The publisher's mark appeared on every print
札
Content containers with the bold borders of print outlines. Each card is a small composition, framed like a single print in a series, hovering slightly above the paper surface.
A clean container with bold outlines. Content sits within defined borders, much like the subject of a woodblock print is bounded by its key block outline.
The deep indigo header recalls the aizuri-e tradition of prints made entirely in shades of Prussian blue, prized for their atmospheric beauty.
The red top border evokes the vermillion seal (hanko) stamped on every print, marking the artist's identity and the censor's approval.
A CSS-rendered landscape header in the style of Hiroshige, with flat color planes suggesting mountain, forest, and earth.
"Living only for the moment, savouring the moon, the snow, the cherry blossoms, and the maple leaves, singing songs, drinking sake, and diverting oneself just in floating, floating..." This is the ukiyo, the world of fleeting pleasures that gave the art form its name.
表
Information organized with the precision of a print workshop's records. Bold header bands and clean row divisions bring order to data like a publisher's catalogue.
| Artist | Series | Period | Prints |
|---|---|---|---|
| Katsushika Hokusai | Thirty-six Views of Mount Fuji | c. 1831 | 46 |
| Utagawa Hiroshige | One Hundred Famous Views of Edo | 1856-1858 | 119 |
| Utagawa Hiroshige | Fifty-three Stations of the Tokaido | 1833-1834 | 55 |
| Kitagawa Utamaro | Ten Studies in Female Physiognomy | c. 1792 | 10 |
| Toshusai Sharaku | Actors of the Grand Theatres | 1794-1795 | 145 |
| Total documented prints in selected series | 375 | ||
印
Small labels that mark and categorize, like the publisher's marks and censor seals that appeared in the margins of every print.
Badges use the bold border treatment consistent with the woodblock outline aesthetic. Each color draws from the traditional pigment palette to communicate status and category at a glance.
通知
Notifications that command attention with the authority of an Edo-period edict, yet remain composed within their borders.
The key block was always carved first, establishing the outlines. Color blocks followed, one for each pigment, requiring precise alignment (kento) for registration.
All color blocks have been successfully registered and printed. The edition is ready for inspection by the publisher.
Color misalignment detected on the third pass. Please verify the kento marks before proceeding with the remaining blocks.
This print has been selected for the special gold-leaf edition. Additional preparation of the kinpaku will be required before final pressing.
設計原則
Every color in a woodblock print is a flat, unmodulated field. Embrace solid fills over gradients. Let color do the work that shadow does in Western art. Depth comes from layering planes, not from simulating light.
The sumi ink key block creates the skeleton of every image. Use strong, visible borders to define elements. Outlines are not decoration but structure, giving each component its identity and place.
Waves, mountains, blossoms, rain. The ukiyo-e masters found infinite variation in natural forms. Let organic shapes and nature-inspired patterns breathe life into geometric layouts.
Every color block must align perfectly with the key block. In design, this means consistent spacing, aligned grids, and intentional placement. Carelessness in registration ruins the whole print.