# Design Language for undo.cafe ## Aesthetics and Tone undo.cafe is **a wabi-sabi tearoom where the act of un-doing is sacred** — a small wooden room above a cooling kiln, where every page is a vessel that has already been broken once and mended in gold. The conceptual seed: a cafe whose entire menu is the *reversal* of things. The bitter coffee you regret, undone. The cigarette you wish you hadn't smoked, undone. The cup you dropped, gathered and re-fired. The name "undo" is taken literally and turned into a ritual of repair — not the bright "Ctrl+Z" of software, but the slow Japanese practice of *kintsugi*: imperfection honored, breakage made visible, nothing thrown away. The mood is **quiet, dim, and tactile** — the warmth of a clay cup held in two hands on a grey morning. It is *zen-contemplative* leaning into *grounded-earthy*, with a thin seam of melancholy running through it like the gold vein in repaired pottery. Nothing is glossy. Nothing glows. Everything has the matte, slightly powdery surface of unglazed stoneware, the soft fuzz of raw linen, the dull sheen of a brass kettle that has not been polished in a decade. There is steam. There is the smell (implied, never stated) of wet ash and roasted barley. The site should feel like it was *thrown on a wheel* rather than laid out on a grid — walls that bow slightly, edges that are never perfectly straight, type that settles on its baseline like grounds settling in the bottom of a cup. Inspiration touchstones: the deliberate asymmetry of a Raku tea bowl; the negative space of a tokonoma alcove holding a single branch; the worn copper of a Kyoto kissaten counter; the way kintsugi gold is *more* beautiful for marking the wound, not hiding it. ## Layout Motifs and Structure The page is composed as **a vertical sequence of seven "vessels"** — full-height sections, each one shaped like a different ceramic form (a tall cylinder, a low bowl, a flared cup, a teapot, a saucer, a shard, a finished mended cup). This is *immersive-scroll* (15% in the frequency analysis — room to breathe) combined with *organic-flow* (6% — nearly empty), and it deliberately refuses *card-grid* (93% — the single most overused layout in the corpus). There is **no card grid anywhere on this site.** Content does not live in rectangles; it lives in vessels with curved clip-paths. Structural rules: - **The Wheel-Wobble Spine.** A single vertical line runs down the page — but it is not straight. It is a hand-drawn SVG path that wavers gently left and right by 8–14px, like the wall of a pot pulled up by an unsteady thumb. Each vessel-section is "thrown" off this spine. Section content is never centered on the viewport's true center; it sits slightly off, following the wobble. - **Off-axis composition (ma-negative-space, 16%).** Each section is mostly empty. A single column of text — never wider than 38ch — sits at roughly the 1/3 or 2/3 horizontal mark, never dead-center. The rest is the matte clay field, holding one ceramic illustration and a great deal of silence. - **Curved section seams.** Section boundaries are never horizontal lines. They are wide, shallow `border-radius` curves or `clip-path` ellipses — the lip of a bowl, the foot of a cup. Where two sections meet, the lower one's top edge bulges up into the one above like a glaze drip. - **The Kintsugi Seam.** A thin gold line (`#C9A227`, 1.5px, irregular hand-drawn SVG) threads through the *entire* page from top to bottom, crossing every section seam at a different angle, "mending" the breaks between vessels. It is the only metallic element. It draws itself on scroll. - **No dashboard, no sidebar, no bento-box.** One scroll, one column, seven vessels, one gold seam. Reading the page top to bottom should feel like watching a single cup be dropped, shatter, and slowly reassemble — the *undo* happening in front of you. ## Typography and Palette **Fonts (Google Fonts only — two voices: one hand, one quiet machine):** - **Display & Headings — *Zilla Slab* (weights 300, 400, 600).** A slab serif with soft, slightly stubby serifs that read like wet clay pressed with a wooden tool. Used for the "undo.cafe" wordmark and all vessel titles, set large (clamp 2.4rem → 5.5rem), weight 300 for an airy, almost-fading feel, letter-spacing -0.01em, line-height 1.05. Occasionally a single word in a heading is set in weight 600 — the word being *undone* — and given a `text-decoration: line-through` rendered as a hand-drawn SVG strike, the gold kintsugi line crossing it out. - **Body & Captions — *Spectral* (weights 300, 400; italic 400).** A literary serif with low contrast and generous, slightly old-fashioned proportions — it reads like a handwritten kissaten menu transcribed by a calligrapher. Body at 1.05–1.15rem, line-height 1.85, color the warm ink below. Italics used for the "undone" descriptions on the menu vessel and for the closing whisper. - **Micro-labels — *Spectral* small-caps**, letter-spacing 0.22em, used sparingly for vessel numbers ("一 / 二 / 三" or "I / II / III") and the tiny "est. — undone" mark in the footer. **Palette — unglazed stoneware, wet ash, and one vein of gold:** - `#E7E1D6` — *raw kaolin*. The dominant ground. The colour of unfired porcelain slip — a warm, slightly grey off-white with no blue in it. - `#CFC6B6` — *bisque*. Secondary surface for alternating vessels and for the inside of "bowl" sections. - `#8A7E6B` — *kiln dust*. Mid-tone for hairlines, dividers, and quiet secondary text. - `#3A352D` — *wet ink / cold tea*. The near-black used for all body text and the heaviest illustration strokes. Never pure black. - `#6E4B3A` — *roasted barley*. A muted brown used for the ceramic illustrations' fills and for hover states. - `#C9A227` — *kintsugi gold*. The single accent. Used only for: the mending seam, the strike-through on "undone" words, and the tiny cursor mark. Never as a button fill, never as a background. - `#A8421F` — *raku scorch*. A deep burnt-orange-red, used at near-invisible opacity (4–8%) as a warm bloom behind steam and at the kiln-glow at the page's base. The only "fire" colour, and it is almost never seen at full strength. Everything matte. No gradients except one: a barely-there radial of `#A8421F` at 6% fading to transparent, sitting under the final vessel like heat rising from cooling embers. ## Imagery and Motifs **No photography (98% of the corpus uses it — this site uses none). No 3D renders, no stock anything.** Every visual is a hand-drawn SVG line illustration in the style of a sumi-e brush study crossed with a potter's technical sketch — single-weight `#3A352D` strokes with the occasional `#6E4B3A` wash, on the raw-kaolin field. The motif vocabulary (each recurs, never as a literal "icon set"): - **The Seven Vessels.** A tall cylinder (un-throwing), a shattered bowl with scattered shards, a flared cup half-full of black liquid, a small teapot with a curl of steam, a flat saucer, a single curved shard alone, and finally the mended cup — the same broken bowl from vessel two, now whole, its cracks traced in the gold seam. These are large, central, and drawn with deliberate wobble. - **Steam-as-handwriting.** Curls of steam rise from cups — but the steam strokes are calligraphic, looping into ghostly half-words ("again", "no", "stay", "back") that the eye almost reads before they dissolve. Pure SVG path, animated drawing itself upward. - **Coffee-ground sediment.** A scatter of tiny irregular `#6E4B3A` dots pooling at the bottom of each vessel section, like grounds settled in a cup — denser at the page's base, sparse at the top. They drift very slowly on scroll, as if disturbed. - **The wobble-line.** Hand-drawn vertical and curved guide lines everywhere, never ruler-straight — the visual signature of something thrown by hand, not stamped by a machine. - **Kintsugi cracks.** Faint hairline cracks (`#8A7E6B`, 0.5px) spider across some surfaces — and wherever a crack exists, a thread of `#C9A227` gold runs alongside it, "mending" it. Breakage is never hidden; it is gilded. - **Brush-stroke punctuation.** Section transitions are marked by a single horizontal sumi-e brush stroke — wide, tapering, slightly dry at one end — in `#3A352D`. ## Prompts for Implementation Build undo.cafe as **a single-route, vertically scrolled, seven-vessel tearoom** — one HTML file, one CSS file, one JS module. Treat the page as a slow ninety-second ceremony in which a dropped cup is, vessel by vessel, *undone* back into wholeness. There is no CTA, no pricing block, no stat grid, no testimonial row, no email signup, no contact form, no "book a table" button. There is only the descent through the seven vessels and the gold seam that mends them. **Storytelling structure (seven vessels, vertical scroll):** 1. **The Sign Above the Door (cylinder).** A dim raw-kaolin field. The wordmark "undo.cafe" in Zilla Slab 300, large, sitting off-center on the wobble-spine. Beneath it, in Spectral italic: *"a small room where the day runs backwards."* A single curl of steam-handwriting drifts up and dissolves the word "open" into "—". The kintsugi seam begins here, at the top, a single gold point. 2. **The Drop (shattered bowl).** Scroll triggers it: a ceramic bowl illustration *breaks* — the SVG paths of its shards splay outward with a brief, sharp `spring` easing, then hang frozen mid-air. Caption, off-axis: *"Something was made. Something was broken. We do not sweep it away."* Coffee-ground dots scatter from the impact. 3. **The Menu of Undoings (flared cup).** The heart of the site. A short, hand-written-feeling list of "undone" items — *the third coffee, undone* / *the words at 2am, undone* / *the cigarette on the fire escape, undone* / *the cup you dropped, gathered* — each item a line of Spectral, the noun being undone struck through by a hand-drawn gold kintsugi line that draws itself when the item scrolls into view. No prices. No "order" buttons. The cup illustration beside the list slowly empties as you scroll past it (its black `#3A352D` fill clip-path receding). 4. **The Teapot (the offering).** A quieter vessel. A teapot with a long curl of steam spelling "stay". A paragraph in Spectral about *unhurry* — that here the only thing on offer is the reversal of haste. The wobble-spine bows widest here. 5. **The Saucer (the rest beneath).** Almost empty. A flat ellipse, a single shard resting on it, and one line: *"Everything that holds something else also gets stained."* The kintsugi seam crosses the section seam at a sharp angle. 6. **The Single Shard (the kept piece).** The starkest vessel — a lone curved shard, alone in a vast bisque field, the most negative space on the page. *"We keep what broke. It is the proof."* Coffee grounds are densest here, pooled at the very bottom. 7. **The Mended Cup (the undo, complete).** The broken bowl from vessel two returns — but reassembled, every shard back in place, every crack traced in glowing `#C9A227` gold (the accumulated kintsugi seam pours into its cracks here, its terminus). Below, the faint `#A8421F` ember-glow at 6%. Final line in Spectral 300: *"undone. which is to say — made again."* The footer: a tiny small-caps "undo.cafe — est. — undone", the year struck through with a final gold stroke. The steam-handwriting rises one last time and spells nothing at all. **Motion & interaction (favour these underused patterns; avoid the overused ones):** - **path-draw-svg (49%) as the spine of everything** — the kintsugi gold seam, the steam-handwriting, the strike-throughs, the bowl-cracks all *draw themselves* on scroll. This is the primary animation language. - **scroll-triggered (27%) reveals** — each vessel composes itself as it enters: strokes draw, fills settle, grounds scatter. - **A custom "throw-wobble" idle animation** — the whole content column breathes left↔right by 2–4px on a slow 11-second sine cycle, as if the room itself were still spinning on the wheel. Subtle enough to be felt, not seen. - **The Drop spring** in vessel 2 — one decisive `spring` moment of breakage; everything else is slow. - **Steam drift** — `fade-reveal` loops, calligraphic steam rising and dissolving on a long cycle. - **AVOID:** cursor-follow (89%), magnetic (77%), tilt-3d (32%), parallax in its generic form (87% — the only "parallax" here is the slow drift of coffee grounds, which is more sediment than scroll-rate trickery), card flips, counter-animate, typewriter-effect. - **No glassmorphism, no glow, no neon, no gradient meshes.** Matte clay only. **Build notes:** Respect `prefers-reduced-motion` — when set, the kintsugi seam, steam, and strike-throughs render in their *final, drawn* state; the wobble idle and the Drop spring are stilled (the bowl simply appears already-shattered, already-mended). All ceramic illustrations are inline SVG so their paths can be drawn and clipped. The wobble-spine and section seams use hand-tuned irregular `clip-path` / `border-radius` values — never perfect circles, never straight lines. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **"undo" as kintsugi, not Ctrl+Z.** Every other plausible reading of a domain called "undo" would lean tech — a terminal, a glitch, an undo-history timeline, a SaaS dashboard. This site reads "undo" as the Japanese ceramic practice of *un-doing breakage by gilding it* — turning a software verb into a meditation on repair. No terminal, no glitch, no version-history UI anywhere. 2. **Zero card-grid in a corpus where 93% use one.** Content lives in curved ceramic-vessel sections with `clip-path` lips and feet — never in rectangular cards. Combined with *organic-flow* (6%) and a hand-drawn wobble-spine, the page is "thrown," not "laid out." 3. **No photography (98% of the corpus has it) and no gradient palette (93% of the corpus has one).** Every visual is a sumi-e/potter's-sketch SVG line drawing on matte unglazed-clay flats. The lone gradient is a 6%-opacity ember bloom — functionally invisible. 4. **Wabi-sabi at 8% in the aesthetic table, and a *ceramic-specific* wabi-sabi at that** — not the generic "imperfect" gesture, but a literal kintsugi narrative with a gold seam that physically draws itself down the entire page and terminates inside a mended cup. 5. **The kintsugi gold seam as a single continuous through-line** — one `#C9A227` SVG path that mends every section break at a different angle, doubling as the page's only accent colour, its only path-draw payoff, and the literal embodiment of the site's name. No other design in the corpus uses a single drawn line as both narrative spine and visual signature this way. Chosen seed/style: **wabi-sabi imperfect ceramic** (aesthetic: wabi-sabi · layout: organic-flow + ma-negative-space · typography: serif-revival/slab-serif · palette: warm-earthy/honeyed-neutral · imagery: line-illustration · motifs: leaf-organic→ceramic-vessels · tone: zen-contemplative + grounded-earthy · patterns: path-draw-svg + scroll-triggered). Avoided overused patterns from the frequency analysis: card-grid (93%), photography (98%), gradient palette (93%), cursor-follow (89%), parallax-generic (87%), spring-everywhere (83%), magnetic (77%), glassmorphism (85%), hand-drawn-as-doodle (95% — this is hand-*thrown*, not doodled), mono typography (93% — this site uses two serifs and no monospace at all).