# Design Language for bunny.quest ## Aesthetics and Tone bunny.quest is staged as **a 3 a.m. dispatch from a long-running urban field expedition — a wildlife biologist's hand-built bulletin board, but the biologist is tracking lop-eared rabbits through a city, not foxes through a forest, and the bulletin board is a wheat-pasted wall under a sodium-lit overpass at the edge of a reclaimed lot**. The conceit fuses two registers that almost never co-occur on the web: **the disciplined, professional voice of an environmental research log** (timestamps, GPS bearings, behavior codes, deadpan observation) and **the visual texture of street-art posting culture** (torn corners, registration-marks bleeding through, halftone misregistration, sodium-vapor halos, spray-stencil tracking glyphs). A rabbit ear silhouette is sprayed through a stencil onto a midnight-blue concrete wall; somebody has glued a printed field card next to it; the printer was running low on cyan; the page captures that exact moment. The dominant feeling is **cold, blue, lit-from-the-side, watchful**. Not cyberpunk neon — that is loud and saturated. This is the **slate-blue silence at 3:14 a.m. between two streetlamps**, the moment your eyes adjust and you realize the lawn six meters away is a warren and twelve dark shapes are sitting motionless on it. Professional means: no exclamation points, no marketing language, no "discover" or "explore" or "journey." The site narrates its findings in **incident-report cadence** — `0314h. Subject 41 (M, 3.2kg). Stationary 47s. Halted at threshold of stencil shadow. Resumed at human exit + 09s.` That is the voice. The street-style overlay is not ironic decoration; it is **the actual medium through which the research is published** — the biologist, displaced from grant funding, is posting findings to overpass walls because that is where the urban rabbits actually live. Inspirations, named: **Trevor Paglen's surveillance-landscape photography** (long-lens, blue-hour, the camera becomes evidence), **Barbara Kruger's red-bordered declaratives** (translated into stencil cyan), **Faile's Brooklyn wheat-paste collage stratigraphy** (layers visibly older underneath layers visibly newer), **early-2000s Tokyo missing-cat posters** (mono-spaced printed text taped to telephone poles, sun-bleached), **lunar-rover telemetry HUDs** (decimal-point precision in monospace, no embellishment). What we are explicitly **not**: graffiti-art-as-stylistic-veneer, "urban" as a vague aesthetic adjective, hipster grunge texture, neon-drenched cyberpunk, pastel "cute bunny" anything. The rabbit here is an observed subject, not a mascot — **clinical respect, not anthropomorphism**. ## Layout Motifs and Structure The page is a **single horizontal-scroll dispatch reel** running left to right across **eight registration-pinned panels**, total page width ≈ 720vw. Vertical scroll is disabled at the document level (`overflow-y: hidden`) and the page advances horizontally by mouse wheel, trackpad two-finger gesture, arrow keys, and a custom edge-drag. **Each panel is one wheat-paste poster**, 100vw × 100vh, tacked to a continuous midnight-blue concrete wall that runs the full 720vw — the wall is the background, the posters are the foreground content, the page itself is the act of walking down the wall reading them in order. **The eight panels (canonical order, never re-ordered):** 1. **Panel 01 — `MASTHEAD / ESTABLISHING SHOT`** — full-bleed long-lens photograph of an empty city block at blue hour, sodium streetlamp at 60% horizontal (rule-of-thirds left), rabbit silhouette stenciled in process-cyan over the upper-right quadrant. The domain string `bunny.quest` set in tech-mono caps as if registered by a typewriter that skipped one ribbon row, white on midnight blue. 2. **Panel 02 — `FIELD METHOD`** — printed field card pasted dead center, four corners visibly tape-affixed (rotation: -1.4°, -0.7°, +0.4°, +1.1° per corner — never symmetrical), describing the observation protocol in numbered clauses. To the left, a stencil-sprayed rabbit ear runs off the panel edge, cyan halo visible where the spray drifted. 3. **Panel 03 — `SUBJECT REGISTRY`** — a horizontal scrolling sub-strip (nested horizontal scroll within the panel, scrubbed by hovering) of **eighteen subject cards**, each card a 4×6 index-card-aspect tile with a duotone (midnight-blue + bone) micro-portrait of an individual rabbit, a four-digit ID, weight, ear-notch pattern, three-line behavior summary in mono. The cards lean on each other 3° askew like a card catalog dropped and reassembled. 4. **Panel 04 — `INCIDENT LOG / 0314h`** — a long horizontal timeline rendered as **a printed receipt unspooling across the full panel width**, perforation marks every 80px, individual log entries set in 11px tech-mono, each entry timestamped. The receipt has a slight S-curve, as if photographed mid-fall. A glitch artifact (3px horizontal RGB-split band) crosses the receipt at one anchored y-coordinate that does not move when you scroll. 5. **Panel 05 — `WARREN MAPPING`** — a hand-overdrawn city map (white pen on midnight blue) with thirty-one numbered burrow markers, the markers connected by dotted geodesic-style arcs showing observed travel paths. The map is a proper top-down cartographic plate, scale bar at lower-left, magnetic-north arrow upper-right, but the **streetlamp positions are marked with lens-flare bursts** (six-pointed, 24px cyan radial flares with anamorphic horizontal streak). 6. **Panel 06 — `DIET / FORAGE INVENTORY`** — twelve photographic specimens of urban-edge plant material the rabbits eat, shot top-down on midnight-blue cyanotype paper, **leaf-organic motif rendered as actual leaf silhouettes** (clover, dandelion, plantain, vetch, wild lettuce, knotweed) in process-blue silhouette with white veins drawn over them. Each specimen captioned with Latin binomial in tech-mono italic. 7. **Panel 07 — `CITIZEN SUBMISSIONS`** — a wall-of-photos panel: twenty-three small 320×240 photo tiles arranged in a tight horizontal mosaic strip, each photo blue-hour, each with a tiny torn-edge caption strip pasted across one corner attributing the spotter, time, intersection. Several tiles are visibly torn corners or have cyan stamp-marks ("LOGGED 2026.04.27") overlaid. 8. **Panel 08 — `COLOPHON / DISPATCH NUMBER 014`** — a final panel formatted as the back of a pasted broadside: imprint line, edition number, GPS coordinates of the originating overpass, methodology citation, an open invitation to email observation reports to a tech-mono email address. A hand-drawn arrow at far right points off-page into nothing — **the wall continues, this is just one section of it**. **Across all eight panels, three structural rules hold absolutely:** - The **sodium-lamp light source remains at a fixed angle (top-left, -22°)** — every shadow on every panel falls bottom-right, every rim-light on every poster catches the upper-left edge. The visitor is walking parallel to a single light. - **A continuous registration-mark stripe** runs along the bottom 16px of the entire 720vw — printer's color bars (cyan, midnight, white, bone) repeating, with crop-marks every 80vw at the panel boundaries. This is the through-line. - **No panel ends at a panel boundary visually** — at least one element from each panel (a torn poster corner, a stencil's overspray, a piece of tape, a leaf shadow) **bleeds 4–8% into the adjacent panel**. The wall is one wall; the panels are an editorial division, not a physical one. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with field-log discipline.** - **JetBrains Mono** (display + body mono). The tech-mono workhorse. Carries the masthead, every timestamp, every GPS bearing, every numeric column, the colophon. Used at: 96px / 0.96 line-height for the panel-01 masthead (always uppercase, +180 letterspacing, white on midnight); 14px / 1.4 line-height for body field-log text; 11px / 1.2 line-height for receipt-strip log entries; 10px small-caps for caption-strip metadata. The italic variant is reserved for **Latin binomials only** (panel 06 forage inventory). JetBrains Mono is chosen over IBM Plex Mono and Space Mono because its zero-with-dot, its dotted-i, and its uppercase `Q` with the loose, hooked tail read most clearly as **"this was actually printed by a field machine, not a designer's mood-board approximation of one."** - **DM Sans** (humanist sans, used sparingly). Carries only the **clause-numbered explanatory passages** in panel 02 (`FIELD METHOD`) and panel 08 (`COLOPHON`) — places where the eye needs to read prose rather than scan tabular data. Set at 17px / 1.55 line-height, 480-520 weight, never bold, never italic, white on midnight. The deliberate contrast: **mono = data, DM Sans = prose**, and the visitor learns this on panel 02. DM Sans was chosen over Inter and Source Sans Pro for its slightly warmer terminals and its more open `a` and `g`, which keep the prose passages from feeling sterile against the rest of the page's clinical tone. - **Special Elite** (one-time accent only). Used **exactly once on the entire page** — in panel 02, the field card's affixed clause `OBSERVED. NOT INTERPRETED.` is set in Special Elite at 28px, slightly bolder ink-bleed via `text-shadow: 0 0 0.4px currentColor`, faint horizontal mis-alignment, as if struck by a real typewriter onto the field card before the card was photographed and posted. This is the page's signature character — the only typographic moment that breaks JetBrains Mono / DM Sans, and it appears once and is never repeated. **Scarcity is the discipline.** **Palette — a midnight-blue system, eight values, each named.** - `#0A1628` **`OVERPASS-SHADOW`** — page background, the deepest midnight blue, used for the wall behind every panel. Slightly cool, slightly desaturated. This is the dominant color — **≥62% of every viewport**. - `#152841` **`SODIUM-OFF`** — secondary blue, used for shadow areas on the wall, the un-lit half of every poster, gradient stops on the cyanotype panel-06 plates. The wall has subtle non-uniformity painted in this tone. - `#1F3A5F` **`HOUR-BLUE`** — mid-tone blue, used for ambient rim-lighting on the lit edges of the wall, secondary text against `OVERPASS-SHADOW`, the geodesic arcs on panel 05. - `#2D7AA3` **`PROCESS-CYAN`** — the stencil ink, the offset-printer's misregistered cyan, the lens-flare cores, the registration-mark stripe. This is the **accent that carries the street-style register** — sprayed rabbit ears, the registration-mark band, hovered-link underline, focus rings, the "LOGGED" stamp. Used at <8% of canvas total. - `#4FB3CC` **`STREETLAMP-GLOW`** — the only lit color, the sodium-lamp halo, the cyan that has been over-exposed by lens-flare bloom. Used exclusively in the radial gradients of lens-flare bursts on panel 05 and the rim-glow on the masthead. Never used as a fill, only as a glow. - `#E8E2D0` **`POSTER-BONE`** — the cream-bone of the wheat-paste posters, the field card paper, the receipt strip, the index cards. The "white" of the page. Slightly warm, slightly aged. This is the **second dominant color** — every poster body is this. - `#C9C3B1` **`TAPE-AGED`** — the masking-tape color, the torn-edge interior of paper, slightly dirtier than POSTER-BONE, used for the four corner tape strips on every poster, the perforation receipt-edges. - `#F4F0E5` **`HEADLINE-LIME`** — the brightest poster-cream, used only for type set against POSTER-BONE that needs the slight extra contrast lift, and for crisp drawn lines (the white-pen warren-map traces). **Forbidden in this palette:** any warm color, any green that is not a desaturated leaf-silhouette midtone, any orange/red/yellow whatsoever (no sodium-lamp warm color — the streetlamps are color-shifted to cyan, deliberately, as if photographed through a tungsten-balanced filter at 5500K to enforce the cold register), any pure white (#FFFFFF). The palette does not breathe warm light. **The page is one continuous cold-blue exposure**. ## Imagery and Motifs **Three motif families, used in disciplined isolation — never mixed within a single element.** **1. Glitch (the print-shop register-error variant, not the digital-corruption variant).** All glitch on this page is **physical-printing glitch, not digital glitch** — the cyan separation of an offset press has shifted 3px right of the magenta separation, leaving a cyan ghost on the right edge of every printed character on the field card, the receipt strip, the citizen-submission caption strips. Misregistration is rendered as: process-cyan duplicate of the text element offset by `(3px, 0px)` and `mix-blend-mode: screen`, set behind the POSTER-BONE primary glyph layer. Used in: every printed-poster headline (panel-02 field-method title, panel-04 incident-log title, panel-08 colophon imprint), the receipt-strip 11px log entries (subtle, +1px shift), the citizen-submission attribution captions on panel 07. **Never** used as an animated jitter, **never** as a scanline overlay — once printed, the misregistration is fixed in place, not animated. The glitch is **a printed permanent error**, not a screen flicker. Additionally, on panel 04, **one** receipt-strip horizontal RGB-split band crosses the page at a fixed y-coordinate (the band itself is anchored to the panel, not the scroll, so it appears to slide across the receipt as the receipt scrolls horizontally past it). **2. Lens-flare (the long-lens-aimed-at-streetlamp variant).** Six-pointed cyan radial lens flares mark every streetlamp location. Each flare is composed of: a 24px solid cyan core (`STREETLAMP-GLOW`), a six-pointed star burst with rays at 0°, 60°, 120°, 180°, 240°, 300° and ray length 64px, an anamorphic horizontal streak (the long cigar of light caused by an anamorphic lens) extending ±180px from the core in the horizontal axis only, and a soft 96px-radius radial bloom at 28% opacity layered behind everything. **Anamorphic streaks are always horizontal**, never vertical, never diagonal — this is a hard rule because it reinforces the horizontal-scroll grain of the entire page. Lens flares appear on panel 01 (the establishing-shot photograph, four flares marking distant lamps), panel 05 (eighteen flare-marked lamp positions on the warren map), panel 07 (one flare on each blue-hour citizen submission photo where a lamp is in frame). **The flare is the ONLY light source on the page** — there is no other illumination motif. **3. Leaf-organic (the urban-edge forage-flora variant, not the lush jungle variant).** Six identified leaf silhouettes — **clover (Trifolium repens), dandelion (Taraxacum officinale), plantain (Plantago major), common vetch (Vicia sativa), wild lettuce (Lactuca virosa), knotweed (Polygonum aviculare)** — each rendered as a flat process-cyan silhouette with white-pen vein lines drawn over the silhouette in 0.75px stroke. The leaves are drawn in **botanical-illustration discipline** (true to species, true to scale relative to one another, with stipule and petiole detail), but the rendering is **cyanotype-on-cyanotype** — a process-cyan silhouette on a midnight-blue cyanotype paper background, with veins drawn in HEADLINE-LIME white. The leaves are concentrated almost entirely on **panel 06 (Diet / Forage Inventory)**, where they are presented as twelve formal type specimens (six species, two specimens each — one fresh, one half-eaten with rabbit-incisor-mark notches drawn into the leaf edge). Outside panel 06, leaves appear only as **marginal evidence**: one half-eaten clover leaf is shown taped to the bottom corner of the panel-02 field card; three plantain silhouettes are sprayed through stencils as a decorative band on panel 05's map margin. **Leaves never decorate the page indiscriminately** — they are presented as evidence, with provenance, and the rabbit-tooth-notch detail is the recurring "this is real, this was eaten" tell. **Recurring secondary objects (not motif families, but consistent props):** - **Tape strips**: every wheat-paste poster has four corner tape strips, each tape strip is 14px wide × 32px long, semi-translucent TAPE-AGED, with a faint shadow projecting bottom-right at 22°. - **Torn edges**: the bottom-left corner of three randomly-chosen posters (deterministically chosen, same on every render — not random) is torn, exposing the un-pasted underside in TAPE-AGED. - **Stencil overspray**: every stenciled rabbit-ear silhouette has a 4px feathered cyan overspray haze around its edge, irregular, simulating spray-can fan deposition. - **Halftone dot field**: every poster's "photograph" region is rendered with a visible 80-line halftone dot pattern in midnight-blue dots on POSTER-BONE — printed photos, not screen photos. ## Prompts for Implementation Build bunny.quest as **a single HTML document, one CSS file, one small ES module — no SPA, no router, no framework, no React, no build step beyond a single esbuild pass**. The page is one continuous horizontal scroll, ~720vw wide, eight panels, no nested viewports except the panel-03 nested horizontal sub-strip (which is its own scrollable container with scroll-snap). **The visitor lands, scrolls right, reads, reaches the end, stops.** There is no second page. The page does not link out except to the colophon email address. **Storytelling is the organizing principle, not navigation.** The eight panels compose **a single fictional dispatch — Dispatch Number 014 — from a long-running urban-rabbit field study**. Open with the establishing shot. Establish the method. Introduce the subjects (the rabbits, individually, with names and weights). Show one night's incident log in full. Map the warren. Catalog the diet. Show citizen-submitted corroborations. Sign off with edition number and method citation. The visitor finishes the page understanding three things: (1) urban rabbit warrens are real and observable, (2) someone is rigorously cataloging them, (3) the cataloging is happening on the wall of an overpass because the medium fits the subject. The site does **not** sell anything, does not gate anything, does not collect emails (other than the colophon address), does not have a contact form, does not have a navigation menu, does not have a footer with social icons. **It is a published field log. That is all.** **Horizontal-scroll mechanics.** The page uses **a transformed long strip** rather than CSS scroll-snap-x, because the latter is jittery on trackpads. Implementation: `body { overflow: hidden; height: 100vh; }`. A single child `
` with `width: 720vw; height: 100vh; transform: translateX(var(--scroll-x));` houses the eight panels as 100vw × 100vh inline-flex children. Vertical wheel events are intercepted (`event.preventDefault()`), and `--scroll-x` is updated. The motion is **inertial** — wheel events accumulate into a target offset, and the actual offset eases toward target with a critically-damped spring (stiffness 180, damping 26). Trackpad two-finger horizontal gestures pass through to native horizontal wheel and are honored. Arrow keys jump one panel. Page-Up/Page-Down jump four panels. Home/End jump to extremes. **There is no scrollbar visible** — instead, a registration-mark stripe at bottom acts as a progress indicator: the current panel's crop-mark glows in PROCESS-CYAN as you cross into it. **Storytelling motion budget — three classes of motion, no more.** 1. **The sodium-lamp parallax.** As the page scrolls horizontally, the wall's painted texture (a faint noise overlay) translates at 1.0× scroll speed, the posters translate at 1.0× (they are tacked to the wall), the lens-flare bursts translate at 1.0× (they are point-source highlights baked into the photograph), but the **photographic backgrounds within posters** translate at 0.94× — creating a faint depth illusion as if the photographs have a slightly different lens distance from the wall. This is the only parallax. There is no scroll-driven zoom, no scroll-driven rotation, no scroll-driven scaling. 2. **The breath of the wall.** The wall background's noise overlay has **a 14-second horizontal drift** (`@keyframes wall-breath { 0% { transform: translateX(0); } 100% { transform: translateX(-32px); } }`, infinite, linear). This is so subtle it is almost subliminal — but it makes the static page feel alive, **as if you are in front of the wall and your eye is making micro-saccades**. 3. **The lens-flare bloom pulse.** Each lens-flare's outermost soft bloom has a 4.6-second opacity oscillation between 22% and 32%. Different flares have different phases (offset by a hash of their position so they don't pulse in unison). This is the only "animated" element and it is a visual breath, not an attention-grab. **Forbidden motion (hard rules):** - No cursor-follow on any element. Cursor-follow is at 70% in the cohort; this design rejects it. - No `scroll-triggered` reveals. Elements are visible from page load; you scroll to them, you see them. No fade-in-on-scroll. - No spring or magnetic hover effects. - No typewriter-effect on text. - No counter-animate on numbers. - No tilt-3d cards. - The poster-corner tape strips do **not** wiggle or flutter on hover. - Hovering a subject card on panel 03 does **not** flip it. It does ONE thing: the cyan misregistration on its caption shifts from 3px to 5px, **as if you leaned closer and the printing-error became more visible**. That is the only hover state on the entire page. **One hover state. Period.** **AVOID (explicit, from the rules):** No CTA blocks, no pricing tiers, no stat-grids, no testimonial sections, no logo-cloud "trusted by" rows, no feature-comparison tables, no FAQ accordions, no email-capture forms (the colophon email is plaintext, copy/paste, no form). No hero with a headline + subheadline + button. No "what we do / how it works / get started" tripartite structure. **The page is a dispatch, not a marketing surface.** **SVG and asset discipline.** Every poster's tape strip, every torn corner, every leaf silhouette, every lens flare is an inline SVG with explicit dimensions. The eighteen rabbit micro-portraits on panel 03 are SVG line-art (white pen on midnight-blue ground), not photographs — drawn with consistent ear-notch detail per individual. The forage leaves on panel 06 are also SVG, with the species's actual leaf shape correctly drawn (vein patterns matter). The warren-map on panel 05 is a hand-drawn SVG with 31 numbered burrow markers and ~60 connecting arc paths. **Total SVG payload target: ≤140KB total compressed.** No raster photographs except where halftone-rendered and dithered to <60KB each (panels 01, 06, 07). **Type-loading discipline.** Three Google Font families (JetBrains Mono, DM Sans, Special Elite). Subset to Latin only. `font-display: swap`. Self-host if practical. **Special Elite is loaded for one phrase only on the entire page** — and that is fine, the file is small and the typographic moment justifies it. ## Uniqueness Notes Six differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Street-style as research-publication medium, not as veneer.** The frequency analysis shows street-style at 3% (rare). But the cohort's existing street-style sites lean on graffiti / spray-paint as a **stylistic-energetic** register — bold, loud, rebellious. **bunny.quest is the inverse**: street-art posting is the *physical infrastructure* of a *quiet, professional* research log. The wheat-paste poster is the publication mechanism, not the mood. This is the load-bearing conceit and would be plagiarism to copy. The tone is **professional** (4% in cohort — also rare), and the fusion of street-style aesthetic + professional tone + clinical rabbit-biology subject matter is **zero-overlap with anything else in the cohort**. 2. **Horizontal-scroll as walking-the-overpass, not as portfolio-gallery.** Horizontal-scroll is at 8% in the cohort. The cohort uses it primarily as **portfolio carousel** or **timeline**. bunny.quest treats horizontal scroll as **the literal act of walking down a single continuous wall reading posters in physical sequence**. The wall itself is a continuous textured background; the scroll is the visitor's body moving along the wall. This re-grounds horizontal-scroll in a physical metaphor that the cohort has not used. 3. **Cold-blue color discipline as inversion of "warm" dominance.** The cohort palette frequency shows warm at 94% — almost universal. midnight-blue is at 7%. **bunny.quest commits to zero warm color** — even the streetlamps, which in reality are sodium-yellow, are color-shifted to cyan to maintain the cold register. This is a deliberate, total inversion of the cohort's default warmth. The page is one continuous cold-blue exposure. 4. **Glitch-as-printed-misregistration, not glitch-as-screen-flicker.** Glitch-aesthetic is at 13% and glitch-art-imagery at 4%. But the cohort treats glitch as **digital corruption** — RGB shift, scanlines, datamoshing, screen tearing. **bunny.quest treats glitch as physical-press misregistration** — the cyan separation of an offset print job has shifted 3px right of magenta. The artifact is **printed once and stays put** — never animated, never flickering. This is glitch-as-archaeology rather than glitch-as-symptom. 5. **Lens-flare with anamorphic-horizontal-only discipline.** Lens-flare imagery is at 3% in the cohort. bunny.quest's lens-flare bursts are **always anamorphic-horizontal-streak**, never vertical, never diagonal — locked to the horizontal-scroll grain of the page. Every lamp is a horizontal cigar of light. This is a stricter rule than any cohort lens-flare implementation. 6. **Leaf-organic motif as forage-evidence-with-tooth-notches, not as decoration.** Leaf-organic is at 6% in the cohort. The cohort uses leaves **decoratively** — botanical illustration as ambient ornament. **bunny.quest treats leaves as legal evidence** — six identified species, true-to-scale, true-to-vein-pattern, presented as type specimens with Latin binomials, **with rabbit-incisor-mark notches drawn into the half-eaten specimens**. Leaves only appear in panel 06 and as marginal-evidence elsewhere. This is botanical illustration as forensic exhibit. **Chosen seed (from assignment):** `aesthetic: street-style, layout: horizontal-scroll, typography: tech-mono, palette: midnight-blue, patterns: glitch, imagery: lens-flare, motifs: leaf-organic, tone: professional`. Every one of these eight axes is materially expressed in the design above and is load-bearing — none is a token reference. The fusion-thesis (research-log-published-on-overpass-wall) was built specifically to make all eight register-points cohere into one believable artifact. **Frequency-avoidance (explicit):** This design avoids hand-drawn aesthetic (94% — saturated), glassmorphism (72%), card-grid layout (70%), full-bleed layout (88%, though we use one full-bleed photo on panel 01 as exception), centered layout (82%), warm palette (94%), gradient palette (95%), parallax patterns (93% — we use only one minimal 0.06× parallax delta, far below cohort norm), spring/stagger/cursor-follow patterns (all 70%+), photography imagery (97% — we use halftone-printed photographs only, which read as ink on paper, not as screen-photographs), pastoral-romantic tone (22%), warm-inviting tone (21%), and humanist typography (37%, used only in DM Sans for prose passages and never as the dominant type voice).