# Design Language for loves.quest ## Aesthetics and Tone loves.quest is a **goblincore** field journal -- the foraging notebook of a small, dirt-fingernailed creature who collects affections the way goblins collect crow-buttons, river-glass, and the good kind of mushroom. The premise: love is not a romantic abstraction here; it is a *hoard*. A messy, beautiful, leaf-pressed, twine-bound hoard of mismatched treasures, each one labeled in smudged ink, each one slightly too big for its pocket. The site is the inside of that satchel turned out onto a mossy stump. The tone is **grounded-earthy** through and through: no glitter, no gradients spiraling into hyperspace, no aspirational "elevate your love life" gloss. Instead -- damp soil, oak gall ink, beeswax, the underside of a stone, the particular brown of a chanterelle and the particular green of moss after rain. It is warm but not sweet; cozy but a little feral. Think a hedge-witch's recipe card crossed with a Victorian naturalist's specimen drawer, all of it slightly chewed at the corners. The vibe whispers *"come look at the strange and tender things I found"* rather than shouts *"sign up now."* Crucially this is **not** cottagecore (no gingham prettiness, no pastoral picnic perfection) and **not** fairycore (no luminous wings, no ethereal pastels). Goblincore embraces the ugly-cute, the lopsided, the gloriously cluttered. Acorns with holes in them. A single woodlouse, beloved. The aesthetic permits -- demands -- visual *imperfection*: torn paper edges, ink blots, things stacked at wrong angles, a thumbprint in the wax seal. Across this 251-design portfolio, goblincore registers at 0% -- this is the first one. We lean into it hard. ## Layout Motifs and Structure **Primary layout: modular-blocks arranged as a foraged specimen drawer.** The page is built from a grid of irregularly-sized rectangular "drawer compartments" -- like the wooden tray of a printer's typecase, or a naturalist's collection box where each cubby holds one found thing. Compartments do NOT all align to a uniform module: some are wide and shallow (a pressed fern), some tall and narrow (a heron feather), some perfectly square (a beetle pinned in the center). They tessellate like a dry-stone wall -- snug, load-bearing, no two stones the same, mortar of moss in the gaps. Structure top to bottom: - **The Satchel Mouth (hero, ~100vh):** A dark loamy field. Centered: the title "loves.quest" rendered as if branded into a leather luggage-tag, hanging by waxed twine that sways. Below it, a single line of hand-inked text -- the forager's mission statement. Around the edges, a few "spilled" treasures (an acorn, a key, a snail shell) drift in on load, settling with a soft bounce as if dropped from a pocket. A faint "↓ turn out the bag" prompt. - **The Drawer (the modular-blocks core):** A wall of compartments, each one a "specimen" of a kind of love. Compartments are entered one at a time as the reader scrolls -- a **zoom-focus** mechanic (see Patterns): the whole drawer is visible faintly in the periphery, but the active compartment magnifies and sharpens to fill attention, the rest dimming to a sepia hush like the edges of an old photograph. Specimens have hand-lettered tags: "the kind that is mostly worry," "the one shaped like a shared umbrella," "love, common; found everywhere; often overlooked," etc. - **The Pressing Page:** A wide spread styled as the open centerfold of a pressed-flower book -- two facing pages of cream paper, a fern flattened across the gutter, marginalia in pencil. Holds longer-form text. - **The Knot (closing):** The satchel cinched shut again -- the twine drawing closed with a path-draw animation, the leather tag settling. A small line: "the bag is never full." No CTA, no form, no pricing -- just the drawstring tightening and a hand-stamped wax seal pressed into the bottom margin. The grid breathes asymmetrically: roughly a 12-column underlying field, but compartments span 3/4/5/7 columns at varying row-heights, mortared by 2-3px gaps of a mossy texture. On narrow screens the drawer restacks into a single vertical column of cubbies, each one still tilted a degree or two off-square. ## Typography and Palette **Typography:** - **Display / Tags / Headlines:** "Zilla Slab" (Google Fonts) -- a warm, slightly bookish **slab-serif** with sturdy egyptian feet that read like type pressed into damp clay. Used for compartment labels and the section titles at clamp(1.6rem, 4vw, 3.4rem), weight 600-700, with a hand-tilted transform (rotate(-1.2deg) to rotate(1.4deg), varied per element). Slab-serif sits at only 6% in the portfolio -- underused, and a perfect fit for a "specimen label" feel. - **Secondary Display / The branded tag:** "Special Elite" (Google Fonts) -- a battered typewriter face for the big leather luggage-tag wordmark and a few "stamped" details, evoking ink that didn't quite take everywhere. - **Body Text:** "Bitter" (Google Fonts) -- a contemporary slab-serif designed for comfortable reading on screen, with a faintly antique warmth. Used at 1.05-1.2rem, weight 400, line-height 1.7, color the oak-gall ink below. Pairs with Zilla Slab without clashing -- same family of warmth, different density. - **Marginalia / Pencil notes:** "Caveat" (Google Fonts) -- a relaxed handwritten script for the penciled annotations in margins, crossed-out words, little arrows pointing at things. Used sparingly, at a slight slant, in pencil-grey. **Palette (muted, warm-earthy -- the underside of a stone):** - `#2b2620` -- **Loam** (deepest brown-black; hero field, dark compartment backs, the satchel leather) - `#3f3a2e` -- **Bog Oak** (secondary dark; section grounds, drawer frame) - `#6b5d3f` -- **Damp Bark** (mid brown; tag leather, dividers, twine in shadow) - `#8a7a4e` -- **Old Brass** (warm metallic-adjacent ochre; the found key, buckle highlights, hover glows -- the closest thing to "shine," and it's tarnished) - `#a89968` -- **Dried Reed** (lighter tan; secondary text on dark, twine in light) - `#5c6b3a` -- **Moss Pelt** (muted olive-green; the mortar texture, leaf veins, accent ticks) - `#7d8a4e` -- **Lichen** (lighter sage-olive; pressed-fern green, link underlines drawn in) - `#a86b3c` -- **Chanterelle** (muted burnt-amber; the one warm pop -- a mushroom cap, an underlined keyword, the wax seal) - `#e8e0cc` -- **Tallow Paper** (warm bone-cream; the pressing-page paper, compartment paper liners, body text on dark) - `#d6cbb0` -- **Foxed Page** (slightly browner cream with "foxing" speckles; aged paper variant) - `#352f24` -- **Oak Gall Ink** (the brown-black writing ink for body text on cream) Gradients are essentially banned (the portfolio is 96% gradient -- we are part of the 4%). Where depth is needed, use layered flat colors, paper grain, and soft long shadows the color of `#2b2620` at low opacity, never a slick light-source sheen. ## Imagery and Motifs - **Custom-illustration (the spine of the visual identity):** Every "specimen" is a hand-drawn ink-and-wash illustration in a Victorian-naturalist-meets-storybook style -- but goblin: a snail shell rendered with loving anatomical care, an acorn with a tiny worm-hole, a brass house-key worn smooth, a single dandelion clock mid-disintegration, a folded paper note, a chanterelle, a smooth river pebble, a beetle (iridescence rendered in matte ochres, not real iridescence), a bird's wishbone. Illustrations are SVG line-work with grainy texture-fills, drawn with a slightly wobbling line (no perfect circles), each sitting on its own little drop-shadow as if pinned. Custom-illustration sits at ~0% in the portfolio -- a genuine differentiator. NO stock photography (65% of the portfolio uses photography -- we use none). - **Pressed-flora overlays:** Real-looking pressed ferns, clover, grass seed-heads laid across page gutters and section corners as PNG-style flat shapes with translucent edges, slightly browned. They cast no shadow -- they're *in* the paper. - **The mortar of moss:** Compartment gaps are filled with a CSS-generated speckled green-brown noise (layered `radial-gradient` dots in Moss Pelt and Damp Bark on Bog Oak) -- the literal grout between specimen-stones. - **Hand-drawn labels & string:** Each compartment label is a "tag" -- a small parallelogram of leather or paper with a punched hole and a stub of waxed twine, attached at one corner so it can swing a few degrees. Strings are 1.5px Bezier paths the color of Dried Reed with a darker core line. - **Stamps, blots, foxing:** Decorative elements include a hand-cut rubber-stamp circle ("FOUND · loves.quest · KEPT"), small ink blots near headings, scattered paper "foxing" speckles, a thumbprint in the wax seal, and a coffee-ring ghost on the pressing page. - **The vintage drawer-furniture:** Tiny brass pulls drawn on some compartments, a worn label-frame, a bent pin holding a specimen -- vintage motifs (13% in portfolio, comfortably underused) used as *literal old objects*, not retro pastiche. - **Cursor as a small hand / a beetle:** The pointer can carry a faint trailing dot like a crumb of soil, or near interactive specimens become a tiny grasping hand drawn in ink. ## Prompts for Implementation **Build it as a full-screen narrative of "turning out a satchel onto a stump."** The reader is not browsing a product -- they are being shown someone's hoard, one treasure at a time, by an enthusiastic small creature. Every section should feel like a hand reaching in and lifting something out into the light. Bias hard toward immersive, scroll-driven storytelling; this is an experience, not a landing page. **Hero ("the satchel mouth"):** Full-viewport Loam field with subtle paper grain. The leather luggage-tag wordmark "loves.quest" set in Special Elite, hung from a waxed-twine SVG path anchored to the top edge; the twine and tag sway with a slow CSS `transform: rotate()` keyframe easing (a gentle pendulum, ~6s, never mechanical -- vary the angle slightly each cycle if you can). On load, 4-6 small ink-illustrated treasures (`acorn`, `key`, `snail`, `pebble`, `wishbone`, `paper-note`) fall in from above the fold with a **bounce-enter** (spring easing, slight squash on landing, then settle), each with a tiny dust-puff. A penciled mission line in Caveat. A `↓ turn out the bag` prompt that bobs. **The Drawer + zoom-focus mechanic (the centerpiece):** Render the modular-blocks grid of compartments. As the reader scrolls, implement **zoom-focus**: use `IntersectionObserver` to detect the compartment nearest viewport center; that compartment scales up (`transform: scale(1.06)`), its paper liner brightens to full Tallow Paper, its illustration sharpens (remove a slight blur filter), its tag swings as if just jostled, and its label text fades fully in. All *other* compartments simultaneously desaturate toward sepia (`filter: sepia(0.5) brightness(0.82)`), shrink imperceptibly, and their tag-strings hang still. The effect: a magnifying glass moving across a specimen drawer. zoom-focus appears at 0% in the portfolio -- make it the signature interaction. Pair with `stagger`: when a compartment first enters, its label letters or its sub-items rise in one after another like dust resettling. **Motion vocabulary (earthy, weighted, never zippy):** - Specimens have *mass* -- they fall, settle, and have a little inertia. Use spring/elastic easing with a touch of squash-and-stretch, but slow (durations 600-1100ms). Nothing snaps. - Tags and twine **sway** on hover and on neighbor-jostle -- a damped pendulum (`@keyframes` rotate with decreasing amplitude). - `path-draw-svg` for: the twine drawing itself in on load; link underlines sketched in Lichen as you hover; the closing drawstring cinching shut. - `blur-focus` as a supporting cue alongside zoom-focus (sharpen the active specimen). - `hover-lift` on compartments -- they rise ~6px and the pinned shadow deepens, as if you've picked the cubby up to look closer; the illustration inside rotates a half-degree. - A faint, optional cursor-crumb trail (one fading soil-dot) -- keep it subtle, respect reduced-motion (kill all of the above gracefully). - Scroll feel: `scroll-snap-type: y proximity` so the reader can drift between compartments and *pause*, never forced. **The Pressing Page:** A wide cream two-page spread (use a subtle center-gutter shadow and a faint coffee-ring). A pressed fern SVG laid across the gutter. Body copy in Bitter, oak-gall ink, generous leading, with Caveat marginalia (a crossed-out word, an arrow, a "yes, this one"). Maybe one illustrated specimen pinned in the outer margin. This is where any longer prose lives -- it should read like a beloved, annotated book page. **The Knot (closing):** The satchel cinches shut -- two twine paths draw *together* (reverse path-draw), the leather tag settles to rest, a final line in Special Elite: "the bag is never full." Then a `path-draw` + `scale` of a wax seal stamping into the bottom margin ("FOUND · KEPT") with a soft thunk and a thumbprint fading in. No form. No pricing. No stat-grid. No bank of CTAs. **Texture & imperfection are non-negotiable:** Every container should have *slightly* irregular borders (use `border-image` with a hand-drawn frame, or `clip-path` with a few off-points, or layered box-shadows that don't quite line up). Headings tilt 1-2 degrees in alternating directions. Add a global ~3-4% film-grain/paper-noise overlay (`mix-blend-mode: multiply`, a tiled noise PNG-equivalent built from CSS, or an SVG `` filter at low opacity). Foxing speckles scattered on cream surfaces. The site should look like it has been carried in a pocket. **AVOID:** CTA-heavy layouts; pricing blocks; stat/number grids; sign-up forms; sliders/carousels of testimonials; gradients; glassmorphism; neon; perfectly-aligned bento grids; corporate sans-serif; stock photography; anything glossy, premium, or "elevated." ## Uniqueness Notes 1. **First goblincore design in the portfolio (0% / 251).** Not cottagecore, not fairycore, not botanical-prettiness -- this is the *ugly-cute, cluttered, dirt-under-the-nails* branch of the cottagecore family tree: holed acorns, beloved woodlice, lopsided treasure-hoards. No other site in the portfolio occupies this aesthetic, and few even gesture at it. 2. **The "specimen drawer / printer's typecase" structural metaphor.** Where the portfolio's modular-blocks sites (9%) lay out neat uniform cards, this one builds a *dry-stone-wall* of irregular cubbies mortared with literal CSS moss -- each cubby holding one hand-drawn found object with a swinging twine tag. The grid is a naturalist's collection tray, not a dashboard. 3. **zoom-focus as the signature interaction (0% / 251).** A magnifying-glass-over-a-drawer mechanic: the active compartment magnifies, sharpens and warms while every other compartment desaturates to sepia and stills. Combined with blur-focus and the swing-on-jostle of tags, it makes scrolling feel like physically moving a lens across a specimen box -- an interaction pattern nothing else in the portfolio uses. 4. **All-custom hand-drawn ink-and-wash illustration, zero photography.** Custom-illustration sits at ~0% and photography at 65% -- this design inverts the norm: every visual is a wobbly-lined, grainy-filled SVG specimen drawing in a Victorian-naturalist-but-goblin style. Pinned, shadowed, slightly chewed. 5. **Anti-conversion by construction.** No CTAs, no pricing, no forms, no stat-grids -- the page literally ends by cinching a bag shut and stamping a wax seal. Love-as-hoard, not love-as-funnel. 6. **Slab-serif + typewriter + pencil-script trio on a no-gradient muted earth palette.** Zilla Slab / Special Elite / Bitter / Caveat over Loam, Bog Oak, Moss, Chanterelle and Tallow Paper -- avoiding the portfolio's overwhelming gradient (96%) and mono-type (94%) defaults entirely; embracing slab-serif (6%) and vintage motifs (13%), both underused. Chosen seed/style: **aesthetic: goblincore, layout: modular-blocks, typography: slab-serif, palette: muted, patterns: zoom-focus, imagery: custom-illustration, motifs: vintage, tone: grounded-earthy** Avoided patterns from frequency analysis: gradient palettes (96%), warm-but-glossy treatments, mono typography (94%), counter-animate (92%), parallax-as-default (70%), centered uniform layouts (92%), corporate aesthetic (92%), mysterious-moody tone (94%), and stock photography (65%) -- replaced respectively with flat layered earth tones, slab-serif type, weighted spring/squash motion, zoom-focus + path-draw, an irregular mortared specimen-drawer grid, goblincore, grounded-earthy tone, and all-custom hand-drawn illustration.