# Design Language for iisugi.com ## Aesthetics and Tone iisugi.com takes its name from the Japanese 言い過ぎ — *iisugi*, "the overstatement," the sentence that said one word too many. The entire site is built on that single irony: a page **about saying too much** that itself **says almost nothing**. This is **minimal vaporwave** — not the meme-heavy, palm-tree-and-bust kind, but the *austere ghost* of vaporwave: the chrome lettering left after the marble statue has been removed, the empty mall concourse at 3 a.m., the gradient sky with the dolphin cropped out. We keep vaporwave's signatures — the impossible perspective grid receding to a magenta horizon, the lens flare from a sun that was never there, the VHS chroma-bleed on a single letterform — but we *starve* them. One flare. One grid. One italic line of Playfair Display sitting in an ocean of negative space. The mood is **after-hours, post-ironic, faintly grieving**: like the cool blue glow of a vending machine you bought a drink from at 4 a.m. and then just stood next to. The tone of the copy is **minimal to the point of restraint as a bit** — three-word sentences, deliberate fragments, a refusal to elaborate that becomes its own kind of overstatement. The site does not sell. It does not onboard. It barely explains. It presents a few quiet panels, a slow horizon, and a flicker of something that used to be louder. The vintage layer is the *残響* (zankyou, reverberation) of late-80s Japanese city-pop record sleeves and the soft-focus chrome of early-90s ads — but rendered the way a memory renders it: most of the detail gone, only the glow and one or two artifacts surviving. ## Layout Motifs and Structure The structural device is a **true split-screen** — the viewport is cleaved vertically into two halves that behave as two different worlds, and *almost nothing in the corpus does this* (split-screen at 1%). - **Left half (the "said" side):** static, calm, near-white-on-deep-jewel. Holds the canonical text — the site name in Playfair Display, a one-line statement, a thin vertical rule, a date set in mono. This half does **not** scroll independently; it is the anchor, the thing that was actually meant. - **Right half (the "too much" side):** the vaporwave field — a perspective grid floor receding to a magenta vanishing point, a single lens flare drifting, faint VHS scanlines, a slowly counter-rotating wire-sun. This half holds the *excess*: the elaborations, the second thoughts, the things that should have been left unsaid. It scrolls; the left does not. As you move down the right side, panels of "overstatement" enter with a **bounce** (bounce-enter, only 3% in corpus) — each one settling slightly past its mark and recoiling, like a word you blurted and wished back. On viewports below 900px the split rotates to **horizontal**: the "said" half becomes a fixed top band (40vh), the "too much" half the scrolling remainder below it. The seam between the two halves is a **1px chromatic-aberration line** — a hairline that splits into cyan/magenta ghosts on scroll, the only place the two worlds touch. Generous **ma** (negative space): each panel on the right gets 60–80vh of breathing room. No card grids. No bento. No dashboard. Two columns, one horizon, a great deal of nothing. ## Typography and Palette **Fonts (all Google Fonts):** - **Playfair Display** — the voice of the "said" side. Used at display weight for the site name (clamp(3rem, 8vw, 7rem), weight 400, italic for the standfirst line), and at 500 for the rare section titles on the right. High-contrast, elegant, a little theatrical — the typeface of someone *about* to say too much. Tracking slightly negative at display sizes. - **DM Mono** — timestamps, the date, micro-labels, the seam annotations ("said —", "— too much"), and the single running line of body fragments on the right. 13–15px, letter-spacing +0.04em, lowercase. Cold, precise, the opposite of Playfair — the part of the brain that *counts the words after*. - **Cormorant Garamond** — used only for the longest "overstatement" panel, the one paragraph that genuinely runs on; set in 18px/1.8 italic so it visibly *spills*, a deliberate contrast with the curt mono fragments around it. **Palette — jewel-tones (only 4% in corpus) bruised by vaporwave chroma:** - `#10071E` — *near-black aubergine*, the dominant ground of the "said" side and the base of the night sky on the right. - `#1B0B3A` — *deep amethyst*, a half-tone up, used for the grid floor's far reaches and panel backings. - `#0C2D4A` — *abyssal sapphire*, the cool counterweight, used in the lens-flare halo and the lower gradient band. - `#0B3D3A` — *deep emerald*, a rare accent — the wire-sun's filament glows this color, a single jewel-green note against all the violet. - `#E8E3F2` — *moon-paper*, the near-white of the Playfair text on the left; never pure #FFF. - `#FF4FB6` — *vapor magenta*, the vanishing point, the chroma-ghost on the seam, the one hot pixel. Used at < 3% of surface area — a wound, not a wash. - `#36E0E0` — *VHS cyan*, the second chroma-ghost; appears only on the aberration line and one drifting scanline. - `#C9A24B` — *tarnished gold*, the jewel-tone metallic — used for the thin vertical rule on the left and the hairline frame around the longest overstatement panel. Gradients exist but are *slow and few*: one vertical aubergine→sapphire wash behind the grid, one radial magenta bloom at the vanishing point. Everything else is flat jewel-dark. ## Imagery and Motifs The imagery system is **lens-flare** as the load-bearing element (8% in corpus, used here as a *character* rather than decoration): a single anamorphic flare — a horizontal streak with two ghost discs — drifts slowly across the right half on a 40-second loop, the only "light source," sourced from the magenta vanishing point. Built in pure CSS/SVG (radial-gradients + blur + `mix-blend-mode: screen`), never a photo. **Vaporwave / vintage motifs, starved:** - *The perspective grid* — a single floor of thin gold lines on aubergine, receding to the magenta point, drawn with CSS transforms (no image). It does not animate aggressively; it just *breathes*, the horizon line shifting ±4px on scroll. - *Wire-sun* — a low-poly wireframe disc (SVG), emerald filament, counter-rotating at 0.5°/s in the upper-right. The classic vaporwave sun, reduced to a ghost of geometry. - *Chroma-bleed letter* — exactly one glyph on the page (the final letter of the site name) carries a VHS RGB-split shadow that pulses faintly — a tiny stutter, "the word that wouldn't sit still." - *Scanlines* — a `repeating-linear-gradient` at 3% opacity over the right half only; one brighter cyan line scrolls through every 12s. - *Marble fragment* — a single faint embossed `feDisplacementMap` texture in the corner of the longest panel, the only nod to vaporwave's statue trope, almost dissolved. - *Reverberation marks* — small DM Mono parentheticals that echo down the right margin: `(said)` `((said))` `(((said)))` fading out — visual onomatopoeia for an echo. No photography. No icons-as-buttons. No illustration of people. The whole vocabulary is light, line, and chroma-ghost. ## Prompts for Implementation Build this as a **two-world immersive scroll**, not a marketing page. First viewport: the split is already established — left half shows only the site name in italic Playfair Display, one standfirst line beneath it ("a site about saying too much."), the tarnished-gold vertical rule, and a mono date in the bottom corner; right half shows only the perspective grid receding to its magenta point, the wire-sun idling, and the lens flare just entering frame from the right edge. **No nav bar, no hero CTA, no logo cluster.** The reader scrolls the right half to discover the "overstatement" panels; the left half stays pinned (use `position: sticky` on the left column, normal flow on the right). **Animation choreography (CSS-first; respect `prefers-reduced-motion` by freezing the flare, grid-breathe, and bounce):** - **bounce-enter is the signature** (chosen for its rarity, 3%): each right-side overstatement panel enters via IntersectionObserver with a `cubic-bezier(.34,1.56,.64,1)` overshoot — translateY from +40px to -8px to 0 over ~520ms, plus a subtle scale 0.98→1.02→1. It *says it, recoils, settles.* Stagger the lines within a panel by 60ms each (this gives us a touch of stagger without leaning on it the way 80% of the corpus does). - **The lens flare** drifts left-to-right across the right half on a 40s ease-in-out loop, brightening as it crosses the wire-sun, with two ghost discs trailing at parallax offsets. `mix-blend-mode: screen`, heavy gaussian blur. - **The seam** (1px line between halves) does a chromatic-aberration split on scroll: the cyan ghost offsets +2px, the magenta ghost -2px, scaled by scroll velocity, snapping back to 0 when scrolling stops. - **The grid horizon** shifts ±4px vertically with scroll (very subtle parallax — the ONE place we touch parallax, deliberately quiet against the 94% that overuse it). - **The chroma-bleed letter**: the last glyph of the site name gets an infinite ~2.4s keyframe nudging two pseudo-element copies (one cyan, one magenta) by ±1.5px and back — a faint VHS jitter. - **Counter wire-sun**: continuous slow rotation, 0.5°/s, no easing. - **Reverberation marks** on the right margin fade in sequentially with each scrolled panel and then decay opacity over the next 8s. **Storytelling spine:** the page is a single confession that gets walked back. Panel 1 (right): the blurted thing, bold-ish. Panel 2: the qualifier. Panel 3: the apology. Panel 4 (the long Cormorant italic one, gold-framed): the over-explanation that makes it worse. Final panel: a single mono line — `(said)` — small, centered, the flare exiting frame, the grid going still. Left half never changes; that was the whole point. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature cards, signup forms, hamburger-menu nav, anything that looks like a SaaS template. There is nothing to convert here. ## Uniqueness Notes **Differentiators from the corpus:** 1. **True split-screen layout (1% in corpus) used as a *semantic* device, not a cosmetic one** — the two halves literally mean different things ("the said" vs. "the too-much"), one is pinned and one scrolls, and the seam between them is the only animated point of contact. Almost nothing in 260 designs commits to this. 2. **Minimal vaporwave — vaporwave *starved***: we take the 11%-common vaporwave aesthetic and pair it with a `minimal` tone and `ma-negative-space` discipline, deliberately deleting the meme furniture (busts, palms, dolphins, Windows 95 chrome) and keeping only ONE flare, ONE grid, ONE wire-sun, ONE chroma-bleed glyph. The restraint *is* the concept (言い過ぎ rendered by saying almost nothing). 3. **Playfair Display elegant serif (1% in corpus) against jewel-tones (4%) and VHS chroma** — high-contrast theatrical serif is normally paired with luxury-cream or editorial-white; here it sits italic on near-black aubergine, lit only by anamorphic flare and a magenta vanishing point. That collision (Vogue-cover typeface in a 3 a.m. dead mall) doesn't exist elsewhere in the set. 4. **bounce-enter as the signature motion (3% in corpus)** — the page deliberately does NOT lean on parallax (94%), cursor-follow (88%), spring (86%), magnetic (81%), or heavy stagger (80%). Motion is one overshoot per panel — "blurt, recoil, settle" — plus a slow flare and a quiet grid-breathe. Everything else holds still. 5. **The content model is anti-conversion**: a single confession that gets walked back across five panels, ending on the word `(said)` in 13px mono. No CTAs, no pricing, no stats, no forms — the opposite of the SaaS-gradient template that dominates the corpus. **Chosen seed:** aesthetic: vaporwave · layout: split-screen · typography: playfair-elegant · palette: jewel-tones · patterns: bounce-enter · imagery: lens-flare · motifs: vintage · tone: minimal **Avoided overused patterns (from frequency analysis):** photography (98%), card-grid (87%), centered (85%), parallax (95% — used here only as a ±4px horizon nudge), cursor-follow (88%), spring (86%), magnetic (81%), stagger (80% — used here only at 60ms intra-panel), full-bleed (93%), warm/gradient palettes (98% — this is jewel-dark, gradients used sparingly), mono typography as primary (95% — mono is the *counter*-voice here, Playfair leads), hand-drawn aesthetic (96%), glassmorphism (67%), corporate/dashboard layouts.