# Design Language for dilemma.dev

## Aesthetics and Tone

dilemma.dev is staged as **a goblin's mossy treasure-cave that has been quietly re-tooled into a developer's decision journal** — imagine a hoarder-goblin who, instead of collecting bottle-caps and magpie-coins, has been collecting *forking decisions* for three centuries: every fork in every codepath, every two-paths-diverge moment from every git history that ever existed, all carefully labeled, all pinned through with brass map-pins, all displayed on a sloping vertical timeline that smells faintly of damp lichen and oxidised silver.

The aesthetic core is **goblincore in a developer key** — but not the saccharine cottagecore-adjacent goblincore of Tumblr moodboards (mushrooms and frog buttons), and not the chaotic-tagged goblincore of fast-fashion drops. This is *archivist goblincore*: a being with hoarder's patience and a curator's eye, who has decided that *the most valuable thing in the world is the moment of choice itself*. Every "either/or" is a specimen. Every "do-I-do-this-or-that" is preserved in a tiny rust-rimmed display case. The site is the cave-mouth where these specimens hang, suspended along one long mossy rope of timeline.

The trick — and the entire personality of the site — is the violent collision of **mossy organic-decay** (lichen-stained botanical illustrations, hand-pressed leaf scans, peat-water tannin stains) against **navy-metallic precision** (oxidised silver, gunmetal indigo, cold ink-blue varnish, faceted crystalline pyrites embedded in the moss). The goblin is a *perfectionist*. The hoard is *catalogued*. The cave is *organised*. This is what makes it a developer's site instead of a forest's: every leaf-pressing is hung on a brass nail at exactly 14.5 degrees from horizontal; every crystal cluster is a typed enum with a serial number; every dilemma has a UUID stamped on its back in oxidised lead-type.

The tone is **playful** — at 24% the most "common" axis of the seed, but here pulled in a rare direction. This is not the bouncy-bright playful of dopamine-neon SaaS, nor the whimsical-creative of agency-portfolio sites. This is **goblin-playful**: dry, slightly conspiratorial, deeply fond of the visitor, full of footnotes and wink-asides scribbled in a 19th-century naturalist's hand. The voice murmurs. The voice has a favourite pen. The voice has just remembered something extremely important about a fork in someone's code from 2014 and is *delighted* to show you.

Mood references that should bleed into every choice:

- **Beatrix Potter's specimen plates** — the ones in the Armitt Library, where she pressed and watercoloured fungi with the patience of a typesetter — re-imagined as decision-trees.
- **Joseph Cornell's shadow-boxes** — small wooden cases pinned with feathers, ticket-stubs, and tiny brass instruments — repurposed as commit-message vitrines.
- **The Codex Seraphinianus's botanical pages** — illustrative, dense, whispering in a script you cannot read but want to.
- **The interior of an apothecary cabinet on a rainy afternoon** — drawer after drawer, each labeled, each containing one perfect specimen of one perfect choice.
- **An oxidised astrolabe found in a peat bog** — silver gone to gunmetal, geometry still legible, faintly humming with the cold of the water it was buried in for two hundred years.

The page should feel like a visitor has stumbled into the goblin's quiet cataloguing-room and the goblin, looking up from a brass-handled magnifier, is delighted to walk them down the timeline and explain — in a low, fond, slightly conspiratorial voice — *every single fork that has ever happened*.

## Layout Motifs and Structure

The composition is **timeline-vertical taken as the entire architectural skeleton** — not a section, not a feature, but the entire page is *one continuous vertical timeline*. Timeline-vertical sits at 1% in the corpus frequency analysis; dilemma.dev claims that empty room with the whole site, not a slice of it.

The page is roughly **1100vh tall** — a deliberately enormous, scrollable rope of timeline that the visitor walks down at their own pace. There is no horizontal navigation, no sticky header, no nav-bar, no menu. There is only **the rope** — a single vertical mossy cord that runs from the very top of the page (where it is tied, in a Turk's-head knot, to a brass eyelet bolted into the cave-ceiling) all the way to the bottom (where it disappears into a small dark pool of peat-water at the foot of the page). Specimens hang from this rope.

**The Rope.** A single SVG path runs the full document height, drawn with a rough hand-illustrated stroke (variable width, irregular fibre, occasional knot). It is **NOT straight** — it sways from `x = 38vw` at the top to `x = 62vw` at the bottom in a slow, four-cycle sine wave (period roughly 280vh per cycle). The rope is **navy-metallic dipped**: the upper third is mossy hemp (`#3D4A2C`), the middle third oxidises to dark indigo-iron (`#1F2942`), the lower third turns to bog-tarnished silver-blue (`#475E78`). This colour-shift is the visitor's progress meter: if the rope under your cursor is mossy, you are early; if it is silver-blue, you are nearing the pool.

**The Specimens (Dilemma Cards).** From the rope hang **23 specimen-cards**, each one a hand-drawn shadow-box pinned to the rope at an alternating angle (left-of-rope, right-of-rope, left-of-rope, right…). Each card is anchored to the rope with a small length of waxed thread, drawn as a separate SVG sub-path with a tiny brass map-pin at the rope-end. The cards are **NOT a grid**. They do not share width, height, or vertical spacing. Card heights range from 220px (a short either/or) to 980px (a deep, footnoted ten-fork chain). Vertical spacing between consecutive cards is governed by a long-form **noise function** seeded by card index: some cards are crowded together (two specimens hanging close, almost overlapping); some are separated by 90vh of rope-only quiet, the rope swaying alone through empty cave-air.

The 23 specimens are not blog posts and not portfolio items. Each one is **a developer's recorded fork** — a moment of "do I do this, or that?" — preserved as a small naturalist's display:

1. The card itself (a hand-illustrated wooden shadow-box, 4–7 sides, never a perfect rectangle, drawn in SVG with rough-cornered paths).
2. A pinned **botanical illustration** of the dilemma, rendered as a two-pathed plant: one stem, two leaves, each leaf labeled with the alternative the developer chose between (e.g. left leaf: "PostgreSQL", right leaf: "SQLite").
3. A brass nameplate with the dilemma's title, set in grotesque-neo metal type.
4. A footnote, in a small italic hand, explaining what the goblin thinks about this particular fork. (The footnote always begins with a small handwritten symbol: ☙, ❦, ✿, or ❧.)
5. A faceted crystalline pyrite cluster in one corner of the card — different colour and facet-count for each specimen, encoding which path was eventually chosen.
6. A small UUID stamped in oxidised lead-type along the bottom edge.

**The Sloping Timeline.** The rope is not just a vertical line — it has a **time-axis**. The top of the rope is anchored to the year **1969** (a brass plate engraved "FIRST RECORDED FORK · 1969") and the bottom of the rope is anchored to **today's date** (another brass plate, "LATEST FORK · {today}"). Between them, the 23 specimens are positioned in chronological order with their actual year visible on a small tag on the brass map-pin. Years are clustered: many specimens in the late 1990s and early 2010s, fewer in the 1970s, dense again in the 2020s. The rope therefore *also* functions as a developer's archaeological core sample.

**The Cave Walls.** The page background is a single dark navy-metallic gradient (`#0E1424` at top, fading through `#1A2440` middle, to `#0A0E1C` at the bottom-pool). Over this gradient, hand-drawn cave-wall textures are placed at full-bleed: faint chalk-marks, mineral seams, the suggestion of ferns, all rendered in low-opacity SVG. The cave is **decisively dark** — this is *not* a bright playful site. Goblin-playful is a low, fond, conversational warmth in a dim space lit by a single oil-lamp.

**Anchors and Footnotes.** Hovering on a specimen card causes the rope above and below it to *tighten*, and a hand-drawn map-line draws (using path-draw-svg) from the card across to one or two **other cards** on the timeline that the goblin considers related. These cross-rope threads are rare (only ~14 of them across the whole timeline) and are drawn in soft fibre-gold ink. They form a hidden second graph layered over the timeline: not a tree, a sparse meshwork, the goblin's *cross-references*.

There is **no CTA**, no pricing block, no stat grid, no testimonials, no contact form, no signup, no FAQ, no team-grid, no logo-soup. There is only the rope, the specimens, the cave, the goblin's footnotes, and the slow walk down.

## Typography and Palette

**Type system — Google Fonts only, in a grotesque-neo key with one expressive hand-companion.**

- **Primary display & body face: `Space Grotesk` (variable, weights 300–700)** — the *grotesque-neo* type of the site. Space Grotesk is a contemporary neo-grotesque (the descendant of Akzidenz-Grotesk and the cousin of Helvetica) re-cut with sharp ink-traps and modernist crispness. It has the cold geometric authority of a brass nameplate. On dilemma.dev it does *all* the structural work: the dilemma titles on each shadow-box ("USE-MIGRATIONS-OR-RECREATE-DB"), the year-stamps on the brass map-pins ("1996", "2003", "2024"), the UUID-strings, the hover-labels, the navigation hint at the top of the rope. Set in **medium 500** at body sizes; **bold 700** at dilemma titles; **light 300** at the year-stamps and UUIDs (where it should look stamped, not printed). Tracking always slightly tightened (`letter-spacing: -0.012em`) to give the type the compressed authority of cast lead.
- **Companion expressive face: `Caveat` (variable, weights 400–700)** — used **only** for the goblin's footnotes and the small handwritten symbols (☙ ❦ ✿ ❧). Caveat is the closest Google Fonts approximation of a 19th-century naturalist's quick brown-ink hand. It is set at 1.04em, italicised in spirit (Caveat is naturally cursive), with `letter-spacing: 0` and a slight `transform: rotate(-0.6deg)` on each footnote block so they look pinned to the card slightly off-square.
- **Tertiary face: `JetBrains Mono` (regular 400)** — used **only** for the lead-type UUIDs and the rare code-fragments embedded in specimen cards (e.g. a `git checkout -b` line, a `Cargo.toml` entry). Set in 0.78em, colour `#475E78` (oxidised silver-blue).

There are exactly **three** typefaces. No others. Every word on the page falls into one of these three voices: brass-nameplate (Space Grotesk), goblin-handwriting (Caveat), or stamped-lead-type (JetBrains Mono). The trio is the *whole* type system — a deliberate restraint against the corpus's tendency toward eclectic-hybrid typesetting.

**Palette — navy-metallic, in eight pinned values.**

- `#0A0E1C` — **bog-bottom navy** (page background at the foot of the rope; the deepest cave-shadow)
- `#0E1424` — **night-cave navy** (page background, default; dominant)
- `#1A2440` — **damp-stone indigo** (page background, mid-rope; gradient mid-stop)
- `#1F2942` — **rope-iron indigo** (the middle third of the rope; oxidised iron-on-hemp)
- `#475E78` — **bog-tarnished silver-blue** (the lower third of the rope; UUID-text; lead-type tone)
- `#7C8FA8` — **brushed-tin highlight** (specimen-card hairline borders; rope highlight; the cold metallic accent)
- `#C9D5E2` — **frost-silver** (primary text on cards; hover-state titles; the cold near-white)
- `#E8EEF5` — **moonstone-white** (the brightest used value, for crystalline pyrite specular highlights and for the year-stamp engravings on brass plates)

**Plus three controlled non-navy accents — mossy in the upper rope, used sparingly:**

- `#3D4A2C` — **lichen-moss green** (the upper third of the rope; only place green appears on the site)
- `#A87B3B` — **brass-pin warm** (every map-pin and brass-nameplate base-tone; the only warm note)
- `#7E6238` — **oxidised-brass shadow** (the shadow side of every brass element; secondary brass tone)

Total: **eleven** named values. The page reads as **navy-metallic dominant with mossy-and-brass accents** — every chrome-cold value of the navy palette anchored to the cold ink-blue of an apothecary's cabinet, every warm value confined to the brass map-pins and the upper mossy rope. The colour story is *the goblin's lamp-light is brass; the cave-water is navy; the moss at the top of the rope remembers the forest above.*

The contrast is high but not strident: frost-silver (`#C9D5E2`) on night-cave navy (`#0E1424`) gives a calm, lamplit reading temperature. Specimen card text is set on `#1A2440` shadow-box backgrounds at frost-silver, with brass-pin warm reserved for the small map-pin and a single underline on hovered titles.

## Imagery and Motifs

Every visual element on dilemma.dev is **hand-illustrated, drawn in inline SVG, and entirely original** — no photography, no stock vectors, no 3D renders, no icon-fonts, no third-party Lottie packs. The image-language is the **botanical-illustration** plate of a 19th-century naturalist re-tooled for developers, anchored against **crystalline** pyrite mineral specimens.

**1. Botanical-illustration specimens** (the underused 2% imagery axis, promoted to *signature*).

Each of the 23 dilemma-cards carries one purpose-drawn botanical plate. The plate is rendered as inline SVG with five layers:

- **The stem** — a single hand-drawn stroke, slightly off-vertical, drawn with variable width (a quill nib's pressure), in `#3D4A2C` (lichen-moss green) at 0.65 opacity.
- **The two leaves** — one to the left of the stem, one to the right, each leaf a unique shape (no two leaves on the site are the same). Each leaf is labeled in tiny Caveat with the alternative the developer chose between. The chosen alternative's leaf is rendered fully (in moss-green); the *not-chosen* alternative's leaf is drawn only as an outline, ghosted at 0.35 opacity, with a small tear at one edge — the path not taken.
- **The root** — a small radiating frill of fibrous roots at the bottom of the stem, drawn in `#7E6238` (oxidised-brass shadow). The roots are always rendered fully — the dilemma is grounded in something, regardless of which path was taken.
- **The pinned brass map-pin** — a small hand-drawn brass pin spearing the stem at exactly the fork-point, in `#A87B3B` brass-pin warm with a `#E8EEF5` moonstone specular dot.
- **The labeling** — three small Caveat tags hand-tied to the stem with thread: one above the fork (the dilemma's question), one on each leaf (the two alternatives).

The botanical illustrations are NOT decorative — they are **the encoding** of the dilemma. The naming, the leaf-shapes, the root-fibres, the angle of the fork: every stroke means something. A visitor who reads the page slowly comes away with a botanical knowledge of choice-shapes.

**2. Crystalline pyrite-cluster motifs** (motifs: crystalline, 9%; here pulled into the navy-metallic key).

Embedded in one corner of every dilemma-card is a small SVG **pyrite cluster** — a hand-drawn faceted crystal aggregate, rendered with three to nine faces. Crystalline is the navy-metallic anchor of the visual language: the pyrite clusters are the *gemstones in the goblin's hoard*, the cold crystalline counter-weight to the warm botanical specimens. Each cluster is generative, seeded by the dilemma's UUID:

- **Face count** (3 to 9) encodes how many alternatives the developer ultimately considered before forking.
- **Facet colour** is drawn from the navy-metallic palette: deeper indigo for older dilemmas, brushed-tin for recent ones, frost-silver for unresolved ones (those rare specimens where the goblin notes "STILL OPEN").
- **Specular highlight** is a single moonstone-white triangle on one face, positioned such that the highlight always points toward the cursor as it hovers. (See Implementation: Cursor-light.)
- **Cleavage planes** (the dark cracks between facets) are drawn with a hand-jittered stroke at `#0A0E1C` to suggest the pyrite has been pried out of bog-rock and not yet polished.

The pyrite clusters are **the only motif allowed to be fully crystalline geometry on this site** — every other surface is mossy, hand-drawn, organic. The crystalline-vs-organic tension *is* the visual identity.

**3. Hand-drawn cave-wall textures** (full-bleed, low-opacity).

Behind every section of rope, a faint cave-wall layer is rendered in SVG: chalk hatchings (the goblin counts something on the walls), mineral seams (thin brass-pin-warm veins through the dark indigo stone), occasional fern-frond shadows (a reminder that surface-world flora reaches its roots into the cave). The cave-wall is at 0.08 opacity — barely there, but you feel it. Without it, the dark backdrop reads as a flat panel; with it, the page reads as *somewhere*.

**4. The brass instruments at the rope-foot.**

At the very bottom of the page, where the rope disappears into the peat-pool, a hand-drawn arrangement of small brass naturalist's instruments rests on a stone shelf: a magnifier, a pair of tweezers, an oxidised silver pen, a small ledger labeled "FORK BOOK · VOL. XII." These are the goblin's tools; they are static (no animation other than the cursor-light specular reflex). They are the implicit signature of the curator: *all of these specimens were collected by hand, with these instruments, in this room.*

**5. Map-pins as the only repeating UI atom.**

There are no buttons, no toggles, no tabs, no breadcrumbs. The only repeating UI element on the page is the **brass map-pin**, used three ways: (a) anchoring each specimen-card to the rope; (b) marking the year-stamp at the top and bottom of the rope; (c) marking each cross-rope footnote-thread's endpoints. Hovering a pin causes a small "shake-error" jitter (see Patterns) plus a brass-tone audio click in a hidden `<audio>` element (mute by default, only un-muted by user gesture).

There are deliberately **no humans, no faces, no figures, no characters** rendered anywhere on the page. The goblin is the *implied* curator — a presence felt through hand, voice, footnotes, and care — never illustrated. This absence is part of the goblincore intimacy.

## Prompts for Implementation

Build dilemma.dev as a **single, statically-served HTML document** with one CSS file and one ES module. No framework, no router, no bundler, no build step. The narrative is the scroll. The visitor arrives at the cave-mouth at the top of the rope and walks down, specimen by specimen, until they reach the peat-pool at the foot of the page. The whole page is roughly 1100vh tall.

**The rope as the page's spine.**

Render the rope as one inline SVG `<path>` placed in a `position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; pointer-events: none; z-index: 1;` overlay layer that draws **only the visible portion** of the rope (window-clipping). The path coordinates are computed once on load from a noise function seeded by the string `"dilemma-rope-2026"`; the path runs from `(0.38 × innerWidth, -40)` to `(0.62 × innerWidth, totalDocumentHeight + 40)` with four sine-wave control points and per-segment width variation (3px to 7px stroke). Re-clip on scroll using `scrollY` and `innerHeight`. Do **not** redraw the path on scroll — only re-clip and re-position the SVG's viewBox. Stroke-colour is a `linearGradient` from `#3D4A2C` at top, through `#1F2942` at mid, to `#475E78` at bottom; the gradient `gradientUnits="userSpaceOnUse"` is fixed against the document, not the viewport, so the rope's colour reflects *document position*, not scroll-position.

**Specimen-card layout.**

Each of 23 specimen-cards is a standalone `<article class="specimen">` with a fixed `top` value computed at build time (encoded as a CSS custom property `--top: {value}vh;`). Cards alternate `left: 14vw;` and `right: 14vw;` (so they hang on alternating sides of the rope). Card width is `clamp(280px, 28vw, 460px)`. Card height is intrinsic (content-driven). Each card is wrapped in a slightly rotated container (`transform: rotate(var(--tilt));` where `--tilt` is between `-2.4deg` and `+2.6deg`, deterministic per card index).

The connecting **waxed-thread** from rope to card is a separate inline SVG `<path>` per card, drawn with a hand-jittered stroke (`stroke-dasharray: 0; filter: url(#thread-jitter);`) connecting the rope at the card's vertical position to the upper-left or upper-right corner of the card. The thread sways slightly on the spring-physics simulation (see below).

**Storytelling and animation choices (in order of importance):**

1. **shake-error as the core hover idiom** (the underused 4% pattern, promoted to *primary interaction*). This is the playful goblincore signature. Every brass map-pin, on hover, performs a tiny shake-error jitter: 4 frames of `translate(±1.2px, ±0.8px)` over 180ms, then settles. This is not error-feedback in the conventional sense — it is the *goblin's delighted twitch* when a visitor notices a specimen. Apply shake-error also to: the rope-foot brass instruments on hover; cross-rope footnote-thread endpoints on hover; and *every UUID-stamp on click* (the UUID jitters and copies itself to the clipboard, with a tiny fond Caveat-text "yes, take it" appearing for 1.4s). The shake-error easing is `cubic-bezier(0.36, 0.07, 0.19, 0.97)` — borrowed from the classic CSS-trick "shake" but with smaller amplitude.

2. **path-draw-svg for cross-rope cross-references** (26%, but used here in a specifically narrative way). The 14 cross-rope footnote-threads (the goblin's "see also" references between specimens) are *not visible by default*. They draw, one at a time, on hover of the related specimen, using `stroke-dashoffset` animation over 1.6s. The threads remain visible for as long as the cursor stays on the specimen, then unwind back to invisibility on cursor-leave (reverse `stroke-dashoffset` animation, 1.0s). When more than one specimen is touched in sequence, threads layer; the page becomes a brief, sparse meshwork of fibre-gold lines connecting the goblin's cross-references, then resettles to quiet.

3. **scroll-triggered specimen reveal** (20%, here in a quiet variant). Each specimen-card fades in from `opacity: 0; transform: translateY(28px);` to default state when its bounding box enters the viewport's middle 60%. Stagger is rejected — there is no per-element-stagger because specimens *are* already staggered along the rope. The reveal is per-card-on-its-own. The botanical illustration *inside* the card draws itself with `path-draw-svg` over 1.8s when the card enters reveal — first the stem, then the chosen leaf, then the ghost-leaf, then the root-fibres, then the brass pin spears the stem. The pyrite cluster appears last with a 220ms specular-shimmer.

4. **Cursor-light on pyrite specular highlights** (a quiet variant of cursor-follow, which is at 80% in the corpus — but here pulled into a single specific motif: the lamp). The cursor is the goblin's oil-lamp. As it moves over the page, every visible pyrite cluster's `#E8EEF5` moonstone-white specular triangle re-positions on its facets to "face" the cursor. This is computed in the ES module on `mousemove` (throttled to 16ms) by computing `atan2(cursor.y - cluster.cy, cursor.x - cluster.cx)` and rotating each cluster's specular layer accordingly. There is **no other cursor-effect on the page** — no cursor-trail, no cursor-magnetic, no cursor-aura. Just the lamp. The pyrites turn their faces toward the visitor.

5. **Spring-physics on the thread connecting card to rope** (75% — but used minimally, just on the connecting threads). Each waxed-thread's two endpoints (rope-end and card-end) are simulated with a simple Hookean spring (mass 1, k = 0.18, damping 0.92), updated at 60fps. The card-end is pulled toward the card's top corner with stiffness; the rope-end is pinned. As the visitor scrolls, the rope-end is repositioned, and the card-end *trails* by a few frames before settling — the thread sways. This is the *only* spring-physics on the page; it is reserved entirely for the threads.

6. **No parallax on hero, no tilt-3d, no glassmorphism, no neon-glow, no card-flip, no typewriter-effect, no counter-animate.** All of these are explicitly absent. The site reads as quiet and ink-on-paper-with-occasional-brass-flicker, not as motion-heavy interactive.

**Sound (optional, opt-in only).** A single hidden `<audio>` element loads a 4-second loop of *soft cave-water dripping*, very quiet (gain -22dB). On the very first user click anywhere on the page, the loop fades in to `gain -28dB` over 8 seconds. There is a small Caveat-typed control at the bottom-right of the page: `silence the cave?` Clicking it fades the loop to silence over 1.8s. The audio is the *only* non-visual sensory layer; everything else is image and type.

**The opening (Cave-Mouth).**

On first paint, the viewport is night-cave navy `#0E1424`. The brass plate at the top reads, in moonstone-white Space Grotesk 700 at clamp(48px, 7vw, 96px): **"DILEMMA · DEV"** with a smaller subtitle in Caveat: *"a goblin's catalogue of forks, kept in a cave, by hand"*. Below the plate, the rope descends into the page. The first specimen — *USE-MIGRATIONS-OR-RECREATE-DB · 1996* — hangs at 28vh from the top. The visitor's first scroll begins the walk.

**The closing (Peat-Pool).**

At the foot of the page (1080vh+), the rope enters a small dark pool of bog-water, drawn as a single hand-illustrated SVG ellipse with rippled edges. A small Caveat note reads, slightly hand-rotated: *"this is where forks go to be remembered. thank you for walking down. — the goblin"*. There is **no signup, no contact form, no further-reading link**. The pool is the end. Below the pool is the brass-instruments shelf and that is the entire page-foot.

**Bias toward storytelling, not conversion.** dilemma.dev is a quiet, slow-walked archive. It is not selling anything. It is not collecting emails. It is not pricing tiers. It is not testimonials. It is one goblin and one rope and 23 forks and a peat-pool. Resist every instinct to add a CTA, a stat-block, a feature-grid, a logo soup, a "trusted by" row, a pricing table, a comparison table, a feature-card-trio, a hero-with-product-screenshot, an aspirational-photograph, or a newsletter modal. The visitor's reward is the walk.

## Uniqueness Notes

This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis. Other CMassC sites must not duplicate any of these.

1. **Goblincore promoted from a 2% aesthetic curiosity to the entire site's worldview, in a developer key.** Goblincore sits at 2% in the aesthetic frequency — the corpus has barely touched it, and the few existing uses lean cottagecore-adjacent (mushrooms, frogs, soft cardigans). dilemma.dev pulls goblincore in a sharply different direction: the goblin is an *archivist developer*, the cave is a *catalogue*, the hoard is *forks*, and the moss is paired against navy-metallic precision rather than wholesome pastoral colour. No other site in the corpus reads the goblincore brief as "a hoarder-curator with a UUID stamp."

2. **Timeline-vertical as the entire page architecture, not a section.** Timeline-vertical is at 1% in the layout frequency — when it appears in the corpus, it is a single dated section in an otherwise card-grid or full-bleed page. dilemma.dev makes the timeline *the whole page*: 1100vh of vertical rope, 23 specimen-cards hung from it, no navigation, no sections-other-than-the-rope. The rope is the spine, the only spine, and the whole user experience is the slow walk down.

3. **Botanical-illustration as encoding, not decoration.** Botanical-illustration is at 2% in the imagery frequency — and where it appears in the corpus, it is decorative (a leaf in a corner, a vine in a margin). On dilemma.dev, every botanical plate *is* the encoding of a developer's dilemma: stem-as-question, two-leaves-as-alternatives (one solid, one ghosted), root-as-grounding, brass-pin-as-fork-point. No other site uses botanical-illustration as a deterministic encoding of choice-shapes.

4. **shake-error elevated from error-feedback to a positive interaction idiom.** shake-error is at 4% in the patterns frequency, and where it appears, it is an *error* signal: a form-field jitter when validation fails. dilemma.dev inverts this completely: shake-error is the *delighted goblin twitch*, fired on every brass map-pin hover, on UUID-click-to-copy, on cross-rope footnote-thread endpoints. It is the site's joy-signal, not its failure-signal. No other site in the corpus uses shake-error as a positive-affect interaction.

5. **Crystalline against organic, in a single unbroken visual tension.** Crystalline motifs are at 9% in the corpus, where they appear as standalone aesthetic flourishes (a faceted hero shape, a crystalline icon set). dilemma.dev pairs crystalline pyrite clusters *one-to-one* against hand-drawn botanical plates on every specimen card — the cold geometry of the pyrite always sitting in the corner of the warm organic illustration. The whole visual language is the friction between these two registers; no other site stages this tension as the core image-system.

6. **Navy-metallic palette grounded by exactly one warm and one mossy accent.** Navy-metallic is at 3% in the palette frequency, and where it appears, it tends to be paired with neon-electric or chrome highlights for a tech-forward feel. dilemma.dev pulls navy-metallic toward an *apothecary-cabinet* register: every cool value is a navy or a gunmetal, the only warm note is brass-pin (`#A87B3B`), and the only non-navy non-brass colour is the lichen-moss `#3D4A2C` of the upper rope. The palette therefore reads as *cave at night with a single brass lamp* — not as *fintech dashboard*.

7. **Grotesque-neo paired with one handwritten companion and one stamped-mono, no eclecticism.** Grotesque-neo is at 3% in the typography frequency. Most of the corpus that uses it pairs it with multiple display faces or oversized hero type. dilemma.dev restricts itself to exactly three Google Fonts (Space Grotesk, Caveat, JetBrains Mono), uses each in a single role (brass-nameplate, goblin-handwriting, lead-type), and refuses any oversized-display or kinetic-animated treatment. The typography is *cataloguer's restraint*, not *display showmanship*.

8. **Playful tone routed through dry-conspiratorial-archivist voice, not bouncy-bright dopamine.** Playful is the most common axis in the seed at 24%, but the corpus tends to render playful as bright-saturated-bouncy. dilemma.dev pulls playful into *low-light dry conspiratorial fondness* — the goblin murmurs, footnotes, winks; the colour is dark; the motion is small and quiet. The playfulness is in the *content of the voice* (the Caveat footnotes, the "yes, take it" copy on UUID click, the closing pool note), not in the tempo of the motion. No other site in the corpus runs playful in a low-light hand-illustrated archivist register.

9. **Avoided patterns from frequency analysis:** glassmorphism (68%), card-grid as primary layout (79%), cursor-follow as motion-decoration (80%), magnetic hover (70%), gradient palette base (97%), warm palette base (96%), photography imagery (98%), parallax-on-hero (95%), full-bleed centered hero (92% / 81%). dilemma.dev refuses every one of these. There is no glass, no photo, no card-grid, no magnetic-hover, no gradient-decoration-for-its-own-sake, no warm-base palette, no centered-hero, no full-bleed-photo. The site is rope-and-specimen-and-cave, full-stop.

**Chosen seed (from assignment):** aesthetic: goblincore, layout: timeline-vertical, typography: grotesque-neo, palette: navy-metallic, patterns: shake-error, imagery: botanical-illustration, motifs: crystalline, tone: playful.

Every dimension of this seed lands in an underused corpus territory (goblincore 2%, timeline-vertical 1%, grotesque-neo 3%, navy-metallic 3%, shake-error 4%, botanical-illustration 2%, crystalline 9%) — the only "common" axis is playful tone (24%), but dilemma.dev pulls playful into a low-light dry-conspiratorial-archivist register that none of the existing playful-tagged sites use. Every cell of the seed is a claim on empty room.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T13:35:13
  domain: dilemma.dev
  seed: at 24
  aesthetic: dilemma.dev is staged as **a goblin's mossy treasure-cave that has been quietly ...
  content_hash: e9ea66281709
-->