Inside Room 7 of 175: The Making of “SUMI 墨 — Paper & Ink Atelier, Kyōto”

In a quiet corner of the digital exhibition, the AI-crafted site for the fictional Kyōto-based paper and ink atelier, SUMI 墨, embodies the art of restraint. Its design celebrates minimalism and silence, echoing the traditional wabi-sabi ethos — where beauty resides in imperfection and simplicity. The signature feature of this virtual space is its hand-drawn SVG strokes, which animate like ink brushed onto paper, creating a meditative pace that invites reflection rather than distraction.

The creation of this site followed a three-phase process: an initial build guided by the prompt’s specifications, a rigorous critique emphasizing visual harmony and restraint, and final approval by an art director ensuring the piece embodies traditional craft values in a digital form. The entire journey was informed by the detailed guide, which dictated design principles, technical approaches, and aesthetic goals, ensuring the AI’s output remained faithful to the wabi-sabi spirit.

The full build notes live in the room’s design guide.

The site’s palette is carefully restrained: a washi white background (#f7f4ed), sumi black (#17150f) for structure, and vermilion (#d34e24) used sparingly to accentuate key marks. Vertical headings employ a distinctive writing mode, featuring large Kanji characters with sticky positioning that persists through scrolling, maintaining a sense of grounded presence. The core visual element — hand-plotted SVG strokes — are created by an AI-generated process that adds turbulence filters for a roughened ink effect, animated via stroke-dashoffset controlled by an IntersectionObserver that triggers on scroll. The signature hanko seal doubles as a keyboard-accessible button, which, when activated, springs into view with a gentle overshoot animation, mimicking the impression of pressing ink onto paper. Product representations avoid conventional boxes; instead, they mimic torn paper slips with asymmetric layouts, fiber gradients, and poetic Japanese pricing, all styled to evoke the tactile quality of washi. Overlays with subtle fiber texture and clouding animations reinforce the paper-like feel, while CSS variables control the placement and appearance of ink blooms, emphasizing craftsmanship. Typography pairs the traditional Shippori Mincho for display with Zen Kaku Gothic New for body text, maintaining a quiet, contemplative voice throughout. This site exemplifies a deliberate balance—each element designed to evoke a sense of stillness, craftsmanship, and poetic restraint, all within a digital space built by an AI that respects the subtle art of ink and paper.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 07 of 175, “ukiyo”):
SUMI — paper and ink atelier, Kyoto. Fiction: a studio making ink, brushes, washi. Aesthetic: wabi-sabi restraint; enormous negative space; asymmetry. Palette: washi white #f7f4ed, sumi ink #17150f, vermilion seal #d34e24 (only accent). Fonts: shippori-mincho (display + vertical), zen-kaku-gothic-new (body). SIGNATURE: headings set in writing-mode: vertical-rl like hanging scrolls; large SVG ink brush strokes (organic bezier shapes with texture) that DRAW THEMSELVES via stroke-dashoffset as each section scrolls into view; a vermilion hanko seal stamps down (scale+rotate spring) when the visitor reaches the signature. Subtle washi paper grain, one slow drifting ink-wash gradient. Product cards: ink stick, brush, paper — each with a single poetic line and price in sun-moon numbering. Generous whitespace is a feature: at least 50% of most viewports empty. Unforgettable: the discipline — every element earns its place; motion is rare and therefore sacred.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/ukiyo/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the serenity of SUMI 墨 firsthand by visiting the live exhibition space. Explore all 175 AI-crafted sites in this curated series at the central hub, and immerse yourself in a digital tribute to traditional Japanese craftsmanship.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 6: Abyssal Station — a 3,800 m descent
• Room 4: FOLIUM — A Living Herbarium
• Room 1: HELIOS — Live Solar Observatory · Station HLX-1

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI