# Design Language for iggi.dev

## Aesthetics and Tone

iggi.dev is a **seapunk editorial laboratory** — a place where deep-ocean bioluminescence meets the authority of a scientific monograph. Imagine a marine research vessel's chart room, redesigned by a fashion-forward oceanographer who also edits a high-concept print magazine: copper depth gauges, hand-inked specimen plates of algae and coral polyps rendered in crystalline geometric facets, spread across broadsheet-format pages drenched in teal-to-violet gradients that pulse like chemiluminescent blooms in a midnight trench. The tone is **authoritative but otherworldly** — never clinical, never decorative for its own sake. Every visual choice earns its place in the taxonomy of the deep.

The prevailing mood is **controlled sublime**: the overwhelming scale of the ocean rendered navigable through rigorous editorial structure. Botanical illustration meets seapunk iridescence — coral and kelp drawn in precise stippled linework, then overlaid with prismatic crystalline facets that catch an imaginary light source deep underwater. The site does not feel like a portfolio. It feels like the opening spread of a *Nature* deep-dive special, formatted for the web by someone who grew up on early-00s Tumblr seapunk aesthetics.

Key visual ingredients:
- **Crystalline geometry on organic form**: botanical and marine specimen illustrations broken into Voronoi-faceted crystal overlays, as if sea glass has grown over living coral
- **Blur-focus depth staging**: foreground elements in tack-sharp focus; background botanical layers dissolve into chromatic blur, simulating depth-of-field at 200m
- **Analogous palette from teal through violet**: the narrow color band of bioluminescent ocean light, never warm, never brown
- **Bebas Neue for authority**: massive condensed display type that commands the spread like a deep-sea research caption
- **Magazine-spread spatial logic**: two-page broadsheet composition, content weighted to the outside margins with a central gutter that breathes

## Layout Motifs and Structure

The structural metaphor is the **two-page scientific magazine spread**, opened flat — left page holds the dominant specimen illustration, right page carries the text block, with the gutter as a charged empty space that the eye crosses deliberately.

**Grid architecture:**
- Desktop (≥1200px): 12-column grid at 80px column, 24px gutter. Left 5 columns: full-bleed illustration zone. Right 6 columns: typographic essay zone. Center column 6: gutter/breath zone.
- Tablet (768–1199px): illustration zone collapses to a 3:2 aspect-ratio strip at top; text below in single measure.
- Mobile (<768px): single column, illustration as a 100vw full-bleed header that bleeds edge-to-edge.

**Spatial logic:**
- **Asymmetric weight**: the illustration zone is always heavier — it occupies 55% of the horizontal viewport, the text 45%. This mirrors the proportions of a *National Geographic* double-truck.
- **Depth staging**: three z-layers. Layer 0 (background): blurred botanical pattern at 40% opacity. Layer 1 (mid): crystalline facet overlays with CSS `backdrop-filter: blur(2px)` and `mix-blend-mode: screen`. Layer 2 (foreground): sharp illustration and text at full opacity.
- **Crystalline panel breaks**: sections are separated not by horizontal rules but by a jagged crystalline edge — an SVG path that looks like a cross-section of geode quartz, cutting diagonally across the full viewport width.
- **Negative space as ocean**: large empty zones of deep teal `#0D2B35` are not empty — they are the ocean itself, implied by the gradient that slowly lightens toward the illustration edge.
- **No sticky navigation**: the site scrolls as one uninterrupted narrative dive. A depth indicator (thin vertical line at far right with a percentage marker) is the only persistent chrome.

**Section rhythm (single vertical scroll, no page breaks, no tabs):**
1. Hero spread — full viewport, left illustration / right headline stack
2. Specimen section — three crystalline specimen cards in a horizontal triptych
3. Essay section — long-form text column with botanical marginalia
4. Gallery — horizontal scroll strip of six full-bleed illustration frames
5. Coda — full-bleed botanical illustration fading to black, single centered display line

## Typography and Palette

**Typography (Google Fonts only):**

- **Display / headlines**: [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — condensed, uppercase, brutally authoritative. Used at `clamp(72px, 10vw, 160px)` for the hero headline and `clamp(36px, 5vw, 72px)` for section titles. Tracking `0.04em`. Letter-spacing gives it the feel of a typeset research caption. Weight 400 (Bebas Neue has only one weight — its natural mono-weight is the point).
- **Body / essay text**: [DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display) for pull quotes and subheads at 24–32px. Brings Didot-adjacent authority without being precious.
- **Running text**: [Source Serif 4](https://fonts.google.com/specimen/Source+Serif+4) variable, weight 300–600, at 18px / 1.7 line-height. A scholarly workhorse with optical size axis — use `font-optical-sizing: auto` to activate the text variant.
- **Labels / metadata / UI**: [Space Mono](https://fonts.google.com/specimen/Space+Mono) at 11–13px, tracking `0.12em`, uppercase. Used for specimen labels, coordinate readouts, and the depth indicator. The monospace grid echoes scientific data printouts.

**Palette — analogous teal-to-violet bioluminescent band:**

| Role | Name | Hex |
|------|------|-----|
| Deepest ground | Abyssal black-teal | `#060E12` |
| Primary background | Midnight trench | `#0D2B35` |
| Mid-depth | Hadal teal | `#0F4D5C` |
| Glow accent | Bioluminescent cyan | `#1AD9C8` |
| Mid-spectrum | Cephalopod violet | `#3D2B6E` |
| Highlight | Prismatic lavender | `#8B6FC2` |
| Crystalline edge | Pale aquamarine | `#A8EDE5` |
| Text / light | Phosphor white | `#E8F7F5` |

All colors stay within the analogous arc from `195°` (cyan-teal) through `270°` (violet). No warm tones, no earth tones, no neutrals except `#060E12` as a near-black anchor.

**Gradient system:**
- Hero background: `radial-gradient(ellipse at 30% 60%, #3D2B6E 0%, #0D2B35 50%, #060E12 100%)`
- Crystalline facet highlight: `linear-gradient(135deg, #A8EDE5 0%, #1AD9C8 40%, #3D2B6E 100%)`
- Text zone backing: `linear-gradient(180deg, #0D2B35 0%, #0F4D5C 100%)`

## Imagery and Motifs

**Botanical-marine illustration style:**
All visual specimens are hand-drawn-style botanical illustrations of deep-ocean flora and fauna — kelp fronds, brain coral cross-sections, ctenophore (comb jelly) silhouettes, feather-star crinoids, abyssal fan coral. Rendered as if from a 19th-century naturalist's field notebook, but executed in the site's bioluminescent palette: stippled linework in `#A8EDE5` on deep teal grounds, with luminescent glow halos in `#1AD9C8`.

**Crystalline facet overlay motif:**
Each botanical illustration is overlaid with a Voronoi-tessellation mesh — a network of irregular polygons that look like crystal faces or sea-glass facets. The mesh is implemented as an inline SVG `<polygon>` grid. Each face:
- Has a `fill` of one of the three deepest palette colors at 20–40% opacity
- Has a `stroke` of `#1AD9C8` at 1px and 60% opacity
- On hover: a single face illuminates — `fill` transitions to `#1AD9C8` at 50% opacity over 400ms ease-out, simulating a bioluminescent flash

**Blur-focus depth staging:**
- Background layer: CSS `filter: blur(8px) saturate(1.4)` on the full botanical background illustration
- Mid-layer crystalline mesh: `backdrop-filter: blur(2px)` with `mix-blend-mode: screen`
- Foreground illustration: no filter, full sharpness, drop shadow `0 0 40px rgba(26, 217, 200, 0.3)`

**Crystalline section dividers:**
SVG `<path>` elements spanning 100vw that look like a geode crack — a jagged polyline at roughly 60% of the viewport height, cutting left-to-right with ~8 angular segments. Stroke: `#1AD9C8` at 80% opacity, 1.5px. The path is animated on scroll: it "draws itself" via `stroke-dasharray/stroke-dashoffset` as the section enters the viewport.

**Depth indicator chrome:**
A vertical `2px` line at `right: 24px`, running 80% of viewport height, in `#0F4D5C`. A small `#1AD9C8` capsule marker tracks scroll position, labeled with current depth in meters (a fictional mapping: 0% scroll = 0m, 100% = 4000m). This is pure Space Mono at 11px.

**Specimen cards (triptych):**
Three portrait-oriented cards `280×420px`, each featuring one botanical specimen illustration, a Bebas Neue specimen name at top, a Space Mono taxonomy string below the illustration, and a DM Serif Display single-sentence description. Card background: `#0F4D5C` with a 1px `#1AD9C8` border and `box-shadow: 0 0 20px rgba(26,217,200,0.2)`.

## Prompts for Implementation

Build iggi.dev as **one continuous deep-ocean dive narrative**, scrolled top-to-bottom without page breaks, tabs, or modals. The entire experience is a descent — from sunlit surface (lighter teal) at the top to abyssal dark (`#060E12`) at the bottom. There are no calls to action. There is no pricing. There is no contact form. There is no stats grid. There is only the dive.

**Implementation directives:**

1. **Hero spread (viewport-filling, two-zone layout):**
   - Left 55% of viewport: a layered stack — background blur botanical, crystalline SVG mesh mid-layer, sharp ctenophore illustration foreground
   - Right 45%: Bebas Neue headline at `clamp(72px, 9vw, 140px)`, three lines max, in `#E8F7F5`. Below it: a Source Serif 4 subhead at 20px in `#A8EDE5`. Below that: Space Mono coordinate string `"47°23′N 28°14′E // −200m"` at 12px in `#1AD9C8`.
   - On load: headline letters stagger in with `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)` per letter, 60ms delay between letters, 600ms duration each.

2. **Scroll-driven depth transition:**
   - As the user scrolls, the `background-color` of `<body>` transitions through the palette: `#0D2B35` (top) → `#0F4D5C` (mid) → `#060E12` (bottom), driven by `CSS @scroll-timeline` or a scroll event listener updating a CSS custom property `--depth` (0–1).
   - The background botanical blur layer shifts in `background-position-y` at 0.3× scroll rate (parallax).

3. **Specimen triptych (three cards):**
   - Horizontal flex, centered, `gap: 48px`, each card `280×420px`
   - SVG botanical illustration fills top 60% of card
   - On card hover: crystalline facet mesh on the illustration illuminates (see imagery section), and card lifts `transform: translateY(-8px)` with `box-shadow` bloom amplifying to `0 0 40px rgba(26,217,200,0.4)`

4. **Essay section:**
   - Single column, `max-width: 680px`, centered
   - Pull quotes: DM Serif Display 28px, `color: #1AD9C8`, with a `border-left: 3px solid #1AD9C8` and `padding-left: 24px`
   - Running text: Source Serif 4 18px, `color: #E8F7F5`, `line-height: 1.75`
   - Botanical marginalia: small crinoid/coral SVG sketches floated to outer margin at 120px width, `opacity: 0.35`

5. **Horizontal gallery strip:**
   - Six illustration frames in a horizontal scroll container, `height: 60vh`, each frame `40vw` wide
   - CSS `scroll-snap-type: x mandatory`, snap points on each frame
   - Each frame: full-bleed botanical illustration with a Bebas Neue caption overlay at bottom-left, 36px, in `#E8F7F5`
   - No arrows, no dots — pure swipe / trackpad scroll signal

6. **Coda — fade to black:**
   - Full-viewport section with a single botanical illustration centered
   - `filter: blur(0)` at entry, transitions to `filter: blur(12px) brightness(0.3)` as the user scrolls past it
   - Centered Bebas Neue single line at 80px: `"THE DIVE ENDS HERE"` in `#1AD9C8`
   - Below it: Space Mono two-line coordinate + depth readout, `#A8EDE5`

7. **Animation philosophy:**
   - All animations are scroll-triggered, not time-triggered
   - No looping animations except the crystalline facet glow pulse (2s ease-in-out infinite, 8% opacity oscillation) on hover
   - Crystalline divider path draw: `stroke-dashoffset` from 100% to 0 over 1.2s as section enters `IntersectionObserver` with `threshold: 0.3`
   - No autoplay video, no particle systems, no canvas — pure CSS + SVG + scroll events

8. **No navigation bar** — the only persistent chrome is the depth indicator line at `position: fixed; right: 24px`. A Bebas Neue logo mark `"IGGI"` is placed at `position: fixed; top: 24px; left: 24px` at 28px in `#E8F7F5`, no link.

## Uniqueness Notes

**Differentiators from the existing corpus:**

1. **Seapunk + scientific authority fusion.** The frequency report confirms seapunk is at only 1% in the corpus, and no existing design pairs it with an authoritative/scholarly tone — they lean toward the subculture's playful or nostalgic registers. iggi.dev takes seapunk's color world (bioluminescent cyan-violet) and imposes the layout grammar of *Nature* magazine's centerfold spreads. The result is a design that reads as both radical and credible — the ocean as a subject that demands both awe and rigor.

2. **Crystalline facet overlay as the primary interactive motif.** The corpus has glitch effects (several), rhinestone cabochons (aiice.dev), and generative backgrounds, but no design uses Voronoi crystalline tessellation as a structural UI element. The crystalline mesh is not decorative — it creates hover affordances, section transitions, and the entire visual language of "the ocean as a geometric mind." Every interactive moment is a facet catching light.

3. **Scroll-as-depth narrative with a fictional depth gauge.** No other design in the corpus uses scroll position as a narrative depth metaphor. The depth indicator transforms a purely functional scroll tracker into a diegetic element of the experience — you are diving, and the gauge tells you how far you've gone. The palette itself confirms the descent: warmer teal at the surface, abyssal black at the bottom. Scroll behavior is storytelling, not navigation.

4. **Botanical illustration + bioluminescent palette as a primary image register.** The corpus uses photography, geometric patterns, and digital illustration, but botanical/naturalist scientific illustration is rare. iggi.dev commits fully to the 19th-century specimen-plate tradition — stippled linework, taxonomic labels in Space Mono, Latin specimen names — and then lights it from within with `#1AD9C8` glow halos. The collision of historical illustration method and UV-reactive seapunk color is the central aesthetic paradox.

5. **Avoided patterns per frequency analysis:** bebas-bold typography is at 4% in the corpus (explicitly assigned here to lean into an underused pattern), blur-focus is underused, and crystalline motifs are rare. The design deliberately assembles the least-used elements into a coherent whole rather than reaching for the comfortable warmth/gradient/sans-grotesk defaults that dominate the corpus.

**Chosen seed from assignment:** `aesthetic: seapunk, layout: magazine-spread, typography: bebas-bold, palette: analogous, patterns: blur-focus, imagery: botanical-illustration, motifs: crystalline, tone: authoritative`
<!-- DESIGN STAMP
  timestamp: 2026-05-08T11:13:15
  domain: iggi.dev
  seed: from assignment:
  aesthetic: iggi.dev is a **seapunk editorial laboratory** — a place where deep-ocean biolum...
  content_hash: 41b567548af8
-->