# Design Language for plotgrapher.com ## Aesthetics and Tone plotgrapher.com is a **pen-plotter atelier** — the site behaves as if it were itself being drawn, in real time, by a vintage HP 7475A flatbed plotter whose carriage you can hear (visually) chittering across the page. The governing fiction: every curve, axis tick, label and divider on this site was *not* placed by a designer but *plotted* — pen-down, traverse, pen-up — by a machine that thinks in polylines. The tone is **grounded-earthy** crossed with **whimsical-creative**: the warmth of a drafting table at golden hour (masking tape, a half-drunk mug ringing the margin of a velographed graph, the faint ozone of a fresh ammonia print) but with the playful glee of watching a robot arm finish a Lissajous figure and lift its pen with a flourish. This is *not* a glassy SaaS analytics dashboard and it is emphatically *not* hand-drawn-doodle whimsy — the line quality is **mechanical**: dead-uniform 0.35mm stroke weight, perfectly constant pen velocity, the tiny over-travel wobble a real plotter leaves at the end of a stroke. The mood word is **draughtsmanship**. Inspiration board: Tufte's *Visual Display of Quantitative Information* plates, 1970s Tektronix storage-scope phosphor green, Frieder Nake and Vera Molnár algorithmic plots, the Letraset catalogue, surveyor's field notebooks, and the specific beige of an old oscilloscope bezel. The page should feel *patient* — curves accrete, they are not flung in. ## Layout Motifs and Structure The site is a single continuous **immersive-scroll** document organised as **stacked-sections**, but the unifying spatial law is a **persistent plotting bed**: a fixed, full-viewport sheet of pale graph paper (engineering quadrille: a 4mm minor grid in 6% ink, a 20mm major grid in 12% ink, with a heavier rule every 100mm) that *never moves* — all content scrolls *over* this bed like a sheet being fed through the platen. A thin **carriage rail** runs along the top edge of the viewport at all times: a 2px horizontal track with a small bracket-shaped plotter head that slides left↔right tracking the horizontal centroid of whatever is currently being "drawn" on screen, and dips a 6px pen-nib glyph downward whenever a path is actively animating. Six movements, each a different *plot type*, each honoring a strict cartesian discipline before bending it: 1. **Origin** — hero. The wordmark `plotgrapher` is rendered as a single continuous penstroke that the plotter draws on load, letters joined by faint traverse-lines (pen-up moves shown as 1px 20%-opacity dashes), ending with a visible pen-lift bounce. 2. **The Function Bench** — a left **sidebar** column of "pens in a carousel" (the classic 8-pen turret) sits at x=0; the right 9 columns host a parametric curve that redraws as you scroll, the active pen color migrating from the turret to the curve. 3. **Anatomy of a Plot** — a true **bento-box** of framed plates (residual plot, polar rose, phase portrait, small-multiples strip) each captioned in the bottom-left like a textbook figure ("Fig. 3.2 — Lissajous, δ = π/4"). 4. **The Long Traverse** — one **horizontal-scroll** band: a single sparkline 8 screens wide that you scrub through, the carriage head genuinely racing along the rail. 5. **Marginalia** — an **editorial-flow** column of running text set like a field notebook, annotations clipped to the major grid lines with little draughtsman's leader-lines. 6. **Pen Up** — the footer: the plotter parks its carriage in the home corner, the pen lifts, and a "PLOT COMPLETE — 1 sheet, 14,302 mm pen travel" status line types out. Margins are sacred: a 48px (mobile 24px) "non-printable border" frames every section, dashed like a plotter's clip zone. Nothing bleeds to the edge except the graph bed itself. Negative space is treated as **unplotted paper** and is generous — roughly 55% of any viewport is bare grid. ## Typography and Palette **Type stack — Google Fonts only.** - **Spline Sans Mono** (variable) — the primary voice. A humanist monospace with just enough warmth to not read as "code", chosen because plotters historically lettered with single-stroke fixed-pitch fonts; used for the wordmark, all axis labels, figure captions, data callouts, the carriage status line, and every numeral on the site. Tracking +2%, lining figures, tabular spacing always on for numbers. - **Fraunces** (variable, opsz 9–144, soft serif) — used *only* for the long-form Marginalia movement and section titles, set in the lighter optical sizes at large display weights. It is the "human handwriting in the margin of the machine's plot" — the contrast between Fraunces' organic ductus and Spline Sans Mono's grid is the core typographic tension. - **Inter** — utility only: tiny legal/footer text, never above 13px, never a headline. Type is set on the same baseline grid as the plot (every line of body text snaps to a 4mm multiple). Headlines are *underlined by a drawn rule* — a path-draw stroke, not a `text-decoration`. **Palette — warm drafting-room neutrals + plotter-pen accents:** - `#F4EFE3` **Vellum** — the paper / dominant background (~50% pixel area). - `#E7DECB` **Tracing Buff** — secondary panels, the non-printable border fill. - `#23201A` **Graphite Ink** — primary text and the default pen stroke; near-black but warm, the color of a 0.35mm Rotring on bond. - `#1F5C3D` **Phosphor Green** — accent #1, the storage-scope green, used for the *active* plotted curve and live cursor readouts. - `#C2410C` **Cinnabar Pen** — accent #2 (the "red pen" of the turret), used for residuals, errors, the most important single annotation per section, and the carriage pen-nib glyph. - `#2A4D8F` **Blueprint Indigo** — accent #3, used for the major grid rule, hyperlinks (drawn underline in this color), and the phase-portrait plate. - `#9A8F77` **Drafting Dust** — the muted line color for minor gridlines, dashed clip-borders, and pen-up traverse dashes. Grid lines are *always* drawn in Drafting Dust at low opacity over Vellum — never pure grey on white. ## Imagery and Motifs **Everything visual is a polyline.** There are no photographs and no raster illustrations anywhere. The entire imagery system is SVG paths that look like they came off a plotter: - **The eight-pen turret** — a recurring isometric-ish cluster of eight little pen barrels, each capped in one of the palette accents, that physically "loads" a pen (a barrel slides forward) whenever the active accent color changes. - **Parametric specimen curves** — Lissajous figures, rose curves (r = cos kθ), phase portraits of the damped pendulum, hypotrochoids (a Spirograph homage), and a Gaussian residual scatter — each rendered as a single stroke-dasharray-animated path, each captioned like a plate. - **Axis furniture** — tick marks, minor/major gridlines, leader lines, dimension arrows (the `|←—→|` draughtsman's measure), and corner crop marks — these are *the* decorative vocabulary; they replace the usual icon set entirely. - **Hatching & stipple fills** — where a region needs "fill," it is filled the way a plotter fills: parallel 45° hatch lines at 1.2mm pitch, or, for darker tones, cross-hatch — never a flat fill, never a gradient. - **The carriage head** — a small bracketed glyph `⌐■` that lives on the top rail, the site's mascot, with a downward pen-nib triangle that drops when drawing. - **Plotter "errors" as charm** — occasional, deliberate: a curve that slightly over-travels and corrects, a 1px registration mismatch between the green and red pens, a faint smudge where the pen "rested too long." Subtle, max one per section. Motif keywords: `data-viz`, `grid-lines`, `line-illustration`, `flowing-curves`, `abstract-tech` — assembled in a register no other site in the registry uses (mechanical plotter, not analyst dashboard). ## Prompts for Implementation Build plotgrapher.com as **one long static HTML document** — no framework, no router, no SPA. One `` (or layered SVG) fixed behind everything renders the persistent graph bed; the six movements are `
` stacked above it. Target scroll length ≈ 640vh desktop, 760vh mobile. - **The page draws itself.** On load, *nothing is visible except the blank graph bed.* Then a master timeline runs: the carriage head appears at home corner, traverses to the wordmark start point, pen drops, and `plotgrapher` is drawn as one continuous `stroke-dashoffset` animation over ~1.8s with a constant — *constant*, linear easing, this is the whole point — velocity. Pen lifts with a 4px vertical bounce. Only after pen-up does the rest of movement 1 fade in. - **Scroll is the pen velocity.** Each parametric curve in movements 2–4 has its `stroke-dashoffset` mapped to scroll position within its section via `IntersectionObserver` + `requestAnimationFrame` — scroll down, the pen draws forward; scroll *up*, it retraces backward (pen literally un-draws). Use a `spring` only for the carriage-head position chasing the centroid; everything else is linear (mechanical). - **Carriage head is global.** A persistent `position: fixed` element on the top rail, its `left` lerped toward the x-centroid of the currently-intersecting animated path; its pen-nib triangle gets `transform: translateY(6px)` whenever any path on screen is mid-draw. Add a faint `box-shadow` track-shadow under it. - **Cursor interaction (`cursor-follow`, `path-draw-svg`):** in movement 3's bento plates, the visitor's cursor becomes a crosshair with live `(x, y)` readout in Phosphor Green Spline Sans Mono; hovering a plate "selects" it — a Cinnabar Pen rectangle is *drawn* around it, corner-first, like a draughtsman boxing a figure. - **Hatching on reveal:** when a section enters view, any filled region performs a `stagger`ed hatch-line draw — lines appear one after another at ~1.2mm pitch, left to right, like the plotter shading. Use SVG `` only as a fallback for reduced-motion. - **Movement 4 horizontal-scroll:** the 8-screen sparkline pins (`position: sticky`) and translates on vertical scroll; the carriage genuinely sprints along the rail tracking the visible window's data; little tick labels (timestamps) snap past. - **Marginalia (movement 5):** body copy in Fraunces, but each paragraph is annotated — a Spline Sans Mono note in the margin connected to a clause by a thin Drafting Dust leader line that *draws* itself when the paragraph scrolls into the center band. - **Footer (movement 6):** carriage returns home, pen lifts, `PLOT COMPLETE — 1 SHEET · {animated counter} MM PEN TRAVEL · {n} STROKES` types out (`typewriter-effect`, `counter-animate`), then everything goes still — the only truly static state on the site. - **Reduced motion:** present every curve already fully drawn, carriage parked, no traversal — but keep the layout, captions, and the graph bed intact. The site must still read as a plotter's output, just finished. - **AVOID:** hero CTAs, pricing tables, stat-grids, testimonial carousels, feature-icon rows, signup modals, glassmorphic floating cards, drop-shadow elevation systems, gradient meshes, hand-drawn doodle marginalia. There is no "Get Started" button — there is, at most, a single drawn-rectangle link captioned `Fig. 7 — begin your own plot`. ## Uniqueness Notes 1. **Mechanical line quality, not hand-drawn.** 96% of the registry leans on `hand-drawn` warmth; plotgrapher inverts it — the line work is deliberately, defiantly *machine-uniform* (constant pen velocity, 0.35mm dead-even stroke, plotter over-travel wobble). The charm comes from the *machine's* personality (loading pens, parking the carriage, leaving a smudge), never from imitated human imperfection. 2. **The interface IS its own output.** Rather than depicting graphs as content, the entire chrome — wordmark, dividers, axis furniture, fills, link underlines, the mascot — is plotter output. The page literally draws itself on load and un-draws on scroll-up. No other registry design treats data-viz as the *substrate of the UI itself*. 3. **A persistent physical plotting bed + global carriage head.** The fixed engineering-quadrille sheet that content feeds over, plus a single carriage element that lives on a top rail and tracks the active curve's centroid for the entire site, is a structural device unused elsewhere — it ties six otherwise-disparate movements into one continuous mechanical performance. 4. **Spline Sans Mono × Fraunces as "machine lettering vs. human margin note."** A humanist monospace doing *all* the numerals and labels, with a soft variable serif reserved strictly for the marginalia column — a pairing chosen for narrative reasons (the machine writes in mono; the human annotates in serif), not just contrast. 5. **Warm drafting-room neutrals + literal plotter-pen accents** (Vellum / Tracing Buff / Graphite Ink with Phosphor Green, Cinnabar Pen, Blueprint Indigo): warm + muted + a touch of high-contrast, but assembled as an explicit eight-pen turret rather than a generic gradient — sidestepping the 95%-gradient / 81%-glassmorphism crowd. Chosen seed/style: **generative art background** — reinterpreted not as ambient noise but as a *purposeful, scroll-parametrized pen-plot* that constitutes the page. Patterns intentionally avoided per frequency analysis: glassmorphism (81%), hand-drawn aesthetic & imagery (96%/98% leaning), card-grid + centered + full-bleed default trio, gradient-mesh imagery, cursor-follow used as a flashy gimmick (here it is a draughtsman's crosshair with real readouts). Embraced from the underused tail: a coherent `data-viz` + `line-illustration` + `editorial-flow` + `horizontal-scroll` combination in service of one mechanical conceit.