# Design Language for goomimi.com ## Aesthetics and Tone goomimi.com is **frutiger-aero pressed into a velvet display case** — the aesthetic is the early-2000s Windows Vista / Sony VAIO / aquarium-screensaver optimism, but tuned upward into the register of a Place Vendôme jewellery atelier. The brand reads from its own etymology: *goo* (the soft, transparent, finger-pressable substance — bubbles, gel, water-blobs, gummy ear-cleaning earpicks) and *mimi* (耳, "ear" — the listening surface, the canal, the auditory pearl). The site stages itself as **a luxurious aural toolmaker** — purveyors of glass-cased listening instruments, gel-tipped earpicks, audiophile micro-objects, transparent tools for the inner ear. Imagine if the Frutiger family of typefaces had been commissioned by Cartier to design the boutique website for a brand that sells single-use diamond-hilt cotton swabs at €420 a piece, displayed on aquamarine-tinted glass shelves under museum lighting, while a koi the size of a forearm circulates serenely behind the product. The tone is **luxurious without being austere** — frutiger-aero is by canon optimistic, glassy, fishy, bubbled, sky-bright, suburban-utopian; this site keeps every one of those signatures (water bubbles drifting upward through the page, glossy bevels on every surface, that distinctive Vista-blue saturation, the inevitable koi/tropical-fish silhouette gliding past the type) but grades them through the **discipline of luxury display**: generous margins, slow choreography, no clutter, no exclamation, no chrome wordart. The result reads as **frutiger-aero matured into adulthood** — the same gel-bubble world, but the gel is now medical-grade silicone and the bubbles are champagne, not Glade air-freshener. The visitor should feel they have walked into a flagship store on Avenue Montaigne where the boutique soundtrack is a single sustained C5 played through a Stax electrostat, the air smells faintly of cedar and chlorinated water, and a vitrine in the centre of the room contains a pearlescent earpick lit from below by a floor of refracting blue. The emotional payload is **opulent calm**, not Vista-suburbia exuberance. We honor the aesthetic's heritage — koi, bubbles, blue gradients, glass — but we slow it down and make every element rare. Frutiger-aero in the registry's existing 3% of designs trends toward the bouncy and demonstrative; goomimi.com goes the other way: the bubbles ascend at the speed of meditation, the koi crosses the page once every 38 seconds, and the type performs its kinetic choreography in slow swells, never twitches. ## Layout Motifs and Structure The site is **rigorously centered** — every section is composed on a 720px central axis, with the rest of the viewport reserved for **aquatic atmosphere**. Centered layouts appear in 83% of the registry, but they are almost always paired with full-bleed asymmetric floods; goomimi.com does the opposite: the centre is sacrosanct, and the periphery is *aquarium*. Imagine a hexagonal vitrine in the middle of a circular pool — the visitor's gaze tracks straight down the spine of the document, while koi, bubbles, and gradient-mesh light wander the unused 50% of horizontal space. The page is composed of **seven vertically-stacked centered "vitrines"**, total scroll length 620vh on desktop, 880vh on mobile (mobile gets extra room because the vitrines deserve breathing room even at narrow widths): 1. **The Mantelpiece Vitrine.** Full-viewport opening. Centered wordmark "goomimi" at clamp(96px, 14vw, 220px) sits inside a glass capsule shaped like a horizontal lens (a 1440×420px ovoid with rounded ends, never a rectangle). Behind the capsule, the gradient-mesh sky breathes between Aquamarine and Pearl-Blush. Two koi (one koromo, one ogon) circulate slowly on z=−240, partially eclipsed by the capsule. No CTA, no nav menu. A single line of micro-typography 56px below the capsule reads *"objects for the listening ear · est. anywhere · since soon"*. 2. **The Catalogue Plinth.** Centered single-column 540px wide. Twelve numbered listening-objects appear as **skeleton-loading placeholders** that resolve in slow waves — every product is first a pearl-grey shimmering oval (the skeleton), then over 2.6s morphs into a high-resolution glass-cased object with bevelled edges and a caustic shadow. Skeleton-loading appears in only 3% of registry designs; here it is **load-bearing brand language**, not a perceived-performance trick — the visitor watches the catalogue *come into focus* like a vitrine being slowly unveiled. 3. **The Anatomy Pavilion.** A centered 800×800px rotating glass cross-section of the human ear canal. Concentric labelled rings (auricle, meatus, eardrum, ossicles) drawn in fine 1px Aquamarine line-weight on a Pearl-Blush field. As the user scrolls through this vitrine, the cross-section rotates a quarter turn and a single object from the catalogue (chosen by scroll position) is shown approaching the canal at ¾ scale. No marketing copy. Just anatomy as luxury display. 4. **The Material Library.** Centered grid of six 240×240px **gradient-mesh chips**, each titled in micro-caps: *Surgical Silicone*, *Bohemian Crystal*, *Mother-of-Pearl*, *Resin No.7*, *Aquatic Polymer*, *Cold-Pressed Glass*. Each chip is a unique gradient-mesh, hand-tuned in CSS. Hovering a chip dilates it to 360px while neighbours retreat — magnetic but with luxurious deceleration (cubic-bezier 0.16, 1, 0.3, 1, duration 1.4s, never under a second). 5. **The Listening Theatre.** Full-viewport. Centred 8-second video-loop-style canvas (no actual video — pure canvas) of an ear-pick descending through a column of clear gel, leaving a slow trail of ascending micro-bubbles. Across this canvas the kinetic-animated wordmark **"listen, and be listened to"** assembles from individual letterforms that drift in from the corners of the viewport, snap to the centre line, then breathe (subtle 0.4% scale oscillation) at the rhythm of slow exhalation (6 breaths/min, 10s cycle). 6. **The Provenance Cabinet.** Centered 600×420px glass case. Inside, a single rotating object on a turntable — a numbered piece from the current edition. Around the cabinet, four corner cartouches each carry a sentence about origin: *Vienna, lacquered 2026 · Numbered 042 / 250 · Tuned to 440Hz · Contains no animal product*. No price, no buy button, no add-to-cart. To purchase, one apparently must already know. 7. **The Sign-Off Pool.** A final centered ovoid lens 720×320px, this time empty — a pool of slow-cycling gradient-mesh that the koi cross one last time, this time *together* (the only frame in which both fish share the lens). Beneath it, in 11px Frutiger-clean micro-caps: *atelier goomimi · listen well · enquiries by appointment*. End of document. The grid behind every vitrine is invisible: a 12-column 1440-wide page, gutters 32px, with the central 6 columns reserved for content and the outer 3+3 reserved for atmospheric overflow (the koi swim in those margins). On mobile the page collapses to a single 92vw column with the koi reduced to a single travelling silhouette in the bottom-left fixed corner. ## Typography and Palette **Type stack — Google Fonts only, three families.** - **Frutiger is not on Google Fonts**, so the **frutiger-clean** voice is delivered by **Mulish** (variable, weight 200–900, italic available) — chosen because Mulish is the closest Google-Fonts approximation of the Frutiger humanist sans skeleton: open apertures, two-storey *a* and *g* with the same gentle terminals, balanced x-height, modest contrast. Mulish carries the wordmark, all primary headings, all product labels, the anatomy pavilion's labelled rings, and the corner cartouches in the Provenance Cabinet. Wordmark sits at clamp(96px, 14vw, 220px), weight 280 (deliberately under-weight — frutiger-aero in luxury register reads thinner than Vista canon, where the wordmark would be 700+); product labels at 14px weight 320 letter-spaced 0.18em uppercase. - **Cormorant Garamond** (weight 300–600, italic available) is the **elegant-serif** counterpoint — strictly reserved for two roles: (a) the kinetic-animated phrase *"listen, and be listened to"* in The Listening Theatre, set at clamp(48px, 7vw, 110px) weight 400 italic, and (b) the small italic provenance lines (*Vienna, lacquered 2026*) at 13px weight 500. Cormorant against Mulish creates the tension of *jewellery script meeting boutique signage* — the Cartier vitrine label set in copperplate beside the brushed-steel doorframe stencil. - **JetBrains Mono** (weight 400, single style) appears **only** for object numbering and lot codes — *042 / 250*, *Lot No. 7-AQ*. This is the **mono** voice (94% of registry uses it; we use it sparingly and small, 11px max). It signals authenticity-by-restraint: in this design, mono is the watchmaker's serial-number stamp, not the developer's IDE. **Palette — complementary on Aquamarine ↔ Pearl-Blush, anchored by Vitrine-Black.** Complementary palettes appear in only 4% of registry designs, and frutiger-aero conventionally lives in analogous blue-cyan-green; goomimi.com is the registry's argument that frutiger-aero can be **complementary** without losing its sky-and-water identity, by pairing aqua against its true colour-wheel opposite (peach-rose) instead of the usual blue-green analogue. - **Aquamarine** `#7BCFE5` — the dominant atmospheric blue, inherited directly from the Windows XP Bliss / Vista Aero gradient lineage but cooled by 6% saturation. Used for the gradient-mesh sky, koi shadows, the anatomy pavilion's line-art, and 60%+ of the bubble palette. - **Pearl-Blush** `#F8D8C7` — the *complementary* warm-peach that opposes Aquamarine on the colour wheel (true complement of #7BCFE5 cooled toward salmon). This is the radical move: frutiger-aero almost never goes warm, and certainly never goes peach. Used for the second gradient stop in the mesh sky, for the centre of the lens-capsule wordmark housing, and for the ear-canal interior in the Anatomy Pavilion. - **Vitrine-Black** `#0E1418` — anchors all type, all hairline strokes, all lot codes. Slightly blue-shifted to harmonise with Aquamarine, never #000. - **Glass-White** `#F4FAFC` — the field colour. Page background, the 50% opacity surfaces of the lens capsules. Slightly cyan-tinted so it reads as *aquatic glass*, not paper. - **Caustic-Gold** `#E8B864` — used at exactly three places on the entire site: the koi's belly highlight, the lot-number bullet, and the underline-draw under the wordmark on hover. Functions as a 1% accent, the same role gold-leaf plays on a 17th-century vitrine. - **Mother-of-Pearl-Mist** `#DCE9EE` — the skeleton-loading shimmer base, 6% lighter than Glass-White, reserved exclusively for skeleton placeholders. The complementary tension (Aquamarine ↔ Pearl-Blush) appears most explicitly in the gradient-mesh sky behind every vitrine — every mesh on the site is a four-anchor mesh interpolating Aquamarine (top-left), Pearl-Blush (bottom-right), Glass-White (top-right), and a desaturated Mother-of-Pearl-Mist (bottom-left). The mesh slowly cycles its anchor positions across an 84-second loop. ## Imagery and Motifs **Five motif families, all rendered in the same vitrine-glass register.** **1. Gradient-mesh sky (load-bearing atmosphere).** The page background is never flat. Every vitrine sits on a slow-cycling gradient-mesh canvas implemented as a `` element with four animated colour anchors (Aquamarine, Pearl-Blush, Glass-White, Mother-of-Pearl-Mist), each anchor traversing a small Lissajous figure across an 84-second period. The mesh is rendered at quarter resolution and CSS-blurred 14px upward to performance-budget; the eye reads it as continuous breathing colour. Gradient-mesh appears in 19% of registry designs — common — but **complementary-anchored** gradient-mesh (aqua ↔ peach) is rare; this is the design's first formal claim. **2. Tropical-fish (motif).** Two koi traverse the periphery on z=−240. Koi #1 is a *koromo* (white body, indigo edged scales), koi #2 is an *ogon* (champagne-gold body). Each has its own slow Bezier path that loops every 38s. Their fins are SVG, animated by a 12-frame morph cycle; their tails leave a *dispersing-bubble trail* that lasts 2.4s. Tropical-fish appears in only 5% of designs and almost always as decorative pop — here it functions as **the ambient population of the boutique aquarium**, never crossing into the centre vitrine. The koi are the *uniqueness signature* of frutiger-aero, claimed from canon and grade-shifted upward. **3. Water-bubbles (continuous).** A field of 30–60 bubbles per viewport rises continuously from below. Bubble sizes are log-distributed: most are 4–10px, a rare few are 22–34px. Each bubble has a subtle inner highlight (top-left specular) and a 1px Aquamarine outline. They drift upward at variable speeds (3–11s viewport-traverse) with mild horizontal sway. Bubbles **respect the centre column**: when their projected path would intersect the central content, they dissolve at the edge with a 600ms fade rather than crossing it. This is the rule that keeps the site centred even under aquatic noise. Water-bubbles appear in only 6% of designs — this is the second canon claim of frutiger-aero. **4. Glass capsules / lens vitrines (structural imagery).** Every centred element on the site is housed inside a glass capsule: an ovoid lens with rounded ends, never a rectangle, never a square card. The capsule is rendered with `backdrop-filter: blur(22px) saturate(1.3)`, an inner 1.5px stroke at 28% Aquamarine, an outer 0 36px 96px rgba(14,20,24,0.18) drop-shadow, and a top inner highlight (a 1px Glass-White line at 22% opacity, 8% from the top edge, the classic Vista bevel quoted exactly once per capsule). This is the *vitrine* metaphor made literal — every piece of content is glassed-in. **5. Tech motif, transposed.** The "tech" motif (14% of registry designs) usually carries circuitry, terminals, HUDs, sci-fi data-viz. goomimi.com claims it through a single restrained device: **a precise 1px Aquamarine technical-drawing register** that overlays the Anatomy Pavilion (panel 3) — orthographic projection lines, 5° tick marks, exploded-view spurs labelled in JetBrains Mono 9px. This is "tech" rendered as Wallpaper magazine product schematic, not Cyberdeck Studio dashboard. Where tech in the registry typically reads cyan-on-black, goomimi.com renders it Aquamarine-on-Pearl-Blush — luxury blueprint, not server-room HUD. **Imagery exclusions (load-bearing absences).** - No photography. The frutiger-aero canon depends on photographic koi/bubbles/clouds; we replace all of it with SVG and canvas, because photography reads suburban while drawn glass reads couture. - No icon-heavy UI (no shopping-cart icons, no nav-menu hamburger, no social pills). Every interaction is mediated through the centred vitrine itself. - No gradient stickers, no chrome bevel wordart. Frutiger-aero's worst impulses (the early-2000s metallic gradient logo) are forbidden by the luxurious-tone constraint. ## Prompts for Implementation Build goomimi.com as **one HTML document, one CSS file, one ES module, one Lottie player, three Lottie JSON files**. No framework. No router. No SPA. No "above-the-fold" hero pattern, no CTA stack, no pricing block, no add-to-cart, no testimonial carousel, no stat-counter, no email-capture footer. The page is a *catalogue raisonné*: narrative > conversion. **Storytelling is the organising principle, not navigation.** The visitor lands on The Mantelpiece Vitrine and scrolls through seven vitrines as a single uninterrupted aquarium-corridor. There is no jump-nav, no anchor menu. The only "interaction" available outside scroll is hover-to-dilate on the Material Library chips and a single "by appointment" mailto in the final cartouche. **Vitrine-by-vitrine implementation:** 1. **The Mantelpiege Vitrine.** On load, the gradient-mesh canvas warms up over 2.4s (anchors fade in from neutral grey to Aquamarine/Pearl-Blush/Glass-White/Mother-of-Pearl-Mist). The capsule lens (border-radius: 50%/100%, sized 1440×420 max) fades up at 600ms with a 22px backdrop blur. The wordmark "goomimi" assembles letter-by-letter (200ms stagger, ease-out-quart, 1200ms total) using kinetic-animated transforms — each letter drifts in from a small randomised offset (±48px x, ±24px y), settling into the centre row. The micro-typography line below resolves at 1800ms via underline-draw of the centred separator dot. Bubbles begin rising at 2200ms. Koi enters from the left edge at 4000ms. 2. **The Catalogue Plinth.** As the user scrolls into this vitrine, twelve skeleton-loading placeholders are visible in a centred 540px column, each a Mother-of-Pearl-Mist ovoid with a slow shimmer (a 1.6s CSS gradient sweep from 24% to 84% lightness). When the vitrine reaches 60% viewport, skeletons begin resolving into product images, **but staggered by scroll-position-to-skeleton-index, not by time** — the skeleton in the top of the vitrine resolves first, the bottom resolves last, and each takes 2.6s to morph. This means the visitor *sees the catalogue load itself in cinematic slow motion as they descend*. Skeleton-loading is repurposed from perceived-performance trick into *unveiling ritual*. After resolution, each product image is a glass-cased SVG with a gentle hover-tilt (max 6°, spring damping 0.18) and a caustic-shadow update. 3. **The Anatomy Pavilion.** The 800×800 cross-section is an SVG composed of concentric circles drawn with `stroke-dasharray` for the labelled rings. As the user scrolls, the SVG rotates (CSS transform: rotateZ, mapped to scroll position, 0–90°). The labelled rings reveal sequentially via path-draw-svg (stroke-dashoffset animated to 0, 1.2s per label, 80ms stagger). The "approaching object" — chosen by `Math.floor(scrollFraction * 12)` from the catalogue — slides in from the right margin and rests at the canal's mouth, accompanied by a single bubble that rises from the canal entrance. 4. **The Material Library.** Six chips arranged in a centred 3-column 2-row grid. Each chip is its own SVG with a unique gradient-mesh (different anchor positions, different anchor colours within the brand range). On hover, the chip dilates to 360px (1.5x), slows the global bubble field by 40% within a 200px radius, and reveals the material name as kinetic-animated micro-caps that drift in from the chip's corners. Magnetic but slow — duration 1.4s with cubic-bezier(0.16, 1, 0.3, 1). 5. **The Listening Theatre.** A `` element 1100×620 centred in the viewport, on which the ear-pick descent is procedurally drawn frame-by-frame: a vertical gel column with the pick descending at 14px/s, a continuous trail of ascending bubbles produced at the pick's tip, gentle refractive distortion of bubbles as they pass the pick. Across this canvas, the kinetic-animated phrase "listen, and be listened to" is composed in Cormorant Garamond italic, with each letter performing a 0.4% breath-scale oscillation on a 10s cycle (6 breaths/min). The phrase assembles on first viewport-entry (letters drift from the four corners, snap to centre line, 1800ms total) and breathes thereafter for as long as the vitrine is in view. 6. **The Provenance Cabinet.** A centred glass case 600×420 housing a single SVG object on a turntable. The turntable rotates at 0.4 rpm (one revolution per 150s) — slow enough that the visitor isn't sure if it's moving until they look back. The four corner cartouches are static; they fade in via stagger when the cabinet reaches 50% viewport. 7. **The Sign-Off Pool.** Both koi enter from opposite edges, cross the lens together for the only synchronised moment in the document, and exit. The micro-caps line fades in beneath the lens. End. **Global motion rules.** - Default duration is **1.4s, never under 800ms.** Frutiger-aero canonical animation is 200–400ms; we slow everything by 3–4x to translate the aesthetic into luxurious tone. - Default easing is `cubic-bezier(0.16, 1, 0.3, 1)` — a long-tail ease-out that reads as deceleration into glass. - All scroll-driven motion is **damped** through `requestAnimationFrame` with a 0.08 lerp factor, so scroll inputs feel viscous, like pushing through water. - `prefers-reduced-motion` collapses the koi to static silhouettes, freezes the gradient-mesh, and replaces the kinetic-animated assembly with simple opacity fade. **Bias toward narrative full-screen.** Every vitrine is at minimum 80vh; The Mantelpiece, The Listening Theatre, and The Sign-Off Pool are full 100vh. There is no "above-the-fold" CTA. There is no nav-bar at any point. The entire experience is a slow descent through seven glass cabinets, accompanied by koi. ## Uniqueness Notes This design's distinct departures from the 210 designs already in the registry, and from the seed's own canon: 1. **Luxurious frutiger-aero — registry-first.** Frutiger-aero appears in only 3% of designs (~6 sites), and its canonical tone is *optimistic-bright* or *futuristic-cutting-edge* (early-2000s utopian-suburban). goomimi.com is the registry's first frutiger-aero rendered in **luxurious** tone (luxurious itself only 3% of registry tone usage). The intersection (frutiger-aero × luxurious) is **zero** before this design. The bubbles, koi, glass, and Aero-blue are all preserved from canon — but slowed, rarified, and graded into Place Vendôme register. 2. **Complementary palette, against frutiger-aero's analogous orthodoxy.** Frutiger-aero is universally rendered in analogous palettes (cyan-blue-green, sky-and-water). Complementary palettes appear in only 4% of the registry. The intersection (frutiger-aero × complementary) is again **zero** before goomimi. The radical move is pairing Aquamarine `#7BCFE5` against its true opposite **Pearl-Blush** `#F8D8C7` — a peach-rose that frutiger-aero canonically never touches. The result keeps the aesthetic legible (sky and water still dominate) while introducing a warmth that the canon refuses. 3. **Skeleton-loading as unveiling ritual, not perceived-performance trick.** Skeleton-loading appears in 3% of designs and is uniformly used as a brief loading-state placeholder. goomimi.com promotes it to **a load-bearing brand mechanic**: the entire Catalogue Plinth is a 30-second skeleton-resolution choreography keyed to scroll position. This is the registry's first design where skeleton-loading is the *experience*, not the *waiting*. 4. **Centred layout reclaimed from card-grid hegemony.** Centred layouts appear in 83% of designs but almost always as the spine of a full-bleed card-grid composition. goomimi.com makes centring **axiomatic**: the centre is sacrosanct and the outer 50% of the viewport is reserved for atmospheric overflow (koi, bubbles, gradient-mesh). No element ever occupies the periphery as primary content. This is centring as *boutique vitrine display*, not as conversion-funnel spine. 5. **Kinetic-animated typography in slow-breath register.** Kinetic-animated typography appears in 3% of designs and is canonically demonstrative — fast assembly, glitchy snap, bouncy stagger. goomimi.com renders kinetic typography in **6 breaths/min metronome**: every letter assembly is at minimum 1800ms, and the centrepiece phrase "listen, and be listened to" *breathes* at the rhythm of slow exhalation for as long as it's on screen. Kinetic typography is here used to *slow time*, not to demonstrate it. 6. **Tech motif rendered as boutique blueprint, not server HUD.** The tech motif (14% of registry) almost universally renders as cyan-on-black sci-fi-hud, terminal output, or circuitry. goomimi.com renders tech as **Wallpaper magazine product schematic**: 1px Aquamarine orthographic-projection lines on Pearl-Blush, exploded-view spurs labelled in 9px JetBrains Mono. Tech as Bang & Olufsen brochure, not as cyberdeck dashboard. 7. **Etymology-driven brand reading.** "Goomimi" decomposes as *goo* (gel, bubble, soft transparency) + *mimi* (耳 — ear). Few CMassC designs commit to a brand etymology that fully colonises imagery, palette, and motif simultaneously. goomimi.com makes the etymology load-bearing: the koi swim because *goo*, the ear cross-section is the central vitrine because *mimi*, the bubble field exists because *goo*, and the entire site is a luxurious aural toolmaker because the brand is literally "ear-goo". 8. **Avoided patterns from frequency analysis.** This design refuses the registry's most overused signatures: **photography** (99% — replaced entirely by SVG/canvas), **gradient palette** (97% — replaced by complementary-anchored gradient-mesh, which is structural not decorative), **warm palette** (97% — preserved only as the Pearl-Blush half of the complementary pair, never as the dominant), **parallax** (95% — replaced by Z-static centred composition with peripheral atmosphere), **cursor-follow** (85% — entirely absent; the visitor is a museum-goer, not a cursor-driver), **card-grid** (85% — entirely absent; every "card" is a glass capsule with a circular border-radius, never a rectangle), **hand-drawn aesthetic** (96% — entirely absent; everything is precise glass and pearl). **Magnetic** (78%) is preserved but slowed by 4x so it reads as luxurious deceleration rather than snap. **Chosen seed (from assignment):** aesthetic: frutiger-aero, layout: centered, typography: kinetic-animated, palette: complementary, patterns: skeleton-loading, imagery: gradient-mesh, motifs: tech, tone: luxurious.