# Design Language for ggoomimi.com ## Aesthetics and Tone ggoomimi.com is **a private gemological cabinet in which a single ornament — neither earring nor brooch nor pendant, but something that contains all three behaviors — is being slowly examined under impossible physics**. The Korean word *꾸미미 (ggoomimi)* lives in the territory of dressing-up, adornment, the small ritual of *making something more itself*; the domain takes that idea and pushes it through a surrealist filter where the act of adornment is no longer applied to a body but to a piece of black calf leather laid flat on a vitrine table, and where the ornament being examined is **suspended one centimetre above its own shadow, rotating without a motor, and weighs nothing because it is partially a memory**. The aesthetic seed is **surreal** — only 1% in the entire registry, the rarest aesthetic in the catalogue — and the surrealism is committed to fully: not as a single Magritte gag, not as a Dali-curl ironic flourish, but as the operating logic of every page section. Things hover that should rest. Reflections precede their objects. Light arrives from the wrong corner. A faceted ruby casts a sapphire's blue inner reflection. The leather under everything has memory of pressure points that do not correspond to any current contact. And yet the experience is **luxurious** (tone, only 3%) — never campy, never spooky. The mood is the hush of a Geneva auction-house viewing room at 6 a.m. before the public arrives, lit by one warm spotlight and the cold blue feed of an instrumentation monitor. Voice is curatorial, technical, slightly devotional: *Specimen 04. Provenance unverified. Refractive index disagrees with itself.* The site whispers. It does not announce. The dreamlike suspension is delivered with the precision of a laboratory: every illusion is annotated in tech-mono typography with a callout that gives its supposed measurement, even when the measurement is impossible (`Δn = √-1`, `mass: 0.0000g`, `mohs: 11.5`). This collision — *poetic impossibility wearing a lab coat* — is the heartbeat of the site. The user should feel they have wandered into a private viewing where the lights are slightly too low, the air slightly too still, and the object on the table is doing something beautiful that they cannot quite explain to themselves later. ## Layout Motifs and Structure The layout commits to **centered** (83% in the registry — the most-used layout in the catalogue) but reframes the entire concept of centering so it stops resembling any other centered site. Where centered usually means *hero text + CTA stack on a vertical axis*, ggoomimi.com treats centering as **the single fixed gravitational axis of an obsessively orbital page**. There is exactly one perfectly centred element on every screen: **the Specimen** — a 480×480 viewport-locked rotation chamber containing one piece of jewellery, and that chamber never moves, never resizes, never leaves the optical centre of the viewport. Everything else — type, captions, ornament, light, even the leather background — is in **eccentric satellite orbit** around it. The structure is six numbered Examination Rooms, each occupying one full viewport. Scrolling does not move the Specimen vertically; it **rotates** the Specimen and crossfades the surrounding leather, light, and instrumentation. The user descends through the catalogue while the centred object stays exactly where it was, slowly turning, as though the building moves and the jewel is the only stationary point in the world. This is centred-as-still-point, not centred-as-stack — closer to a Catholic monstrance than to a landing-page hero. Around the central 480×480 Specimen frame, six **annotation rings** are placed at fixed polar coordinates: 1 o'clock (provenance), 3 o'clock (refractive measurements), 5 o'clock (mass and density), 7 o'clock (chromatic anomaly notes), 9 o'clock (cut taxonomy), 11 o'clock (private remark). Each annotation is a small block of tech-mono text 220 pixels from the Specimen's edge along its radial spoke, drawn with a hairline 0.5px gold rule connecting it back to a marked facet on the gem. The radials never change angle — only their content swaps as the user scrolls between Examination Rooms. Below the Specimen viewport, when the user scrolls past Examination Room 06, the layout *breaks its own rule once*: the Specimen disengages from optical centre and **drifts upward and to the left** by exactly 89 pixels, leaving an absence at the centre that is then filled by a small italic line of Cormorant text — *thank you for looking* — and the leather seam under the now-empty centre opens for the first time, revealing a thin dark line beneath. This single break of the centring discipline is the entire emotional climax of the page; it must be earned and it must happen exactly once. Negative space around the Specimen is treated as a **vitrine** — a notional glass cube whose presence is implied by four hairline gold corner brackets at the viewport's inner margins (top-left, top-right, bottom-left, bottom-right), each 64px long, 0.5px stroke, in muted gold, never animated. They establish the room. They never leave. A 12-column safety grid is honoured but invisible; the only visible grid is the **gemological measurement crosshair** that fades in for 1.2 seconds when a new Examination Room enters view, calibrating the Specimen against an XYZ axis system in pale blue, and then fading back out. Asymmetry comes from the orbital annotations, not the layout container. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available on Google Fonts CDN:** - **`Space Mono`** (weights 400, 700) — the principal voice of the site, fulfilling the **tech-mono** typography seed (8% in the registry, materially underused). Space Mono is used for every label, every measurement readout, every annotation ring, every navigation marker, and every single piece of metadata. It carries the curatorial-laboratory register: each character sits in its 0.6em em-square with the unhurried calm of a reference instrument printout. Letterspacing is increased to `0.08em` for all-caps labels and to `0.02em` for sentence-case captions, reinforcing the gemmological-report cadence. Critically, Space Mono is **never italicized** — italic mono looks like code; this site is not code; it is jewellery in the shape of code. - **`Cormorant Garamond`** (weights 300 italic, 500 italic) — used **only in italic, only at very large sizes (44px and above)**, and only for the six poetic Examination Room titles and the single closing line *thank you for looking*. Cormorant is the single concession to lyricism in an otherwise technical typographic system, and its appearance must remain rare enough that each instance feels like the lights dimming further. Its delicate italic ascenders are intentionally placed beside the engineered geometry of Space Mono — a couture gown standing next to a Vernier caliper. - **`Major Mono Display`** (weight 400) — used in exactly one place: the immense one-word page-load mark **`G G O O M I M I`** that appears as a 14vw all-caps mark in the upper-left corner during the first 800ms of the experience and then dissolves into the four corner brackets. It never returns. Major Mono Display is denser, more architectural than Space Mono, and contains the tiny hexagonal aperture that suggests the facet of a cut stone at very large sizes. **Palette — eight values, the **jewel-tones** seed (3% in the registry, deliberately underused):** The leather underlayer is the warm anchor; the gem palette is the cold luminous overlay; gold-leaf rule lines bind them. - `#0E0A14` — *Reliquary Black*. The deepest non-black, used for the vignette around the leather plate and for Space Mono body type at low emphasis. Slightly violet so that pure white feels gem-like against it. - `#3B1F2A` — *Oxblood Calf*. The leather plate's mid-tone, a tannic deep red-brown reminiscent of well-handled morocco leather; it forms the bed on which the Specimen rests. - `#5A2A36` — *Burnished Ruby*. The first jewel hue, used for the primary Specimen variant and for hover states on annotation rings. - `#1F3A5F` — *Sapphire Cabinet*. Cold deep blue used for the impossible inner reflection inside ruby specimens, and for the calibration crosshair that fades in between Examination Rooms. - `#0E5C4A` — *Emerald Provenance*. The third jewel hue; appears in the chromatic-anomaly annotation glyphs and as a thin glow under the Specimen's shadow at Room 04. - `#C5A572` — *Hairline Gold*. The 0.5px rule line colour binding annotations to facets and drawing the four corner brackets. Never solid-filled. Always hairline. - `#E8DCC4` — *Vellum Light*. Highest-emphasis tech-mono text and the tiny `+` calibration markers at the four cardinal compass points of the Specimen frame. - `#F4EFE6` — *Auction Room Light*. The off-white spot-light highlight on the Specimen at the 14-degree angle; used sparingly as a 4% opacity wash on the leather to suggest one warm overhead lamp. The eight values together describe a single unified mood: a vitrine of dark leather and dark velvet under one warm directional lamp, with the jewels themselves emitting cold internal light that disagrees with the warm external light. Pure black `#000000` is **forbidden** anywhere on the site; every dark surface is the violet-tinted Reliquary Black. Pure white `#FFFFFF` is also forbidden; every light surface is Vellum or Auction warmth. ## Imagery and Motifs There is **no photography** (a deliberate exclusion against the registry's 99% photography saturation) and no 3D rendering libraries. The Specimen is a hand-composed **SVG ornament** with internal facet polygons, gradients, and a single SMIL or CSS rotation, scored across six taxonomic variants. All other imagery is generated through CSS gradients and one tiling background image. **1. Leather Texture (imagery seed, 3% in the registry — claimed).** A single 800×800 tileable PNG, hand-painted in oxblood and reliquary black at roughly 24kb, depicting fine-grain morocco calf with the subtle pebbling pattern of bookbinder's leather. The texture has imperceptible memory marks — old pressure points where ornaments were once placed and removed — visible only when scroll position passes Examination Room 03. The texture is positioned absolutely behind the entire experience, with `background-attachment: fixed` and a faint warm radial vignette suggesting one overhead spotlight. **2. The Specimen — six SVG variants in rotation:** - **Specimen 01: *Helix-cut tourmaline that bends light backward*.** A 17-facet teardrop in burnished ruby with a single off-axis sapphire reflection that arrives 0.3s before the rotation reaches the angle that should produce it. - **Specimen 02: *Twin-lobed cabochon (asymmetric)*.** An ear ornament that should pair with itself but whose right half is 7% larger than its left, a surreal asymmetry tagged in tech-mono as `Δsymmetry: 0.07 ± dream`. - **Specimen 03: *Hexagonal step-cut emerald with internal weather*.** Six step-cut tiers; inside the central facet, a 1.4px-resolution emerald glow that *pulses with the user's scroll velocity* — slow scroll = slow pulse, fast scroll = no pulse at all (it freezes when chased). - **Specimen 04: *The reliquary chip*.** A single fragment of cut quartz with a hairline gold inclusion that spells, at maximum zoom, the four-character word `kept` in tech-mono — only readable to users who hover for >4 seconds. - **Specimen 05: *Chromatic anomaly briolette*.** A 24-facet pendant whose colour disagrees with itself: each facet renders a different jewel hue (ruby, sapphire, emerald, vellum) and the disagreement is annotated. - **Specimen 06: *Mass-zero ornament*.** A drop earring rendered with a gold setting and an absent stone. The stone is described in the annotations but not depicted. The shadow it casts on the leather is, however, fully drawn. **3. Abstract-tech motifs (motif seed, 2% in the registry — claimed).** Floating around the Specimen, never touching it, are **fourteen instrument glyphs**: hairline-gold SVGs at 16×16 to 48×48 px depicting impossible measuring devices — a caliper whose two jaws curve apart instead of together, a refractometer with a Möbius scale, a loupe whose lens contains the entire viewport in miniature, a balance scale whose left pan contains the right pan, a spectrometer whose readout is a single italic letter from Cormorant. They drift in slow Lissajous orbits at fixed radii from the Specimen, never crossing in front of it, only behind. They are the abstract-tech motif done as **scientific instruments that have wandered into a Magritte painting**. **4. The Disagreement Light (no registry equivalent).** A single warm radial gradient (Auction Room Light at 4% opacity) lives at one corner of the screen but its specular highlight on the Specimen lands as though the lamp were in the *opposite* corner. The contradiction is silent, deliberate, and never explained. It is the surrealist signature. **5. The Open Seam (no registry equivalent).** Beneath the leather plate, only revealed at the page's single climax, is a 0.5px hairline-gold horizontal line — the seam where the leather binding opens. It is drawn with `stroke-dasharray` and animated to draw from left to right over 2.4 seconds when the Specimen disengages from centre. It does not lead anywhere. It is simply seen. ## Prompts for Implementation Build ggoomimi.com as **one HTML document, one CSS file, one ES module, and three SVG asset files (`specimens.svg` for the six rotation variants, `instruments.svg` for the fourteen abstract-tech glyphs, `seam.svg` for the climactic open-seam line) plus one PNG (`calf.png`, the 800×800 tiling leather)**. No framework. No bundler. No WebGL. No canvas. No Lottie. No video. No 3D library. The entire experience runs from a Google Fonts CDN link, six SVG specimens, fourteen instrument glyphs, one PNG tile, and approximately 14kb of bespoke ES module logic. Bias every implementation decision toward **stillness with one moving figure at the centre**. The visual narrative is the user descending through six Examination Rooms while the Specimen at the centre rotates, transforms, and accumulates annotations. The Specimen is the only persistent figure; everything else fades through. There is **no navigation menu, no header, no footer, no pricing block, no call-to-action button, no testimonial section, no statistics grid, no logo wall, no FAQ, no team section**. The page does not invite. It permits viewing. The user enters, watches the rotation, descends six rooms, and leaves with the line *thank you for looking* still on screen. **Composition logic:** - The Specimen is `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);` and stays there for the entire scroll, with one exception (the climax break described above). - Examination Room transitions are driven by an IntersectionObserver firing on six full-viewport `
` elements. Entering a Room (a) crossfades the leather background's vignette warmth, (b) swaps the six annotation strings on the radial spokes with a 240ms staggered fade keyed by spoke angle, and (c) advances the Specimen's rotation to its next quarter-turn over 1800ms with a bezier `cubic-bezier(0.22, 0.61, 0.36, 1)`. - The Specimen's rotation is a CSS `@keyframes` controlled by a single CSS custom property `--spin-target` that the IntersectionObserver updates on Room entry. No requestAnimationFrame loops. No JS-driven per-frame work. **Animation patterns:** - **scale-hover** (pattern seed, 3% in the registry — claimed) is the only interactive motion permitted on individual elements. Each annotation ring scales from 1.0 to 1.04 over 320ms on hover, with a barely-perceptible companion animation: the hairline-gold rule connecting the annotation back to its facet *grows by 4 pixels along the radial spoke* during the same 320ms, as though the user's attention were physically pulling the connection taut. On the Specimen itself, hovering scales it from 1.000 to 1.018 over 700ms — almost imperceptible, restoring the breath of presence to a otherwise still object. - The Disagreement Light reveals itself on Specimen hover: the impossible specular highlight blooms by 12% over 1100ms while the warm corner gradient stays exactly where it was. The contradiction becomes visible only on attention. - The instrument glyphs orbit on slow Lissajous paths via 60-second CSS keyframe loops, with each glyph offset by a different phase and amplitude. They are essentially decorative furniture; the orbits are too slow to be noticed at first and too steady to be ignored after the first minute. - **No parallax** (forbidden — 95% in registry, the most overused effect). **No cursor-follow magnetic effects** (forbidden — 85% and 78%). **No spring physics** (forbidden — 84%). **No stagger entrance** (forbidden — 79%). The site rejects the five most overused animation patterns in the registry and lives entirely on scale-hover, slow rotation, and crossfade. **Storytelling pacing:** - Page load (0–800ms): the `G G O O M I M I` mark in Major Mono Display fades in at upper-left, the four corner brackets draw in from outside the viewport, the leather appears, the Specimen materializes at centre as a hairline gold outline that fills with colour over 600ms. - Examination Room 01 ([Provenance Unverified]): the user reads about a piece that arrived in a box without a name. Specimen rotates 90 degrees. - Examination Room 02 ([Refractive Disagreement]): the impossible reflection is annotated. Specimen rotates 180 degrees. - Examination Room 03 ([Mass = 0.0000]): the leather reveals its memory pressure points. Specimen rotates 270 degrees. - Examination Room 04 ([Chromatic Anomaly]): a glow appears beneath the Specimen's shadow. Specimen rotates 360 degrees and continues — the *second* full rotation begins. - Examination Room 05 ([Cut Taxonomy]): the fourteen instrument glyphs become individually visible against the leather; until now they were imperceptible. Specimen rotates to 450 degrees. - Examination Room 06 ([Private Remark]): the words *Specimen 04 was hers* appear in italic Cormorant beside the gem. Specimen completes 540 degrees. - Climax: Specimen disengages, drifts up-left 89px, the open seam draws beneath the now-empty centre, the closing italic line *thank you for looking* fades in at the absent centre. **Tone discipline:** every label is curatorial, never marketing. Tech-mono labels read like instrument printouts: `IDX 01 / Δn 1.762 / mohs 9.0 / cut: helical / origin: undeclared`. Italic Cormorant lines are sparse and lyrical: *the gem keeps its own hours*. Never use the word "premium," never use the word "exclusive," never use a button. The experience is a viewing, not a sale. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating any other CMassC site and to lean into the rarest patterns surfaced by the frequency analysis: 1. **Surreal as operating logic, not as decorative gag.** The aesthetic *surreal* is at 1% in the entire 210-design registry — the rarest aesthetic in the entire vocabulary. ggoomimi.com does not use surrealism as a single flourish (a melting clock, a floating eye); it uses surrealism as the consistent rule-set of the entire physics layer: gravity is suspended, reflections precede objects, lamps cast light from the wrong corner, gemstones disagree with themselves. The surrealism is delivered with a curatorial-laboratory voice, which is the decisive register — Magritte in a white coat, not Dali on a beach. 2. **Centred as still-point, not as stack.** The layout *centered* is the most-used in the registry (83%), and ggoomimi.com claims it explicitly to demonstrate that an over-used pattern can be made unrecognisable through reframing. Where every other centred site stacks hero text and CTAs vertically, ggoomimi.com pins one immobile rotating Specimen at the optical centre and orbits everything else around it. The centred axis becomes a gravitational law rather than a layout convenience. The single one-time break of this discipline at the climax is the page's emotional payload. 3. **Five most-overused animations rejected outright.** The registry shows parallax at 95%, cursor-follow at 85%, spring at 84%, stagger at 79%, magnetic at 78%. ggoomimi.com refuses all five and lives on the underused **scale-hover** at 3%, plus crossfade and slow CSS rotation. The page's stillness is its statement. 4. **Tech-mono typography held to a curatorial cadence (8% in registry).** Tech-mono is rarely deployed as a luxury voice in the registry — it usually carries cyberpunk or terminal aesthetics. Here it is used as the cool precise voice of a Geneva auction house's instrument printouts, never italicised, always lab-spec, paired only at very large sizes with italic Cormorant Garamond. The collision is the type story. 5. **Jewel-tones palette built around violet-tinted blacks (3%).** Pure `#000000` and pure `#FFFFFF` are forbidden. Every dark is Reliquary Black `#0E0A14` (slightly violet); every light is Auction Room Light `#F4EFE6` (slightly warm). The eight-value palette runs Oxblood Calf → Burnished Ruby → Sapphire Cabinet → Emerald Provenance under a single Hairline Gold rule, with the jewels emitting cold light *against* a warm leather bed. 6. **Leather-texture imagery as the persistent ground (3%).** The leather is not a decorative accent; it is the entire backdrop, fixed-position, with one tile and a fixed warm vignette. The hand-painted memory pressure points that emerge at Examination Room 03 turn the leather into a slowly-revealed second specimen — the leather has been a record-keeper all along. Leather-texture is normally used as a small accent in registry sites; here it is the page's floor. 7. **Abstract-tech motifs reframed as instruments-in-a-Magritte (2%).** Where abstract-tech in the registry usually means circuit-board glyphs and HUD graphics, the fourteen orbiting instruments at ggoomimi.com are *impossible* measurement devices — calipers that curve apart, refractometers with Möbius scales, balance scales whose left pan contains the right. They render the abstract-tech category as scientific instruments dreaming. 8. **Luxurious tone delivered through hush, not opulence (3%).** The luxurious tone in the registry is usually carried by gold gradients, dark velvet drop-shadows, and serif display screams. ggoomimi.com delivers luxury through *what it refuses*: no buttons, no testimonials, no pricing, no logo walls, no headers, no footers, no calls-to-action, no statistics, no FAQ, no team. The luxury is the stillness and the permission to look. The voice never sells. 9. **One-time break of the discipline as emotional climax.** Every other rule on the site is held without exception except for the moment after Examination Room 06, where the Specimen drifts 89 pixels up-left from the centre and the seam beneath the leather opens for the first time. This single permitted exception is the affective payload of the site — the moment the curator turns away and the user is left alone with the closing line *thank you for looking* in italic Cormorant Garamond. 10. **Domain-meaning honoured at the deepest layer.** *꾸미미 (ggoomimi)* means *to adorn*, *to dress up*, *to make something more itself*. The site is about adornment in its purest form: a single object being looked at, rotated, annotated, and finally let go. The Korean root is not displayed in Korean characters anywhere — it is enacted in the entire act of viewing. The page is itself a piece of adornment; the user, briefly, is the body it adorns. **Documented chosen seed:** *aesthetic: surreal, layout: centered, typography: tech-mono, palette: jewel-tones, patterns: scale-hover, imagery: leather-texture, motifs: abstract-tech, tone: luxurious*. **Avoided patterns from frequency analysis:** parallax (95%), cursor-follow (85%), spring (84%), stagger (79%), magnetic (78%), full-bleed (93%), card-grid (85%), photography (99%), hand-drawn aesthetic (96%), warm palette (97%), gradient palette (97%), mono typography general-purpose (94%), pastoral-romantic tone (34%), warm-inviting tone (27%) — all explicitly excluded in favour of the rarer seed values listed above.