# Design Language for eesugi.com ## Aesthetics and Tone eesugi.com is a quiet wine cellar that someone has filled with toy blocks. The aesthetic is **memphis-pastoral** — a deliberate collision between the squiggle-and-confetti vocabulary of 1980s Milan and the bruised romance of an Andalusian dusk. The name "eesugi" (이수기, *records of harvest*) is taken literally: this is a chronicle site, a personal archive that reads like a slow handwritten ledger of seasons, but every page is interrupted by Memphis-style decorative shrapnel — a single zigzag, a checkerboard tile, a confetti dot — placed with the sparseness of *ikebana* rather than the maximalism of Sottsass himself. The mood is **pastoral-romantic** but never saccharine. Imagine sitting on a velvet settee in a 1986 vineyard guesthouse, reading a love letter on burgundy stationery while a child's primary-colored xylophone plays in the next room. There is **longing** in the typography, **mischief** in the ornament, and **dust** in the photography. The tone speaks in second person, in long unhurried clauses, the way someone narrates a memory they are not sure they invented. Inspirations: Ettore Sottsass's Carlton bookcase reupholstered in oxblood velvet; Wong Kar-wai's *In the Mood for Love* if Christian Lassen had art-directed it; Korean *minhwa* (folk paintings) printed on wallpaper from the Memphis Group's 1981 catalogue; the deep red of dried persimmon (*곶감*) skins; the smell of an old hanok (한옥) in late autumn. ## Layout Motifs and Structure The structural spine is a **persistent left sidebar** — 320px wide, fixed on desktop, collapsible to a slide-in drawer below 1024px. This sidebar is **not a navigation utility**; it is a **diary spine**. It contains: the site name set vertically in a tight grotesque, a hand-drawn (SVG) zigzag rule, a running list of *seasons* as nav items (春 spring, 夏 summer, 秋 autumn, 冬 winter — each linked to an entry archive), a small Memphis ornament at the bottom (a single confetti dot that pulses softly), and a date-stamp footer. The sidebar background is a deep burgundy textile pattern; the main canvas is cream paper. The right canvas is a **single-column scroll-narrative** with deliberate breathing room — measure capped at 62ch, line-height generous (1.75). Every long-form entry is broken by **memphis interrupters**: full-bleed bands containing nothing but a primary-colored checkerboard, or a triangle, or three zigzags marching across the page. These bands are 240px tall, never repeated consecutively, and rotated through a pool of seven motifs so the page feels composed, not generated. Spatial relationships obey a **3:1 asymmetry** — the sidebar holds 25% of the visual weight, the canvas 75%, and a *floating annotation column* may appear in the right margin on wide viewports (≥1440px) as a 180px gutter for handwritten marginalia (in Caveat font, indigo ink color). The grid is **8px base**; vertical rhythm follows a modular scale of 1.333 (perfect fourth). No card grids. No hero CTAs. No three-column "features" rows. The page is a long letter, occasionally embellished. ## Typography and Palette **Fonts (all Google Fonts):** - **Space Grotesk** — primary UI sans, used for sidebar nav, captions, dates, micro-labels. Tight tracking (-0.01em) at 14-16px, looser (+0.02em) at display sizes. - **Cormorant Garamond** — serif used for body prose and entry titles. Italic by default in pull-quotes. Body at 19px / 1.75, entry titles at clamp(2.4rem, 5vw, 4.2rem) with weight 500. - **Caveat** — handwritten accent for marginalia, dates scrawled in the gutter, and the pulsing confetti label "now" in the sidebar. - **DM Mono** — used sparingly for season-index numerals (春.01, 夏.02) and the footer datestamp. **Palette (Deep Burgundy + Memphis Primaries):** - `#3D0A14` — *oxblood ink* (sidebar background, body text on cream) - `#5C1A2B` — *aged claret* (link hover, italic accents) - `#8B2C3F` — *persimmon-bruise* (the pulsing dot, primary highlight) - `#F4ECDD` — *manuscript cream* (main canvas background) - `#E8DCC4` — *aged paper* (sidebar texture overlay tint) - `#1B1B1B` — *velvet black* (heavy display text on cream) - `#FFD43B` — *memphis lemon* (one Memphis interrupter band) - `#3B82C4` — *sottsass cobalt* (one Memphis interrupter band) - `#6BBE7B` — *pistachio* (one Memphis interrupter band, sparse) - `#2E2A6B` — *indigo ink* (Caveat marginalia color) The Memphis primaries (lemon, cobalt, pistachio) are used **only** in the decorative interrupter bands and SVG ornaments — never in body type, never in UI chrome. The page is 92% burgundy/cream/black; the remaining 8% does the singing. ## Imagery and Motifs The imagery system is **mixed-media**: hand-scanned grain layered over scanned photographs of fabric, vegetable parchment, and pressed leaves; a thin grain noise (`feTurbulence` SVG filter) is composited at 6% opacity over every image; every photograph is duotoned to the burgundy/cream pair before the Memphis ornament is laid on top in vector. **Cultural motifs (Korean folk + Memphis hybrid):** - *Bojagi* (보자기) wrapping-cloth lattice — used as a sidebar background pattern at 4% opacity. - *Saekdong* (색동) rainbow-stripe — reinterpreted in Memphis primaries as a 6px-tall accent rule under entry titles. - *Maedeup* (매듭) decorative knot — drawn as a single-line SVG that *path-draws* on entry-title scroll-into-view. - *Norigae* tassel — a draggable pendant in the sidebar footer that swings on cursor proximity (subtle elastic). - *Mountain-and-water (sansuhwa) ink lines* — used as section dividers, but truncated abruptly by a Memphis triangle, mid-stroke. **Memphis ornament library** (seven SVG primitives, used in interrupter bands): 1. Squiggle (Bacterio pattern, simplified to 3 waves) 2. Confetti dots (irregular triad) 3. Checkerboard 4×2 (lemon × cobalt) 4. Zigzag rule (3 peaks) 5. Hollow triangle stack 6. Concentric arcs (rainbow halved) 7. Solitary lemon dot in negative space Photography is sparse, mostly vertical, mostly close-cropped textures: grain of old wood, knot of a rope, fold of velvet, half-eaten persimmon, ink wet on paper. Never lifestyle stock. Never product. Mixed-media collages combine one photograph + one SVG ornament + one Caveat handwriting overlay. ## Prompts for Implementation Build this as a **long-form narrative scroll** experience, not a marketing landing page. The first viewport reveals only: the sidebar, the entry title in oversized Cormorant italic, a single Memphis squiggle, and the date in DM Mono. The reader **must scroll** to find the body — and every 600-900 vertical pixels, a Memphis interrupter band breaks the prose to pace the breath. **Animation choreography:** - The signature pattern is **pulse-attention** (deliberately picked for its rarity at 1% in the corpus). The persimmon-bruise confetti dot in the sidebar footer breathes on a 2.4-second cubic-bezier(.45,.05,.55,.95) loop, scaling 1.0 → 1.18 → 1.0 with a synchronized opacity 0.85 → 1.0 → 0.85. A second pulse appears momentarily on the *currently scrolled-into-view* season nav item — a 4px ring that pulses three times then settles. Pulse-attention also tags any new entry in the sidebar list (a small lemon dot pulsing twice on page-load, then ceasing). - **Path-draw SVG** on the *maedeup* knot when entry titles scroll into the viewport (1.4s ease-out). - **Stagger** entry-title characters with a 22ms cascade and a 12px y-translate on scroll-in. - **Spring** (Framer-style critically-damped) for the norigae tassel cursor-follow — and only the tassel; the rest of the page does not chase the cursor. - **Magnetic** is permitted but limited to the four primary nav items in the sidebar, with a 24px capture radius. - **No** parallax depth fakery. **No** card-flip. **No** counter-animate. **No** typewriter. - Memphis interrupter bands fade in with a 0.6s opacity tween + 16px y-translate as they cross 75% viewport. - The cobalt and lemon ornaments inside interrupter bands have a tiny rotation drift (±2deg) on a 9-second sine loop — barely perceptible, but enough to make the page feel breathing rather than dead. - Reduced-motion users see a static composition; pulse-attention degrades to a single 0.3-opacity ring with no animation. **Storytelling structure (HTML):** - `