# Design Language for rollup.quest ## Aesthetics and Tone rollup.quest is **the drafting loft of a guild of itinerant cartographers** — the people who, for centuries, were paid to walk the unmapped edge of a kingdom and bring the territory home *rolled up* under one arm. The site treats a "rollup" literally: a long sheet of survey paper, drawn upon in the field, then wound around a brass-tipped dowel and carried back to be unrolled across a tilted drafting table under a north-facing window. Everything on the page is *on that sheet* or *on that table*. The aesthetic is **isometric blueprint atelier** — not the cold CAD-grid kind of isometric, but the warm, hand-inked kind: a 30-degree axonometric world where the drafting table, the rolled tubes of older surveys, the parallel-rule, the lead-weights holding corners flat, and the brass divider all sit in a single coherent pseudo-3D plane. Lines are *drawn*, never extruded. The mood is **scholarly-intellectual** with a current of quiet adventure underneath — the calm of a person who has measured a coastline by hand and is now, unhurried, transferring it to permanent record. It is the opposite of a dashboard: nothing blinks, nothing demands. The page rewards a slow read the way a good map rewards a slow finger. Reference touchstones: 19th-century Admiralty chart engraving; the cyanotype-blue of architect's blueprints before xerography killed them; the muted navy-and-steel of old surveying instruments in a felt-lined case; Saul Steinberg's line drawings of imaginary cities; the marginalia of medieval portolan charts (compass roses, sea-monsters retired to the corners, rhumb-line fans). The tone of voice in copy is the surveyor's field-note: precise, dry, occasionally wry, never salesy. ## Layout Motifs and Structure The page is built on **diagonal sections** — the entire composition is sheared to a consistent **30-degree isometric rake**, so the eye travels not straight down but down-and-to-the-right along an implied drafting-table edge. Six "sheets" stack along this rake, each one a numbered survey leaf (LEAF I through LEAF VI). There is **no centered max-width well**; content runs the full bleed of the viewport but is *clipped to angled edges*, so each leaf appears to be a real sheet of paper laid at a slant, with the next one already sliding into view beneath it. **The unrolling mechanic is the spine of the layout.** On load, the first leaf is a tube — a rolled cylinder of paper, drawn isometrically, lying across the bottom third of the screen. As the reader scrolls (or after a 2.4s autoplay overture), the tube *unrolls upward and to the left*, the cylinder shortening as the flat sheet lengthens, lead-weights dropping onto the corners with a small settle. Only when the sheet is flat does the first headline ink itself into being via SVG path-draw. Each subsequent leaf, on scroll-in, performs a shorter version of the same gesture: a brief curl at one edge that flattens out. **Structural rules:** - Every leaf carries a **survey cartouche** in its lower-right corner: a small engraved-style box with a leaf number, a fictitious bearing ("N 41° 12′ E"), a scale ratio, and the cartographer's monogram. This is the recurring anchor. - A persistent **parallel-rule** sits pinned to the left margin — a thin double-line bar that slides vertically to track scroll position, the way a draftsman's parallel rule rides its cables. It is the only "navigation." - **Marginalia gutters**: each leaf has a ~14vw right-hand gutter reserved for hand-lettered annotations, tiny isometric instrument sketches, and rhumb-line fans. Body text never enters the gutter; the gutter never holds body text. - No card grid. No bento. Where multiple items must coexist (e.g. a list of "completed surveys"), they are drawn as a **stack of slightly-fanned rolled tubes** on the table, each labelled on its end-cap, rather than as tiles. - The footer is the **table's edge** — the composition simply runs off the bottom of a drawn drafting table, with a drawer slightly ajar containing the colophon. ## Typography and Palette **Typefaces (all on Google Fonts):** - **Spectral** (used 300 / 400 / 500, plus 400 italic) — the body voice. A screen-built serif with a slightly engraved, almost copperplate spine; reads like printed chart text. Body set ~1.0625rem, line-height ~1.8. All running prose, abstracts, captions. - **IBM Plex Mono** (400 / 500, plus 500 italic) — the **instrument voice**: bearings, scale ratios, coordinate labels, leaf numbers, the parallel-rule's tick readouts, the colophon. Slightly condensed feel against Spectral; used small and tracked +0.04em. This is the "tech-mono" register — the lettering a surveyor stamps onto a chart's data block. - **Cormorant Garamond** (600 italic, *restricted*) — used **only** for the six leaf titles and for pull-quotes drawn as if hand-inscribed with a ruling pen. Never body, never UI. - Hand-lettered marginalia are rendered as inline SVG strokes (not a font) so they can "ink in" — see implementation notes. **Palette — "Cyanotype & Brass":** - `#0E1B2A` — *abyssal navy*, the deep ink of the engraved lines and the darkest table shadow. Primary text-on-light is actually a softened version of this. - `#16324F` — *chart navy*, mid-tone for the isometric table surface fills and rule bars. - `#1F4E79` — *blueprint blue*, the classic cyanotype field; used as the background wash of two of the six leaves (the "deep survey" leaves) where text inverts to paper-white. - `#E8E1CE` — *survey paper*, the warm-cream sheet color; the dominant background of four leaves. - `#F4EFE0` — *fresh vellum*, the lightest paper highlight and the unrolled-portion glow. - `#B5894C` — *brass*, the dowel tips, divider, lead-weight gleam, cartouche keylines, and the single accent for active states. - `#8A6A38` — *aged brass*, hover/pressed brass and the engraved shadow under brass elements. - `#6E7B83` — *graphite steel*, secondary text, instrument bodies, the parallel-rule's cables. - `#A4341F` — *survey-pencil red*, used **only** for the field-correction marks: a single crossed-out word per leaf, an arrow, a "see LEAF IV" note. Never decorative; always reads as a real annotation. Contrast strategy: cream leaves carry abyssal-navy ink and brass accents; blueprint-blue leaves carry vellum-white ink with brass keylines glowing slightly. Survey-pencil red appears at most twice per leaf. ## Imagery and Motifs - **The isometric drafting table** — the master object. A single 30-degree axonometric line drawing (SVG) of a tilted table edge, a T-square, a parallel rule, lead-weights, a sandbag, a steaming tin mug, and an open instrument case showing a brass divider and a protractor. It is *redrawn at slightly different angles* across leaves so it feels like the same table photographed from a moving chair. All in 1px–1.5px engraved strokes. - **Rolled tubes** — survey sheets wound on brass-tipped dowels, drawn isometrically, used both as the load-state object and as the "list item" device. End-caps bear monograms and bearings. - **Compass roses & rhumb-line fans** — true portolan-chart marginalia: thin radiating line-fans from a small node, a 16-point rose with the fleur-de-lis north, sea-monster-retired-to-the-corner flourishes in the gutters. Decorative but always *off in the margins*, never centered. - **Contour lines** — faint topographic contour rings used as section-background texture on the cream leaves (very low opacity, like the ghost of a relief map under the type). - **Hachure shading** — short parallel strokes (the old way of drawing slopes on maps) used to "shade" the underside of the isometric table and the curl of an unrolling sheet. - **Field-note marginalia** — tiny ink sketches: a tide gauge, a theodolite, a milestone, a footbridge, each captioned in IBM Plex Mono with a fake measurement. - **Lead-weights & sandbags** — the small recurring "settle" objects that drop onto sheet corners; their tiny shadows are the only soft shadows on the page. - No photography. No gradient meshes. No glassmorphic cards. No neon. No emoji. The visual language is entirely *drawn line + flat paper fills + hachure + one brass gleam*. ## Prompts for Implementation Build rollup.quest as **one long full-bleed HTML document** — six leaves, no SPA, no router, no modals, no nav bar, no hamburger. The reader scrolls top-to-bottom (along the isometric rake) through a single drafting session. Prioritize *atmosphere and the unrolling gesture over information density*. There is **no CTA, no pricing table, no testimonial wall, no stat-grid, no feature-card row, no FAQ accordion, no email capture, no "get started," no logo cloud.** rollup.quest is a place to *read a map being made*, not a product page. **Overture (first 2.4s, skippable on any input):** - Open on the rolled tube lying across the lower screen on the survey-paper ground. CSS/JS animates the unroll: the cylinder (an SVG with an animated `transform: scaleX` on the curl and a `clip-path` revealing the flat portion) unwinds upward-left over ~1.8s with a cubic-bezier ease that decelerates hard at the end (paper "relaxing" flat, not bouncing). Two lead-weights drop onto the top corners at ~1.9s and ~2.05s with a 6px overshoot settle. - Once flat, the LEAF I title (Cormorant Garamond italic) inks itself in via SVG `stroke-dashoffset` path-draw over ~1.1s, as if drawn with a ruling pen. The parallel-rule slides in from the left edge to its rest position. - Respect `prefers-reduced-motion`: skip the unroll, present the flat sheet with title already inked, weights already placed. **Scroll behavior:** - Each leaf, entering the viewport, performs a *mini-unroll*: one edge of the incoming sheet is curled (a 12vw band with a hachure-shaded underside and a `scaleX`/skew transform) and flattens over ~700ms as it scrolls into place. Stagger the leaf's headline path-draw to begin once the sheet is ~80% flat. - The **parallel-rule** on the left margin maps scroll progress to a vertical position; its IBM Plex Mono tick-readout updates to show the current leaf number and a fake "station" count. Smooth it (lerp), do not snap. - Marginalia ink in on scroll-trigger: each gutter sketch's SVG paths run their `stroke-dashoffset` reveal when 60% in view, staggered 80ms apart, like a hand moving down the margin. - Contour-line background textures parallax *very slightly* (≤8px) — just enough to feel like a sheet over a relief model. Do not overdo parallax; this is a still drafting table, not a video game. - The single survey-pencil-red correction mark per leaf draws itself *last*, after a deliberate ~400ms pause, so it reads as the draftsman's afterthought. **Micro-interactions (sparse, instrument-like):** - Hovering a rolled-tube "list item" makes it rotate ~6° on its dowel and slide its end-cap label forward; the brass tip gleams (a small specular highlight sweeps once). - Hovering a leaf title underlines it with a *ruling-pen draw* (left-to-right `stroke-dashoffset`, brass color), not a CSS underline. - The brass divider in the instrument case opens/closes its legs by a few degrees on hover — a tiny, useless, delightful detail. - Links in body text get a hachure-style dotted underline that "fills in" solid on hover. - Cursor: a thin crosshair-with-tick-marks cursor (drawn, subtle) replaces the default over the drafting-table area only. No magnetic buttons, no cursor-following blobs. **Type & color in code:** - Cream leaves: bg `#E8E1CE`, ink `#0E1B2A`, accents `#B5894C`, secondary `#6E7B83`, contour texture at ~4% navy. - Blueprint leaves: bg `#1F4E79`, ink `#F4EFE0`, keylines `#B5894C` with a faint outer glow, mono labels in `#E8E1CE` at 70%. - Brass `#B5894C` is the *only* color that ever animates/brightens; aged brass `#8A6A38` for pressed states. - Generous leading on Spectral body; IBM Plex Mono always small, tracked, uppercase for data labels, sentence-case for field-notes. **Structure summary:** LEAF I — the unrolled charter ("what a rollup is"). LEAF II — the instrument case (an inventory of methods, drawn as instruments with field-note captions). LEAF III — a blueprint leaf: the deep survey (the longest read, inverted palette). LEAF IV — the stack of completed surveys (fanned rolled tubes). LEAF V — marginalia leaf: the corrections, the sea-monsters retired to the corner, the wry footnotes. LEAF VI — the table's edge: colophon in the half-open drawer, parallel-rule comes to rest, a final lead-weight settles, the crosshair cursor fades back to default. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The literal unroll mechanic.** No other site in the corpus uses an isometric *rolled-paper cylinder that physically unwinds* as its load overture and as its per-section transition. Sites with fade-reveal and path-draw use scroll-triggered fades; rollup.quest's signature is a geometric `scaleX`/`clip-path` unroll with lead-weights settling on the corners — a physical-object metaphor unique to this site. 2. **The parallel-rule as the only navigation.** Instead of a nav bar, a sticky header, or a dot-nav, the entire wayfinding is a draftsman's parallel rule pinned to the left margin with a monospace tick-readout. It is diegetic — it belongs to the drafting table — not chrome bolted on top. 3. **Drawn-line-only visual language with a strict brass-is-the-only-accent rule.** Zero photography, zero gradient mesh, zero glassmorphism. Everything is 1px engraved SVG line, flat paper fill, hachure shading, and exactly one warm metal (`#B5894C`) that is the *only* color permitted to animate or brighten — plus survey-pencil red `#A4341F` used at most twice per leaf as genuine annotation, never decoration. 4. **Cyanotype-blue inverted leaves.** Two of six leaves flip to true blueprint blue (`#1F4E79`) with vellum-white ink — a rhythm of cream→blue→cream that mimics flipping between a finished chart and its working blueprint. Most full-bleed sites in the corpus hold one ground color throughout. 5. **The cartouche + monogram anchor.** Every leaf carries a lower-right engraved cartouche with a fictitious bearing, scale, and cartographer's monogram — a recurring "you are here on the sheet" device borrowed from real chart-making, not from web UI patterns. **Chosen seed/style:** `aesthetic: isometric, layout: diagonal-sections, typography: tech-mono, palette: navy-metallic, patterns: path-draw-svg, imagery: line-illustration, motifs: grid-lines, tone: scholarly-intellectual` (fallback selection — no Planned Seed was supplied in the assignment; this combination is underused across the corpus). **Avoided patterns from frequency analysis:** steers clear of the saturated patterns — hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid (91%), full-bleed-as-centered-well, mono-as-default-everything, warm/gradient palettes (98%/94%), parallax (90%), cursor-follow (89%), spring (84%), magnetic (79%), stagger-as-the-whole-trick (70%). Where this design uses path-draw-svg (46%) and diagonal-sections (6%) and isometric (13%), it commits to them structurally rather than decoratively.