Wabi-Sabi

Wabi-Sabi — Style Reference

Imperfect, impermanent, incomplete — let material and time speak instead of design.

Theme: light

Wabi-sabi is the Japanese acceptance of imperfection: a chip in a bowl, yellowed paper, a blotched wall are all value rather than flaw. On screen it shows as warm paper (#f2ede4), ink text (#3a3a3a), serif type, dividers of 1px at 30% opacity, and whitespace extravagant to the point of luxury. Vivid saturation, heavy shadow and thick borders, dense arrangement, decorative animation and bounce are all refused — any display of eagerness offends it.

Colors

Typography

Noto Serif SC — Serif throughout in 300 and 400 only. Leading at 1.9 with slightly open tracking, so even letters keep their distance.

• Substitute: 'Songti SC', Georgia, serif
• Weights: 300, 400
• Sizes: 14, 16, 19, 24, 32, 42
• Line height: 1.25 (display), 1.4 (headings), 1.9 (body)
• Letter spacing: 0.02em on display, 0.24em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: airy

Spacing Scale

Border Radius

• Page max-width: 980px
• Section gap: 192px
• Card padding: 40px
• Element gap: 36px

Components

Hairline Rule

Role: The hairline rule — the core structure

1px in #d4cdc5 at 30%, spanning most of the content width with 10% clear at each end. It must be weak enough to barely see yet still felt — the style's only structural tool.

Quiet Button

Role: Action button

Transparent fill, a 1px ink border at 25%, 2px radius, serif at 14px with 0.24em tracking, 14px 36px padding, no shadow. Hover raises the border to 45% and the text from 80% to full, with nothing moving. 600ms ease-out.

• States: hover: border 45%, text 100%; no motion

Paper Card

Role: Content card

Paper fill one step lifted, 2px radius, a 1px sand border at 30%, 40px padding, no shadow. Title at 32px/400, body at 16px/300 on 1.9 leading. Hover only raises the border to 50% and the fill by two percent, over 800ms.

Object Image

Role: Object image container

Zero radius, no border, no shadow. The image may hold an irregular object — a clay bowl, old wood, a stone — and its edge need not be clean. It sits 36px from text, with no filter or overlay, letting the material speak.

Silence Block

Role: The silence block

An empty block 192px to 320px tall carrying nothing, existing as a real element. In wabi-sabi, having nothing there is itself the content — it separates and enlarges what surrounds it.

Do's and Don'ts

Do

• Ground in warm paper, never white
• Serif type at 1.9 leading
• Dividers are 1px at 30%
• Let emptiness run near-luxurious
• Allow imperfection and asymmetry
• Transitions run 600 to 800ms with nothing moving

Don't

• No vivid saturated color
• No heavy shadows or thick borders
• Never arrange elements densely
• No decorative animation or bounce
• No pure white ground
• Never filter or overlay the material away

Surfaces

Elevation

• None: none — shadows break the quiet
• Max allowed: 0 1px 2px rgba(58,58,58,0.04)

Imagery

Object photography: ceramics, old wood, stone, dry branches, linen. Natural light, low saturation, visible wear. Asymmetry and incomplete framing are welcome. No saturation, studio lighting or decorative illustration.

Layout

Capped at 980px with 32px padding, sections 192px apart. The layout may be incomplete and off-centre — elements need not align to a grid and emptiness may be lopsided. Dense arrangement is refused; one screen carries three blocks at most.

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #3a3a3a
• background: #f2ede4
• card: #f7f3ec
• moss: #8a9a7b
• sand: #b5a78c
• tea: #8b6f4e

EXAMPLE COMPONENT PROMPTS:

1. Build a wabi-sabi card: background #f7f3ec (paper one step lifted), 2px radius, a 1px rgba(181,167,140,0.3) border, 40px padding, no shadow. Title at 32px Noto Serif SC 400 in #3a3a3a; body at 16px/300 on 1.9 leading. Leave 192px of emptiness between cards. Hover raises the border to rgba(181,167,140,0.5) over 800ms ease-out with nothing moving. The page ground is #f2ede4.

Similar Brands

• Japanese Fresh — Shares the aesthetic root, though Japanese Fresh is bright while wabi-sabi is quiet and visibly aged
• Ink Wash — Both Eastern restraint, though ink wash works in ink density while wabi-sabi works in material imperfection

Quick Start

:root {
  /* Colors */
  --color-ink: #3a3a3a;
  --color-paper: #f2ede4;
  --color-moss: #8a9a7b;
  --color-sand: #b5a78c;
  --color-tea: #8b6f4e;
  --color-slate-teal: #799d91;

  /* Typography — Font Families */
  --font-serif: 'Noto Serif SC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 42px;
  --leading-display: 1.25;
  --tracking-display: 0.02em;
  --text-heading: 32px;
  --leading-heading: 1.35;
  --text-subheading: 24px;
  --leading-subheading: 1.45;
  --text-body-lg: 19px;
  --leading-body-lg: 1.85;
  --text-body: 16px;
  --leading-body: 1.9;
  --text-label: 14px;
  --leading-label: 1.7;
  --tracking-label: 0.24em;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-144: 144px;
  --spacing-192: 192px;

  /* Layout */
  --page-max-width: 980px;
  --section-gap: 192px;
  --card-padding: 40px;
  --element-gap: 36px;
  --density: airy;

  /* Border Radius */
  --radius-cards: 2px;
  --radius-buttons: 2px;
  --radius-images: 0;

  /* Surfaces */
  --surface-paper: #f2ede4;
  --surface-lifted-paper: #f7f3ec;
  --surface-sand-block: rgba(181,167,140,0.22);
}