# Design Language for iisugi.com ## Aesthetics and Tone iisugi.com is a **deep-sea generative cabinet** — imagine a Meiji-era naturalist's catalogue of oceanic organisms, redrawn by an algorithm that has never seen sunlight. The aesthetic is Muji's radical restraint pulled through cold saltwater: every surface is as empty as it needs to be, no more, and each card is a specimen jar holding something luminous and slightly wrong. The tone is *mysterious-moody* in the specific register of a tide-pool at 2am — not theatrical darkness, not horror-adjacent, but the genuinely unsettling quiet of a world that operates without you, indifferent and beautiful. Visual inspiration: the Challenger Deep expedition lithographs of 1876, drained of their sepia and re-inked in bioluminescent cyan; a MUJI catalogue page where every product has been replaced by a glowing cephalopod. The mood is restraint containing strangeness — the white space is vast, the specimens within it are alien. The palette is ocean-deep: near-black abyssal water as ground, cold phosphor cyan and viridian as the only permitted chromatic notes, warm antique parchment (aged ivory) appearing only as the card surface — a deliberate anachronism, like a Victorian label affixed to a creature from another century. No warm light. No gradients toward red or orange. The ocean does not do warmth. ## Layout Motifs and Structure The structural metaphor is a **specimen grid floating in abyssal water** — a card-grid of organism-cards, each one a sealed jar of generative complexity, arranged with deliberate stagger so the grid breathes rather than marches. **Grid architecture (card-grid with stagger):** - 3-column responsive grid at desktop (≥1200px): `repeat(3, 1fr)` with `gap: clamp(24px, 3vw, 48px)` - 2-column at tablet (768–1199px), 1-column at mobile - Each card is `aspect-ratio: 3/4` — taller than wide, portrait-format like a specimen jar label - **Stagger applied at column level, not row level:** column 1 sits at baseline, column 2 descends `clamp(48px, 6vw, 96px)`, column 3 descends `clamp(24px, 3vw, 48px)` — a shallow wave, not a cascade. This makes the stagger feel oceanic (tidal) rather than geometric. - Cards enter viewport via `translateY(40px) → translateY(0)` + `opacity: 0 → 1`, triggered by IntersectionObserver, staggered 120ms per card reading left-to-right **Page architecture:** - Full-viewport dark water opening: 100vh hero with a large generative organism SVG (WebGL canvas or inline SVG, slowly rotating) centered on near-black `#050e1a`, title wordmark in the upper-left, a single line of cryptic Japanese/Latin organism-name below - Below the hero: the specimen grid begins immediately — no section header, no introduction text, the grid is the content - Right-side fixed vertical timeline: a hairline `#0d2a3a` rule with `4–6` small dot-markers indicating depth levels (0m to 4000m); active card depth glows cyan — this is purely decorative navigation - Footer is a single line: coordinates (latitude/longitude, invented), specimen count, year — no links, no social **Spatial philosophy:** - Cards carry ALL content density; surrounding space is maximally empty - Negative space is ocean, not absence — the dark background is not a void, it is material - No sidebars, no top navigation beyond the wordmark, no modals ## Typography and Palette **Palette — ocean-deep:** - `#050e1a` — Abyssal Black (page background, the ocean floor) - `#0d2a3a` — Midnight Teal (card borders, dividers, depth timeline rule) - `#0a3d2e` — Trench Viridian (secondary accent, card hover border) - `#00bfa5` — Bioluminescent Cyan (primary accent: active states, glowing tags, generative art line-color) - `#e8e0cc` — Parchment Ivory (card background surface — the specimen label) - `#1a3040` — Deep Slate (card body text color when on dark ground) - `#b8b0a0` — Fossil Grey (meta text: dates, coordinates, taxonomy labels on parchment) - `#f0ece0` — Bleached Linen (card title text on parchment) **Typography (Google Fonts only):** - **Display / Wordmark — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** (variable, weights 300–700, italic): The authoritative voice of the naturalist's catalogue. Site wordmark at `font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; font-style: italic; letter-spacing: 0.25em; text-transform: uppercase`. Card titles at `clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 500; font-style: italic`. Section specimens at `clamp(2.4rem, 5vw, 4.8rem); font-weight: 300`. - **Body / Labels — [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville)** (regular 400, italic): Used for card body text, taxonomy strings, and the depth-timeline labels. At 14px / 22px line-height on parchment cards. The slightly heavier serifs against the thin Cormorant display create a Victorian-naturalist layering: the printed label versus the handwritten note. - **Mono accent — [DM Mono](https://fonts.google.com/specimen/DM+Mono)** (light 300): Specimen identifiers only — e.g., `SP-0047 · 2840m · Abyssal` — set at 11px, `#00bfa5` on parchment, uppercase. Appears in card corners as a coordinate/depth stamp. Three uses maximum per card. **Type scale:** - Hero organism name (Latin, invented): Cormorant Garamond italic 300, `clamp(3.2rem, 7vw, 7rem)`, `#e8e0cc`, letter-spacing `-0.02em` - Card title: Cormorant Garamond italic 500, `clamp(1.1rem, 1.6vw, 1.4rem)`, `#1a1a1a` - Card body: Libre Baskerville 400, 14px, `#2a2a2a`, line-height 1.7 - Depth stamp: DM Mono 300, 10px, `#00bfa5` ## Imagery and Motifs **Generative art as sole imagery — the central design decision:** Every card contains one procedurally-generated organism illustration. These are not photographs, not icons, not stock art. They are SVG paths generated by a deterministic algorithm (seeded by the specimen ID) that produces radially-symmetric forms: the suggestion of a jellyfish bell, a sea urchin's radial symmetry, a nautilus spiral, a bioluminescent worm's segmentation. The algorithm never produces the same form twice. Stroke weight: `0.8px`. Colors drawn exclusively from `#00bfa5` and `#0d2a3a`. No fills. **Vintage motifs (restrained, not dominant):** - Each card has a thin double-border rule: outer `0.5px solid #0d2a3a`, inner `0.5px solid #b8b0a0`, offset by `4px` — a direct citation of Victorian specimen frame mounts - Taxonomy label in the top-left corner of each card: a Cormorant Garamond italic 300 `ORDER / FAMILY` two-line label, styled as a handwritten-feeling small text block - A small ink compass rose SVG in the page footer — single weight, `#0d2a3a`, 48px diameter, no fill — the only decorative element outside the cards - Corner registration marks (hairline `+` crosshairs) at the four inner corners of each card's parchment surface — a printing/archive register motif **Generative organism parameters:** - Each organism is drawn inside a `160×160px` SVG viewbox on a `#e8e0cc` parchment ground - Base form: one of four archetypes (radial burst, spiral arm, bilateral fern, segmented column) — chosen by `specimenId % 4` - Overlay: a secondary finer path at 40% opacity adds texture depth - On card hover: the organism paths receive a `filter: drop-shadow(0 0 6px #00bfa5)` glow — the specimen becomes bioluminescent **Hero organism:** The hero section features a single large generative organism (WebGL preferred, SVG fallback) that rotates 360° over 120 seconds, drawing and erasing its own paths in a slow ocean-current drift. The organism is `min(60vw, 560px)` in diameter, centered, color `#00bfa5` at 60% opacity against `#050e1a`. **Motif vocabulary summary:** - Victorian double-border frames - Taxonomy classification labels - DM Mono depth/coordinate stamps - Compass rose footer ornament - Bioluminescent cyan glow on hover - Ink crosshair registration marks ## Prompts for Implementation Build iisugi.com as a **deep-ocean specimen archive** — a single-page experience where the visitor descends from the surface (hero) into the abyssal specimen grid, as if slowly sinking through dark water. **Hero section (100vh):** Background `#050e1a` — pure abyssal black. The large generative organism SVG sits centered, `min(60vw, 560px)`, rotating glacially. The wordmark `iisugi` in Cormorant Garamond italic light floats in the top-left at `2rem`, color `#e8e0cc`. Below the wordmark on the same left column, a Latin organism name (invented, e.g., *Luminaria profundis*) in Cormorant Garamond italic 300 at `0.95rem`, `#b8b0a0`. A single DM Mono line at bottom-left: `33°42'N 141°18'E · DEPTH: 0m`. No CTA. No headline. No description. The organism IS the content. **Specimen grid:** Below the hero, the card-grid begins without header. Cards are `aspect-ratio: 3/4` on a `#e8e0cc` parchment ground. Each card: 1. Full-card generative organism SVG (160×160px, centered in the upper 60% of card) 2. A thin double-border inset frame around the organism area 3. Bottom 40% of card: taxonomy label block — ORDER in DM Mono 10px, family/genus in Cormorant Garamond italic 14px, a 2-line Libre Baskerville description at 12px 4. Top-left corner: DM Mono depth stamp in `#00bfa5` 5. Bottom-right: a registration crosshair in `#b8b0a0` **Card hover state:** `transform: translateY(-4px)` + `box-shadow: 0 16px 48px rgba(0,191,165,0.15)` + organism glow `filter: drop-shadow(0 0 8px #00bfa5)` — the card rises from the ocean floor, the organism glows. Transition: `all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)`. **Stagger animation:** On page load, cards animate in via IntersectionObserver. Each column has a fixed offset delay: - Column 1: `animation-delay: 0ms` - Column 2: `animation-delay: 120ms` - Column 3: `animation-delay: 240ms` Within each column, cards add `80ms` per row. Animation: `translateY(32px) opacity:0 → translateY(0) opacity:1` over `600ms ease-out`. **Depth timeline (right fixed sidebar):** A `2px` hairline rule `#0d2a3a`, `position: fixed; right: clamp(16px, 3vw, 40px); top: 20vh; height: 60vh`. Six dot markers at even intervals, labeled: `0m 400m 1200m 2000m 3000m 4000m`. Active dot (corresponding to visible card depth) glows `#00bfa5` with a `6px` halo. All in DM Mono 9px. **Scroll behavior:** `scroll-behavior: smooth`. No scroll-jacking. The dark water background is truly `position: fixed; inset: 0; background: #050e1a` — cards scroll over the ocean floor, not through it. **Transitions to avoid:** - No parallax on text (only on background) - No page transitions / route animations - No auto-playing video - No CTA buttons, no pricing, no stat counters, no testimonials ## Uniqueness Notes 1. **Generative SVG as card-primary content** — no other design in the corpus uses algorithmically-generated organism illustrations as the sole card image. All other card-grid designs use photography, icons, or typographic-only cards. iisugi.com's cards are alive: the organism is different for every specimen, seeded by ID. 2. **Ocean-deep palette executed as Victorian naturalist, not SPA/dashboard** — `ocean-deep` appears in only 2% of the registry and in every existing case is used for calm-spa or fintech-trust aesthetics. iisugi.com takes the ocean palette into the 19th-century scientific expedition register — parchment specimen cards against abyssal water — a combination with zero precedent in the corpus. 3. **Muji restraint applied to the uncanny** — Muji/minimalist aesthetics (10% of corpus) are always used for warm, approachable, clean experiences. iisugi.com is the first Muji-register design that is also mysterious-moody: the same radical emptiness, but the emptiness is cold ocean rather than warm white room. This inversion is the core differentiator. 4. **Stagger as tidal wave, not geometric cascade** — `stagger` appears in 60% of the registry (most overused pattern), always as a vertical offset cascading per-card. iisugi.com staggers at the column level as a gentle horizontal sine wave — only 3 offset levels, creating a tidal breathing rhythm rather than a waterfall. This makes the overused pattern feel original. 5. **Depth timeline as narrative device** — the right-side fixed hairline rule with depth markers is neither navigation nor decoration: it creates a vertical axis of meaning (descending into the ocean) that contextualizes why cards differ. No other corpus design uses a physical dimension (depth in meters) as its organizational principle. **Chosen seed:** aesthetic: muji, layout: card-grid, typography: elegant-serif, palette: ocean-deep, patterns: stagger, imagery: generative-art, motifs: vintage, tone: mysterious-moody **Avoided overused patterns (frequency analysis):** - `stagger` (60%) — reimplemented as column-level tidal offset, not per-card cascade - `vintage` (50%) — used only as Victorian border frames and taxonomy labels, not as dominant aesthetic - `hand-drawn` (64% of aesthetic) — replaced by generative/algorithmic art - `centered` layout (90%) — hero is centered but grid is not; depth timeline and wordmark are left/right anchored - `editorial` aesthetic (47%) — naturalist-archive replaces editorial-magazine conventions