Imperfect shapes
Edges and radii vary slightly, like hand-thrown ceramics. Nothing is perfectly geometric.
A Japanese view of beauty that accepts imperfection, impermanence and incompleteness. Interfaces in this spirit are quiet, textured and slightly irregular, like a handmade tea bowl.
Open the kit Copy the promptWabi-sabi values things that are simple, natural and marked by time. In interfaces it means restraint, texture and small irregularities that feel human.
Edges and radii vary slightly, like hand-thrown ceramics. Nothing is perfectly geometric.
Paper grain, stone and clay tones replace flat digital surfaces.
Layouts are balanced but uneven, with generous empty space known as ma.
Colors of ash, clay, moss and aged wood, low in saturation and calm.
Wabi-sabi grew from Zen Buddhism and the Japanese tea ceremony and entered Western design through books and craft.
Japanese craftsmen begin repairing broken ceramics with lacquer and gold, making the break part of the object's beauty.
Tea master Sen no Rikyū favours rustic, simple utensils over ornate imported ware, shaping the ideals of wabi.
Leonard Koren publishes Wabi-Sabi for Artists, Designers, Poets and Philosophers, introducing the idea to Western design.
Interior design blends Japanese and Scandinavian restraint, bringing natural materials and imperfection into homes.
Brands focused on craft and wellbeing use texture, asymmetry and quiet motion online.
Wabi-sabi motion is a single brushstroke. An ensō circle is drawn in one breath and left open.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Makers show handmade work on textured, quiet pages.
Hospitality brands use muted tones and asymmetry to feel calm and authentic.
Studios use natural textures and space to echo their materials.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Low-saturation earth tones, with a single trace of kintsugi gold for moments that matter. Tap a swatch to copy its hex value.
:root{
--rice-paper: #E9E3D8;
--ash: #F2EEE6;
--clay: #C9BFAE;
--stone: #8F8472;
--aged-wood: #5A4A3A;
--charcoal: #2F2A24;
--kintsugi-gold: #C9A24A;
}A traditional mincho serif with wide letter spacing for headings, and a gentle gothic sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Shippori Mincho",Georgia,serif;
--font-b: "Zen Kaku Gothic New",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(49px, 9vw, 107px);
--fs-1: 48.6px; --fs-2: 37.3px;
--fs-3: 28.7px; --fs-4: 22.1px;
--fs-body: 17px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 500;
letter-spacing: .04em;
text-transform: none;
line-height: 1.2;
}
/* fonts: Shippori Mincho and Zen Kaku Gothic New */Asymmetric layouts with a lot of space. Offset cards slightly so the rhythm feels natural rather than mechanical.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 36px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Slightly irregular radii on every surface, soft low shadows and a subtle paper grain.
:root {
--radius: 46% 54% 38% 62% / 6% 4% 7% 5%;
--radius-sm: 8px 5px 9px 4px;
--bw: 1px;
--shadow: 0 18px 30px -24px rgba(47,42,36,.45);
--shadow-sm: 0 6px 12px -8px rgba(47,42,36,.4);
--gap: 36px;
--pad: 30px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Wabi-Sabi kit · Anti-Boring */
:root{
--bg:#E9E3D8;
--surface:#F2EEE6;
--surface2:#DDD5C7;
--fg:#2F2A24;
--muted:#6A6155;
--accent:#5A4A3A;
--accent-fg:#F2EEE6;
--accent2:#C9BFAE;
--accent2-fg:#2F2A24;
--border:#8F8472;
--bw:1px;
--radius:46% 54% 38% 62% / 6% 4% 7% 5%;
--radius-sm:8px 5px 9px 4px;
--shadow:0 18px 30px -24px rgba(47,42,36,.45);
--shadow-sm:0 6px 12px -8px rgba(47,42,36,.4);
--font-d:"Shippori Mincho",Georgia,serif;
--font-b:"Zen Kaku Gothic New",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:500;
--h-track:.04em;
--h-case:none;
--h-style:normal;
--h-lh:1.2;
--gap:36px;
--pad:30px;
--focus:rgba(90,74,58,.3);
--ok:#4F6B4A;
--warn:#8A6A2E;
--danger:#8C3B2E;
--info:#4A5A6A;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(ellipse at 40% 60%,#B8AE9C 0,#8F8472 60%,#6A6155 100%);
--code-bg:#2F2A24;
--code-fg:#E9E3D8;
--btn-case:none;
--btn-track:.08em;
--btn-weight:500;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-color:var(--accent)}
.btn:hover{transform:none;background:#3F342A}
.btn-2{border-color:var(--border)}
.btn-ghost{border-color:var(--border)}
.card{background:var(--surface)}
.card-media{border-radius:40% 60% 50% 50%/8% 6% 10% 7%;filter:saturate(.8)}
.badge{background:transparent;color:var(--muted);border-color:var(--border);border-radius:3px 6px 4px 7px;font-weight:400}
.input,.select,.textarea{background:#F6F3ED}
.switch::before{background:#F2EEE6}
.switch{border-radius:999px 800px 900px 999px}
.alert{border-left-width:3px;border-radius:4px 9px 6px 3px}
.alert b{font-family:var(--font-d)}
.progress i{background:#5A4A3A;opacity:.8}
.tab{font-family:var(--font-d)}
.tab[aria-selected="true"]{border-bottom:2px solid var(--accent)}
.kintsugi{background:linear-gradient(115deg,transparent 48%,#C9A24A 48.5% 50%,transparent 50.5%)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#22201C;
--surface:#2C2924;
--surface2:#26231F;
--fg:#EDE6DA;
--muted:#B5AB9B;
--border:#6A6155;
--accent:#C9BFAE;
--accent-fg:#22201C;
--accent2:#3A362F;
--accent2-fg:#EDE6DA;
--code-bg:#15130F;
}
html.alt .input,html.alt .select,html.alt .textarea{background:#2C2924;color:#EDE6DA}html.alt .btn:hover{background:#EDE6DA}html.alt .enso circle,html.alt .stage circle{stroke:#EDE6DA}html.alt .stage{background:#2C2924}html.alt .select option{background:#22201C}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a small ceramics studio in an authentic Wabi-Sabi style.
Palette: Rice paper #E9E3D8, Ash #F2EEE6, Clay #C9BFAE, Stone #8F8472, Aged wood #5A4A3A, Charcoal #2F2A24, Kintsugi gold #C9A24A.
Typography: Shippori Mincho 500 with 0.06em tracking for headings, Zen Kaku Gothic New 400 for body with 1.9 line height.
Layout: Asymmetric hero: text on the left with generous line spacing, a hand-thrown dark tea bowl with a gold kintsugi crack and an open ensō brush circle on the right. Cards offset slightly in height.
Signature details: Subtle paper-grain texture, low-saturation earth palette, irregular border-radius values that vary slightly, one trace of kintsugi gold.
Components: Quiet dark-brown buttons, soft paper inputs, slightly irregular cards, understated outlined badges, thin tab underlines.
Motion: A single ensō brushstroke drawn once and left open, slowly falling leaves.
Avoid: perfect geometry, bright colors, glossy effects, decorative kanji without meaning, crowded layouts.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Random wobble on everything looks like a bug. Irregularity should be subtle and consistent.
Using kanji or Zen imagery without meaning is shallow. Understand what you show.
Muted palettes still need readable text. Keep body text in charcoal.
Wabi-sabi is about honest materials. Real textures and photos matter more than beige.