# Design Language for ggoomimi.com
## Aesthetics and Tone
ggoomimi.com channels the electric rush of a luxury fashion atelier that has been taken over by a maximalist sculptor working in Carrara marble and neon glass. The aesthetic is **dopamine-classical** -- the serotonin hit of saturated neon color meeting the restrained grandeur of Greco-Roman sculptural forms. Imagine walking into a gallery where marble busts of emperors are bathed in hot pink and electric violet uplighting, where fluted Ionic columns cast shadows across floors painted in acid yellow, where every surface vibrates between ancient permanence and contemporary euphoria.
The mood draws from three specific references: (1) the installations of Jeff Koons where classical forms are rendered in hyper-reflective surfaces, (2) the Versace runway aesthetic where baroque ornament meets synthetic color saturation, and (3) the visual language of Korean beauty (K-beauty) packaging -- ggoomimi being a Korean word (꾸미미, roughly "one who decorates/adorns") -- where maximalist color gradients wrap around minimal product forms. The result is a site that feels like unwrapping an expensive gift in a museum gift shop: the thrill of surface luxury anchored by genuine aesthetic weight.
The tone is **professional** but charged with confident energy -- not the cold professionalism of a law firm, but the poised professionalism of a creative director presenting a bold collection. Every element communicates deliberate excess under precise control. There is no irony, no winking self-awareness. The dopamine rush is delivered with complete seriousness.
## Layout Motifs and Structure
The layout follows a **z-pattern** reading path, guiding the eye in a deliberate zigzag from top-left to top-right, diagonally to bottom-left, then across to bottom-right -- repeating this pattern as the user scrolls through successive viewport-height sections. Unlike conventional z-patterns that rely on simple text-image alternation, each z-stroke is architecturally distinct:
**Section Architecture:**
- **Section 1 (Entrance Hall):** Full-viewport. The z-pattern begins at the top-left with the wordmark "ggoomimi" in Playfair Display at 6rem, travels right to a floating marble texture fragment (a cropped image of veined Calacatta marble rendered as a CSS clip-path polygon), then descends diagonally to the bottom-left where a brief tagline sits in DM Sans at 1.1rem. The bottom-right holds a subtle animated element: a neon ring (CSS border-radius + box-shadow in #FF2D95) that pulses with a spring-physics easing function. The entire section sits against a deep charcoal (#1A1A1E) background with a very faint marble vein pattern achieved through a semi-transparent SVG overlay at 3% opacity.
- **Section 2 (Gallery Corridor):** The z-path reverses. Top-left holds a mixed-media composition -- a photograph overlaid with vector linework and a translucent neon gradient wash. Top-right contains a text block (3-4 lines max) in Playfair Display Italic at 1.5rem. The diagonal crosses to bottom-left where a second mixed-media composition mirrors the first but with inverted color treatment. Bottom-right anchors with a decorative marble capital (Corinthian order) rendered as a high-contrast duotone image in #FF2D95 and #1A1A1E.
- **Section 3 (Sanctum):** Returns to the original z-direction. This section introduces a split composition: the left 55% is a full-height mixed-media collage (photography + vector + marble texture layering), while the right 45% contains stacked text blocks with generous vertical spacing (2.5rem between paragraphs). A thin neon rule (#00F0FF, 1px) divides the two zones, running the full height with a spring-animated entrance (grows from center outward).
- **Section 4 (Coda):** A single centered element breaking the z-pattern to signal closure -- the wordmark repeated at 3rem with a marble texture fill achieved through `background-clip: text`, sitting above a row of three small circular thumbnails (mixed-media previews) arranged with 4rem gaps.
**Grid System:** 12-column grid with 24px gutters. Z-pattern sections use columns 1-5 and 8-12 as primary content zones, with columns 6-7 serving as a "breathing channel" that is either empty or contains thin decorative vertical rules. On mobile (below 768px), the z-pattern collapses into a single-column vertical flow, but each former z-node retains its individual animation timing, creating a staggered waterfall effect.
## Typography and Palette
**Typography:**
- **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 700 (Bold) and 700 Italic. This high-contrast Didone-revival typeface carries the authority of classical engraving while remaining legible at large sizes. Used at 3rem-7rem for section titles and the primary wordmark. `letter-spacing: -0.03em`, `line-height: 0.92`. The extreme contrast between thick and thin strokes mirrors the tension between marble solidity and neon ephemerality that defines the entire design language. Headlines are always set in sentence case.
- **Body / Secondary:** "DM Sans" (Google Fonts) -- weights 400 (Regular) and 500 (Medium). A geometric sans-serif with subtle humanist touches that provides clean readability without the coldness of pure geometric faces. Used at 0.95rem-1.2rem for body text, captions, and navigation labels. `letter-spacing: 0.01em`, `line-height: 1.65`. The slightly wide letter-spacing opens up the text against dark backgrounds, ensuring legibility even when competing with vibrant surrounding elements.
- **Accent / Monospace:** "JetBrains Mono" (Google Fonts) -- weight 300 (Light). Used sparingly for numerical data, timestamps, or small technical labels. At 0.8rem with `letter-spacing: 0.05em`, it provides a subtle counterpoint of precision against the decorative opulence of the display type. Always set in uppercase.
**Palette:**
The palette juxtaposes classical neutrals with dopamine-trigger neon accents:
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| **Background Primary** | Obsidian | #1A1A1E | Main background, deep and warm-leaning black |
| **Background Secondary** | Marble Dust | #F0EDE8 | Light sections, text-heavy areas, inversions |
| **Neon Primary** | Fuchsia Shock | #FF2D95 | Primary accent, CTAs, hover states, key highlights |
| **Neon Secondary** | Cyan Volt | #00F0FF | Secondary accent, rules, underlines, glow effects |
| **Neon Tertiary** | Acid Lemon | #D4FF00 | Sparingly used for tertiary highlights, active states |
| **Text Primary** | Pearl | #E8E4DF | Primary text on dark backgrounds |
| **Text Secondary** | Smoke | #9A9590 | Captions, metadata, subdued text |
| **Marble Vein** | Rose Gold | #C4A07A | Decorative veining in marble textures, border accents |
Neon colors are never used at full opacity for large fills -- they appear as thin lines (1-2px rules), text highlights (`background: linear-gradient(transparent 60%, rgba(255,45,149,0.25) 60%)`), box-shadow glows (`box-shadow: 0 0 30px rgba(255,45,149,0.3)`), and small decorative elements. The restraint in neon application is critical: it must feel like uplighting in a gallery, not a nightclub.
## Imagery and Motifs
**Mixed-Media Compositions:**
The primary imagery approach is mixed-media -- layered compositions that combine three distinct visual registers:
1. **Photography Layer:** Desaturated, high-contrast black-and-white photographs (portraits, objects, textures) processed through CSS filters: `filter: grayscale(1) contrast(1.3) brightness(0.9)`. These provide the foundational visual weight, the "marble" of the composition.
2. **Vector Overlay Layer:** Thin geometric linework (circles, rectangles, diagonal rules) drawn in SVG and positioned absolutely over the photography. Lines are 1px in #00F0FF or #FF2D95, often with `stroke-dasharray` animation creating a drawing-on effect. These provide the "neon" of the composition.
3. **Texture Layer:** Semi-transparent marble texture overlays (white Calacatta marble veining on transparent backgrounds) applied via CSS `mix-blend-mode: overlay` at 8-15% opacity. These unify the photographic and vector layers with a consistent material quality.
**Marble-Classical Motifs:**
Marble is the defining decorative motif. It appears in multiple forms:
- **Background Veining:** Subtle SVG patterns of marble veins (thin, branching lines in #C4A07A at 4-6% opacity) overlaid on the #1A1A1E background. These are barely perceptible but create a subliminal sense of material richness.
- **Text Fills:** The wordmark and select headlines use `background-clip: text` with a marble texture background (photograph of real marble processed to high contrast), creating text that appears carved from stone.
- **Section Dividers:** Instead of horizontal rules, sections are separated by thin strips (8px tall) showing a stretched marble texture with a neon glow along one edge (`box-shadow: 0 2px 20px rgba(0,240,255,0.2)`).
- **Decorative Capitals:** Small images of classical Corinthian or Ionic column capitals, processed to duotone (#FF2D95 + #1A1A1E), used as ornamental markers at the start of key text sections -- functioning like illuminated initials in a medieval manuscript, but through a neon-classical lens.
**Icon System:**
No traditional icons. Instead, small geometric shapes (circles, triangles, squares) in neon outline serve as bullet points and navigational markers. A circle outline in #FF2D95 replaces the hamburger menu. A small triangle in #00F0FF serves as a scroll indicator.
## Prompts for Implementation
**Full-Screen Narrative Experience:**
The site must be experienced as a slow, deliberate walk through a gallery of rooms. Each viewport-height section is a complete environment. There is no persistent header or navigation bar. The only persistent element is a thin 2px line along the left edge of the viewport in #FF2D95, which serves as a scroll progress indicator (its height maps to scroll percentage using `IntersectionObserver` and CSS custom properties).
**Spring-Physics Animations:**
All animations use spring-physics easing rather than cubic-bezier curves. Implement using CSS `linear()` easing function with keyframes that simulate spring dynamics (overshoot, settle, slight bounce). Specific behaviors:
- **Element Entrances:** Elements entering the viewport slide from their z-pattern origin point (e.g., an element at top-left slides from further left and slightly above) with a spring curve that overshoots by 8% before settling. Duration: 800ms. Stagger delay between elements within a section: 120ms.
- **Hover States:** Neon glow intensifies on hover with a spring response -- the glow quickly overshoots peak intensity then settles to a sustained level. `box-shadow` transitions from `0 0 0px` to `0 0 40px rgba(255,45,149,0.4)` to resting `0 0 25px rgba(255,45,149,0.3)`. Duration: 400ms.
- **Scroll Transitions:** As sections enter the viewport, marble texture overlays shift position with a subtle parallax (moving at 0.3x scroll speed) using spring-physics for momentum. This creates a "living marble" effect where the veins seem to slowly crawl across the surface.
- **Neon Line Drawing:** SVG vector overlays use `stroke-dashoffset` animation triggered by `IntersectionObserver`. Lines draw themselves across the viewport over 1200ms with a spring-eased acceleration (fast start, gentle overshoot at the end).
**Z-Pattern Scroll Choreography:**
As the user scrolls between sections, the z-pattern direction alternates. Implement a scroll-driven animation sequence where:
1. Section enters viewport from below
2. Z-pattern elements animate in sequence: top-left (0ms) -> top-right (150ms) -> bottom-left (300ms) -> bottom-right (450ms)
3. When the z-direction reverses in the next section, the animation sequence also reverses: top-right first -> top-left -> bottom-right -> bottom-left
4. This alternation creates a visual rhythm that mirrors the z-reading path
**Mixed-Media Layer Assembly:**
Each mixed-media composition should be built from three stacked `div` elements with absolute positioning:
- Base: `` with grayscale filter
- Middle: `