# Design Language for koomimi.com
## Aesthetics and Tone
`koomimi.com` is a **fairycore tide-pool** — a site built as if a dream had been left in a jar of seawater overnight and grew small luminous things. The name reads as Korean *꿈* (*kkum*, "dream") softened by the cooing diminutive *-mimi*: a lullaby half-heard, a name a child gives to a creature only they can see. The site treats that creature as real. It is a **bioluminescent moth-fairy of the abyssal photic zone**, and the whole page is its slow drift through cold water that holds more light than it should.
The governing mood is **dreamy-ethereal**, not whimsical-cute. Fairycore here is the *deep-water* branch of the genre — not meadows and toadstools but kelp cathedrals, drowned lanterns, the way a jellyfish pulse looks like a heartbeat made of glass. Everything is **submerged, suspended, and a little reverent**. The visitor should feel they have descended into a place that was sleeping, and that their scrolling is the act of *not waking it*.
Reference touchstones: the indigo dark of Hayao Miyazaki's *Ponyo* deep-sea passages; the lit-from-within quality of Rebecca Louise Law's hanging botanical installations seen underwater; the cold gold of a single oil lamp inside an aquarium at 4 a.m.; the seapunk palette drained of its irony and rebuilt as devotion. The tone of voice — for any text — is **the narrator of a bedtime story who knows the listener is already mostly asleep**: short lines, present tense, no exclamation marks, no urgency. Nothing on this page wants anything from you. It only wants you to keep your eyes half-open a little longer.
This is explicitly **not** a product site, not a portfolio, not a landing page. It is an *exhibit you visit alone*. There is no "sign up." There is a creature, and there is the water, and there is the long blue light coming down through it.
## Layout Motifs and Structure
The layout is **stacked-sections** — full-width horizontal bands, one stacked beneath the next, each band a single "depth" the dream-creature passes through. This is deliberately the *least* used layout direction in the registry (stacked-sections sits at ~2%), and it suits the site because a descent is, structurally, a stack: you do not branch, you do not grid, you simply go *down*, one layer at a time.
**The band stack (top to bottom):**
1. **THE SURFACE TENSION** — a near-full-viewport band, very dark teal, with the wordmark `koomimi` floating dead-center like something seen from below the meniscus, slightly rippled. A single line of text beneath it: *"a dream kept in seawater."* No nav bar visible yet — navigation is a thin vertical depth-rail (see below) that only fades in after the first scroll.
2. **THE LANTERN DRIFT** — introduces the creature: a large, soft, hand-feel illustration of the moth-fairy, wings made of overlapping translucent fins, a tiny warm lamp held in its forelimbs. Text band to one side, set in short stacked phrases, never more than 7 words per line.
3. **THE KELP CATHEDRAL** — the widest "room." Vertical strands of kelp drawn as long bezier ribbons rise from the bottom edge past the top of the band; the creature is small here, dwarfed, drifting between columns. This band is intentionally tall (≈160vh) so the scroll *slows* — you spend longer in the cathedral than anywhere else.
4. **THE COLD LIGHT** — the palette's single non-blue moment: a shaft of pale gold falling diagonally across an otherwise indigo band, the creature pausing inside it, wings briefly opaque. The emotional center of the page.
5. **THE SLEEP FLOOR** — the seabed. Geometric shapes — soft-cornered hexagons, circles, lozenges — drift along the floor like sand-polished glass. The band darkens to its deepest value. Text: *"this is where it sleeps."*
6. **THE COLOPHON TIDE** — a quiet outro band: the wordmark again, very small, and the made-up "field notes" of the exhibit (who imagined the creature, when, in what kind of weather). Treated like the last page of a picture book.
**Spatial rules:**
- Bands never have hard edges. Each transitions into the next via a 12–18vh **gradient bleed** where the two background colors interpenetrate, like layers of water of different temperature meeting.
- A **vertical depth-rail** runs down the right margin: a thin line with six small notches, one per band, each labeled with a faux-depth in metres (`0 m`, `−40 m`, `−210 m`, `−400 m`, `−800 m`, `−1100 m`). The active notch glows faintly. This is the only "menu."
- Content within a band is **off-center, never grid-aligned** — the creature and its text drift to one side or the other, and the side alternates band to band, so the eye sways gently left-right as it descends, mimicking a slow sink.
- Generous negative space — at minimum 40% of every band is "just water."
## Typography and Palette
**Typefaces (Google Fonts only):**
- **Hanken Grotesk** — the **grotesque-neo** workhorse, used for the wordmark, all section labels, the depth-rail numerals, and any UI text. Hanken Grotesk has a slightly humanist, cool, even-color grotesque that reads as "modern, but soft at the joints" — exactly the register of a fairycore site that refuses to be twee. Wordmark `koomimi` set at weight 500, lowercase, tracked +40, with the two `m`s very slightly overlapped via negative letter-spacing on those glyphs only (a small "creature-like" quirk). Section labels: uppercase, weight 600, tracked +220, 12px, in faded gold.
- **Fraunces** (the "Soft" optical setting, italic, light weights) — used *only* for the narrative micro-text: the one-line captions under each band, the "field notes" colophon. Fraunces' wonky, almost botanical italic gives the bedtime-story voice. Set at 22–34px, weight 300, line-height 1.7, in pale ice-blue. Never used for headings, never bold.
- **Spectral** (light, 200/300) — reserved for any longer passage of prose, if one exists at all (the colophon notes). A quiet, low-contrast serif that disappears into the water. Optional; site can run on just the two above.
Type is **never large and shouting**. The biggest thing on the page is the creature, not a headline. The wordmark caps at ~clamp(2.2rem, 6vw, 4.5rem). All other text is small, calm, and widely leaded.
**Palette — `ocean-deep`, six values plus two accents:**
- `#04111E` — **Trench** — the deepest background, used at THE SLEEP FLOOR. Almost black, faintly blue.
- `#0A2233` — **Abyss Teal** — the dominant page background, THE SURFACE and most bands.
- `#123A4D` — **Kelp Shadow** — mid-water, used behind the cathedral strands and for band-bleed midpoints.
- `#1E5C6E` — **Tide Glass** — the lighter teal of the upper bands and of UI line work.
- `#7FB7B0` — **Pale Current** — desaturated sea-green, used for the body of the kelp ribbons and soft shape fills.
- `#D9ECEA` — **Ice Foam** — near-white with a green-blue cast, used for Fraunces caption text and the brightest highlight on the creature's wings.
- `#E8C77E` — **Lamp Gold** (accent) — the single warm note: the creature's held lamp, the diagonal shaft in THE COLD LIGHT, the active depth-rail notch, section labels at low opacity. Used *sparingly* — it is the only warmth in a cold world, and it must stay precious.
- `#F2D9A8` — **Lamp Halo** (accent, soft) — a paler gold used only for the glow *around* the lamp, never as a fill.
Gradients are everywhere but **always within the blue family** except where Lamp Gold bleeds. No purples, no pinks, no neon. The whole palette is what you'd get if you dipped a jar of starlight into the cold part of the sea.
## Imagery and Motifs
**Primary imagery: vintage-photography — but ghosted, not literal.** There are no stock photos in the live UI. Instead, baked into the deepest layers behind the kelp and at the colophon, are **half-dissolved fragments of antique aquarium and diving-bell photography** — sepia and silver-gelatin scans circa 1890–1930 (helmet divers, the first public aquaria, Victorian "wonders of the deep" engravings), each one **desaturated to near-monochrome blue, blurred, and feathered to 8–14% opacity**, drifting at parallax. They read as *memory*, not content — the dream remembering that humans once came down here in brass and glass. This is the `vintage-photography` seed handled as **atmosphere, not gallery**.
**The creature ("koomimi" itself):** a custom illustrated character, drawn in a soft, slightly grainy, hand-feel line — a moth-fairy with:
- four overlapping translucent **fin-wings** (part lunar moth, part jellyfish bell), each wing a slightly different blue with Ice Foam edges;
- a small rounded body, no face details beyond two faint light-points where eyes would be (it is *almost* asleep too);
- a tiny brass **lamp** clutched in its forelimbs, the only Lamp Gold on the figure, casting a soft halo.
It appears once per band, scaled differently each time (large and intimate at THE LANTERN DRIFT, a speck in THE KELP CATHEDRAL, paused and luminous in THE COLD LIGHT, curled and small at THE SLEEP FLOOR). It is always **slowly bobbing** — a 6–9s ease-in-out float, never a loop that calls attention to itself.
**Decorative motifs:**
- **Kelp ribbons** — long, lazy bezier strands rising from band bottoms, semi-transparent Pale Current, swaying with a multi-second sine wobble. The cathedral band has 9–13 of them at varying depths/opacities.
- **Geometric-shapes drift** — at THE SLEEP FLOOR especially, soft-cornered **hexagons, circles, lozenges, and rounded triangles** tumble slowly along the band floor like beach glass and sea-polished pottery shards. Colors pulled from Pale Current and Tide Glass at low opacity, with the occasional Lamp Gold fleck. These are the `geometric-shapes` motif read as *sediment*, not branding furniture — never arranged in a grid, always scattered and gently rotating.
- **Particulate** — a faint, ever-present field of "marine snow": 1–2px Ice Foam dots, very low opacity, drifting downward at varied speeds across all bands. The single texture that makes the whole page feel *wet*.
- **Light shafts** — soft volumetric diagonals of Lamp Gold and Tide Glass that fall from the top of certain bands; CSS conic/linear gradient cones with heavy blur, slowly shifting angle.
Iconography (depth-rail notches, the tiny colophon ornaments) drawn as **single-weight 1px line marks** in Tide Glass — a small starfish, a diving-helmet, a lamp, a kelp curl, a hexagon, a sleeping moth — one per notch.
## Prompts for Implementation
**Narrative principle:** the page is *one slow descent into a sleeping dream*. The visitor is not "exploring features" — the visitor is *drifting down past a creature that must not be woken*. Every implementation choice answers to that. If a developer is tempted to add a "Get Started" button, a pricing tier, a stat counter, or a testimonial — they have misread the brief entirely. There is **no CTA. There is no pricing block. There are no stat grids.** Strip those instincts out before writing a line.
**Structure (HTML):**
- A single long-scroll document. No SPA, no router, no build step needed beyond a Google Fonts `` and one CSS file (plus one small JS file for the canvas particulate + IntersectionObserver). Aim to keep HTML+CSS+JS comfortably under ~70KB before fonts.
- Six `` bands in the order above, each `min-height` between 100vh and 160vh (the cathedral is the tall one). Bands flow naturally; no scroll-snap (snapping would jolt a dream — let it be continuous).
- The vertical depth-rail is a `position: fixed` element on the right; six notches; an `IntersectionObserver` watches the bands and toggles which notch carries the Lamp Gold glow + the depth label.
- The wordmark `koomimi` appears at top (large) and at the colophon (tiny). The two `m` glyphs get their slight overlap via a `` with negative `letter-spacing` — a deliberate, almost imperceptible "creature" quirk.
**Background system:**
- `body` background-color is driven by the active band — animated via the same `IntersectionObserver`, transitioning over ~1.2s `ease`, stepping Abyss Teal → Kelp Shadow → deeper → Trench at THE SLEEP FLOOR → easing back to Abyss Teal at the colophon. The descent should feel like the light *literally running out*.
- Between bands, a tall pseudo-element with a vertical linear-gradient that blends the two adjacent band colors — the "thermocline bleed." No hard section borders, ever.
**Motion (this is a `parallax` site, and the registry shows parallax is near-universal — so do it, but do it *underwater-slow*):**
- Parallax: marine-snow particulate, ghosted vintage photos, kelp ribbons, and the creature each scroll at different rates (photos slowest/farthest, particulate fastest/nearest). Multiply scroll delta down hard — nothing should move *fast*. If something feels snappy, it's wrong; slow it until it feels like it's moving through water.
- The creature: a continuous `transform: translateY()` sine bob (6–9s), plus a tiny `rotate` wobble (±2deg), plus the lamp halo gently `opacity`-pulsing (4s). All `ease-in-out`, all out of phase with each other.
- Kelp ribbons: each strand its own multi-second sway via animated SVG path or CSS `transform: skewX/translateX` on a slight delay, so the cathedral *breathes*.
- Geometric "beach glass" shapes at THE SLEEP FLOOR: each shape `position: absolute`, slowly translating along the floor and `rotate()`ing over 20–40s, recycling when it drifts off-edge.
- Entrance: as each band scrolls into view, its text phrases **fade up** (translateY 16px → 0, opacity 0 → 1) one line at a time on a gentle stagger (~120ms), and the creature **eases in from a slightly deeper, more transparent state** to its bobbing position. No bounce, no overshoot — dreams don't snap.
- **`prefers-reduced-motion`:** kill all parallax and bobbing; keep only the body-color transitions and static positions. The page must still read as a beautiful, calm dive even frozen.
**Loading (`skeleton-loading` seed — used by only ~4% of the registry, lean into it):** before the creature illustrations, the ghosted vintage photos, and the canvas are ready, each image slot shows a **soft, water-toned shimmer skeleton** — not the usual gray boxes, but **gently pulsing rounded shapes in Kelp Shadow → Tide Glass gradient that drift very slightly**, as if the image is *condensing out of the water*. The depth-rail and wordmark render first (they're text); everything else "surfaces" through its skeleton over 600–1200ms with a soft cross-fade. The skeleton state should itself look intentional and pretty — a visitor on a slow connection sees a calm, breathing blue placeholder, never a jarring blank.
**Typography in code:** load Hanken Grotesk (400/500/600), Fraunces (Soft optical, italic 300), and optionally Spectral (200/300). Section labels: uppercase, `letter-spacing: 0.22em`, 12px, color Lamp Gold at ~70% opacity. Captions: Fraunces italic 300, `clamp(1.3rem, 2.5vw, 2rem)`, color Ice Foam, `line-height: 1.7`, max ~7 words per visual line (hard-wrap with ` ` where needed — these are *lines of a lullaby*, not paragraphs).
**Colors in code:** define the six blues + two golds as CSS custom properties. Gold appears on **less than ~6% of painted pixels** — the lamp, the COLD-LIGHT shaft, the active depth notch, label text. Everything else is the blue family. Resist any urge to "warm up" the page.
**Sound:** none. Or, at most, an *optional, off-by-default*, very quiet looping field recording of distant water — gated behind a tiny line-icon toggle near the colophon. The default experience is silent.
**The feeling to test against:** open the finished page, scroll slowly from top to bottom once, and ask — *did I feel like I was sinking gently past something asleep, and did I instinctively scroll a little quieter near the bottom?* If yes, ship it. If it felt like a marketing site with a fish theme, start over.
## Uniqueness Notes
**Three+ differentiators from other designs in the registry:**
1. **Fairycore as a deep-sea descent, not a meadow.** Fairycore sits at only ~4% in the corpus and where it does appear it's almost always cottagecore-adjacent — pastel meadows, mushrooms, soft sunlight. `koomimi.com` relocates the entire genre to the abyssal photic zone: kelp cathedrals, drowned lanterns, marine snow, brass diving-bell ghosts. A *cold, dark, reverent* fairycore is a position no other site here occupies.
2. **`stacked-sections` layout — a near-empty lane.** Stacked-sections registers at ~2%. The site uses it literally as a *stack of depths*, with thermocline gradient-bleeds instead of hard section edges and an off-center, alternating-side content drift that makes the eye sway as it sinks. Most sites here are full-bleed / card-grid / centered; this one is an honest vertical stack used for narrative descent.
3. **Skeleton-loading reimagined as "condensing out of water."** Skeleton-loading (~4% in corpus) is almost always literal gray boxes. Here the placeholder is a *designed, pretty, breathing* blue-gradient shimmer that reads as the image precipitating out of seawater — the loading state is part of the dream, not a blank wait.
4. **Vintage-photography used as ghosted memory, not gallery.** Vintage-photography (~3%) elsewhere means visible sepia photo grids. Here antique aquarium/diving-bell images are blurred, blue-drained, and feathered to ~10% opacity behind the kelp — *atmosphere*, never content. No photo is ever shown "as a photo."
5. **A site with zero conversion surface.** No CTA, no pricing, no stats, no testimonials, no nav bar — just a depth-rail, a creature, and the water. The page exists to be *visited*, like an aquarium tank at 4 a.m., not to be converted from.
**Documented chosen seed:** `aesthetic: fairycore, layout: stacked-sections, typography: grotesque-neo, palette: ocean-deep, patterns: skeleton-loading, imagery: vintage-photography, motifs: geometric-shapes, tone: dreamy-ethereal`
**Avoided patterns from frequency analysis:** steered away from the corpus-saturated defaults — `hand-drawn` aesthetic (96%), `glassmorphism` (71%), `photography` used literally (98%), `card-grid`/`full-bleed`/`centered` layouts (88–93%), `warm`/`gradient` palettes as the dominant key (98%/97%), `mono` typography (94%), `cursor-follow`/`magnetic`/`spring` interaction tics (82–88%), and `pastoral-romantic`/`warm-inviting` tones (28–36%). Parallax (96%) is the one near-universal pattern retained — but deliberately re-tuned to underwater speed so it reads as descent, not the usual snappy hero-parallax.