# Design Language for aiice.dev ## Aesthetics and Tone aiice.dev is staged as **the personal field-laboratory of a hermit-scholar goblin who has taken up residence inside a glacial moraine** — a damp, chitin-cluttered cabinet of curiosities transcribed onto frosted scientific glass. The conceit reads precisely: a Linnaean classifier with mossy fingernails, who collects ice-cores instead of butterflies, has begun to publish her taxonomies on the open web. Where conventional goblincore reads as warm forest-floor — amber rot, ochre lichen, terracotta gizzards — aiice.dev inverts the temperature entirely. The whole habitat has been **frozen mid-collection**. Every fern, every snail-shell, every brass caliper, every hand-bound thesis chapter is suspended inside a slab of pale, slightly cloudy ice. The palette is exclusively **cool-grays**: slate, gun-metal, oyster, fog, dove, condensation-on-aluminum. There is no warm pixel anywhere except the candle-orange flicker reserved for `:focus` states (a single contraband warmth, three frames long, then gone). The scholarly-intellectual tone is voiced as a **wet-laboratory journal** rather than a marketing site: footnoted asides set in ice-blue, page numbers in roman numerals, an apparatus criticus running down the gutter, latin binomials italicized. The goblin chaos asserts itself through the *content* of the catalogue — the artefacts being indexed are unhinged (a vole's molar still wet from the meltwater, a half-licked typescript, a Pleistocene horsefly preserved in a champagne flute) — but the *form* is scrupulously academic, as if Aby Warburg had been reincarnated as a creature that hoards keys. The intersection is where the design lives: **dirt-gathering scholarship behind frosted glass**. No hand-drawn doodles, no sketched margins. Everything is sharp-focus photography of squalid objects, seen through six millimetres of laboratory-grade ice. The mood is overcast morning in a peat-bog museum. Quiet. Somewhat damp. Intellectually serious. The kind of website that makes you want to take off a glove and wipe condensation from a vitrine to read a small handwritten label. ## Layout Motifs and Structure The structural conceit is **layered-depth**, executed not as parallax-scrolling sections but as a **stratified geological core** the visitor reads downward. The page is one continuous vertical column 540vh tall, but the spatial drama is *across* the Z-axis at every scroll position. At any given vertical y, **eleven discrete Z-strata** are simultaneously visible, each a sheet of frozen content suspended at a different distance from the viewer's nose. These are not parallax velocity layers — they are physical strata of ice, each with measurable thickness, internal bubbles, and a slight refractive offset. **Z-stratum inventory (front to back):** 1. **Z=0 — the breath layer.** A single fogged-glass overlay covering the full viewport, opacity 0.04, with a subtle `backdrop-filter: blur(0.5px)`. It carries no content, only the implication of cold breath on the screen. 2. **Z=−40px — apparatus criticus.** A 56px right-margin column running the entire scroll, in 11px serif italic, set in oyster-gray (#9DA4AC). Footnotes, classification numbers, sample IDs, and parenthetical Latin asides float here. Pinned to the gutter; does not scroll-jack but moves on a second-derivative spring. 3. **Z=−120px — the primary glass plane.** This is the load-bearing layer — every chapter heading, every body paragraph, every photograph-of-an-artefact lives in **glassmorphic-cards** sitting on this plane. The cards are tall vertical slabs (aspect ratio 3:5 or 1:3, never square), `backdrop-filter: blur(18px) saturate(0.6)`, border 1px solid rgba(157,164,172,0.28), border-radius 2px (almost square; goblin precision is mineralogical), inner padding 32–48px. Each card carries a faint `box-shadow: inset 0 0 80px rgba(255,255,255,0.04)` to read as ice rather than acrylic. Cards are **stacked imbricately like roof-slates** — each card's bottom edge slides 80–140px *underneath* the next card's top edge, so the eye reads downward through partial occlusion. 4. **Z=−240px — the moss stratum.** A scrolling band of high-resolution moss/lichen photography, desaturated to grayscale and tinted blue-gray (`hue-rotate(190deg) saturate(0.3) brightness(0.55)`). It moves at 0.7× scroll velocity. Visible only through the gaps between cards on Z=−120. 5. **Z=−360px — embedded specimens.** Small, sharp-focus photographs of artefacts (a snail shell, a brass key, a crow's foot, a fountain pen, a hex bolt half-corroded), each 64–180px wide, scattered semi-randomly. They drift at 0.45× and rotate ±2° on a slow sine. Each is set inside a tiny ice-cube cropped via `clip-path: polygon(...)` with seven slightly irregular vertices. 6. **Z=−500px — handwritten ice annotations.** Pale graphite-gray cursive (real handwriting font) saying things like *"sample 47.iii — collected during thaw — note the venation"*. Drifts at 0.32× and reads almost like contrails behind the specimens. 7. **Z=−700px — bubble field.** Spherical air bubbles trapped in the ice, varying 4–22px diameter, distributed via blue-noise sampling, opacity 0.18, slight upward drift over 60s loops. Pure CSS radial gradients; ~340 bubbles total. 8. **Z=−900px — distant fern silhouettes.** Black-on-fog ferns, blurred 12px, opacity 0.10, drifting at 0.18×. These are the goblin's pet plants seen through deep ice. 9. **Z=−1100px — inscribed strata lines.** Horizontal hairlines (1px, rgba(157,164,172,0.10)) every 80px representing geological bedding planes. Static. 10. **Z=−1400px — the meltwater layer.** A subtle vertical gradient ramp from #2C3137 at the very top of the column to #1A1D21 at the very bottom, simulating descent into deeper, darker ice. 11. **Z=−2000px — the rock face.** The deepest plane, never seen directly, only inferred. A noise texture (4% opacity grain) representing the moraine wall behind the entire glacial sandwich. **Reading rhythm.** The page is organized into seven *chapters of the catalogue*: I. Front Matter, II. The Cabinet (an introduction to the goblin-curator), III. Specimen Group A — Mineralogy, IV. Specimen Group B — Stationery, V. Specimen Group C — Soft Tissue, VI. Excurses (footnotes pulled into the body), VII. Colophon. Each chapter occupies ~70vh of vertical scroll, separated by a 12vh **deep-clear-ice interstitial** in which all Z=−120 cards drop away and the visitor can briefly see straight down through layers 2 through 11 without obstruction. These interstitials function as breath-marks in the document. The grid governing card placement on Z=−120 is **a 12-column moraine grid** with deliberately uneven gutters (12px / 28px / 12px / 44px / 12px / 28px / 12px / 12px / 28px / 12px / 44px / 12px), echoing the irregular spacing of pebbles in glacial till. Cards span 3, 4, 5, or 7 columns — never 1, 2, or 6 — and never align top-to-top with their neighbours. Asymmetry is mandatory; horizontal symmetry is forbidden anywhere on the page. ## Typography and Palette **Type stack — Google Fonts only, four families, each with strict assignment.** - **Fraunces** (variable, optical-size axis 9–144, weight 100–900, soft axis 0–100, *italic available*). This is the **expressive-variable** display voice — chapter headings, the page title, the goblin-curator's by-line. Set the H1 (`AIICE // a wet-cabinet of cooled curiosities`) at clamp(56px, 8.4vw, 148px), weight axis animated from 380 → 720 over the first 1800ms of page load via the variable font's WGHT axis, optical-size axis pinned to 144 (display master), soft axis pinned to 100 (most humanist of Fraunces' shapes). Chapter heads in Fraunces 96/0.95, weight 540, optical-size 96, soft 80, set in italic for chapters II/IV/VI and roman for I/III/V/VII. **No letter-spacing tricks** — let Fraunces' eccentric forms breathe. Body display callouts use Fraunces' SOFT axis as a hover state: hover a chapter heading and SOFT animates 100 → 0 over 240ms (the letterforms harden, like ice contracting). - **EB Garamond** (regular, italic, semibold). The **scholarly-intellectual** body voice. All running prose, all specimen descriptions, all Latin binomials. Set at 17px / 1.55 line-height / measure 62ch / weight 400, italic for binomials and *journal asides*. EB Garamond's old-style figures and small-caps (used for catalogue numbers like *cat. xlvii.iii*) are mandatory. Color: slate (#3F464E) on the glass plane. - **JetBrains Mono** (regular, weight 400 only). Reserved exclusively for the **apparatus criticus** column — sample IDs, classification numerals, depth-in-core readings, timestamps. Set at 11px / 1.3 line-height in oyster-gray (#9DA4AC). Acts as the cold scientific counterweight to Fraunces' organic warmth and Garamond's bookish humanity. - **Caveat** (regular, weight 400). Reserved exclusively for the **handwritten ice annotations** drifting at Z=−500. Set at 18–24px on a sine-curve baseline, color #C9CED4 at 0.62 opacity. Used sparingly: roughly six annotations per chapter. The goblin's own hand. **Variable-axis storytelling.** The page exploits Fraunces' axes as a *narrative device*. As the visitor scrolls deeper into the ice column (greater Y), Fraunces' SOFT axis on all visible chapter headings animates downward in lockstep — by the colophon (chapter VII), all headings sit at SOFT=0, the most rigid, glass-shard form of the typeface. Letters literally crystallize as the visitor descends. This is the central typographic conceit and must not be omitted. **Palette — exclusively cool-grays, eight values, plus one forbidden ember:** - **#F4F6F8 — Frost-Linen.** Page background base. The cleared windowpane. Fills the full viewport behind everything. - **#DCE1E5 — Hoarfrost.** Card-glass tint. The pale haze inside each glassmorphic slab. - **#9DA4AC — Oyster.** Apparatus criticus, secondary metadata, footnote rules, fine borders. - **#6E767F — Slate-River.** Secondary headings, EB Garamond italics for Latin binomials, callout bars. - **#3F464E — Wet-Slate.** Primary body text. The dominant ink of the document. - **#2C3137 — Gunmetal-Damp.** Top of meltwater gradient. Used for chapter heading Fraunces fills. - **#1A1D21 — Glacier-Bed.** Deepest gray, bottom of meltwater gradient. Used only at the colophon and for the rock-face noise. - **#C9CED4 — Condensation.** Handwritten Caveat annotations only. The breath-on-glass color. - **#E8B96B — Smelt-Ember (FORBIDDEN except as `:focus` ring).** A single 2px outline in this candle-orange appears only when the visitor tabs to a focusable element. It pulses once over 320ms (opacity 0 → 1 → 0.4) then settles. This is the only warmth permitted on the entire site, and it must remain forbidden in all other contexts. It is the goblin's lantern, briefly held to the glass. Color rules: no pure white (#FFFFFF) anywhere — Frost-Linen replaces it. No pure black anywhere — Glacier-Bed replaces it. No saturation above 6% on any non-focus pixel. The site must register on a vectorscope as a near-vertical line through the gray axis with a single tiny orange spike. ## Imagery and Motifs **Three motif families, layered.** **1. Glassmorphic-cards (load-bearing imagery system).** Every primary content unit is a glass slab on Z=−120. The slabs differ from glassmorphism's saas-canon in three ways: (a) **non-rectangular bottom edges** — each card terminates in a 6–14px irregular jagged line (CSS `clip-path` polygon with 9–15 points, generated per card), reading as the broken edge of ice rather than a clean radius; (b) **trapped specimens** — 32% of cards contain a small embedded artefact photograph half-buried in their glass, positioned with negative margin so it appears to be *inside* the slab rather than on top; (c) **internal cracks** — three cards per chapter carry a single SVG hairline crack (1px, oyster, 0.5 opacity) traced via path-draw on scroll-into-view, taking 1400ms to complete. The cracks never repeat shape; each is hand-coordinate-defined. **2. Nature motifs (the goblin's quarry).** Photographic, not illustrated. Strict rules: only specimens that a damp-loving creature would hoard. Permitted: moss tufts (six species, all photographed wet), liverworts, lichen crusts, fern unfurling fronds, snail shells (empty), slug trails (silver), mushroom caps (gilled undersides only), bird skulls (corvid only), beetle elytra (iridescent, but desaturated in post), seed pods, twigs with bark-rot, pebbles. Forbidden: flowers in bloom, sunny meadows, butterflies, anything that would photograph well on a postcard. All specimen photographs are **desaturated to 0.18 saturation**, then **tinted via a duotone of Wet-Slate and Hoarfrost** so they read as monochrome cool-gray prints. They sit at Z=−360 and Z=−240 (moss band) and never on the primary card plane unless trapped inside the glass. **3. Layered-depth secondary motifs.** The deeper Z-strata (700+) carry abstract bedding-plane geometry: hairline horizontals every 80px, a few oblique fault-lines at 4° crossing the column at chapters III and V, faint arrow-marks indicating "way-up" geological convention. These are pure SVG, oyster at 0.10 opacity, and they never animate. They are the cold rationalist scaffolding behind the goblin's warm-blooded hoard. **Lottie-animation slot — the central interaction signature.** Each chapter heading carries a small (96×96px) **Lottie animation** rendered to the right of the heading. There are seven Lotties total, one per chapter, each depicting a different micro-narrative: - I. *Front Matter* — a single ice cube slowly melts over 18s revealing a brass key, then refreezes in a 2s reverse loop. - II. *The Cabinet* — a tiny goblin hand (4-finger silhouette, slate-gray) reaches up from the bottom of the frame, taps the glass twice, retreats. 6s loop. - III. *Mineralogy* — a pebble rotates on three axes inside an ice cube, casting moving caustics. 12s loop. - IV. *Stationery* — a fountain pen nib writes a single Latin word ("specimen") in graphite that crystallizes mid-stroke. 9s, plays once on scroll-into-view. - V. *Soft Tissue* — a snail shell rotates and a small drop of meltwater forms inside, then freezes. 14s loop. - VI. *Excurses* — footnote-mark superscripts drift upward like bubbles. 8s loop. - VII. *Colophon* — the page's full 540vh ice column collapses inward into a single Lottie ice-cube which slowly fogs over and goes dark. 22s, plays once at the end of the document. These Lotties are the **only colour interruptions allowed besides the focus-ring ember**, and even they are restricted to the cool-gray palette. They are the page's heartbeats. **Negative motifs (forbidden everywhere on the site):** sun, fire, blood, neon, chrome, gradients with more than 8% hue rotation, drop shadows in any non-cool color, isometric anything, pixel art, hand-drawn doodles in the margins, sparkles, stars, hearts, emoji, illustrated mascots, photographs of people, any element from frutiger-aero / y2k / vaporwave canon. ## Prompts for Implementation Build aiice.dev as **one HTML document, one CSS file, one ES module, one Lottie player, seven Lottie JSON files**. No framework. No router. No SPA. No "above-the-fold" pricing block, no CTA grid, no testimonial carousel, no pricing tiers, no stat-counter. The page is a *catalogue* — narrative > conversion. **Storytelling is the organizing principle, not navigation.** The visitor lands on the front matter, scrolls through seven chapters of a goblin-scholar's catalogue of cooled curiosities, and arrives at a colophon. There is no "next page". There is no second URL of substance. **Chapter-by-chapter implementation:** 1. **Front Matter (0–70vh).** Page loads with Frost-Linen background and a 600ms fade-in of Z-strata 7 through 11 (deep ice, bubble field, fern silhouettes, bedding lines, rock face). Then at 600ms, the H1 (`AIICE // a wet-cabinet of cooled curiosities`) materializes via Fraunces WGHT animation (380 → 720 over 1800ms) at Z=−120, set inside a single tall glass slab spanning columns 3–9. At 1200ms, the apparatus criticus column fades in at Z=−40 with sample-ID metadata: `cat.gen.001 / depth 0.0m / temp -2.4°C / collector: c.g.k. / fri 9 may`. At 2400ms, the chapter-I Lottie (melting ice cube revealing brass key) begins its 18s loop. Below the H1, a single EB Garamond italic epigraph: *"That which the warm scholar discards, the cold scholar collects."* — attributed to *Goblinus minor, manuscriptum perditum, c. 1888.* 2. **The Cabinet (70–140vh).** Three glass slabs in a 4-3-5 column rhythm introduce the goblin-curator. Each slab carries one paragraph of EB Garamond body and a single trapped specimen (slab 1: a wet-bark fragment; slab 2: a fountain pen nib; slab 3: a corvid skull). The Lottie (goblin hand tapping glass) sits beside the chapter heading at the top. The moss stratum (Z=−240) becomes visible behind slab gaps and drifts at 0.7× scroll. Cracks: slab 2 carries a hairline crack that path-draws on scroll-into-view. 3. **Specimen Group A — Mineralogy (140–210vh).** Four slabs in a 3-5-3-7 rhythm. Each slab is a single specimen entry: catalogue number in JetBrains Mono small-caps, Latin binomial in EB Garamond italic, photograph trapped in glass, descriptive paragraph with footnotes that escape into the apparatus criticus column. Specimens: *Lapis frigidus var. erratica* (a glacial erratic), *Crystallus aciculatus* (frost needles), *Petra cum musco* (a moss-grown pebble), *Conglomeratum apparens* (a fake conglomerate, marked "GOBLIN FORGERY" in the apparatus). The fake-forgery joke is the chapter's payload. 4. **Specimen Group B — Stationery (210–280vh).** Five slabs, narrower (3-3-3-3-12 layout), each holding a writing implement frozen mid-use: a pen, a pencil, an inkwell with frozen ink, a wax seal, a manuscript page. The chapter Lottie (pen writing "specimen" in crystallizing graphite) plays once at the heading, replays only on click. 5. **Specimen Group C — Soft Tissue (280–350vh).** Three large slabs (5-7-12 spanning), each with substantial body text and a centerpiece specimen: a snail shell, a slug trail (preserved as silver smear on a glass plate), a Pleistocene horsefly in a champagne flute. The body text discusses preservation chemistry in mock-academic register. Two cracks: one across slab 5-span, one diagonal across slab 12-span. 6. **Excurses (350–420vh).** This chapter is structurally inverted: the apparatus criticus column *expands* to 40% of the viewport width, and the main column shrinks. Footnotes that were marginal everywhere else become primary content here. Body text is set in JetBrains Mono 13px to signal "this is the marginalia speaking now." Bubbles (Z=−700) increase density 3× in this chapter, drifting upward faster, reading as the page exhaling. Lottie (footnote-marks rising as bubbles) plays continuously. 7. **Colophon (420–490vh).** Single tall slab spanning columns 3–10, EB Garamond at 15/1.7. Credits: typefaces (Fraunces, EB Garamond, JetBrains Mono, Caveat — all SIL OFL 1.1), Lottie author, photographic credits (all CC0 specimen photos from the public domain, listed by accession number). At 490vh, the chapter-VII Lottie begins (the entire ice column collapsing into a single fogging ice cube), playing for 22s. The page ends in near-darkness (#1A1D21) with the Lottie cube slightly visible. No footer links, no social, no CTAs. Just the cube, slowly opaquing. **Animation principles — strictly cold.** All easing curves use `cubic-bezier(0.45, 0, 0.15, 1)` (asymmetric, slow-start, fast-end — like water freezing then cracking). Card scroll-into-view triggers a **frost-bloom effect**: the card's `backdrop-filter` blur starts at 0px and ramps to 18px over 600ms, while a subtle white inner-glow (rgba(255,255,255,0.04)) blooms then fades. No bouncing, no springing, no wobble — those are warm-coded. Scroll velocity is dampened on touch via `scroll-behavior: smooth` plus a 60ms inertial easing. **Cursor behaviour.** Replace the default cursor with a 14×14px cool-gray crosshair (custom SVG cursor), and on hover over any glass slab, the cursor briefly shows a 1px frost ring (24px diameter) that fades over 400ms. On hover over a specimen photograph, the cursor switches to a magnifying-glass crosshair (also cool-gray) and the specimen scales 1.04× over 320ms. **Audio (optional, off-by-default).** A toggle in the apparatus criticus column offers an ambient track: faint glacier-creak field recording on 90s loop, low-passed at 800Hz, −22dB. The toggle button is a 12px JetBrains Mono `[ silence / glacier ]` switch. No autoplay, ever. **Performance constraint that doubles as aesthetic.** Limit total page weight to 2.4MB across all assets — Lotties dominant, photographs second, fonts third. This forces the photographs to be small (max 480px wide) and slightly blurred (3px gaussian) when displayed, which is *desirable*: every specimen reads as if seen through six millimetres of fogged ice. The performance constraint is the visual constraint. (Note: this is an aesthetic choice, not an accessibility/performance optimization. We do not measure CLS, LCP, or Lighthouse here.) **No external links.** The site does not link out. The catalogue is sealed. ## Uniqueness Notes Eight differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Cool-gray goblincore.** Frequency analysis: goblincore appears in ~4% of designs (uncommon), cool-grays appears in ~2% (rare), and **their intersection is zero before this design**. Goblincore's web canon is universally warm — moss-green, mushroom-amber, peat-brown, ochre-rot. aiice.dev is the registry's first design to render goblincore *thermally inverted*: same loving-the-discarded ethos, opposite temperature. The goblin lives in a glacier, not a forest floor. This is the load-bearing conceit. 2. **Layered-depth as physical ice strata, not parallax velocity.** Layered-depth appears in 14% of registry designs but is universally implemented as 3-card-deep blur stacks. aiice.dev implements eleven discrete Z-strata as *measurable physical thicknesses of ice*, each with its own bubble density, internal noise, and refractive offset. The layering is geological, not graphical. 3. **Variable-font crystallization narrative.** Fraunces' SOFT axis is animated *across the entire scroll length* in lockstep with vertical position — letters literally harden as the visitor descends into colder strata. Expressive-variable typography appears in 6% of designs but no other site uses the variable axis as a long-form narrative device tied to scroll depth. Most uses are decorative micro-interactions on hover. aiice.dev makes the axis the page's structural metaphor. 4. **Forbidden-warmth focus ring.** The cool-gray rule is enforced absolutely *except* for a single 320ms candle-orange focus ring (Smelt-Ember, #E8B96B). This is the only warm pixel allowed anywhere on the site, and its rarity is the design rule that makes the cool palette read as *withheld* rather than *empty*. No other registry design uses palette-restriction as a dramatic device this strictly. 5. **Glassmorphic cards with jagged ice-fracture bottoms.** Glassmorphic-cards appears in 6% of registry designs but always with clean rounded rectangles. aiice.dev mandates 9–15-point clip-path polygons on the bottom edge of every card so they read as fractured ice slabs, not acrylic chips. Three cards per chapter additionally carry path-drawn SVG hairline cracks. The cards are wounded. 6. **Apparatus criticus column as scenographic device.** The 56px right-margin column running JetBrains Mono in oyster-gray converts every page-load metadata point into ambient typography. This is borrowed from critical-edition scholarly publishing (Loeb Classical Library, Oxford Classical Texts) and has no precedent in the registry's web designs. The marginalia is part of the cabinet, not chrome. 7. **Lottie-animation as chapter heartbeats.** Lottie-animation appears in 0% of the registry's analyzed designs (it is in the seeds vocabulary but underused). aiice.dev commits seven discrete Lotties, one per chapter, each a 6–22s narrative micro-loop integrated with the chapter's content. The colophon Lottie (the ice column collapsing into a fogging cube) is the page's outro. 8. **Photographic specimens trapped inside cards, not pasted on top.** 32% of glass slabs contain a small specimen photograph positioned with negative margin so it reads as embedded *inside* the ice. No other registry design uses inverse-paste compositing; this is the literal expression of the goblin's hoarding behaviour. **Avoided patterns from frequency analysis:** - Photography-heavy hero (96% of registry) — replaced by glass slabs containing partial specimen embeds, never a clean hero photograph. - Mono typography (94%) — present only in the apparatus criticus column, never in body or display. - Hand-drawn aesthetic (92%) — explicitly forbidden; all imagery is sharp-focus photography seen through ice. - Parallax (92%) — replaced by Z-stratum physical thickness model. - Warm palette (90%) — fully inverted to cool-grays; warm pixels are contraband. - Gradient (92%) — used only for the meltwater vertical ramp; no horizontal gradients, no radial gradients except the bubble field. - Centered layout (76%) — forbidden; asymmetric moraine grid is mandatory. - Card-grid (56%) — replaced by imbricately-overlapping ice slabs that occlude each other 80–140px. - CTA-heavy / pricing / stat-counter — entirely absent. The page is a sealed catalogue. **Chosen seed (from assignment):** aesthetic: goblincore, layout: layered-depth, typography: expressive-variable, palette: cool-grays, patterns: lottie-animation, imagery: glassmorphic-cards, motifs: nature, tone: scholarly-intellectual.