# Design Language for aiice.quest ## Aesthetics and Tone aiice.quest is a **goblincore data-rookery** — a forager-archivist's reading nook hollowed into the root system of a deprecated mainframe, where moss has overgrown a sci-fi telemetry HUD and the diagnostics keep ticking on anyway. The domain reads two ways at once: *aiice* as a frost-bitten sibling of "Alice" wandering a damp fungal underland, and *aiice* as **AI-ice**, the brittle crystalline lattice that forms inside cold inference engines when they have been left to think too long. The `.quest` here is not a heroic odyssey — it is the patient, head-tilted gathering a magpie does at dawn, picking up shiny scalars and broken statistics and arranging them by *vibe* on a cracked enamel tray. The aesthetic is **goblincore filtered through a long-abandoned observatory**. Picture mushroom shelves grown over a NASA console from 1973, a pet snail asleep on the keycap of an F4 key, a radial telemetry dial whose needle is now a pressed fern, and a faint cathode glow seeping through layers of lichen. Nothing is hostile. Nothing is being sold. The HUDs are *decorative*, the data is *real but quiet*, and the goblin who lives here keeps *meticulous* records of small wonders: barometric pressure, fox sightings, embedding norms, the precise hex values of a robin's egg recovered intact from a thrush's nest. Tonally this is **zen-contemplative** — but not the spa-marble, river-stone zen of clinical wellness brands. This is **forest-floor zen**: slow, patient, attentive to small differences, willing to sit with a single chart for ten minutes. The voice is a hushed, knowledgeable hedge-witch giving a tour of her instrument cabinet — never rushed, never proselytizing, occasionally pausing to identify a sound. Section headings whisper rather than shout. Body copy is set in the long, deliberate measure of a field journal. Numbers are treated like specimens: *labeled, dated, pinned to a card with a number written in pencil*. Inspirations held in mind: the inside of a Cornell box, a lichenologist's spreadsheet, the *Voyager Golden Record* if it had been buried in a peat bog and exhumed three centuries later, a pre-Raphaelite illustration of a CRT, the muted vintage palette of a 1958 botanical print, the title page of *Silent Spring* over an oscilloscope trace, and a goblin's wunderkammer where every artifact has a tiny brass plaque set in Baskerville italic. The page should feel **patient, foraged, slightly damp, and quietly precise**. ## Layout Motifs and Structure The site is built on an **asymmetric card-grid** — but the cards are *specimen drawers*, not marketing tiles. Each card is a shallow apothecary box pressed into a 12-column grid that has been lightly *warped* by ivy: the gutters drift between 18px and 32px depending on how much moss is growing in them, and a 3-column rhythm at desktop relaxes into a 2-column staggered rhythm at tablet, then a single column of stacked drawers on mobile that scrolls like a vertical card catalog being slowly tipped open. Cards live on a **deep parallax substrate**: three z-layers, foreground, midground, and a dim back wall. The foreground is the cards themselves — vellum-white, faintly speckled, with thin Baskerville-italic captions and tiny sci-fi-HUD readouts in the corners (a small bracketed register reading `[ N=1428 · σ=0.034 · 04:11 UTC ]` in a 9px monospace). The midground is a sparse drift of pressed-leaf silhouettes and dotted leader lines that respond to scroll at 0.6× speed. The back wall is a **goblin-HUD** — a faint, large-radius radar sweep, isobars, and a slowly-precessing equatorial coordinate grid drawn in #6F7A5C lichen-green at 9% opacity, drifting at 0.25× scroll speed so the foreground feels like it is settling onto the page like silt. A persistent **left-rail sidebar** (collapsing to a top drawer on mobile) acts as the *field journal index*: a ribbon of section markers in Baskerville small caps, with hand-drawn bracketed numerals and a goblin-HUD compass rose at the top whose needle quietly tracks the user's scroll position. The right edge of the page bears a **vertical telemetry strip** — a thin 24px column of muted-vintage HUD pictograms (humidity, signal strength, "specimens cataloged today") that update only when a card enters the viewport, never animating gratuitously. Between major sections, **horizontal rule plates** cross the page: thin engraved-style brass dividers (pressed to vellum) overlaid with a single line of HUD reticle ticks. These plates anchor the parallax — when one passes the viewport center, the back wall's coordinate grid quietly *re-references* itself, as if the goblin had taken a new reading. No section is hero-dominant; the page reads as a *long quiet drawer of equally-weighted finds*. Negative space is treated as *dust on the shelf*: not empty, but settled. ## Typography and Palette The typographic spine is **baskerville-refined** — specifically **Libre Baskerville** (Google Fonts) for body and headings, set in a long measure (62–68 characters) at 17.5px / 1.7 leading, with italic used liberally for asides and Latin specimen names. Headings step from `clamp(2.4rem, 4vw, 3.8rem)` at H1 down through small caps at H4. Drop caps appear once at the top of each section: a 4-line Baskerville italic capital in #5A4A2E ink, gently kerned away from the body. For HUD readouts and numeric telemetry, **JetBrains Mono** (Google Fonts) at 9–11px in tracked-out small caps, set in muted #6F7A5C against vellum, framed in thin square brackets. Captions, leader lines, and the field-journal index use **EB Garamond** (Google Fonts) italic for a softer, more *foraged* counterpoint to the crisper Baskerville body — the visual equivalent of a hedge-witch's cursive in the margin of a printed page. Goblin-HUD diagrams use **IBM Plex Mono** (Google Fonts) at 8–10px for axis labels and tick numerals — an even quieter mono than JetBrains, reading almost as a dotted texture from a distance. The palette is **muted-vintage** with a slow lichen pull: - `#F2EBDB` — *Foxed Vellum* — primary background; warm cream with a faint speckle texture overlaid at 3% opacity - `#5A4A2E` — *Iron-Gall Ink* — primary body text; warm sepia-brown, never pure black - `#6F7A5C` — *Reindeer Lichen* — HUD strokes, leader lines, secondary text; muted olive-green - `#8C5E3B` — *Bog Oak* — accents, drop caps, hover underlines; tannin-brown - `#A89968` — *Brass Patina* — divider plates, reticle ticks, small specimen icons - `#C7B8A1` — *Mushroom Paper* — card surface highlights, rule plate fill - `#3A4032` — *Forest Floor* — the back-wall goblin-HUD substrate (used at very low opacity) - `#D9C3A0` — *Pressed Wheat* — soft accent for charts and data fills - `#7B5C4C` — *Earthworm* — annotation underline color and active-link indicator No gradients. No glow. No saturation above ~30%. The page should look like it was *printed in 1958, bound in linen, and left in a stump for fifty years* — readable, dignified, slightly furred at the edges. ## Imagery and Motifs Imagery leans on **goblin-data-viz**: small, hand-keyed charts treated as botanical specimens. Each chart is set inside a hairline rule, captioned like a museum card (`Fig. 7 · Mast year acorn yield, 1981–2024 · n=43`), and rendered in muted-vintage strokes — no fills, just thin lines of #6F7A5C and #8C5E3B with annotated outliers labeled in EB Garamond italic. Sparklines run inline through paragraphs the way a centipede might cross a page. Radial dials borrow from sci-fi-HUD geometry but are *engraved*, not glowing — concentric rings of tick marks, a needle that is half-leaf half-arrow, and a tiny `[ READ ]` marker in Plex Mono. The **sci-fi-hud motifs** are present as quiet decorative scaffolding: corner reticles on cards, a soft radar-sweep on the back wall, hairline coordinate grids behind dividers, and the bracketed telemetry strip on the right edge. Critically, *the HUD is never the message* — it is the *frame*. It evokes a Voyager-era console that has been retired, mossed-over, and is now serving as the goblin's writing desk. Decorative goblin elements scattered across the page (sparingly, never twee): a single pressed fern in the page margin near the field-journal compass rose; a small snail SVG at the bottom of the footer, its trail marking the last-modified timestamp; tiny brass-plaque ornaments at section breaks engraved with a specimen number; a recurring **moth wing** SVG (drawn from a dusty-monarch silhouette) used as a section-divider ornament. Drop caps are encased in a thin Baskerville-italic-style rule with a single ivy-leaf cusp at the bottom-left corner. Photography is avoided entirely. All visuals are line-drawn vector specimens: a labeled mushroom anatomy diagram, a constellation chart of a fictitious *Vulpecula minor*, a cross-section of an old transistor with mycelium running through it, and a foraging map drawn in topographic Baskerville-style lettering. Anywhere a stock photograph would normally appear, a *labeled engraving* takes its place, complete with a dated caption and a tiny HUD reticle in the corner. ## Prompts for Implementation **HTML/CSS approach:** build a CSS Grid root with 12 columns and `gap: clamp(18px, 2vw, 32px)`, but introduce a `--moss` custom property that randomly jitters gutter widths by ±4px on a per-row basis using a sass loop or a small CSS-vars script — the grid should look hand-laid, not pixel-perfect. Cards are `
` elements with a 1px hairline `#A89968` border, 32px inner padding, a faint `radial-gradient(ellipse at top left, rgba(199,184,161,0.15), transparent)` for the "vellum" highlight, and four corner-reticle SVGs absolutely positioned at 6px insets. Use `aspect-ratio` sparingly — let cards size to content. **Parallax substrate:** three `
` elements fixed-positioned with `will-change: transform`. The back wall uses a CSS-painted `repeating-linear-gradient` for the coordinate grid plus a single SVG radar-sweep that rotates very slowly (`@keyframes sweep { to { transform: rotate(360deg) } }` over 240s — a quarter-turn per minute). Midground is a static SVG of pressed leaves and dotted leaders, translated on scroll at 0.6× via a single `requestAnimationFrame` loop. Foreground is the document flow itself — no transform at all. The effect should feel like silt settling. **Storytelling priority:** the homepage is a **slow vertical journey through a goblin's specimen archive**. Open with a full-bleed *frontispiece* — a single Baskerville-italic line ("*A field record of small wonders, kept patiently.*") centered on vellum, with a hairline HUD reticle framing it and a single pressed-fern SVG to the left of the period. Then a quiet 280px of negative space. Then the first specimen drawer. Each subsequent section is a **chapter of the catalog** — never a "feature card grid," never a "stats block." Every datum should arrive *captioned*, like a museum object. Make the user feel they are turning pages of a leather-bound foraging journal that happens to also be a telemetry log. **Animations:** restraint is the entire game. No spring physics, no magnetic cursor, no flashy hover lifts. Use **slow scroll-triggered fade-reveals** at 800–1200ms easing on cards as they enter the viewport, paired with a 4px rise. The HUD telemetry strip on the right edge **only updates when a section divider crosses center**, with a 600ms typewriter-style refresh of three numerals — never continuous, never decorative. Drop caps on section first-paragraphs trace themselves once via SVG `path-draw` over 1.4s on first reveal. The back-wall radar sweeps at 240s/turn, imperceptibly. The field-journal compass needle in the sidebar tracks scroll position with a 600ms lerp — feels like a compass settling, not a scroll progress bar. **Type details:** body uses `font-feature-settings: "onum" 1, "liga" 1` (oldstyle figures, ligatures), `font-variant-numeric: oldstyle-nums`. Headings use Baskerville small caps (`font-variant: small-caps`). Italic asides set with EB Garamond italic at 0.94em. Drop caps via `::first-letter` with `float: left; font-size: 4.6em; line-height: 0.85; padding: 8px 12px 0 0; color: #5A4A2E; font-style: italic;`. Letter-spacing on small-caps headings: 0.08em. Avoid uppercase-everything — small caps only. **AVOID:** CTA-heavy hero blocks, pricing tables, "trusted-by" logo bars, stat grids with giant numbers, glowing buttons, gradient meshes, glassmorphism, dopamine pops, animated gradients, mouse-following spotlights, scroll-jacking, video backgrounds, generic stock photography, neon, chrome, drop shadows above 8% opacity, and any animation that calls attention to itself. If a marketing-page convention would normally appear, replace it with a *captioned specimen card* instead. **JS minimum:** one small intersection-observer module for the fade-reveals and HUD strip refresh, one rAF parallax loop for two layers, one SVG path-draw for drop caps. Total JS budget: <8KB unminified. The site should feel like it could survive a power outage on a single solar cell strapped to a stump. ## Uniqueness Notes **Differentiators from other CMassC designs:** 1. **Goblincore aesthetic** — frequency analysis shows goblincore at 0% prior usage in the corpus; this is the *first* site in the catalog to commit to it. The aesthetic vocabulary (foxed vellum, lichen, pressed specimens, hedge-witch tone) is genuinely orthogonal to the dominant hand-drawn (92%) and glassmorphism (62%) trends. 2. **Baskerville-refined typography** — at 2% prior usage, Baskerville is one of the *least*-used type vocabularies in the corpus. Pairing it with goblincore (rather than the usual editorial / dark-academia partner) is a fresh combination. 3. **Muted-vintage palette without warmth-pop** — most muted designs in the corpus drift toward warm-earthy or honeyed-neutral; this one anchors on lichen-green (#6F7A5C) and bog-oak as the secondary accent system, deliberately steering away from the 90% "warm" cluster. 4. **Sci-fi-HUD as decorative scaffolding, not focal point** — sci-fi-hud appears in only 2% of designs, and where it does it is usually the hero motif (cyberpunk dashboard energy). Here it is *retired infrastructure* — engraved, lichen-covered, quiet — which is a genuinely unusual reading of the motif. 5. **Data-viz as botanical specimen** — data-viz is at 4% in the corpus and almost always rendered in dashboard / dopamine modes. Treating charts as captioned museum specimens (with EB Garamond italic Latin labels and brass-plaque cataloging) is a new register. 6. **Zen-contemplative tone (6%) applied to a chaotic aesthetic** — zen-contemplative is rare and usually pairs with minimalist or japanese-zen designs. Here it tempers goblincore's chaos into a *patient* foraging cadence — an unusual marriage. **Avoided patterns from frequency analysis:** - **No photography** (the dominant 96% imagery pattern is sidestepped entirely in favor of line-drawn engravings and labeled specimens) - **No gradient palette** (92% trend) — flat muted vintage only, no gradient meshes anywhere - **No warm palette dominance** (90% trend) — anchored on lichen-green to break the warm-cluster monotony - **No mono-as-primary** (94% typography trend) — mono is used only for tiny HUD readouts; the page voice is Baskerville serif - **No spring/stagger/cursor-follow** (62%/62%/54%) — replaced with slow scroll-triggered fade-reveals and a rare, quiet HUD update - **No full-bleed hero block** (84% trend) — opens with a single hairline-framed frontispiece line on vellum, then negative space - **No CTA-heavy or stat-grid patterns** — every numeric appears captioned as a specimen, never a hero metric **Documented chosen seed:** `aesthetic: goblincore, layout: card-grid, typography: baskerville-refined, palette: muted-vintage, patterns: parallax, imagery: data-viz, motifs: sci-fi-hud, tone: zen-contemplative`. The synthesis goal: a **patient goblin's specimen archive housed in a retired sci-fi observatory** — visually unlike any prior CMassC site, with its own internal logic of "engraved infrastructure, foraged data, hedge-witch cataloging."