Wabi Sabi Grain
Raw paper grain, sun-faded color, and dashed separators like visible mending — nothing polished, nothing pretending to be new.
Construction · Bare
There is no surface at all — no fill, no line, no tint. Size, weight and distance are the only tools left.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Wabi Sabi Grain style. Imperfection kept on purpose: raw paper grain, colors that look sun-faded, dashed separators like visible mending stitches, and type that never gets heavy. Nothing is
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- raw paper grain
- sun-faded palette
- mending-stitch dashes
- nothing polished
What this style refuses
- glossy or glassy surfaces
- pure white
- saturated color
- heavy bold weights
- perfect crisp symmetry
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
#ece5d6#16140f#f2ecdf#1d1a14#c9bfa9#383325#3b352b#ddd4c2#675e4e#9c937e#84421f#c07a52#f4ede0#201007Shape and type
Measured contrast — body 9.68:1 light, 12.51:1 dark; secondary text 5.09:1 and 6.04:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Wabi Sabi Grain
*
* Raw paper grain, sun-faded color, and dashed separators like visible mending — nothing polished, nothing pretending to be new.
*
* One complete product screen, rendered from the token object below —