# Design Language for jill.moe ## Aesthetics and Tone jill.moe is **a pop-art comic strip about a girl who fell into a forest and decided to stay** — a single character named *Jill* whose whole existence is a six-panel adventure scrawled across a viewport that has been silk-screened, mis-registered, and Ben-Day-dotted within an inch of its life. The dominant aesthetic is **pop-art** (an almost-untouched ≈1% of the corpus): hard black keylines, flat zones of saturated color, halftone dot screens that go from coarse to fine, speech-balloon callouts with tails that point at things, sound-effect lettering — KRRSH, BLOOM, *thwip* — exploding off the edges of sections, and the deliberate "cheap print" charm of dots not quite lining up with their outlines. Think Lichtenstein's *Drowning Girl* if she'd been pulled out by ferns; think a Warhol screenprint of a single oak leaf repeated four times in clashing inks; think a 1960s romance-comic page where the romance is between a person and a meadow. But the *content* of those panels is **nature** (≈16%, on-trend-low) — Jill among trees, ferns, mushrooms, beetles, dappled light, root systems, the green hush of a canopy. The collision is the whole point: a screaming, ink-loud comic-book vocabulary used to draw something soft and chlorophyll-quiet. The tone is unapologetically **energetic** (≈15%) — fast, exclamatory, lowercase-then-ALLCAPS, copy that reads like dialogue balloons: "jill found a door in a tree!" "she is NOT coming back." "everything here is the colour of going outside." It is the energy of a kid sprinting into the woods, not the energy of a sales funnel. The mood lives at the intersection of **bubblegum and moss** — Pantone-bright pop inks laid down over (and bleeding into) deep `forest-green` (≈5%, underused). Loud but green. Printed but alive. A comic book left out in the rain that started growing. ## Layout Motifs and Structure The page is a **diagonal comic strip** — `diagonal-sections` (≈4%, underused) used literally: the whole site is a sequence of *panels* whose dividing edges are not horizontal but slashed at ~7–12°, like a dynamic comic-book page where the gutters are tilted to imply motion. Each panel is full-bleed, edge-to-edge, separated from the next by a thick black keyline (the "gutter") and a slim bleed-strip of mis-registered color. You read *down* the strip, panel by panel, the way an eye drops through a comic page — and the diagonal seams keep pulling the gaze forward and to the side. **The panels (top → bottom), each a full-viewport "frame":** 1. **PANEL ONE — THE DOOR.** Flat chartreuse sky behind a giant black-keyline oak. A small flat-colored figure (Jill, three flat tones + outline) stands before a door-shaped knothole. Halftone dots rain diagonally across the sky, coarse near the top, fine near the door. The wordmark `jill.moe` is set as comic-title lettering, slightly arced, with a drop-shadow offset like a second pass of ink. A speech balloon, tail pointing at Jill: *"...is that a door?"* The diagonal bottom edge slashes the panel and the next one bleeds up through the gutter. 2. **PANEL TWO — INSIDE.** The flip: everything goes deep forest-green, the keylines turn cream, and the halftone is now warm cream dots on green. Big sound-effect lettering — `BLOOM` — bursts from the panel center, outlined and offset-shadowed, breaking the keyline. Three short manifesto balloons stagger in: "it's bigger inside." / "obviously." / "she's staying." Ferns drawn as flat keyline shapes drift in the parallax foreground. 3. **PANEL THREE — THE THINGS SHE FOUND.** A diagonal "contact sheet" of discoveries — mushrooms, a beetle, a curl of bracken, a fox-shaped shadow — each rendered as a separate mini-panel, *card-flip* on hover to reveal a halftone-screened "specimen" version and a hand-lettered caption. The mini-panels are pinned at slight diagonal angles, overlapping their gutters like polaroids on a corkboard. A `thwip!` sfx lands when a card flips. 4. **PANEL FOUR — THE CLEARING (full-bleed splash).** The big "splash page" — the diagonal seams briefly relax to near-flat and the panel goes wide and quiet: a sun-shaft of pale-gold Ben-Day dots pouring across a green clearing, Jill lying in it, one giant balloon with a single huge word: *"oh."* This is the page's exhale — least motion, most space, the one moment the comic stops shouting. 5. **PANEL FIVE — IT MOVES.** Lottie-driven kinetics (see below): leaves actually fall, the beetle actually walks across the gutter into the next panel, the halftone dots breathe, a butterfly Lottie loops along a path. Sound-effects pop in on scroll — `flutter`, `KRRSH` (a branch), `…shh`. Copy in balloons: "the wind here has opinions." / "the bugs are union." / "everything's louder than you'd think." 6. **PANEL SIX — STAY.** The closing frame: deep forest-green floods full-bleed, the keylines glow chartreuse, the door from PANEL ONE reappears in the far corner — *closed*. One last balloon: *"jill's not home. jill's HOME."* The diagonal bottom edge runs off the screen still tilted, like the strip continues past the paper. A tiny `the end?` in the gutter, with the `?` hand-scribbled. Spatial rules: every section seam is a tilted black keyline of `clamp(6px, 1.2vw, 16px)`; every panel "bleeds" 1–2% of a clashing flat color past its keyline into the next gutter (the mis-registration); content enters by *snapping* into place (a one-frame overshoot, like a panel being stamped), never by smooth fades; balloons and sfx are allowed to break keylines and hang into adjacent panels. At least 35% of any panel is one flat unbroken color — the pop-art "rest" against which the dot-screens and keylines pop. ## Typography and Palette **Type system — `expressive-variable` (≈4%, underused). Three Google Fonts; the comic voice is built from contrast between a roaring display face, a punchy body, and hand-lettered captions, with variable axes pushed for effect.** - **Comic-title & sound-effects display: "Bagel Fat One" (Google Fonts, single weight, ultra-bold rounded ink-trap display).** This is the `BLOOM` / `KRRSH` / `thwip` lettering and the `jill.moe` wordmark — fat, bouncy, screen-print-ready. Set huge: `clamp(2.8rem, 11vw, 9rem)`, given a hard offset text-shadow (`0.06em 0.06em 0 #000`) for the "double-pass ink" look, occasionally arced along an SVG path, occasionally outlined-only (transparent fill, 3px keyline). Where a real variable face is wanted alongside it for headlines, **"Fredoka" (variable, wght 300–700, wdth-ish via wght)** handles section headers — its weight axis is *animated by scroll* so headers fatten as they enter the viewport (the expressive-variable centerpiece). - **Body / dialogue-balloon text: "Baloo 2" (variable, wght 400–800).** Round, friendly, legible at balloon sizes; body copy `clamp(1rem, 1.05rem + 0.25vw, 1.22rem)`, line-height `1.55`, weight `500`; the first word of each balloon jumps to `wght 800` for a comic "beat." Set with slightly tighter tracking inside balloons so it nests in the speech-bubble shape. - **Hand-lettered captions & gutter scrawls: "Gloria Hallelujah" (Google Fonts).** The specimen captions, the `the end?`, the scribbled `?`, the little corner annotations — wobbly, marker-ish, deliberately imperfect. Small: `clamp(0.8rem, 0.85rem + 0.15vw, 1rem)`, slight per-letter rotation jitter applied in CSS. **Palette — `forest-green` core, slammed against pop primaries. Five+ flats plus the dot-screen tints.** - `#0E2A1B` — **Deep Canopy** — the dominant forest-green; full-bleed background of the "inside the tree" panels, the closing flood. - `#1C5D33` — **Fern Green** — mid-tone foliage flats, keyline-shape ferns, the clearing grass. - `#C7E04A` — **Chartreuse Pop** — the "outside light" color; PANEL ONE sky, glowing keylines in PANEL SIX, the loudest accent. (Pop-art screaming-yellow-green.) - `#FF3D7F` — **Romance Pink** — the classic romance-comic flat: balloon fills' accent, fox-shadow, one beetle's wing-case, the `thwip!` sfx. Used in sharp small doses. - `#1F5FCC` — **Comic Sky Blue** — secondary pop flat: alternate balloon outlines, butterfly, the `flutter` sfx, mis-registration bleed-strips. - `#FFE9C9` — **Newsprint Cream** — the "paper" color: keylines invert to this on green panels, halftone dots on dark grounds, the splash-page sun-shaft base. - `#0B0B0B` — **Ink Black** — every keyline, every gutter, every sfx outline, the comic line. Non-negotiable, everywhere. - Dot-screen tints (Ben-Day): `#FFD23F` (gold dots in the sun-shaft), `#7FD8A0` (pale-green dots over canopy), `#FF8FB3` (pink dots in romance moments) — used only as halftone overlays at 20–60% coverage, never as solid fills. Contrast is **maximum and printed**: ink-black keylines against flat saturated zones, with chartreuse-vs-deep-canopy as the headline pairing and pink as the spark the eye chases. ## Imagery and Motifs **No photography. No 3D. No realistic rendering. Everything is flat keyline-and-fill comic art, halftone screens, balloons, and sound-effects — drawn as SVG and CSS, animated as Lottie.** - **Lottie-animation as a primary motif (≈2% of corpus — almost no one uses it).** PANEL FIVE is built on Lottie: falling leaves, a walking beetle that crosses the gutter, a looping butterfly that follows a path, the "breathing" halftone field, the door creaking shut in PANEL SIX. Lottie JSON is also used for the sound-effect bursts (a `BLOOM` that scales-and-settles, a `KRRSH` that shudders). Lotties are styled to match: flat fills only, hard keylines, no gradients — they must look hand-inked, not vector-glossy. This Lottie-everywhere treatment is the site's technical signature. - **Ben-Day / halftone dot screens — everywhere, varying density.** SVG `` of dots, parametrized by radius and spacing, layered over flat zones at the panel-corners and behind balloons; dots get *coarse* where energy is high (sky in PANEL ONE, the `BLOOM`) and *fine* where it's calm (the clearing). They drift diagonally on scroll-parallax, slightly out of register with the keylines beneath — the deliberate "cheap print" wobble. - **Black keylines as the structural language.** Every shape — Jill, every tree, every fern, every mushroom, every balloon, every panel border — is a 3–5px black stroke. The forest is *drawn*, not shaded. Foliage is flat keyline silhouettes layered in 3 parallax depths; light is implied by dot-density, never by gradients. - **Speech balloons & captions as the copy delivery system.** All meaningful text lives in comic balloons (rounded, with a triangular tail that *points at* the thing being talked about) or in rectangular caption-boxes (cream, keyline border, hand-lettered). Balloons enter with a tiny "pop" overshoot; tails are SVG paths that re-aim if the layout reflows. - **Sound-effect lettering as decorative explosions.** `KRRSH`, `BLOOM`, `thwip!`, `flutter`, `…shh` — set in Bagel Fat One, outlined, offset-shadowed, often on a starburst or impact-burst shape, breaking through keylines into adjacent panels. They are the site's exclamation marks. - **Mis-registration bleed-strips.** Between every diagonal panel, a 1–2% sliver of a clashing flat color "leaks" past the keyline — the printing-press error elevated to a motif. It tints the gutter and makes the whole page feel run off a real, imperfect press. - **Recurring object: the door-in-a-tree.** Appears in PANEL ONE (open, inviting) and PANEL SIX (closed, far away). The narrative bookend — a flat keyline knothole-door, chartreuse-rimmed. - **Grain.** A 3%-opacity paper-fiber noise overlay (SVG fractal-noise, warm-tinted) fixed over everything, so even the flattest pop-color reads as *ink on stock*, not as a screen fill. ## Prompts for Implementation - Build the page as a vertical stack of full-viewport `
` "panels." Each panel's bottom edge is a tilted black band — implement with `clip-path: polygon(...)` on the panel plus an absolutely-positioned `::after` keyline bar rotated ~7–12°; alternate the tilt direction panel-to-panel so the strip zig-zags. Add a 1–2% bleed-strip (`::before`, a clashing flat color) just inside each seam. - Treat this as **immersive scroll-storytelling**, not a marketing page. Each panel is a beat in Jill's adventure; copy is dialogue and captions, never feature-lists. **AVOID:** CTA-heavy layouts, pricing tables, stat-grids, testimonial rows, "sign up" anything. There is nothing to sell — only a story to fall into. - Halftone: define one SVG `` of circles; expose `--dot-r` and `--dot-gap` as CSS custom properties and animate them per-panel via `IntersectionObserver` (coarse→fine). Parallax-translate the pattern fill diagonally on scroll. Keep the pattern slightly offset from the keyline layer for the mis-registration look. - Use `lottie-web` for PANEL FIVE and the sound-effect bursts. Author/style Lotties with flat fills and 3–5px black strokes only — no gradients, no soft shadows. Trigger each Lottie's play on `IntersectionObserver`; loop the ambient ones (leaves, butterfly, breathing dots); play-once the impact ones (`BLOOM`, door-shut). Pause off-screen Lotties for sanity. - Section entrances: content "stamps" in — a 120ms transform with one overshoot frame (`cubic-bezier(.34,1.56,.64,1)`), slight scale 1.04→1, no opacity fade. Balloons pop in the same way. The splash PANEL FOUR is the exception: everything there cross-fades slowly and the seams ease toward flat. - Headlines use `Fredoka` variable `font-variation-settings: 'wght' X` where X is lerped from 300→700 by the header's viewport progress. Sound-effects use `Bagel Fat One` with `text-shadow: .06em .06em 0 #0B0B0B`; outlined variants use `-webkit-text-stroke: 3px #0B0B0B; color: transparent`. - Balloon tails: draw the bubble + tail as a single inline SVG path so the tail can re-point at its target with a small JS recompute on resize. Caption boxes: cream fill, 3px ink keyline, `Gloria Hallelujah`, with a CSS `transform: rotate(var(--jitter))` where `--jitter` is a small random per-box angle. - Cursor: a small ink-blot cursor that leaves a fading dot-trail (a few halftone dots) — `cursor-follow`, but rendered in the comic vocabulary, not a glossy ring. - Grain overlay: a fixed full-screen `
` with an SVG `feTurbulence` data-URI background at ~3% opacity, `mix-blend-mode: multiply`, warm tint — over everything including Lotties. - Respect `prefers-reduced-motion`: freeze Lotties on their first frame, drop parallax and stamp-overshoot, keep all the flat color, keylines, dots and balloons (the comic still reads perfectly as a static page). ## Uniqueness Notes - **Pop-art (≈1%) drawing nature (≈16%): the loud-comic-vocabulary-for-quiet-forest collision** — almost nothing in the corpus pairs Ben-Day dots, keylines and sound-effects with ferns, mushrooms and dappled light. The dissonance *is* the brand. - **`diagonal-sections` (≈4%) as a literal comic-strip page** — tilted black gutters, mis-registration bleed-strips, zig-zag panel reading order. Not "diagonal accents on a normal layout" — the entire structure is a slanted comic page you scroll down. - **`lottie-animation` (≈2%) as the core motion engine** — leaves, a gutter-crossing beetle, looping butterfly, breathing halftone, a creaking door, *and* the sound-effect bursts — all Lottie, all styled flat-and-inked to look hand-drawn rather than vector-slick. Vanishingly rare in the corpus. - **`expressive-variable` type as comic lettering** — scroll-fattened `Fredoka` headers + `Bagel Fat One` sfx with double-pass-ink shadows + per-letter-jittered `Gloria Hallelujah` captions — typography treated as ink on a press, not as web text. - **`forest-green` (≈5%) slammed against pop primaries** — Deep Canopy `#0E2A1B` / Chartreuse Pop `#C7E04A` / Romance Pink `#FF3D7F` / Newsprint Cream — a green-dominant palette that still screams. - **No CTAs, no grid-of-cards, no photography** — a six-panel story about a girl who moved into a tree; deliberately steers clear of the corpus-saturated `card-grid` (88%), `photography` (98%), `glassmorphism` (69%) and `hand-drawn`-as-default-aesthetic (96%) — this is *printed* comic flatness, not sketchy hand-drawn. - Chosen seed / style: **aesthetic: pop-art, layout: diagonal-sections, typography: expressive-variable, palette: forest-green, patterns: lottie-animation, imagery: neon-glow, motifs: nature, tone: energetic** (neon-glow expressed as the chartreuse keyline-glow in PANEL SIX and the halftone-tint blooms rather than literal neon). - Avoided per frequency analysis: `card-grid`, `centered`, `photography`, `glassmorphism`, `hand-drawn`, `parallax`-as-only-trick, `cursor-follow`-as-default — all present-trend overuse; this design leans on the low-frequency picks (pop-art, diagonal-sections, lottie-animation, expressive-variable, forest-green) instead.