# Design Language for koomimi.com ## Aesthetics and Tone `koomimi.com` is a **softly deranged editorial daydream** — a magazine printed on the inside of a soap bubble. The aesthetic is editorial in bone structure (rigid grid logic, intentional white space, typographic hierarchy) but the editorial logic has been **dissolved in iridescent foam**: headlines bleed into noise, bento cells breathe with slow pulse animations, and the entire surface feels wet, translucent, faintly fragile, like something that will pop if you press too hard. The mood is **dopamine-neon filtered through gauze**. The colors are electric — candy-acid yellows, shock pinks, viral teals — but they arrive through layers of SVG noise-texture and grain that domesticate them, blurring the edges into something that feels more **cloud than screen**. The site does not shout. It hums at a frequency just above hearing. Tone: **dreamy-ethereal**. This is not the clinical ethereal of a meditation app; it is the feverish, oversaturated ethereal of a fever dream in a neon laundromat — warm, disorienting, beautiful, slightly too much. The viewer doesn't read the page; they float through it. Every interaction produces a physical sensation of lightness. Hover states lift. Scroll feels like swimming. Links arrive like bubbles surfacing. Inspiration sources: Studio Ghibli color palettes rendered at double the saturation, Pantone Illuminating Yellow (#F5DF4D) bleeding into a hot-pink UV-reactive ink blot, the interior of a Rilakkuma capsule machine at 2am, Neon Genesis Evangelion episode cards without the apocalypse. --- ## Layout Motifs and Structure The layout is a **bento-box grid** — a 12-column CSS Grid with intentionally mismatched row spans, where cells range from `1×1` compact accent tiles to `4×3` panoramic statement blocks. The bento is not a card-deck or a dashboard; it is more like a **ransom note assembled by a graphic design student in a dream**: each cell has its own typographic personality, its own noise density, its own neon accent — yet the whole reads as a coherent composition because every cell shares the same underlying 8px baseline grid. **Structural rules:** - The outer container is `100vw` with `padding: clamp(12px, 3vw, 32px)` — near-edge, never full-bleed but always atmospheric - Grid gap: `6px` — hairline gutters that read as joint lines on a tray, not breathing room - Three macro-cells anchor the composition: a **Title Cell** (spans 7 columns × 4 rows, top-left), a **Drift Cell** (spans 5 columns × 2 rows, top-right), and a **Membrane Cell** (spans full 12 columns × 3 rows, bottom) - Remaining cells (8–12 smaller tiles) fill the interstices, each with autonomous content: a floating pull-quote, a color swatch bubble-cluster, an SVG path-draw animation, a scrolling ticker - **No horizontal scroll.** The bento is strictly vertical — desktop shows the full grid above the fold; mobile reflows to single-column stacked tiles **Spatial character:** Cells are not flat. Each bento tile has `backdrop-filter: blur(0px)` at rest but transitions to `blur(3px)` + slight `scale(1.012)` on hover, creating a focal-depth effect. The noise-texture SVG layer floats `position: absolute` inside each cell at 40% opacity, giving depth without weight. **The grid breathes.** A slow (8s) staggered CSS animation cycles each cell's background-color through a 3-step dopamine sequence (resting → accent-glow → resting), offset by `animation-delay: calc(var(--cell-index) * 1.1s)`. The grid is never fully static. --- ## Typography and Palette **Type system (Google Fonts only):** - **Display / Hero — `Bricolage Grotesque`** (variable, `wght 200–800`, `wdth 75–100`). Set at `clamp(64px, 11vw, 160px)`, `wght 700`, `wdth 100`, tracking `-0.04em`. This is the oversized-display voice: enormous, slightly condensable via variable axis, with a subtly hand-finished grotesque warmth that keeps it from reading corporate. The hero headline in the Title Cell stacks two lines at maximum optical size; the second line drops to `wght 200` + `wdth 75` mid-word using `` variation — a sudden weight collapse that reads as an exhale. - **Editorial Body — `DM Sans`** (variable, `wght 100–700`, `ital 0–1`). Set at `16–18px`, `wght 380`, `line-height: 1.7`. DM Sans is the reading voice: clean, slightly rounded, modern without being neutral. Long-form cells use this exclusively. - **Accent / Label — `Space Grotesk`** (variable, `wght 300–700`). Set at `11–13px`, `wght 600`, `letter-spacing: 0.08em`, `text-transform: uppercase`. Used for bento cell labels, date stamps, and category tags. Its geometric angularity creates productive contrast with Bricolage's warmth. - **Mono / Data — `Space Mono`** (400, 700). Set at `12px` for URL slugs, code snippets, and the scrolling ticker. Deliberate anachronism: the mono type reads as a technical substrate beneath the dreamscape. **Palette — dopamine-neon:** | Role | Name | Hex | |------|------|-----| | Primary neon | Acid Lemon | `#E8FF3A` | | Hot accent | Shock Pink | `#FF2D78` | | Cool accent | Viral Teal | `#00F5D4` | | Soft violet | Lavender Haze | `#C77DFF` | | Background dark | Ink Void | `#0D0D12` | | Background mid | Dim Charcoal | `#1A1A24` | | Surface light | Frosted Membrane | `#F0EDFF` | | Text on dark | Ghost White | `#EDEDF5` | | Text on light | Deep Ink | `#141420` | | Noise tint | Soap Film | `rgba(200, 180, 255, 0.12)` | **Color application:** - Title Cell background: `#0D0D12` with noise-texture SVG at 50% opacity - Drift Cell: `#E8FF3A` background — the one fully saturated neon cell, deliberately jarring - Membrane Cell: `linear-gradient(135deg, #1A1A24 0%, #0D0D12 100%)` with Shock Pink `#FF2D78` border-top, `4px` - Small tiles cycle: Viral Teal → Lavender Haze → Ink Void → Frosted Membrane backgrounds - All hover/active states use `box-shadow: 0 0 0 2px #E8FF3A` — the acid lemon glow is the universal interaction signal --- ## Imagery and Motifs **Noise texture as primary visual language.** The site's surface is **noise-textured at every layer**. Each bento cell carries an `` filter (`feTurbulence` + `feColorMatrix`) applied as an `position: absolute` overlay with `mix-blend-mode: overlay` at `30–50%` opacity. The turbulence `baseFrequency` varies per cell: large cells use `0.65` (fine grain, like 35mm film), small accent tiles use `0.35` (coarser, like spray paint). This is not a uniform grain filter — it is a **cell-specific noise personality** that makes the grid feel hand-finished. **Bubble motif — the organizing visual metaphor.** `koomimi.com` is structured around the **soap bubble** as both aesthetic object and UI primitive: 1. **Macro bubbles**: 3–5 large SVG circles (80–200px diameter), absolutely positioned and partially overlapping across the bento border lines. Each bubble is an `` with a `radialGradient` fill — a transparent center, iridescent ring (Shock Pink → Viral Teal → Lavender Haze hue-shifted gradient), and a 1px stroke. They sit at `z-index: 1` between the grid and the content, creating an illusion of objects floating slightly in front of the page surface. 2. **Micro bubbles**: A custom `path-draw-svg` animation draws 12–18 small circles (6–20px) in the negative space of each bento cell over 2.4s on page load, using `stroke-dasharray` / `stroke-dashoffset` animation. They appear to surface from the page bottom, pause for 0.8s, then float upward via `transform: translateY(-20px) + opacity: 0` over 1.2s. On `IntersectionObserver` trigger (scroll into view), each cell re-triggers the bubble surfacing. 3. **Path-draw SVG accents**: In the Membrane Cell (full-width bottom row), a single continuous SVG `` traces a wandering, organic curve across the full 100% width. The path is drawn on load using `stroke-dashoffset` animation over 3.8s, `ease-in-out`, in `#E8FF3A` at 0.6 opacity. The path does not close — it drifts off the right edge, implying continuation. This is the editorial throughline: a visual sentence that runs beneath all the bento noise. 4. **SVG noise filters**: Custom `` elements defined in an inline `` at the document head, referenced via `filter: url(#noise-N)` on each cell. This keeps the noise texture GPU-composited and not a separate HTTP request. **No photography.** Zero stock images. The visual world is entirely SVG, CSS gradient, and noise-filter — deliberately screen-native, not photographed-world. --- ## Prompts for Implementation Build `koomimi.com` as **a single long bento composition that is also a poem** — each cell is a stanza, the grid is the page, the noise is the paper texture. There is no hero/body/footer architecture. There is only the grid. **Implementation arc:** **Phase 1 — The Grid Skeleton.** Define the CSS Grid: 12 columns, `auto` rows with `grid-auto-rows: minmax(80px, auto)`. Place 12 named cells using `grid-column` and `grid-row`. Assign `--cell-index: N` custom property to each for stagger calculations. All cells have `position: relative; overflow: hidden` — the bubble and noise layers live inside them. **Phase 2 — Noise Textures.** Define 4 distinct SVG filter variants at the top of the document. Each `` has a unique `baseFrequency` and `seed` value. Apply per cell using `filter: url(#noise-N)` on a `position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay` pseudo-element or wrapper div. **Phase 3 — Bubble System.** Build a single `BubbleLayer` SVG that is `position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none` inside each cell. On `DOMContentLoaded`, JavaScript reads each cell's `offsetWidth/offsetHeight`, then generates N bubble `` elements with randomized `cx`, `cy`, `r` within bounds. Add CSS keyframe `@keyframes bubble-rise { 0% { transform: translateY(0); opacity: 0.9; } 100% { transform: translateY(-30px); opacity: 0; } }` and assign with staggered `animation-delay`. IntersectionObserver re-initializes on re-entry. **Phase 4 — Path Draw.** In the Membrane Cell, embed a hand-crafted SVG `` with `d="M 0,180 C 200,120 400,240 600,160 C 800,80 1000,200 1200,140 C 1400,80 1600,160 100%,140"` (approximate — adjust to viewport). Set `stroke: #E8FF3A; stroke-width: 2; fill: none; opacity: 0.6`. Calculate `getTotalLength()` in JS and set as `stroke-dasharray` + `stroke-dashoffset`. Animate `stroke-dashoffset` from `totalLength` to `0` over `3800ms` with `ease-in-out` on load. **Phase 5 — Bento Breathing.** Apply a CSS animation to each `.bento-cell`: `@keyframes cell-breathe { 0%, 100% { background-color: var(--cell-bg-rest); } 50% { background-color: var(--cell-bg-active); } }` with `animation: cell-breathe 8s ease-in-out infinite`. Set `--cell-bg-rest` and `--cell-bg-active` per cell via inline custom properties. Title Cell breathes `#0D0D12 → #1A1A24`. Drift Cell breathes `#E8FF3A → #C8F500`. Membrane Cell breathes `#1A1A24 → #14141E`. **Phase 6 — Typography Drama.** The hero headline in the Title Cell uses a two-weight collapse: `koomimi` where `.heavy { font-variation-settings: 'wght' 700, 'wdth' 100 }` and `.light { font-variation-settings: 'wght' 200, 'wdth' 75 }`. On page load, animate `.light` from `wght 700` to `wght 200` over `1200ms` `ease-out` — the name exhales as it arrives. **Phase 7 — Hover Depth System.** Each `.bento-cell` on `:hover` transitions: `transform: scale(1.012) translateZ(0); box-shadow: 0 0 0 2px #E8FF3A, 0 8px 32px rgba(232, 255, 58, 0.15); backdrop-filter: blur(2px)` — duration `180ms` `ease-out`. The neighboring cells simultaneously `scale(0.998)` to create a subtle depth-field effect suggesting the hovered tile is floating forward. **Storytelling bias:** The bento is not a feature grid. It is a **mood board made navigable**. Each cell should feel like it was torn from a different magazine and pinned to the same corkboard. Title Cell = cover. Drift Cell = centerfold pull-quote. Small tiles = marginalia, post-it notes, catalogue entries. Membrane Cell = centerspread image-free. **AVOID:** Hero sections. CTAs ("Get started", "Sign up"). Pricing tables. Stat counters. Navigation headers. Testimonial carousels. Any element that reads as SaaS or marketing. --- ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **editorial**, layout = **bento-box**, typography = **oversized-display**, palette = **dopamine-neon**, patterns = **path-draw-svg**, imagery = **noise-texture**, motifs = **bubble-playful**, tone = **dreamy-ethereal**. **Differentiators from the existing corpus:** 1. **Noise-as-material, not decoration.** Most designs using `noise-texture` (4% of corpus) apply it as a uniform background filter. koomimi.com assigns a unique `feTurbulence` fingerprint to each bento cell — `baseFrequency` and `seed` vary per tile — so each cell has a physically distinct surface texture. The grid reads as an assemblage of different physical materials (fine linen, rough kraft, smooth acrylic) rather than a uniformly grained surface. 2. **The bubble is a structural element, not a motif.** Bubble-playful appears in 4% of the corpus, always as decorative scatter. Here, the bubble is the **primary navigation metaphor**: the micro-bubble SVG animation is the hover/in-view feedback system, the macro-bubble circles straddle grid borders as physical connectors between cells, and the iridescent radialGradient ring serves as the site's de facto "icon". The entire visual language grows from one shape. 3. **Bento breathing — desynchronized cell animation.** At 7% frequency, bento-box is underused. No existing bento design in the corpus uses **staggered background-color animation** to make the grid feel alive in ambient state. koomimi.com's cells pulse at different phases of the same cycle, so the grid never reads as static even when the user is not interacting. The page breathes. 4. **Editorial skeleton under a dreamy skin.** The corpus shows editorial at 49%, but almost always as straightforward layout — columns, sections, typographic hierarchy without textural disruption. koomimi.com uses editorial rigor (12-column grid, baseline grid, typographic scale) as a hidden skeleton, then covers it entirely with noise, bubble, and neon. The discipline is structural, not visible — the opposite of how editorial usually presents. 5. **Avoided patterns:** Did not use `cursor-follow` (high corpus frequency), `centered` layout (89% — avoided entirely), `full-bleed` sections (76% — avoided), `photography` imagery (high frequency), or `high-contrast` monochrome palette. The nearest cousin in the corpus is the dopamine-neon / bento intersection — but none combine it with noise-texture materialism and bubble-as-navigation.