# Design Language for whitepapers.xyz ## Aesthetics and Tone whitepapers.xyz is staged as **an axonometric cutaway of a thought** — the visitor is not reading a research paper, they are walking through one, watching a single idea get assembled girder-by-girder like an exploded engineering diagram that has been pulled apart in mid-air and frozen at 30°. The conceit: the "white paper" is taken literally — a sheet of paper, white, but rendered as an *isometric solid object* with measurable thickness, casting a flat hard-edged shadow, suspended in a calm cool-grey volume the way a single component floats in a parts catalogue plate. Around it orbit the things a paper is made of: a thesis sentence, three load-bearing claims, a stack of citations, a margin of caveats, an appendix bolted on at the back. Each is its own isometric block. As you scroll, they slide together along the three iso-axes and *dock* — and the finished assembly is the paper. The tone is **scholarly-intellectual** but with the dry, precise warmth of a draughtsman's hand — think the patent drawings of a quietly brilliant inventor, or the IKEA assembly manual for an idea. Never corporate, never "thought-leadership deck." There is no urgency, no persuasion. The site behaves like a museum vitrine that happens to disassemble itself for you. Authoritative in the way a well-labelled diagram is authoritative: it does not argue, it *shows*, and the showing is the argument. Inspiration: Bruno Munari's design manuals, the cutaway illustrations in 1970s Haynes manuals, Edward Tufte's "small multiples," the exploded-view plates in vintage Meccano catalogues, and the cool restraint of a Dieter Rams parts diagram — all filtered through a flat, line-driven, true-isometric (not 3D-rendered, not perspective) discipline. ## Layout Motifs and Structure The load-bearing structural conceit is **layered-depth on an isometric stage** — but "depth" here means the three axonometric axes, not parallax z-planes. Every element on the page is drawn as if extruded along the iso-grid: the x-axis runs down-right at 30°, the y-axis down-left at 30°, the z-axis straight up. The page is a single continuous vertical scroll (~600vh, seven plates) but the *content* lives on an isometric "build table" that occupies the center 70% of the viewport, with a thin draughtsman's border framing it. **Plate inventory (each plate = one stage of the assembly):** 1. **Title Block** — bottom-right of the screen sits a real engineering title block (drawn in line): "SHEET 1 OF 7 / SUBJECT: whitepapers.xyz / SCALE: 1:1 / DRAWN BY: —". The hero is a single isometric white slab floating dead center, very thin, casting one hard flat shadow, slowly rotating ±4° on the iso-vertical. 2. **The Thesis** — a long low isometric bar slides in from upper-left and locks beneath the slab; a typewriter line writes the thesis sentence along its top face. 3. **The Claims** — three identical isometric blocks descend on the z-axis and stack like a column of drawers, each labelled CLAIM 01 / 02 / 03, each one sliding open on hover to reveal its face-text. 4. **The Evidence** — a wide flat isometric plane unrolls from the right like a drawing being pulled across a table; small isometric "citation chips" (tiny extruded rectangles with [n] labels) rain down and settle into a neat grid on its surface, each connected to a claim by a thin dimension-line with arrowheads. 5. **The Caveats / Margin** — a narrow vertical isometric strip hinges out from the left edge of the assembly like a fold-out errata flap; handwritten-feeling notes appear along it. 6. **The Appendix** — a thick isometric block (visibly the heaviest part) bolts onto the back of the stack with four drawn hex-bolts that spin into place. 7. **Colophon Plate** — the whole assembly, now complete, lifts and rotates once slowly to show it is solid; the title block fills in DRAWN BY with the domain, a final dimension-line measures the total height of the stack, and the sheet count reads 7 OF 7. There is **no top navigation bar.** Instead, a vertical "sheet index" runs up the right gutter — seven tick marks on a drawn ruler, the current plate's tick extended into a full leader line with the plate name. No cards-in-a-grid, no hero-CTA, no pricing, no stat counters. The only "grid" is the isometric construction grid itself, faintly visible as 0.5px cool-grey lines across the build table. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with draughtsman discipline.** - **Anton** (display, single weight) — used ONLY in the title block and plate numbers ("SHEET 4 OF 7", "PLATE", "APPENDIX"). Always uppercase, always tracked +0.12em, always small (never larger than 22px) — the stencilled-label voice of a technical drawing. Its compressed weight reads as a rubber-stamp, not a banner. - **Fraunces** (serif, optical sizes, used at "soft" optical setting, weights 300–500, italic available) — the body and headline voice. This is the *paper itself talking*: the thesis sentence, the claim texts, the running prose. Set generous: 19px / 1.75 line-height for body, 300-weight italic Fraunces at 40–56px for the few large statements. Fraunces' wonky, slightly-Victorian-but-modernized serifs give the prose the feel of a well-set monograph without tipping into "law firm." - **JetBrains Mono** (monospace, 400 + 700) — the *measurement and annotation* voice. Every dimension-line label, every citation chip "[12]", every coordinate "(30°, 0, +4)", every margin note's leader, the sheet index ticks. Mono here = "this is metadata about the idea, not the idea." **Palette — cool-grays primary, one warm accent, used sparingly as "red ink on a blueprint correction."** - `#F5F6F4` — Paper White. The background field everything floats in (a hair off pure white, like real drafting vellum under a desk lamp). - `#E4E7E3` — Grid Grey. The isometric construction lines and faint plate fills. - `#9CA39B` — Graphite. The 0.75px draughtsman strokes that outline every isometric solid; also secondary text. - `#2B2F2C` — Ink. Body text (Fraunces), title-block lettering — a near-black with a green-grey undertone, never `#000`. - `#3D5A6C` — Slate Blue. The "second ink" — used for dimension-lines, the active sheet-index leader, citation chips, hover states. The calm, technical-blueprint blue. - `#C0492B` — Correction Red. The single warm accent. Used ONLY for: the hex-bolts in the Appendix plate, "errata" annotations on the Caveats flap, and the final total-height dimension-line on the colophon. Appears maybe four times in the whole scroll. Never a button, never a background. Drop shadows are always **flat, hard-edged, single-direction, low-opacity Graphite** (offset down-right, no blur, ~12% alpha) — the shadow of a flat object under directional studio light, never a soft material-design lift. ## Imagery and Motifs **No photography. Everything is line + flat-fill isometric, drawn in CSS/SVG.** **1. Isometric solids (the primary vocabulary):** Every "object" — the paper slab, the thesis bar, the claim drawers, the evidence plane, the caveats flap, the appendix block — is a true-axonometric extrusion: top face (light fill `#F5F6F4`), left face (`#E4E7E3`), right face (a touch darker), all outlined in 0.75px Graphite. They are constructed from CSS transforms (`rotateX`/`rotateZ`/`skew` set to iso angles) or hand-built SVG paths, never `perspective` 3D renders. They snap to the iso-grid. **2. Dimension-lines & callouts:** Thin Slate-Blue lines with tiny filled arrowheads at each end and a JetBrains Mono label floating mid-span ("THESIS · 1 OF 1", "CLAIM 02 → REF [7][8]", "TOTAL HEIGHT: 6 PLATES"). They connect related blocks. On scroll-reveal they "draw" themselves with `path-draw-svg` (stroke-dashoffset animation), arrowheads popping last. This is the site's signature animated motif. **3. The title block:** A bottom-right boxed table, drawn in pure CSS borders, with cells for SHEET / SUBJECT / SCALE / DRAWN BY / DATE. Cells fill in progressively as you scroll. It is always visible, always small, always Anton+Mono. **4. Citation chips:** Tiny isometric rectangles (~16px) with a `[n]` in Mono on the top face, Slate-Blue fill at 15%. They rain and settle on the Evidence plane in plate 4 with a short `spring`/`elastic` bounce, then stay docked. **5. Hex-bolts:** Six-sided drawn bolts (SVG hexagon + inner circle + a short slot), Correction-Red stroke, that `rotate(360deg)` into their holes when the Appendix docks. The only place rotation-spin happens. **6. The construction grid:** Faint 0.5px `#E4E7E3` iso-grid lines covering the build-table area, fading to nothing at the edges with a radial mask — the "graph paper" the whole idea is assembled on. It very slowly drifts (1px every few seconds) to keep the page feeling alive without distracting. **7. Margin notes:** On the Caveats flap, short handwritten-feeling annotations — but rendered in *italic Fraunces*, not a script font, with a thin Slate-Blue leader line pointing to what they qualify, and one or two in Correction Red prefixed "ERRATA:". ## Prompts for Implementation Build whitepapers.xyz as **one HTML document, one CSS file, one small vanilla ES module — no framework, no router, no build step beyond a single bundling pass.** The page is one continuous ~600vh vertical scroll: seven "plates," and scrolling *assembles a white paper* out of isometric parts. The visitor lands, scrolls, watches the idea get built, leaves. There is no second page; the site does not link out except a single Mono footnote-style line in the colophon. **Storytelling is the organizing principle, not navigation.** The narrative is: *here is what a white paper actually is, shown by taking one apart and putting it back together.* Plate 1 = the blank sheet (the slab). Plate 2 = the thesis docks under it. Plate 3 = three claims stack on top. Plate 4 = evidence unrolls and citation-chips rain down and wire themselves to the claims with dimension-lines. Plate 5 = the caveats flap hinges out (a paper is honest about its limits). Plate 6 = the appendix bolts onto the back. Plate 7 = the completed assembly rotates once to show it is solid, the title block fills in, total-height dimension-line draws in red. Every plate transition should feel like a *part snapping into a jig* — short, decisive, slightly springy, never floaty. **Animation guidance:** - **Scroll-triggered** assembly: each iso-block slides in along the iso-axis it "belongs to" (thesis from lower-left along y, claims down along z, evidence from the right along x) and locks with a brief `spring` settle (overshoot ~6%, one bounce). - **path-draw-svg** for every dimension-line and the title-block borders — stroke-dashoffset from full to zero on reveal, ease-out, ~600ms, arrowheads scale-in last (~120ms). - **stagger** the three claim drawers (~90ms apart) and the citation-chip rain (~40ms apart, randomized ±20ms). - **Hover:** claim drawers slide open ~24px along their iso-axis revealing face text; citation chips lift 4px on the iso-vertical with a `scale-hover` to 1.08; the active sheet-index tick extends its leader line. - **cursor-follow:** an extremely subtle one — the directional "studio light" (i.e., the offset/length of every flat hard shadow) shifts ±3px based on cursor x-position, so the whole isometric scene feels lit by a lamp the visitor can nudge. Keep it small; it should be felt, not noticed. - **The construction grid** drifts perpetually, ~1px every 3s, ping-ponging — the only always-on motion. - Respect `prefers-reduced-motion`: blocks appear in final docked position with a simple fade; grid stops drifting; shadows stop tracking; dimension-lines appear already drawn. **Build the isometry honestly:** use CSS `transform` with the canonical 2:1 isometric ratios (rotateX(30deg) rotateZ(-45deg) for a "true iso-ish" look, or hand-tuned skew values) — but commit to ONE projection for the whole site so every block reads as belonging to the same drawing. Faces get the three-tone fill (top lightest, left mid, right darkest). All outlines 0.75px Graphite. All shadows flat, hard, down-right, ~12% Graphite. **AVOID:** CTA-heavy layouts, "Get Started" buttons, pricing tiers, stat-grids ("10,000+ papers!"), testimonial carousels, hero-with-form, card-grid sections, perspective 3D renders / WebGL, soft glowy material-design shadows, gradients (this site has zero gradients — it is flat-fill only), glassmorphism blur, dark mode. No emoji, no stock photography, no icon-font icons (all marks are drawn SVG/CSS). ## Uniqueness Notes Differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **The page-as-exploded-assembly-diagram conceit.** Scrolling literally assembles a "white paper" out of labelled isometric parts (slab → thesis → claims → evidence → caveats → appendix → solid). This narrative spine — *the artifact disassembling and reassembling itself as the story* — is the load-bearing signature of whitepapers.xyz and would be plagiarism if copied. 2. **True flat-isometric, zero gradients, zero photography, zero blur.** The frequency analysis shows `gradient` at 93%, `photography` at 98%, `glassmorphism` at 85% — this design uses **none of them.** It is built entirely from 0.75px line strokes and three-tone flat fills on a single committed axonometric projection. It deliberately sits in the underused intersection of `isometric` (13%) + `isometric-icons` (5%) + flat technical-drawing illustration. 3. **The persistent engineering title block as the only "chrome."** No nav bar. Instead a small bottom-right drawn title-block table (SHEET / SUBJECT / SCALE / DRAWN BY / DATE) that fills in progressively, plus a right-gutter "sheet index" drawn as a draughtsman's ruler. Navigation *is* the drawing's own annotation system. 4. **Correction-Red used exactly ~4 times, ever.** A radical-restraint accent rule: the single warm color (`#C0492B`) appears only on the appendix hex-bolts, the errata notes, and the final total-height dimension-line — never a button, never a fill. Against the cool-grey field this makes those four moments land like red ink on a blueprint. 5. **Cursor-as-studio-lamp.** The flat hard shadows of every isometric solid track cursor-x, so the visitor subtly "lights" the scene — a `cursor-follow` use that is diegetic to the technical-drawing metaphor rather than a generic spotlight/parallax. **Chosen seed/style:** `isometric technical docs` (fallback selection — no Planned Seed was provided in the assignment; chose an underused seed not present in referenced designs). **Avoided overused patterns from frequency analysis:** hand-drawn (94%), glassmorphism (85%), photography (98%), card-grid (93%), warm palette (98%), gradient (93%), full-bleed (84%), cursor-follow used as generic spotlight, parallax z-planes (87%) — replaced respectively with line-drawn isometry, flat three-tone fills, no photos, plate-by-plate assembly narrative, cool-grays, zero gradients, framed build-table, diegetic studio-lamp cursor, and true axonometric depth instead of parallax.