# Design Language for iGGi.dev ## Aesthetics and Tone iGGi.dev is **a generative ink-spore lab notebook running down a single column** — a developer's playground that treats the name *iGGi* as the sound a small autonomous critter makes when it boots: a giggle, a hiccup, a pixel that woke up and started growing. The site is the **field journal of that critter**, kept by a maker who never bothered to clean it up: rough timestamps, smudged margins, a half-finished thought, then a beautiful one. The mood is **raw-authentic** — no marketing gloss, no "trusted by 10,000 teams," no hero with a CTA above the fold. It feels like opening someone's actual `notes.md` and discovering it quietly renders living organisms in the gutter. The aesthetic is **generative**: every visual moment that isn't text is grown procedurally at runtime from a seed string (the page literally uses the word `iGGi` as a PRNG seed), so the spores, the dust, the 3D blob in the header — all of it is *computed*, never a stock asset, and it looks slightly different each reload. The tone sits at the intersection of a botanist's terrarium and a shader sketch: organic things made of math. Warmth comes from imperfection — jittered baselines, particles that miss their mark, an elegant serif that's set just a hair too large for its line. Inspiration: lab terrariums under grow-lights, the margin doodles in a Feynman notebook, slime-mold growth photography, Casey Reas / Processing-era generative art, and the specific feeling of a `console.log` that accidentally prints something poetic. This is **not** a SaaS landing page and must never read like one. It is a vertical scroll-journal you fall down through, watching a digital organism grow alongside the entries. ## Layout Motifs and Structure **The entire site is one timeline-vertical column** — a single, narrow, centered measure (max ~720px of text, ~960px of total stage) that you scroll straight down, top to bottom, no horizontal anything, no multi-column grid, no card deck. Down the **left edge of the column runs a continuous vertical "growth spine"**: a 2px line, but not a static one — it's an SVG path that *draws itself* (stroke-dasharray) as you scroll past, and small generative spores bud off it at each timeline entry, sprouting little procedurally-grown filaments into the left margin. The spine is the literal timeline; the spores are the entries. **Each entry is a "log node"** clamped to the spine: a small generative bullet (a tiny growing canvas, ~28px), a raw monospace-styled timestamp like `t+00:03:11 — iGGi noticed something`, then the body set in the elegant serif. Entries are deliberately uneven in length — one is two words, the next is four paragraphs — to feel like a real notebook, never like a templated feed. No entry has a button. No entry has a price. Vertical rhythm is generous and irregular: `ma`-style breathing room (large, asymmetric whitespace) between nodes, so the page has long quiet stretches where only the spine and a drifting particle field are visible, then a dense cluster of thought. **The header is full-bleed and full-viewport-height**: just the wordmark `iGGi` rendered huge in the serif, a slowly-rotating 3D-render blob behind it (a procedurally meshed, low-poly "spore body" — see Imagery), and a single sub-line in raw lowercase. You scroll *past* it into the column; it does not "convert" you anywhere. The footer is the spine simply running out of ink — the line thins, the spores stop budding, and the last thing on the page is a faint `// eof` in mono. No sidebar, no sticky nav bar, no mega-menu. The only navigation is a thin progress thread on the spine itself (a brighter segment showing how far down the journal you are) and tiny anchor-dots you can click to jump between log nodes. ## Typography and Palette **Type — Google Fonts only, three families, strict roles:** - **Spectral** (Google Fonts) — the elegant-serif voice and the soul of the site. Used for the giant `iGGi` wordmark at `clamp(80px, 18vw, 240px)` with tight tracking (`-0.03em`), and for *all* entry body copy at a comfortable `clamp(18px, 1.4vw, 22px)` / line-height 1.7. Spectral has real literary warmth, true italics, and just enough contrast to feel hand-set rather than corporate. Body italics are used liberally for the critter's "asides." - **Spectral** italic doubles as the headline voice for log-node titles — set in italic, slightly larger, lowercase, e.g. *"the day iGGi learned to bud."* - **Space Mono** (Google Fonts) — the raw lab-instrument voice. Timestamps (`t+00:03:11`), the progress readout, the `// eof`, seed strings (`seed: "iGGi"`), and any moment where the machinery shows through. Always lowercase, tracked slightly open (`0.02em`), small (`13–14px`), in a muted tone so it recedes like marginalia. - **Fraunces** (Google Fonts) — used *only* for a handful of oversized pull-quote moments dropped into the column ("the bug was the feature"), set at `clamp(40px, 7vw, 88px)`, optical size dialed high, soft slant on. It's the one place the page lets itself be lush. **Palette — muted, low-saturation, paper-and-spore. Minimum below; these are exact:** - `#ece7df` — **bone paper**: the page background. Warm off-white, the color of aged sketchbook stock. - `#262320` — **ink**: primary text, the spine line, the wordmark. Near-black with a brown undertone, never pure `#000`. - `#6f6a60` — **graphite**: secondary text, the mono marginalia, dates — desaturated warm gray. - `#7d8b6a` — **moss**: the living/generative color — spore fills, the budding filaments, the active progress segment of the spine. A muted sage; the only "growth" hue. - `#b65c3e` — **rust accent**: used sparingly — link underlines, the one or two pull-quote flourishes, a single spore that "went wrong." Muted terracotta, max ~5% of the page. - `#d8d2c6` — **dust**: the drifting background particle field and hairline rules; a half-step darker than the paper so it's barely there. - `#3a4a3a` — **deep moss**: shadow side of the 3D blob, deepest spore cores. Everything stays low-contrast and warm — no neon, no pure white, no cold gray. The page should look like it was printed on a risograph and left in the sun. ## Imagery and Motifs **All imagery is generative, computed at runtime from the seed `iGGi`. No photography, no stock illustration, no icon font.** The vocabulary is exactly four things: 1. **The header 3D-render spore body.** A single low-poly mesh — a lumpy, organic "spore" — generated procedurally (icosphere subdivided once or twice, vertices displaced by seeded 3D noise), rendered with plain CSS-3D-transformed `
` faces *or* a tiny hand-rolled software-projection on a `` (no Three.js, no WebGL libs required). It rotates slowly on one axis, faceted, flat-shaded in moss / deep-moss, casting a soft long shadow on the bone paper. It reads as "the critter, asleep, breathing." Faint particle-effect dust drifts off it. 2. **Spine spores.** At every log node, a ~28px canvas grows a deterministic miniature: a seeded L-system / diffusion-limited-aggregation cluster in moss, animated to *bud* outward when the node scrolls into view, then settle. Each node's seed is `"iGGi:" + entry index`, so they're all siblings, never identical. 3. **Margin filaments.** From the spine, between nodes, thin procedurally-grown SVG paths (recursive branching, jittered angles) sprout a short way into the left whitespace and stop — like roots that didn't find anything. Drawn with `stroke-dasharray` so they appear to grow as you pass. 4. **The drift field.** A whole-page, very low-density particle layer of `#d8d2c6` dust motes, each on its own slow Perlin path, occasionally settling on the spine or the blob. It's the "air" of the terrarium. Never busy — maybe 60–90 particles total, mostly invisible. Decorative motifs: **particle-effects** everywhere as connective tissue (dust, spore bursts on reveal, a faint pollen puff when you click an anchor-dot); **border-animate** is the one structural ornament — the active log node gets a thin moss border that *draws itself around the node* clockwise on focus/hover/scroll-in and erases when it leaves, like the notebook circling a passage in pencil. Hairline `#d8d2c6` rules separate quiet stretches. Margin glyphs in Space Mono: `↳`, `~`, `//`, used like a coder's own shorthand. ## Prompts for Implementation Build iGGi.dev as **one `index.html`, one `style.css`, and two or three small ES modules** — no framework, no router, no build step, no Three.js / GSAP / Lottie. The runtime budget is: CSS transitions + keyframes; **one** `requestAnimationFrame` loop driving the drift field, the header blob rotation, and any actively-budding spores; SVG `stroke-dasharray` for the spine, filaments, and the border-animate effect; a single `IntersectionObserver` to fire node reveals and start their spore growth. A tiny seeded PRNG (mulberry32 or xmnsh, ~5 lines) seeded from the string `"iGGi"` powers *all* generation so the page is deterministic-per-load but visibly alive. **Storytelling is the organizing principle. Bias hard toward a full-screen narrative experience, not an info page.** The content is the critter's journal — write the log nodes as a genuine arc: *boot* (`t+00:00:00 — first light`), *curiosity*, *a mistake* (the rust spore), *learning to bud*, *a quiet stretch*, *something almost like a thought*, then `// eof`. Let the reader fall down the column and feel time pass. Long whitespace gaps between dense clusters are a feature — let the page be empty sometimes, with just the spine, the dust, and the breathing blob. Set entries at uneven lengths on purpose. Animation should feel **organic and slightly imperfect**: spores that overshoot and recoil, filaments that branch asymmetrically, the wordmark that does a tiny seeded jitter on load like a frame of stop-motion, particles that drift rather than fly. Easings: soft `cubic-bezier(.22,1,.36,1)` for reveals, slow linear-ish for ambient motion. The border-animate on the active node is the signature interaction — make it crisp, ~600ms, moss color, drawing then un-drawing. Type-set it like a real notebook: generous line-height, italics for asides, mono timestamps that look like instrument output, the occasional Fraunces pull-quote crashing the margin. Keep the measure narrow — never let body text run wider than ~720px. **AVOID:** any CTA-heavy layout, "Get Started" / "Sign Up" buttons, pricing tables or tiers, three-up feature card grids, stat-grids ("99.9% uptime"), testimonial carousels, logo walls, a sticky top nav bar, hero-with-form. There is nothing to buy and nothing to convert here — it's a journal that happens to grow things. If a section starts to look like a marketing block, delete it or turn it into a log node. ## Uniqueness Notes Differentiators from the rest of the registry: 1. **Generative + elegant-serif + raw-authentic, together.** Generative art sites in the registry skew tech-y, neon, dark, glitch, mono-only. Pairing runtime-computed organisms with a warm literary serif (Spectral/Fraunces) on bone-colored risograph paper, framed as an unpolished personal lab notebook, is unprecedented here — generative art as *handwriting*, not as a product demo. 2. **A literal timeline-vertical spine that is itself a generative organism.** timeline-vertical sits at ~2% in the frequency map; almost no one uses it, and no one uses it as a *single-column scroll-journal where the timeline line grows spores*. The spine doubles as the only navigation. No card-grid, no centered hero stack — just one narrow column you fall down. 3. **Procedural low-poly 3D with zero 3D libraries, plus particle-effects (~1%) as the connective tissue.** A hand-rolled software-projected faceted "spore body" in CSS-3D or raw canvas, dust drifting through the whole page — particle-effects and 3d-render are both near the bottom of the frequency table, and combining them in a muted, slow, organic register (not sci-fi-hud, not crystalline, not crypto) is its own lane. 4. **border-animate (~3%) used as a "pencil circling a passage" instead of a button hover.** The animated border is a reading aid on the active log node, not decoration on a CTA. 5. **Muted, warm, low-contrast palette (no pure black/white, no neon, no gradient-mesh)** against a backdrop where 98% of registry palettes are warm-gradient — this one is flat, dusty, risograph, with a single rust accent capped at ~5%. Document of chosen seed/style: **aesthetic: generative, layout: timeline-vertical, typography: elegant-serif, palette: muted, patterns: border-animate, imagery: 3d-render, motifs: particle-effects, tone: raw-authentic.** Avoided overused patterns from the frequency analysis: no hand-drawn aesthetic (96%), no glassmorphism (67%), no photography (98%), no card-grid (87%), no centered hero stack as the dominant layout (85%), no parallax/cursor-follow/spring/magnetic as headline interactions (95/88/86/81%), no warm-gradient palette (98%), no mono-only typography (95%) — Space Mono is a supporting marginal voice here, not the primary face.