website_designs

Ukiyo-e Design Reference

Overview

Ukiyo-e (浮世絵), meaning “pictures of the floating world,” is a genre of Japanese art that flourished from the 17th through the 19th centuries. Originating as woodblock prints and paintings, ukiyo-e depicted the pleasures of the urban merchant class during the Edo period (1603–1868): kabuki actors, sumo wrestlers, beautiful women (bijin-ga), landscapes, flora and fauna, and scenes from history and folklore. The art form reached its apex with masters like Katsushika Hokusai, whose iconic The Great Wave off Kanagawa (c. 1831) remains one of the most recognized images in world art, and Utagawa Hiroshige, whose atmospheric landscape series The Fifty-three Stations of the Tokaido influenced Impressionist and Post-Impressionist painters across Europe.

The visual language of ukiyo-e is defined by bold black outlines (sumi ink lines carved into cherry wood blocks), flat areas of unmodulated color (applied as water-based pigments without shading or gradients), asymmetric compositions with dramatic cropping, and unusual viewpoints such as bird’s-eye or oblique angles. Traditional pigments included plant-derived dyes like indigo (ai), safflower (beni), and gamboge, alongside mineral pigments like vermillion (shu) and later the revolutionary synthetic Prussian blue (bero-ai), which enabled Hokusai’s famous blue palette. The woodblock printing process itself – a collaboration between artist, carver, printer, and publisher – produced works with a distinctive graphic clarity: sharp contour lines defining every color area, visible paper texture beneath translucent inks, and the occasional embossing (karazuri) or metallic dust for luxury editions.

As a web design aesthetic, Ukiyo-e translates into a bold, graphic-forward approach: flat color fields with strong outlines, nature-inspired motifs (waves, mountains, cherry blossoms, cranes), asymmetric layouts that embrace negative space, and a restrained yet striking color palette rooted in traditional Japanese pigments. It shares DNA with flat design and illustration-heavy web styles, but distinguishes itself through cultural specificity, hand-drawn warmth, and a deep respect for compositional balance achieved through deliberate asymmetry rather than centered symmetry.

---

Visual Characteristics

Core Design Traits

• Bold black outlines – all forms defined by strong, confident contour lines reminiscent of carved woodblock key blocks (hanshita-e)
• Flat, unmodulated color areas – solid color fills without gradients, shadows, or highlights; color is applied in discrete planes
• Asymmetric composition – off-center subjects, diagonal movement, and deliberate imbalance that creates dynamic tension
• Dramatic cropping – elements cut off at edges, suggesting continuation beyond the frame and producing a spontaneous, snapshot quality
• Unusual viewpoints – bird’s-eye perspectives, extreme close-ups, and oblique angles that depart from Western single-point perspective
• Wave and nature motifs – stylized waves (nami), mountains, cherry blossoms (sakura), pine trees (matsu), cranes, and koi rendered as bold graphic patterns
• Layered spatial planes – foreground, middle ground, and background arranged as distinct flat layers rather than continuous depth
• Visible paper/surface texture – the washi paper grain showing through translucent inks, translated digitally as subtle texture overlays
• Negative space as compositional element – empty areas (often sky or water) carry equal visual weight to filled areas
• Patterned textile fills – kimono fabrics rendered with intricate repeating geometric patterns (mon) within outlined forms
• Cloud and mist bands – horizontal bands of empty space or stylized clouds used to separate spatial planes and create atmospheric depth

Design Principles

• Ma (間) – negative space is not emptiness but an active, meaningful compositional element that gives forms room to resonate
• Asymmetric balance – visual weight distributed unevenly but harmoniously; the Japanese concept of fukinsei (不均斉)
• Flatness over illusion – depth suggested through overlapping planes and scale changes rather than perspective or shading
• Nature as primary subject – seasons, weather, landscapes, and flora/fauna as recurring visual themes reflecting mono no aware (the pathos of things)
• Bold graphic reduction – complex natural forms simplified into essential lines and shapes without losing their character
• Sequential reading – compositions guide the eye along deliberate paths, often diagonal or S-curved, through the picture plane
• Restraint and economy – each line and color area serves a purpose; ornamentation is precise, never excessive
• Harmony between line and color – outlines and fills work as equal partners; neither dominates

---

Color Palette

The ukiyo-e palette evolved over centuries, beginning with limited mineral and plant-based pigments and expanding dramatically with the introduction of synthetic Prussian blue (bero-ai) around 1830. Traditional colors are named after their natural sources – indigo plants, safflower petals, vermillion mineral, fox fur, ink stone – reflecting the deep Japanese connection between color and the natural world. The palette favors muted, earthy tones punctuated by moments of intense saturation, particularly in blues and reds.

Swatch	Hex	Role/Usage
	#1B4B7A	Ai-iro (indigo blue) – primary accent, water, sky, Prussian blue tones
	#2D5F8A	Hanada (light indigo) – secondary blue, distant mountains, atmospheric washes
	#C34A36	Shu-iro (vermillion red) – bold accents, torii gates, seal stamps, focal points
	#E8836B	Beni-iro (safflower pink-red) – soft warm accents, cherry blossom highlights
	#D4AF37	Kin-iro (gold) – metallic accents, luxury details, ornamental borders
	#8B9E3C	Uguisu-iro (warbler green) – foliage, natural accents, muted green tones
	#3B7A57	Moegi (sprouting green) – deep foliage, pine trees, verdant landscapes
	#C3803A	Kitsune-iro (fox color) – warm brown-orange, wood, earth, autumn tones
	#F5F0E1	Gofun (oyster shell white) – paper background, washi texture base
	#EDE4D3	Torinoko (eggshell) – secondary background, aged paper warmth
	#1C1C1C	Sumi (ink black) – outlines, key block lines, primary text
	#3A3632	Keshizumi (charcoal) – soft outlines, secondary text, dark backgrounds
	#FEEEED	Sakura-iro (cherry blossom) – delicate highlights, soft UI surfaces
	#BEC23F	Matcha (green tea) – bright accent, spring motifs, call-to-action highlights
	#6B4C3B	Tobi-iro (kite brown) – dark warm accent, woodblock frame, borders

CSS Custom Properties

:root {
  /* Blues */
  --ukiyo-ai: #1B4B7A;
  --ukiyo-hanada: #2D5F8A;

  /* Reds / Warm accents */
  --ukiyo-shu: #C34A36;
  --ukiyo-beni: #E8836B;
  --ukiyo-sakura: #FEEEED;

  /* Greens */
  --ukiyo-uguisu: #8B9E3C;
  --ukiyo-moegi: #3B7A57;
  --ukiyo-matcha: #BEC23F;

  /* Earth / Gold */
  --ukiyo-kitsune: #C3803A;
  --ukiyo-kin: #D4AF37;
  --ukiyo-tobi: #6B4C3B;

  /* Neutrals */
  --ukiyo-gofun: #F5F0E1;
  --ukiyo-torinoko: #EDE4D3;
  --ukiyo-sumi: #1C1C1C;
  --ukiyo-keshizumi: #3A3632;

  /* Functional aliases */
  --ukiyo-bg-primary: var(--ukiyo-gofun);
  --ukiyo-bg-secondary: var(--ukiyo-torinoko);
  --ukiyo-text-primary: var(--ukiyo-sumi);
  --ukiyo-text-secondary: var(--ukiyo-keshizumi);
  --ukiyo-accent-primary: var(--ukiyo-ai);
  --ukiyo-accent-warm: var(--ukiyo-shu);
  --ukiyo-border: var(--ukiyo-sumi);
}

---

Typography

Ukiyo-e typography draws from the tradition of Japanese calligraphy (shodo) and woodblock-carved letterforms. Display text should evoke the bold, decisive quality of brush-and-ink writing or the precise geometry of carved characters. Body text should maintain readability while echoing the refined, slightly imperfect warmth of hand-set type. For Latin-script web applications, serif fonts with visible stroke contrast and slightly condensed proportions pair well with the ukiyo-e aesthetic, while a carefully chosen brush or calligraphic font serves for decorative headers.

Recommended Google Fonts

Font	Style	Suggested Usage
Noto Serif JP	Traditional Japanese serif (Mincho)	Japanese body text, bilingual layouts
Shippori Mincho	Classic Mincho with old-style elegance	Japanese headings, traditional content
Zen Old Mincho	Nostalgic Mincho with historical warmth	Display text, titles with Japanese character
Playfair Display	High-contrast serif with elegant weight	Latin headlines, hero text
Cormorant Garamond	Refined serif with calligraphic qualities	Latin body text, long-form reading
Cinzel	Inscriptional serif with formal bearing	Section titles, navigation labels
Crimson Pro	Versatile serif with clear stroke variation	Body text, subheadings

Font Pairings

Heading	Body	Character
Playfair Display	Cormorant Garamond	Refined, high-contrast elegance
Cinzel	Crimson Pro	Formal authority with readable warmth
Shippori Mincho	Noto Serif JP	Authentic Japanese typographic hierarchy
Zen Old Mincho	Cormorant Garamond	Cross-cultural blend, historical warmth

CSS Example

/* Headlines -- bold, decisive, brush-stroke energy */
h1, h2, h3 {
  font-family: 'Playfair Display', 'Shippori Mincho', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ukiyo-sumi);
  line-height: 1.2;
}

/* Display / Hero text */
.ukiyo-display {
  font-family: 'Playfair Display', 'Zen Old Mincho', serif;
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
  color: var(--ukiyo-sumi);
}

/* Body text -- readable with subtle warmth */
body {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--ukiyo-keshizumi);
}

/* Section titles -- formal, measured */
.ukiyo-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ukiyo-ai);
}

/* Small accent text */
.ukiyo-caption {
  font-family: 'Crimson Pro', serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ukiyo-keshizumi);
  letter-spacing: 0.03em;
}

---

Layout Principles

• Asymmetric grid composition – place primary content off-center, using the rule of thirds or the Japanese ma concept to let negative space carry visual weight
• Layered horizontal bands – stack distinct content sections like spatial planes in a woodblock print (foreground content, middle navigation, distant background)
• Cloud-band section dividers – use horizontal decorative bands (stylized clouds or mist) to separate content zones, mimicking the kasumi technique in ukiyo-e
• Dramatic cropping at viewport edges – allow images and decorative elements to bleed beyond container boundaries, suggesting continuation beyond the visible area
• Vertical text accents – use writing-mode: vertical-rl for decorative labels or sidebar elements, honoring traditional Japanese vertical text flow
• Generous negative space – embrace large empty areas as active design elements; do not fill every pixel
• Diagonal movement – guide the eye along diagonal or S-curved paths through the layout, reflecting the compositional flow of ukiyo-e prints
• Foreground/background contrast – use bold, detailed foreground elements against simple, muted backgrounds to create depth without perspective
• Fixed-ratio panels – use aspect ratios common in traditional print formats: roughly 2:3 (oban), 1:3 (hashira-e pillar prints), or 1:1 (shikishi)
• Nature-framed content – use stylized botanical or wave elements as decorative frames around key content areas
• Contained illustration zones – dedicate specific areas for large illustrative elements rather than scattering small icons throughout

---

CSS / Design Techniques

Card Component

/* Ukiyo-e woodblock print style card */
.ukiyo-card {
  background: var(--ukiyo-gofun);
  border: 2px solid var(--ukiyo-sumi);
  border-radius: 2px;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ukiyo-card:hover {
  transform: translateY(-4px);
  box-shadow:
    4px 4px 0 var(--ukiyo-ai),
    8px 8px 0 rgba(27, 75, 122, 0.15);
}

/* Card image area with woodblock texture overlay */
.ukiyo-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--ukiyo-sumi);
}

/* Card body */
.ukiyo-card__body {
  padding: 1.5rem;
  position: relative;
}

/* Red seal stamp accent in corner */
.ukiyo-card__body::after {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: var(--ukiyo-shu);
  border-radius: 2px;
  opacity: 0.8;
}

.ukiyo-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ukiyo-sumi);
  margin-bottom: 0.5rem;
}

.ukiyo-card__text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--ukiyo-keshizumi);
  line-height: 1.7;
}

Button Styles

/* Primary button -- bold vermillion accent */
.ukiyo-btn {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ukiyo-gofun);
  background: var(--ukiyo-shu);
  border: 2px solid var(--ukiyo-sumi);
  padding: 0.75rem 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
}

.ukiyo-btn:hover {
  background: var(--ukiyo-sumi);
  color: var(--ukiyo-gofun);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--ukiyo-shu);
}

.ukiyo-btn:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* Secondary button -- outlined, ink-stroke style */
.ukiyo-btn--outline {
  background: transparent;
  color: var(--ukiyo-sumi);
  border: 2px solid var(--ukiyo-sumi);
}

.ukiyo-btn--outline:hover {
  background: var(--ukiyo-sumi);
  color: var(--ukiyo-gofun);
  box-shadow: 2px 2px 0 var(--ukiyo-ai);
}

/* Ghost button -- minimal, ink text only */
.ukiyo-btn--ghost {
  background: transparent;
  color: var(--ukiyo-ai);
  border: none;
  border-bottom: 2px solid var(--ukiyo-ai);
  padding: 0.5rem 0;
}

.ukiyo-btn--ghost:hover {
  color: var(--ukiyo-shu);
  border-bottom-color: var(--ukiyo-shu);
  box-shadow: none;
  transform: none;
}

Navigation Bar

/* Ukiyo-e inspired navigation */
.ukiyo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--ukiyo-gofun);
  border-bottom: 3px solid var(--ukiyo-sumi);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Brand mark -- red seal stamp style */
.ukiyo-nav__brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ukiyo-sumi);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ukiyo-nav__brand::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background: var(--ukiyo-shu);
  border-radius: 2px;
}

/* Navigation links */
.ukiyo-nav__links {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.ukiyo-nav__link {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ukiyo-keshizumi);
  position: relative;
  padding-bottom: 4px;
}

/* Ink-brush underline on hover */
.ukiyo-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ukiyo-shu);
  transition: width 0.3s ease;
}

.ukiyo-nav__link:hover::after {
  width: 100%;
}

.ukiyo-nav__link:hover {
  color: var(--ukiyo-sumi);
}

Hero Section

/* Full-width hero with woodblock print atmosphere */
.ukiyo-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: flex-end;
  padding: 4rem;
  background: var(--ukiyo-ai);
  overflow: hidden;
}

/* Layered background -- wave pattern at bottom */
.ukiyo-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: no-repeat bottom center / 100% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0,100 C100,60 200,140 300,100 C400,60 500,140 600,100 C700,60 800,140 900,100 C1000,60 1100,140 1200,100 L1200,200 L0,200Z' fill='%23F5F0E1' stroke='%231C1C1C' stroke-width='2'/%3E%3Cpath d='M0,130 C80,100 160,160 240,130 C320,100 400,160 480,130 C560,100 640,160 720,130 C800,100 880,160 960,130 C1040,100 1120,160 1200,130 L1200,200 L0,200Z' fill='%23EDE4D3' stroke='%231C1C1C' stroke-width='1.5'/%3E%3C/svg%3E");
  z-index: 1;
  opacity: 0.9;
}

/* Subtle cloud band at top */
.ukiyo-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    var(--ukiyo-gofun) 0%,
    rgba(245, 240, 225, 0.6) 40%,
    transparent 100%
  );
  z-index: 1;
}

/* Hero content */
.ukiyo-hero__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.ukiyo-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--ukiyo-gofun);
  line-height: 1.05;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.ukiyo-hero__subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--ukiyo-torinoko);
  line-height: 1.6;
  margin-bottom: 2rem;
}

Wave Divider

/* Stylized Hokusai-inspired wave section divider */
.ukiyo-wave-divider {
  width: 100%;
  height: 80px;
  background: no-repeat center / 100% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80'%3E%3Cpath d='M0,40 C40,20 80,60 120,40 C160,20 200,55 240,35 C280,15 320,60 360,40 C400,20 440,55 480,35 C520,15 560,60 600,40 C640,20 680,55 720,35 C760,15 800,40 800,40' fill='none' stroke='%231B4B7A' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0,50 C50,30 100,65 150,45 C200,25 250,60 300,45 C350,30 400,65 450,45 C500,25 550,60 600,45 C650,30 700,65 750,45 C800,30 800,50 800,50' fill='none' stroke='%232D5F8A' stroke-width='1.5' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
  margin: 3rem auto;
}

/* Minimal single-line wave */
.ukiyo-wave-divider--subtle {
  height: 40px;
  width: 60%;
  margin: 2rem auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Cpath d='M0,20 C50,5 100,35 150,20 S250,5 300,20 S350,35 400,20' fill='none' stroke='%231B4B7A' stroke-width='1.5' opacity='0.4'/%3E%3C/svg%3E");
  background: no-repeat center / 100% auto;
}

Seal Stamp Accent

/* Japanese hanko (seal stamp) decorative element */
.ukiyo-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--ukiyo-shu);
  border-radius: 3px;
  color: var(--ukiyo-gofun);
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(245, 240, 225, 0.3);
  position: relative;
}

/* Slightly aged/textured look */
.ukiyo-seal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(245, 240, 225, 0.05) 2px,
    rgba(245, 240, 225, 0.05) 4px
  );
  border-radius: 3px;
}

/* Large decorative seal */
.ukiyo-seal--lg {
  width: 72px;
  height: 72px;
  font-size: 2rem;
}

Washi Paper Texture Background

/* Subtle washi (Japanese paper) texture for backgrounds */
.ukiyo-washi-bg {
  background-color: var(--ukiyo-gofun);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Aged paper variant */
.ukiyo-washi-bg--aged {
  background-color: var(--ukiyo-torinoko);
  background-image:
    radial-gradient(ellipse at 30% 50%, rgba(195, 128, 58, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 30%, rgba(27, 75, 122, 0.03) 0%, transparent 60%);
}

Woodblock Outline Effect on Images

/* Apply a bold-outline woodblock look to images */
.ukiyo-woodblock-img {
  position: relative;
  display: inline-block;
  border: 3px solid var(--ukiyo-sumi);
}

.ukiyo-woodblock-img img {
  display: block;
  width: 100%;
  filter: contrast(1.1) saturate(0.85);
}

/* Offset shadow mimicking woodblock registration marks */
.ukiyo-woodblock-img::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: -6px;
  bottom: -6px;
  border: 2px solid var(--ukiyo-ai);
  z-index: -1;
  opacity: 0.3;
}

---

Design Do’s and Don’ts

Do’s

• Do use bold, clean outlines on illustrations, cards, and UI components to echo the woodblock key-block line
• Do embrace asymmetric layouts – place hero text to one side, let images bleed off-edge, avoid centering everything
• Do incorporate wave, cloud, and botanical motifs as section dividers, background patterns, and decorative accents
• Do apply flat, unmodulated color areas – avoid drop shadows, gradients, and 3D effects within illustrative elements
• Do honor negative space – leave generous empty areas that function as breathing room and compositional counterweight
• Do use the traditional pigment palette – indigo blues, vermillion reds, warm earth tones, and oyster-shell whites
• Do include seal-stamp (hanko) accents – small red square marks for branding, authorship, or decorative punctuation
• Do layer spatial planes – use overlapping elements at different scales to suggest depth without perspective

Don’ts

• Don’t use gradients to simulate 3D shading – ukiyo-e is fundamentally flat; depth comes from overlapping planes, not lighting
• Don’t center every element symmetrically – symmetry contradicts the core fukinsei (asymmetric balance) principle
• Don’t overcrowd the layout – cluttered compositions violate the ma (negative space) philosophy
• Don’t use thin, hairline strokes for primary outlines – ukiyo-e lines are bold, confident, and decisive
• Don’t apply photorealistic textures or imagery without strong outline treatment – everything should feel graphic, not photographic
• Don’t use neon or hyper-saturated digital colors – the palette is rooted in natural pigments with a slightly muted, organic quality
• Don’t ignore the paper texture – the washi substrate is part of the aesthetic; pure flat white (#FFFFFF) feels sterile
• Don’t mix too many cultural aesthetics – ukiyo-e has a specific visual identity; blending in Chinese, Korean, or generic “Asian” motifs dilutes authenticity

---

Related Aesthetics

Aesthetic	Relationship
Japonisme	The 19th-century Western fascination with Japanese art; ukiyo-e prints were the primary catalyst, directly influencing Impressionism and Art Nouveau
Art Nouveau	Borrowed heavily from ukiyo-e: flat color areas, bold outlines, asymmetric composition, nature motifs, and visible contour lines
Flat Design	Shares the flat, unshaded color approach and bold graphic simplicity; ukiyo-e is a historical precedent for modern flat design
Japandi	Contemporary fusion of Japanese and Scandinavian minimalism; shares the reverence for negative space, natural materials, and restrained beauty
Ligne Claire	Belgian comic art style (Herge, Tintin) with clean outlines and flat color – directly descended from ukiyo-e’s influence on European graphic arts
Superflat	Takashi Murakami’s contemporary art movement explicitly references ukiyo-e’s flatness and merges it with anime/manga and pop culture
Wabi-Sabi	Shares the Japanese philosophical foundation of finding beauty in imperfection, transience, and natural simplicity
Mingei	Japanese folk craft movement emphasizing handmade beauty and functional simplicity; overlaps with ukiyo-e’s artisan print culture
Chinoiserie	European interpretation of East Asian decorative arts; sometimes conflated with Japonisme but distinct in its Chinese focus

---

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ukiyo-e -- Floating World</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
  <style>
    /* ========================================
       CSS Custom Properties
       ======================================== */
    :root {
      /* Blues */
      --ukiyo-ai: #1B4B7A;
      --ukiyo-hanada: #2D5F8A;

      /* Reds / Warm */
      --ukiyo-shu: #C34A36;
      --ukiyo-beni: #E8836B;
      --ukiyo-sakura: #FEEEED;

      /* Greens */
      --ukiyo-uguisu: #8B9E3C;
      --ukiyo-moegi: #3B7A57;
      --ukiyo-matcha: #BEC23F;

      /* Earth / Gold */
      --ukiyo-kitsune: #C3803A;
      --ukiyo-kin: #D4AF37;
      --ukiyo-tobi: #6B4C3B;

      /* Neutrals */
      --ukiyo-gofun: #F5F0E1;
      --ukiyo-torinoko: #EDE4D3;
      --ukiyo-sumi: #1C1C1C;
      --ukiyo-keshizumi: #3A3632;
    }

    /* ========================================
       Reset & Base
       ======================================== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: var(--ukiyo-gofun);
      color: var(--ukiyo-keshizumi);
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.125rem;
      letter-spacing: 0.02em;
      line-height: 1.8;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; }

    /* ========================================
       Typography
       ======================================== */
    h1, h2, h3, h4 {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      color: var(--ukiyo-sumi);
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    h1 { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 900; }
    h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
    h3 { font-size: 1.25rem; }

    .section-label {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ukiyo-ai);
      margin-bottom: 0.5rem;
    }

    /* ========================================
       Navigation
       ======================================== */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2.5rem;
      background: var(--ukiyo-gofun);
      border-bottom: 3px solid var(--ukiyo-sumi);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav__brand {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      font-weight: 900;
      color: var(--ukiyo-sumi);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    /* Red seal stamp as brand icon */
    .nav__brand::before {
      content: '\6D6E';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      background: var(--ukiyo-shu);
      color: var(--ukiyo-gofun);
      font-size: 1rem;
      border-radius: 2px;
      box-shadow: inset 0 0 0 2px rgba(245, 240, 225, 0.25);
    }

    .nav__links {
      display: flex;
      list-style: none;
      gap: 2.5rem;
    }

    .nav__link {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--ukiyo-keshizumi);
      position: relative;
      padding-bottom: 4px;
      transition: color 0.3s ease;
    }

    .nav__link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--ukiyo-shu);
      transition: width 0.3s ease;
    }

    .nav__link:hover { color: var(--ukiyo-sumi); }
    .nav__link:hover::after { width: 100%; }

    /* ========================================
       Hero
       ======================================== */
    .hero {
      position: relative;
      min-height: 90vh;
      display: flex;
      align-items: flex-end;
      padding: 5rem 4rem;
      background: var(--ukiyo-ai);
      overflow: hidden;
    }

    /* Wave pattern at bottom */
    .hero::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 180px;
      background: no-repeat bottom center / 100% auto;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180'%3E%3Cpath d='M0,80 C80,40 160,120 240,80 C320,40 400,120 480,80 C560,40 640,120 720,80 C800,40 880,120 960,80 C1040,40 1120,120 1200,80 L1200,180 L0,180Z' fill='%23F5F0E1' stroke='%231C1C1C' stroke-width='2.5'/%3E%3Cpath d='M0,110 C60,85 120,135 180,110 C240,85 300,135 360,110 C420,85 480,135 540,110 C600,85 660,135 720,110 C780,85 840,135 900,110 C960,85 1020,135 1080,110 C1140,85 1200,110 1200,110 L1200,180 L0,180Z' fill='%23EDE4D3' stroke='%231C1C1C' stroke-width='1.5'/%3E%3C/svg%3E");
      z-index: 1;
    }

    /* Cloud band at top */
    .hero::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 140px;
      background: linear-gradient(
        180deg,
        var(--ukiyo-gofun) 0%,
        rgba(245, 240, 225, 0.5) 50%,
        transparent 100%
      );
      z-index: 1;
    }

    .hero__content {
      position: relative;
      z-index: 2;
      max-width: 650px;
    }

    .hero__title {
      font-size: clamp(3rem, 9vw, 6.5rem);
      font-weight: 900;
      color: var(--ukiyo-gofun);
      line-height: 1.0;
      letter-spacing: 0.03em;
      margin-bottom: 1rem;
    }

    .hero__subtitle {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 300;
      color: var(--ukiyo-torinoko);
      line-height: 1.6;
      margin-bottom: 2.5rem;
      max-width: 480px;
    }

    /* ========================================
       Buttons
       ======================================== */
    .btn {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.85rem 2.25rem;
      cursor: pointer;
      position: relative;
      transition: all 0.25s ease;
    }

    .btn--primary {
      color: var(--ukiyo-gofun);
      background: var(--ukiyo-shu);
      border: 2px solid var(--ukiyo-sumi);
    }

    .btn--primary:hover {
      background: var(--ukiyo-sumi);
      transform: translate(-2px, -2px);
      box-shadow: 2px 2px 0 var(--ukiyo-shu);
    }

    .btn--outline {
      color: var(--ukiyo-gofun);
      background: transparent;
      border: 2px solid var(--ukiyo-gofun);
    }

    .btn--outline:hover {
      background: var(--ukiyo-gofun);
      color: var(--ukiyo-sumi);
    }

    .btn-group {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    /* ========================================
       Wave Divider
       ======================================== */
    .wave-divider {
      width: 100%;
      height: 60px;
      background: no-repeat center / 100% auto;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 60'%3E%3Cpath d='M0,30 C50,10 100,50 150,30 C200,10 250,50 300,30 C350,10 400,50 450,30 C500,10 550,50 600,30 C650,10 700,50 750,30 C800,15 800,30 800,30' fill='none' stroke='%231B4B7A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      margin: 0 auto;
    }

    /* ========================================
       Section Layouts
       ======================================== */
    .section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 5rem 2.5rem;
    }

    .section--full {
      max-width: 100%;
      padding: 5rem 4rem;
    }

    .section__header {
      margin-bottom: 3rem;
    }

    .section__header--center {
      text-align: center;
    }

    .section__header--right {
      text-align: right;
    }

    /* ========================================
       Card Grid
       ======================================== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }

    .card {
      background: var(--ukiyo-gofun);
      border: 2px solid var(--ukiyo-sumi);
      border-radius: 2px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 4px 4px 0 var(--ukiyo-ai);
    }

    .card__image {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-bottom: 2px solid var(--ukiyo-sumi);
    }

    .card__body {
      padding: 1.5rem;
      position: relative;
    }

    /* Red seal in corner */
    .card__body::after {
      content: '';
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 24px;
      height: 24px;
      background: var(--ukiyo-shu);
      border-radius: 2px;
      opacity: 0.7;
    }

    .card__title {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .card__text {
      font-size: 1rem;
      color: var(--ukiyo-keshizumi);
      line-height: 1.7;
    }

    /* ========================================
       Asymmetric Feature Section
       ======================================== */
    .feature {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    .feature--reverse {
      grid-template-columns: 1fr 1.2fr;
    }

    .feature--reverse .feature__media {
      order: 2;
    }

    .feature__media {
      position: relative;
      border: 3px solid var(--ukiyo-sumi);
    }

    /* Offset border -- woodblock registration effect */
    .feature__media::after {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      right: -8px;
      bottom: -8px;
      border: 2px solid var(--ukiyo-ai);
      z-index: -1;
      opacity: 0.25;
    }

    .feature__media img {
      width: 100%;
      display: block;
    }

    .feature__content {
      padding: 1rem 0;
    }

    /* ========================================
       Vertical Text Accent
       ======================================== */
    .vertical-text {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--ukiyo-ai);
      opacity: 0.5;
    }

    /* ========================================
       Quote / Callout
       ======================================== */
    .ukiyo-quote {
      border-left: 4px solid var(--ukiyo-shu);
      padding: 2rem 2.5rem;
      margin: 3rem 0;
      background: var(--ukiyo-torinoko);
      position: relative;
    }

    .ukiyo-quote::before {
      content: '';
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      width: 36px;
      height: 36px;
      background: var(--ukiyo-shu);
      border-radius: 2px;
      opacity: 0.15;
    }

    .ukiyo-quote p {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-style: italic;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ukiyo-sumi);
    }

    .ukiyo-quote cite {
      display: block;
      margin-top: 1rem;
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      font-style: normal;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ukiyo-ai);
    }

    /* ========================================
       Footer
       ======================================== */
    .footer {
      background: var(--ukiyo-sumi);
      color: var(--ukiyo-torinoko);
      padding: 4rem 2.5rem 2rem;
      border-top: 4px solid var(--ukiyo-shu);
    }

    .footer__inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3rem;
    }

    .footer h4 {
      color: var(--ukiyo-gofun);
      font-size: 0.85rem;
      font-family: 'Cinzel', serif;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .footer p,
    .footer a {
      font-size: 0.95rem;
      color: var(--ukiyo-torinoko);
      text-decoration: none;
      line-height: 2;
    }

    .footer a:hover {
      color: var(--ukiyo-beni);
    }

    .footer__bottom {
      max-width: 1100px;
      margin: 3rem auto 0;
      padding-top: 1.5rem;
      border-top: 1px solid var(--ukiyo-keshizumi);
      text-align: center;
      font-size: 0.85rem;
      color: var(--ukiyo-keshizumi);
    }

    /* ========================================
       Responsive
       ======================================== */
    @media (max-width: 768px) {
      .hero {
        min-height: 70vh;
        padding: 3rem 2rem;
      }

      .feature {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .feature--reverse .feature__media {
        order: 0;
      }

      .nav {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
      }

      .nav__links {
        gap: 1.5rem;
      }

      .footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .section {
        padding: 3rem 1.5rem;
      }
    }
  </style>
</head>
<body>

  <!-- ============================
       Navigation
       ============================ -->
  <nav class="nav">
    <a href="#" class="nav__brand">Ukiyo-e</a>
    <ul class="nav__links">
      <li><a href="#prints" class="nav__link">Prints</a></li>
      <li><a href="#artists" class="nav__link">Artists</a></li>
      <li><a href="#gallery" class="nav__link">Gallery</a></li>
      <li><a href="#about" class="nav__link">About</a></li>
    </ul>
  </nav>

  <!-- ============================
       Hero
       ============================ -->
  <section class="hero">
    <div class="hero__content">
      <div class="section-label">Pictures of the Floating World</div>
      <h1 class="hero__title">Ukiyo-e</h1>
      <p class="hero__subtitle">
        Bold outlines, flat color, and the quiet power of nature
        rendered through the art of the woodblock print.
      </p>
      <div class="btn-group">
        <a href="#gallery" class="btn btn--primary">View Prints</a>
        <a href="#about" class="btn btn--outline">Learn More</a>
      </div>
    </div>
  </section>

  <!-- ============================
       Wave Divider
       ============================ -->
  <div class="wave-divider"></div>

  <!-- ============================
       Introduction Section
       ============================ -->
  <section class="section" id="about">
    <div class="section__header">
      <div class="section-label">The Floating World</div>
      <h2>Where Line Meets Color</h2>
    </div>
    <p>
      Ukiyo-e arose in the bustling cities of Edo-period Japan, capturing
      the ephemeral pleasures of the merchant class. Through a
      collaboration of artist, carver, printer, and publisher, each print
      emerged as a bold graphic statement: decisive black outlines carved
      into cherry wood, flat washes of indigo, vermillion, and gamboge
      pressed onto handmade washi paper.
    </p>

    <div class="ukiyo-quote">
      <p>
        In ukiyo-e, every line is a decision. The carver removes
        everything that is not essential, and what remains is truth.
      </p>
      <cite>On the art of the woodblock</cite>
    </div>
  </section>

  <!-- ============================
       Feature Section (Asymmetric)
       ============================ -->
  <section class="section" id="prints">
    <div class="feature">
      <div class="feature__media">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Tsunami_by_hokusai_19th_century.jpg/800px-Tsunami_by_hokusai_19th_century.jpg"
          alt="The Great Wave off Kanagawa by Hokusai"
        >
      </div>
      <div class="feature__content">
        <div class="section-label">Masterwork</div>
        <h2>The Great Wave</h2>
        <p>
          Katsushika Hokusai's iconic print from the series
          <em>Thirty-six Views of Mount Fuji</em> (c. 1831) exemplifies
          ukiyo-e's power: bold asymmetric composition, dramatic
          cropping, flat Prussian blue washes, and the reduction of
          nature's fury to a single, unforgettable graphic moment.
        </p>
      </div>
    </div>
  </section>

  <div class="wave-divider"></div>

  <!-- ============================
       Card Grid Section
       ============================ -->
  <section class="section" id="gallery">
    <div class="section__header section__header--center">
      <div class="section-label">Collection</div>
      <h2>Notable Prints</h2>
    </div>
    <div class="card-grid">
      <div class="card">
        <div class="card__body">
          <h3 class="card__title">Fine Wind, Clear Morning</h3>
          <p class="card__text">
            Red Fuji at dawn, rendered in vermillion and indigo. Hokusai
            distills Japan's sacred mountain into pure geometric color.
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card__body">
          <h3 class="card__title">Sudden Shower over Shin-Ohashi</h3>
          <p class="card__text">
            Hiroshige captures rainfall as parallel diagonal lines over
            a bridge, merging atmosphere with bold graphic abstraction.
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card__body">
          <h3 class="card__title">Beauty Looking Back</h3>
          <p class="card__text">
            Hishikawa Moronobu's bijin-ga masterwork: a turning figure
            whose kimono patterns become the composition itself.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================
       Reverse Feature
       ============================ -->
  <section class="section" id="artists">
    <div class="feature feature--reverse">
      <div class="feature__content">
        <div class="section-label">Process</div>
        <h2>The Woodblock Method</h2>
        <p>
          A single ukiyo-e print required the coordinated effort of four
          specialists. The artist drew the design. The carver cut it into
          cherry wood blocks -- one key block for outlines, separate
          blocks for each color. The printer aligned each sheet by hand,
          pressing pigment-soaked blocks onto dampened washi paper.
          The publisher orchestrated the entire production.
        </p>
      </div>
      <div class="feature__media">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Hiroshige_-_Evening_Snow_at_Kanbara_-_Google_Art_Project.jpg/800px-Hiroshige_-_Evening_Snow_at_Kanbara_-_Google_Art_Project.jpg"
          alt="Evening Snow at Kanbara by Hiroshige"
        >
      </div>
    </div>
  </section>

  <div class="wave-divider"></div>

  <!-- ============================
       Footer
       ============================ -->
  <footer class="footer">
    <div class="footer__inner">
      <div>
        <h4>Ukiyo-e</h4>
        <p>Pictures of the floating world. Bold lines, flat color, and the enduring beauty of the woodblock print.</p>
      </div>
      <div>
        <h4>Explore</h4>
        <p><a href="#">Prints Collection</a></p>
        <p><a href="#">Artists</a></p>
        <p><a href="#">Techniques</a></p>
        <p><a href="#">History</a></p>
      </div>
      <div>
        <h4>Resources</h4>
        <p><a href="#">Metropolitan Museum of Art</a></p>
        <p><a href="#">Museum of Fine Arts, Boston</a></p>
        <p><a href="#">British Museum</a></p>
      </div>
    </div>
    <div class="footer__bottom">
      <p>Ukiyo-e Design Reference</p>
    </div>
  </footer>

</body>
</html>

---

Implementation Tips

• Use SVG for wave and cloud motifs – inline SVGs scale perfectly and can be colored with CSS custom properties; avoid raster images for decorative elements
• Layer with z-index and position: relative – the ukiyo-e sense of overlapping spatial planes translates directly to CSS stacking contexts
• Apply filter: saturate(0.85) contrast(1.1) to photographs to push them toward the muted, high-contrast woodblock print look before compositing into the layout
• Use writing-mode: vertical-rl sparingly for decorative sidebar labels or section markers to honor traditional Japanese vertical text flow without sacrificing readability
• Prefer hard borders over shadows – ukiyo-e is defined by outlines, not diffused light; use solid border and offset box-shadow (e.g., 4px 4px 0 color) instead of soft drop shadows
• Set backgrounds to warm off-whites (#F5F0E1, #EDE4D3) rather than pure #FFFFFF to simulate the warmth of washi paper
• Limit your active palette to 4-5 colors per view – traditional woodblock prints used separate carved blocks for each color, so economy was a practical necessity that became an aesthetic virtue
• Test asymmetric layouts carefully on mobile – the dramatic cropping and off-center placement that works beautifully on wide screens may need to collapse into a simpler single-column flow on narrow viewports

This site is open source. Improve this page.