侘寂 · Wabi-Sabi
Nothing lasts, nothing is finished, and nothing is perfect — this is the beginning of beauty, not its end.
Rustic simplicity. The beauty found in humble imperfection.
The melancholy of transience. Time leaves its mark, and that mark is beautiful.
Negative space. The pause between notes is as important as the notes themselves.
Philosophy
The five pillars of wabi-sabi — each a lens through which imperfection becomes revelation.
Specimens
Four objects that carry the mark of time and the grace of imperfection.
割れた器
The crack runs from rim to foot. We do not discard this bowl — we mend it with gold and call it more beautiful than before. Kintsugi teaches the worth of what has broken.
風化した石
A thousand years of rain have made this stone what it is. No sculptor's hand could achieve this smoothness, this particular weight of grey. Age is its own craft.
落ち葉
Curled at the edges, colour fading from the outside in. The decay is the beauty — not despite what it is becoming, but because of it. This is the last radiance.
古い道
Each footstep is invisible, yet the path remembers them all. The earth compressed by countless journeys is a record of human longing, as faithful as any archive.
Components
Each element carries the quietness of ink on paper. No excess. Nothing performed.
Primary — underline border
Filled — ink on paper
Ink weight shifts — never scale, never shadow. The border deepens like ink absorbing into paper over time.
Interactions
Four named rules govern every interaction in this system. Hover or click each demo to feel the principle in practice.
侘寂的核心是静谧。绝对禁止使用任何 translate（位移）、scale（缩放）或弹簧动画。 元素必须像石头一样静静待在原处。
transform: none — no hover translate, no scale, no spring easing. The element sits like a stone in a garden, immovable.
Hover — the button does not move.
放弃所有营造现代立体感的 box-shadow。界面的层次仅通过大量留白和非常微弱的边框线来表达。
box-shadow: none — depth is expressed only through whitespace and ultra-thin borders. No modern 3D illusion.
Hover this card.
The border will deepen — no shadow will emerge.
所有交互必须极其极其缓慢。强制使用 duration-1000 甚至更长的过渡时间（如 duration-[1500ms]）， 配合 ease-in-out。让背景颜色的加深看起来像自然光线缓慢变暗。
transition-duration: 1000ms–1500ms — interactions unfold like dusk settling, not a light switch flipping.
悬停（Hover）时，文本的颜色不要发生突变，而是通过改变透明度（如从 opacity-60 缓慢过渡到 opacity-100）， 模拟墨迹在时间中的显现。
opacity: 0.4 → 1.0 over 1200ms — text appears like ink emerging from the page, not appearing suddenly.
“In the tea ceremony, every gesture is deliberate. Nothing is rushed. The bowl is held with both hands.”
Hover the text — watch it emerge from opacity 25%.
CSS reference
App Demo
A mock application showing the wabi-sabi system in context. Slow transitions, paper textures, ink-dark text, generous silence.
First light came slowly through the paper screen. The tea was cold before I finished reading.
Rain on the window. I noticed a crack in the ceramic bowl I have used for three years. I will keep it.
The garden stone has a new patch of lichen. Time is doing its slow work.
“The tea ceremony exists in the present moment only. It cannot be preserved or replicated.”
Ma — 間
Ma (間) — the pause, the interval, the emptiness that gives form its meaning. Select a poem and notice how space frames the words.
An old silent pond
A frog jumps into the pond
Splash! Silence again.
Toggle below to see how reducing content reveals meaning through space. The empty areas are not wasted — they are active.
Palette
Five colours drawn from the forest floor, the tea garden, the autumn hillside.
Sumi
Ink
Primary text — deep charcoal
Washi
Warm Paper
Secondary surface — rice paper
Koke
Moss
Accent — quiet sage
Cha
Tea
Accent — warm beige
Tsuchi
Clay
Accent — earthen brown
Principles
Not rules but a practice. Not constraints but a clearing away of what was never necessary.
Warm paper background — let the surface breathe
Extreme whitespace — emptiness is not void, it is space with intention
Thin ink brushstroke dividers at low opacity
Serif font-light — no heaviness, no insistence, no performance
Asymmetric layouts — intentionally off-center, as nature arranges things
Duration-1000 slow transitions — unhurried, like the turning of seasons
Natural motifs: water, stone, bamboo, moss, fallen leaf
No bright colors or high saturation — vibrancy is noise
No busy patterns or competing elements — stillness requires discipline
No translate, scale, or spring animations
No drop shadows or glows — hierarchy lives in whitespace alone
No bold or heavy typography weights — lightness is the message
No perfectly symmetric layouts — symmetry is a human imposition
Motifs
Inline SVG motifs — water, stone, bamboo. No photography. No stock illustration. Only the mark.
Concentric imperfect ellipses. Each ring slightly off-center — as if drawn by a trembling brush after deep meditation.
mizu — 水
A single stalk, gently curved. Nodes mark the joints. Sage-coloured — present but unimposing.
take — 竹
An irregular silhouette, moss patches, hairline fractures. The stone does not apologize for its asymmetry — it simply is.
ishi — 石
“In Japan, broken objects are often repaired with gold. The breakage and repair are part of the history of the object, rather than something to be concealed. The cracks are gilded — and the vessel is more beautiful for having been broken.”
Kintsugi — 金継ぎ