# Design Language for iGGi.boo ## Aesthetics and Tone iGGi.boo is a small, glowing apparition that lives between a museum hall and a midnight arcade. The aesthetic is **ethereal** — light feels suspended in water, edges dissolve into haze, and nothing has a hard shadow because nothing is fully solid. But this is not pale, washed-out ethereal: it is **duotone ethereal**, where the entire world is rendered in two charged colors that bleed into each other like a long-exposure photograph of a passing ghost. Picture a marble bust of a Greek goddess photographed under a humming neon sign, then double-exposed with drifting fog: that is the visual thesis. The tone of voice is **conversational** — iGGi talks to the visitor the way a curious roommate would, in lowercase asides and gentle questions. "hey. you found me. weird, right?" Headlines are short sentences, not slogans. Body copy uses second person, contractions, and the occasional trailing ellipsis. The site never sells; it confides. Even section transitions are written like someone narrating their own daydream out loud. Mood keywords: luminous, weightless, half-remembered, intimate, hushed-but-alive. Think of the moment a projector warms up in a dark room — the dust catches the beam, the image hasn't resolved yet, and everything is possibility. ## Layout Motifs and Structure The skeleton is a **broken grid**: a 12-column lattice is established and then deliberately fractured. Columns shift mid-page, content blocks hang off the edge of the viewport, captions float in the gutter where a margin should be, and a single image will straddle two "pages" of vertical scroll as if it forgot where the seam was. Alignment lines are visible as faint 1px hairlines that occasionally don't line up — the imperfection is the point. Structure, top to bottom, as one continuous full-screen scroll narrative: 1. **The Apparition** — full-bleed first screen. iGGi's name materializes letter by letter in geometric capitals out of a soft duotone haze. A single line of conversational copy fades in below, off-center, hanging in the lower-left gutter. 2. **The Marble Hall** — a broken-grid gallery where classical marble fragments (a hand, a draped shoulder, an eye) are arranged like artifacts behind glass, each annotated with a floating handwritten-feeling caption that *slides in* from the side as it enters view. 3. **What iGGi Is** — three asymmetric text panels offset diagonally down the page, each one a short conversational paragraph. The grid visibly breaks here: the third panel pushes past the right edge and gets clipped. 4. **The Glow Room** — a darker passage. Neon-glow shapes drift slowly behind a near-black field; text reverses out in the lighter duotone hue. This is the emotional low point / quiet center. 5. **Reveal Strip** — a horizontal band where layered panels *slide* over one another on scroll, each revealing a new fragment of imagery beneath, like wiping condensation off a mirror. 6. **The Send-Off** — minimal closing screen. One last conversational line, the wordmark dimming back into haze, a single quiet link. No CTA wall, no form, no pricing. No header nav bar in the traditional sense — instead a thin vertical progress filament runs down the left edge, glowing brighter as you descend, with three barely-there dot-markers you can click. Footer is a single centered line of small geometric type. ## Typography and Palette **Display / wordmark:** "Questrial" (Google Fonts) — a clean geometric near-monoline sans with circular bowls; used at huge sizes, wide letter-spacing (0.18em), for the iGGi.boo wordmark and section titles. As a heavier geometric companion for the largest hero treatment, "Jost" (Google Fonts) at weight 200–300 — Jost is the modern Futura revival, giving us the **futura-geometric** voice (perfect circles, single-story 'a', high-waisted lowercase). **Body / conversational copy:** "Jost" (Google Fonts) at weight 300–400 for paragraphs — keeps the whole page in one geometric family so the tone stays soft and even. Line-height generous (1.8), measure narrow (about 52ch), so reading feels like listening. **Captions / annotations:** "Quattrocento" (Google Fonts), italic — a humanist serif used tiny (0.78rem) and tracked-out for the floating museum-label captions, providing a whisper of classical-gallery contrast against all the geometry. **Palette — strict duotone with one accent:** - `#0E0B1A` — *Void Indigo*, near-black base for the Glow Room and footer; everything emerges from this. - `#F3EFE6` — *Marble Mist*, warm off-white paper for the bright screens; the "lit" side of the duotone. - `#7B6CF6` — *Spectral Violet*, the primary duotone tint — every photographic/marble image is mapped between this and Marble Mist. - `#23E0C8` — *Neon Aqua*, the second duotone tint and the glow color; used for the progress filament, link underlines, and the soft bloom around drifting shapes. (Image duotones blend between Spectral Violet shadows and Neon Aqua highlights for the iridescent ghost effect.) - `#C8C2D8` — *Haze Grey*, the muted in-between used for hairline grid lines, disabled states, and faint dust-texture overlays. Color logic: bright screens = Marble Mist ground + Spectral Violet type + Neon Aqua accents. Dark screens = Void Indigo ground + Marble Mist type + Neon Aqua glow. The duotone images are the only "photography" on the site and they sit in both modes. ## Imagery and Motifs - **Marble-classical fragments** as the recurring iconography: a Hellenistic hand, a section of drapery, a single carved eye, a fluted column stub, a laurel wreath in low relief. Always cropped tight, always **duotone-mapped** (violet→aqua) so the stone looks lit from inside. They are the "ghosts" iGGi keeps company with. - **Neon-glow blobs** — soft, oversized, blurred radial shapes in Neon Aqua and Spectral Violet that drift behind content at 0.3–0.6× scroll speed, like bokeh from a sign just out of frame. Slight chromatic-aberration fringe on their edges. - **The haze layer** — a subtle animated grain + low-opacity gradient fog that sits above the background and below the text on every screen, so the whole site feels like it's behind glass that's just slightly fogged. - **Hairline grid ghosts** — the broken grid's structure rendered as faint Haze Grey lines that fade in at section boundaries and intentionally misregister by a few pixels. - **Letter-materialization** — type that doesn't fade uniformly but resolves out of blur, as if a slow lens is finding focus. - **Light leaks** — occasional diagonal soft-edged streaks of Neon Aqua crossing a screen, like a film frame caught at the edge of a reel. - No literal mascot illustration, no faces beyond the marble eye, no logos-of-clients, no screenshots. ## Prompts for Implementation - Build it as **one continuous vertical scroll narrative** — six "screens," each `min-height: 100vh`, that read as chapters of iGGi introducing itself. The visitor scrolls through a mood, not a funnel. - Establish a CSS Grid 12-column lattice, then **break it on purpose**: use negative margins, `grid-column` spans that overflow the container, and items absolutely positioned into the gutters. Render faint hairline guides with a fixed pseudo-element overlay that you can toggle; let some guides be 1–2px off from where content actually sits. - **slide-reveal is the signature interaction**: on scroll, panels translate horizontally to uncover imagery beneath them (clip-path inset or stacked layers with `transform: translateX`). Use it for the Marble Hall captions (slide in from the gutter) and the Reveal Strip (panels wiping across like clearing a foggy mirror). Drive with `IntersectionObserver` + `requestAnimationFrame`, gentle easing (`cubic-bezier(0.16,1,0.3,1)`), respect `prefers-reduced-motion` by snapping to final state. - Implement the **duotone images in CSS**: `filter: grayscale(1) contrast(1.1)` on the ``, then a `mix-blend-mode: screen` overlay of a `linear-gradient(#7B6CF6, #23E0C8)` and a `mix-blend-mode: multiply` layer in `#0E0B1A` — or use an inline SVG ``/`` duotone filter for crisper mapping. Every photographic asset must pass through this. - **Neon-glow drifters**: 4–6 large blurred radial-gradient divs (`filter: blur(80px)`, `opacity: 0.45`, `mix-blend-mode: screen`), each translated on scroll at a different parallax rate and given a slow 30–60s `@keyframes` float/rotate. Add a faint `box-shadow`/`drop-shadow` bloom in Neon Aqua to the wordmark and links. - **Letter-materialization for the wordmark**: split "iGGi.boo" into spans; on load, animate each from `filter: blur(14px); opacity: 0; letter-spacing: 0.4em` to focused, staggered ~70ms apart, geometric caps, final tracking 0.18em. - **Haze overlay**: a fixed full-viewport layer combining a tiling SVG/canvas grain at ~4% opacity and a slowly shifting low-opacity radial fog gradient; `pointer-events: none`, sits z-index above backgrounds, below text. - **Left-edge progress filament**: 2px fixed vertical line, height grows with scroll progress, color interpolates Haze Grey → Neon Aqua, with a soft glowing tip. Three clickable dot-markers anchor to the major chapters; clicking smooth-scrolls. - **Voice in the markup**: write all copy lowercase, conversational, second person — short sentences, ellipses, gentle questions. Headlines are sentences ("hey. you found me." / "i mostly keep company with old marble." / "this is the quiet part."). Never imperative-CTA phrasing. - **Light leaks**: occasional `::before` diagonal `linear-gradient` streaks in `rgba(35,224,200,...)` that animate across a section once when it enters view. - AVOID: a CTA-heavy layout, pricing blocks, stat/number grids, testimonial carousels, feature-icon rows, a sticky top nav bar, hard drop-shadows, pure-black-on-pure-white. The closing screen is deliberately quiet — one line, one dim link, then haze. - Performance/accessibility tradeoffs are out of scope; prioritize the immersive, half-lit, museum-meets-arcade atmosphere above all. ## Uniqueness Notes Differentiators from other designs in this batch: 1. **Strict two-tone-plus-one-glow palette** (Void Indigo / Marble Mist / Spectral Violet / Neon Aqua) applied uniformly to *every* image via CSS/SVG duotone mapping — most designs here lean warm-gradient; this one is a deliberately cool, charged duotone with an iridescent ghost shimmer, not a rainbow mesh. 2. **Marble-classical fragments rendered as neon-lit duotone "ghosts"** — fusing museum-relief imagery with arcade glow is a pairing not used elsewhere; the marble is never beige/stone-colored, it's violet-to-aqua and lit from within. 3. **Genuinely broken 12-column grid** with visible-but-misregistered hairline guides and content that overflows the viewport edges — a structural fracture used as an aesthetic, distinct from the centered/card-grid/full-bleed defaults dominating the set. 4. **slide-reveal as the load-bearing interaction** (panels wiping across to uncover imagery, captions sliding from the gutter) rather than the near-ubiquitous parallax/cursor-follow/spring/magnetic stack — slide-reveal sits at ~3% usage in the frequency analysis. 5. **Lowercase confiding voice** — the entire site is written as quiet first/second-person asides ("hey. you found me. weird, right?") with no CTA grammar anywhere; conversational tone is only ~7% in the set and rarely committed to this fully. Chosen seed/style: **aesthetic: ethereal, layout: broken-grid, typography: futura-geometric, palette: duotone, patterns: slide-reveal, imagery: neon-glow, motifs: marble-classical, tone: conversational** Avoided per frequency analysis: hand-drawn/glassmorphism aesthetics (96% / 67%), card-grid + centered + full-bleed layout defaults (87% / 85% / 93%), warm + gradient palettes (98% / 98%), photography imagery (98%), parallax + cursor-follow + spring + magnetic + stagger interaction stack (95% / 88% / 86% / 81% / 80%), and mono/humanist typography defaults (95% / 54%) — replaced with a Jost/Questrial/Quattrocento geometric trio.