# Design Language for eesugi.com ## Aesthetics and Tone **eesugi.com** is a **Japanese luxury confectionery atelier** — the kind that wraps each sweet in hand-cut washi paper, ties it with a single strand of beni-shoga-red silk cord, and places it inside a lacquered hinoki box before it ever meets your hands. The aesthetic is **zen distilled through candy**: a ryokan where every surface is a jewel, every pause is intentional, and every colour is the exact hue of a namagashi on a bed of fresh moss. The tension that drives everything is **stillness holding impossible colour**. Zen architecture (off-white plaster, exposed cedar, raked gravel) doesn't usually come in electric fuchsia and sherbet lime. Here it does. The palette is candy-bright — saturated, almost children's-book vivid — but the *application* is zen. Wide margins of near-white. Long pauses between colour hits. Colour used as emphasis, not wallpaper. The effect is a single pivoting word — *ikebana* — applied to confectionery: radical reduction in quantity, radical intensification in colour and presence. **Tone:** Luxurious, contemplative, and faintly ceremonial. The site does not sell. It *presents*. It speaks the way a tea master arranges a single chrysanthemum — with total attention and no waste. The reference world: Toraya confectionery's restraint, Paul Smith's stripe obsession channelled through a Japanese lens, Kyoto textile dyeing traditions (the kasane-no-irome layered colour system), and the deliberate slowness of a kaiseki tasting menu. ## Layout Motifs and Structure The layout is **parallax-sections** — but executed as a **vertical scroll through a sequence of ceremonial chambers**, not as a tourist-brochure hero+text stack. Each section is a full-viewport stage, lit differently, and the parallax rate differs per layer within each section to create a subtle sense of depth, as if the elements exist at different distances behind shoji screens. **Section rhythm:** 1. **Genkan (Entry)** — full viewport, near-black (deep indigo-black #1a1225), a single kanji glyph rendered in white slab-serif at 40vw that dissolves on scroll-enter. The kanji spells 甘 (sweet). Below it, the wordmark `eesugi` in 2rem slab-serif, letter-spacing 0.5em. 2. **Mise-en-scene (The Craft)** — Cream (#faf5e4) background. Two columns: left is a parallax-floating organic blob in vivid magenta (#e8317a), right is a narrow slab-serif text column. The blob moves at 0.6× scroll speed; the text column moves at 1× scroll speed. The blob is the *feeling* of the confection; the text column is the *reason*. 3. **Palette Chamber** — Pure white (#ffffff) with four candy-bright swatches floating as organic blob shapes: electric lime (#b6e040), vivid sky (#2ec4f5), hot coral (#ff5e62), and saffron (#f5b730). Each blob pulses slowly (3s ease-in-out scale oscillation between 0.96 and 1.04). The section reads like a laboratory specimen tray for joy. 4. **Namagashi Gallery** — Dark plum (#2c1842) background. A horizontal strip of six skeleton-loading cards that reveal product photographs on an Intersection Observer trigger. Cards animate in sequentially (80ms stagger delay). Before load, skeleton shimmer uses a gradient sweep from #3d2560 → #5a3a80 → #3d2560. 5. **Philosophy (Shizen)** — Off-white (#f5f0e8) with a full-width slab-serif blockquote at 5vw, and a slow-moving wave-form SVG animation behind the text. The wave is drawn at 2px stroke in candy-coral, scrolling horizontally at 20px/s. 6. **Colophon (Owari)** — Deep indigo-black (#1a1225) with minimal contact information in caption-size slab-serif and a wave-form footer motif. **Spatial grammar:** Sections use `min-height: 100dvh`. Horizontal padding never below 8vw. Max content width 1140px, centered. Vertical text rhythm is based on a 1.5rem baseline grid (24px). No sidebar. No grid dividers. No cards outside the gallery section. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark / Blockquotes**: [`Zilla Slab`](https://fonts.google.com/specimen/Zilla+Slab), weights 300 and 600. Slab-serif with humanist proportions — the serifs carry the weight of a woodblock print without the mechanical coldness of a geometric slab. Used at large scale (clamp(3rem, 8vw, 9rem) for display) and at caption scale (0.75rem, tracked +0.2em). This is the slab-serif voice of the site. - **Body / Running text**: [`Noto Sans JP`](https://fonts.google.com/noto/specimen/Noto+Sans+JP), weight 300. Japanese web-safe, optically harmonious with Zilla Slab's weight range. Used at 1rem / 1.7 line-height. The Japanese character set is actually used in section titles and the opening kanji, making this load non-cosmetic. - **UI Labels / Navigation**: [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 400, uppercase, letter-spacing 0.15em, font-size 0.7rem. Navigation floats as a fixed vertical strip on the right edge. **Palette:** - `#1a1225` — Deep Indigo Night. Primary dark ground. Entry and colophon backgrounds. - `#faf5e4` — Washi Cream. Primary light ground. Body and craft sections. - `#e8317a` — Beni Crimson. Primary candy-bright accent. Blobs, hover states, active nav dot. - `#2ec4f5` — Shofu Sky. Secondary candy-bright. Floating blob in Palette Chamber. - `#b6e040` — Matcha Fizz. Tertiary candy-bright. Floating blob in Palette Chamber. - `#f5b730` — Saffron Wagashi. Quaternary candy-bright. Floating blob in Palette Chamber. - `#ff5e62` — Hot Coral. Quinary candy-bright. Wave-form stroke and hover micro-accents. - `#f5f0e8` — Rice Paper. Secondary light ground. Philosophy section. - `#2c1842` — Deep Plum. Gallery section background. **Colour application rule:** No two candy-bright colours touch at full opacity. They are always separated by a neutral ground or set at ≤70% opacity when adjacent. This is the kasane-no-irome principle — layered colour separated by white space. ## Imagery and Motifs **Organic blobs** are the primary decorative element. They are rendered as inline SVG `` elements using smooth bezier curves (no straight segments, no sharp corners). Each blob is a unique silhouette — not circles, not rounded-rectangles, not generic Bootstrap blobs. They reference the fluid form of a namagashi: the slight asymmetry of a hand-formed sweet, the gentle indentation of a thumbprint. Three canonical blob silhouettes (defined in CSS as `clip-path` polygon sets and SVG paths, reused with `transform: scale()` and `rotate()` variations): - **Ohagi blob** — wide, squat, very slight right lean - **Nerikiri blob** — tall, tapered top, wide base - **Mochi blob** — almost-circular but with a small pinch on the upper left **Wave-forms** appear in two registers: - *Macro wave* — in the Philosophy section as a full-width animating SVG sine wave. Amplitude 40px, frequency 1/320px, stroke 2px hot-coral (#ff5e62), translating right at 20px/s in an infinite CSS animation. Behind the text, `z-index: 0`, text is `z-index: 1`. - *Micro wave* — a repeated SVG `` used as a subtle border-bottom on section-divider elements. Amplitude 4px, frequency 1/48px, stroke 1px beni-crimson (#e8317a). **Skeleton-loading** is used exclusively for the Namagashi Gallery section. The shimmer uses a `linear-gradient` keyframe animation sweeping left-to-right. Skeleton card proportions match the eventual image cards (3:4 portrait ratio). The skeleton state lasts for exactly 1200ms of artificial delay (as if loading from a remote source) even if images are cached — this makes the skeleton a *ritual*, not just a loading state. **No photography on initial load.** Product images are deferred entirely behind the Intersection Observer, meaning the first viewport is always pure illustration and typography. **SVG wave-form footer motif:** The colophon section has a decorative full-width SVG at its top edge — a compound wave made of three overlapping sine waves in beni-crimson, shofu-sky, and matcha-fizz, each at 25% opacity, creating a luminous overlap zone. ## Prompts for Implementation **The story to tell.** A visitor arrives at the edge of a Japanese garden at dusk. The gate is not a call-to-action; it is a breath. They step through (the kanji dissolves, the wordmark reveals) and enter a sequence of rooms, each room lit by a different confectionery colour: the crimson room, the sky room, the green room, the gold room. In the gallery room, six packages materialise from darkness as if unwrapped by unseen hands. In the philosophy room, the sound of the garden — a sine wave made of colour — flows behind the words. They leave through the deep indigo gate, holding nothing but a feeling. **Implementation vows:** **Vow 1 — Parallax is depth, not decoration.** Each section contains at least two layers moving at different rates. Use `transform: translateY()` driven by a `scroll` event listener (or IntersectionObserver + CSS custom property). Blob elements move at 0.5–0.7× scroll speed; text columns at 1×. The genkan kanji moves at 1.2× (it accelerates away as you scroll past, vanishing faster than the wordmark). Never use `background-attachment: fixed` — it is janky on iOS. Use JS-driven `translateY` only. **Vow 2 — Skeleton loading is ceremony.** The six gallery cards always pass through skeleton state for 1200ms regardless of network speed. Implement with: ```js setTimeout(() => { card.classList.remove('skeleton'); card.querySelector('img').src = card.dataset.src; }, 1200 + (index * 80)); ``` The 80ms stagger creates a wave-like reveal. Cards animate from `opacity: 0; transform: translateY(16px)` to `opacity: 1; transform: translateY(0)` over 400ms ease-out. **Vow 3 — Colour hits once.** Each candy-bright colour appears in exactly one primary context per scroll journey. The visitor encounters beni-crimson first (Craft section blob), then shofu-sky (Palette Chamber), then matcha-fizz, then saffron, then hot-coral (wave-form). The sequence is a tasting menu. Never stack multiple candy-bright colours in the same viewport at full saturation simultaneously except in the Palette Chamber, where they are the explicit subject. **Vow 4 — Wave-forms breathe.** The Philosophy section wave SVG uses this exact animation: `@keyframes wave-scroll { from { transform: translateX(0) } to { transform: translateX(-320px) } }` with `animation: wave-scroll 16s linear infinite`. The SVG viewBox is 640px wide (two full wavelengths), so the translate of -320px creates seamless looping. Three overlapping paths in the footer use durations of 18s, 22s, and 27s for a non-repeating interference pattern. **Vow 5 — The vertical navigation is a tea ceremony rack.** A fixed right-rail nav (`position: fixed; right: 3vw; top: 50%; transform: translateY(-50%)`) contains six stacked dots in DM Mono labels. Active section dot is beni-crimson (#e8317a) and 10px diameter; inactive dots are 6px, washi-cream. Labels appear only on hover (fade-in 200ms). This is the only persistent UI chrome. **Avoid:** hero images above the fold, product grids before the gallery section, pricing blocks, any layout that resembles a Shopify storefront, background videos, any use of `background-attachment: fixed`. ## Uniqueness Notes **Seed:** aesthetic: zen, layout: parallax-sections, typography: slab-serif, palette: candy-bright, patterns: skeleton-loading, imagery: organic-blobs, motifs: wave-forms, tone: luxurious **Differentiators from every other design in the registry:** 1. **Candy-bright palette applied with zen spatial discipline.** The registry has candy-bright at 0% usage. Every site that uses vivid colour uses it as saturation-across-the-board (gradients, hero backgrounds, button arrays). This design uses candy-bright colours as *single accent objects in large fields of neutral* — the way Kyoto's kasane-no-irome system places one vivid layer beneath two neutral ones. The result looks like no other site in the registry: vivid but not loud, playful but not cheap. 2. **Skeleton loading as ceremonial ritual, not UX utility.** At 2% registry usage, skeleton loading exists only as a performance pattern. Here it is an *aesthetic event* — the cards shimmer for a fixed 1200ms regardless of load state, because the shimmer is part of the experience, like watching a chef plate a dish. No other registry design uses skeleton loading as intentional delay. 3. **Wave-forms as the site's heartbeat rather than decorative chrome.** At 4% motif usage, wave-forms are typically used as header/footer decoration. Here the sine wave *is* the philosophy section's emotional content — it is what the confectionery philosophy *sounds like*, translated into light. Three overlapping sine waves in the footer at different speeds produce a visual interference pattern that references the overtone structure of a temple bell. 4. **Kanji dissolve as the only hero element.** The 40vw kanji 甘 (sweet) on a near-black ground is the most reductive hero in the registry — one character, no tagline, no image, no gradient. It sets the tone for every subsequent section: maximum attention, minimum noise. 5. **Slab-serif at 2% registry usage, deployed at architectural scale.** Zilla Slab at clamp(3rem, 8vw, 9rem) in the blockquote section makes the type structural — the letterforms are as physical as the blog architecture. This is not typographic ornament; it is typographic load-bearing.