karesansui · 枯山水
the art of considered absence — a digital karesansui
palette
No primary, no secondary. Five natural tones that hold the garden together the way earth holds stone: #4a5548 moss, #f5f3ee sand, #8a9a7b living green, #c4bba8 worn stone, #7a7062 deep shadow.
constraint as freedom
These five tones are the entire palette. No exceptions. Adding a sixth color would be like placing a red stone in a kare-sansui — it would immediately become the only thing anyone sees.
philosophy
In karesansui, emptiness is not absence — it is presence. The void between stones carries as much weight as the stones themselves. White space breathes, holds tension, and directs the eye without demanding it.
Never fill space for the sake of filling. Let silence be a design element.
Each stone is chosen and placed with deliberate intention. The relationship between stones — their proximity, orientation, and visual weight — creates narrative without words. Three stones become conversation.
Every element earns its position through considered relationship with others.
Raked sand represents water in motion — ripples, currents, waves frozen in mineral stillness. The pattern emanates outward from each stone, revealing invisible forces made tangible.
Subtle visual rhythm guides attention more powerfully than bold contrast.
“The garden does not ask to be seen. It exists whether or not there is a gardener, whether or not there is a viewer. This is its teaching.”on the nature of karesansui
patterns
Each sand pattern is a visual metaphor for interaction rhythm — concentric ripples of hover response, parallel cadence of repeated elements, flowing transitions between states.
同心円 / doshinen
Radiating from each stone, rings represent the ripples a single presence creates in still water. Distance diminishes; influence does not.
平行線 / heikousen
Calm water made solid. Parallel lines suggest the mirror surface of a lake — infinite depth without motion, stillness as the highest state.
流れ / nagare
Wind made visible. Gentle undulation shows that even mineral stillness contains memory of movement — past and present held in one surface.
components
Stillness in interaction — buttons clarify without announcement.
disabled states — the unavailable stone
interactions
Four named rules govern every interactive moment in this style. Hover or interact with each demo below to feel the principle in action — no spring, no bounce, only meditative restraint.
rule 01
交互必须缓慢克制，使用 duration-700 到 duration-1000 与 ease-in-out。
transition-all duration-[900ms] ease-in-out
hover the button — count the time
Resting at low opacity. Clarity arrives slowly.
contrast — 150ms vs 900ms
rule 02
禁止使用 translate、rotate，避免任何物理位移动效；焦点应通过显隐与色阶变化表达。
opacity change + color deepening — no movement
hover — the stone does not move
a placed stone
This card does not lift, translate, or rotate. It clarifies — gradually, peacefully.
The stone rests at 38% opacity. No translate. No scale.
forbidden in this style
hover:-translate-y-2hover:rotate-[0.5deg]hover:scale-[1.04]active:translate-y-[4px]rule 03
仅使用低对比度的颜色加深、透明度浮现、或极淡阴影淡入淡出，不做弹跳与高对比闪烁。
low-contrast fade — shadow whispers — no bounce
hover each element — watch it surface
Resting in near-invisibility. Hover to surface.
rule 04
文本可默认半透明（如 text-[#4a5548]/70），hover/focus 时缓慢趋于清晰，保持冥想式节奏。
default semi-transparent → hover → full opacity
hover paragraphs — each arrives at its own pace
The art of quiet focus begins with restraint.
Secondary text remains quieter — not absent, but waiting for the eye to arrive at its own moment.
Caption text surfaces last. Each tier has its own transition delay — a meditative stagger.
hover or click to see quiet focus in motion
opacity ladder — text states
all four rules at a glance
typography
Still water
font-extralight / 48px
The space between stones
font-light / 30px / tracking-widest
In the karesansui tradition, each placement is irrevocable. The monk rakes with intention, knowing that tomorrow the wind may disturb the pattern — and that is also correct.
font-light / 14px / leading-relaxed
ryoanji — kyoto, japan — 15th century
font-light / 10px / tracking-widest
discipline
spatial cadence
OBSERVE — what to cultivate
Generous whitespace — let sections breathe with py-32 or more
Serif typography with font-light or font-extralight weight
Borders at /20 to /40 opacity — whisper, never shout
Transitions of 700ms to 1000ms — nothing abrupt
Text that clarifies on hover — semi-transparent at rest
Left-border accent cards over full-border containers
Monochromatic sand and moss palette exclusively
Asymmetric layouts that feel considered, not centered by default
RELEASE — what to remove
Never use translate, scale, or rotate on interactive elements
Never use transitions under 700ms — pace is philosophy
Never use saturated or bright accent colors
Never fill empty space with decorative elements
Never use box-shadow with heavy blur or offset
Never use font-bold — weight implies aggression
Never use rounded-full on non-circular elements
Never animate with bounce or spring easing
mu — nothingness
In Zen, mu represents the state before distinctions arise. The empty garden is the fullest.
zen garden — stylekit design system