# Design Language for graphers.net ## Aesthetics and Tone graphers.net is **a Quiet Plotting Atelier** — a calm-serene, slightly contemplative workspace for the people who make graphs by hand and by code, presented as a flat-design dashboard washed over with the bleed of an old watercolor study. The premise: somewhere between the fine-art print studio and the 1962 statistical bureau, there is an imagined trade called *graphering* — the careful drawing of curves, the labeling of axes, the dignified setting of tick marks — and graphers.net is the union hall, the periodical, and the drafting table for that trade. The site is not a SaaS pitch, not a product page, not a stat-grid: it is **an atelier interior rendered in absolutely flat ink, framed by burgundy borders, cushioned by cream paper, and breathed on by a watercolor that someone forgot to dry before pinning up the page.** The aesthetic is **flat-design at 1% in the corpus — claim-worthy, structurally rare, and committed to without apology.** Flat-design here does not mean the empty corporate Material flat of the 2014 Google era; it means the **deliberate, ink-on-paper flatness of mid-century technical printing** — a flatness that refuses gradients, refuses shadows, refuses bevels, and instead earns its depth through pure stacking of opaque shapes in a strict five-color palette. Each chart, each panel, each axis label is rendered in **flat fills only**, with hairline burgundy strokes where contrast is needed. The single concession to dimensionality is the watercolor wash: behind every flat panel, a soft blot of pigment bleeds outward, faintly out of register with the linework, exactly the way a Risograph print does when the second pass is misaligned by a millimeter. **Flat ink, wet pigment, dry registration — that is the entire visual contract.** The tone is **calm-serene at 4%**. graphers.net never raises its voice. There are no exclamation marks anywhere in the copy, no urgency, no countdown timers, no "Get Started Now" buttons. The dashboard panels do not blink, do not refresh, do not auto-update — they breathe at 0.18 Hz, very slowly, the way a librarian inhales between paragraphs of a Thursday-afternoon lecture. The voice in the copy is the voice of **a senior grapher who has been drawing axes for forty-one years and is in no rush whatsoever to convince you of anything**. The mood inspirations are: the inside of a 1955 Bauhaus drafting room after the apprentices have gone home; a winter afternoon in a print shop where the burgundy ink is still tacky on the rollers; the second movement of a Satie *Gymnopédie* slowed to 0.7× speed; the way a watercolor of a parabola bleeds into the cream of cold-pressed paper. **It is calm. It is ink-quiet. It is a place where graphs are made carefully.** ## Layout Motifs and Structure The structural commitment is **dashboard-as-atelier-pegboard**. Where most dashboards in the corpus stack tiles for the purpose of *displaying live KPIs*, graphers.net inverts that purpose: the dashboard here is **a pegboard of finished plates** — completed graphs hung on a cream wall, like prints in a printmaker's studio, like specimens in a 1930s biological survey. Each tile is a *finished work*, not a live metric. Nothing updates. Nothing refreshes. The grid is reverent. The page is built as **one full-bleed cream canvas hosting a 12-column × 9-row pegboard**, with every tile occupying an integer cell-span. There is exactly one route, one HTML document, one continuous scroll. The pegboard is divided into **four horizontal registers**, each register a different chapter of the atelier's day: - **Register I — The Daybook (rows 1–2).** A burgundy nameplate strip bearing the wordmark *graphers.net*, the date set in retro-display numerals, and a single sentence of the day in a humanist serif: *"Today the apprentices are drawing logarithmic axes."* No nav links. No menu. No sign-in button. The daybook is the only fixed-position element on the page; it remains pinned at the top throughout the scroll, slightly opaque, like a header on a printer's proof sheet. - **Register II — The Plate Wall (rows 3–5).** A 12 × 3 cell pegboard of **nine completed graph plates**, each plate a flat-rendered chart in the studio palette: a burgundy line graph on cream, a cream stacked-bar on burgundy, a duotone scatter, a flat polar plot, a parallel-coordinates plate, a small-multiples grid of nine sparkline cards, a candlestick plate (ink-only, no green/red), an alluvial diagram, and a single empty plate labeled *"awaiting subject"*. Each plate is hung with a small flat **brass pin** (a 4px circle in dusty gold) at its top-center; the pins are decorative, never functional. Hovering a plate triggers an **elastic settle** — the plate eases 6px down on the pin (gravity), then rebounds with a damped spring (k=0.42, b=0.18), as though a draft from a window had stirred it. - **Register III — The Studio Note (rows 6–7).** A 12 × 2 cell rectangle holding a single block of body text — three short paragraphs of essay-tone copy on the practice of graphering — flanked on the left by a watercolor wash of a logarithmic spiral and on the right by a flat-ink diagram of a pair of dividers. The studio note is the only place on the page where prose runs longer than two sentences; everywhere else, copy is captioning, labeling, dating. - **Register IV — The Drying Rack (rows 8–9).** A 12 × 2 horizontal-scroll-on-overflow rack of **seven small plates in various stages of completion** — some are pure watercolor washes with no linework yet, some are ink frameworks awaiting wash, one is finished and signed in burgundy with a tiny plate number (Plate XXIV). The rack scrolls horizontally on touch/wheel, but at a 1:0.4 deceleration ratio so it feels reluctant, the way a wet plate is reluctant to be moved before it has dried. The grid uses a **24px hairline gutter** (one *agate*, in printer's measurement). The gutter color is cream, never white — the entire page is cream, and the gutter is simply the cream showing through between plates. There are no card shadows, no card borders except a 1.5px burgundy hairline on three sides of each plate (top, left, right — never the bottom, which bleeds into the cream like wet ink). Tiles are **never elevated.** They are **flat against the page**, exactly as a print would be flat against a studio wall. The visual depth comes entirely from the watercolor washes that sit *behind* the flat tiles, not from any pseudo-3D effect on the tiles themselves. The composition rejects every visual cue that signals "live SaaS dashboard": there is no sparkline ticking, no number incrementing, no green-up/red-down sentiment color, no "+12.4% MoM" badge. Every plate is signed and dated like a finished print. The dashboard is **a pegboard of completed work**, not a control panel. ## Typography and Palette **Fonts (Google Fonts only — three voices: a retro-display headliner, a humanist serif for the studio note, a tech-mono for axis labels and plate numbers):** - **Display — *Bagel Fat One*** (single weight, 400). Used exclusively for the wordmark *graphers.net* in the Daybook nameplate, set in cream against burgundy at 64px, letter-spacing -2%. *Bagel Fat One* is a mid-century-revival display face with chubby, ink-spread terminals — the typographic equivalent of a 1958 wood-block poster reprinted by a tired Risograph. It carries the entire **retro-display** voice of the page; nothing else uses it. Retro-display sits at 5% in the typography frequency chart, and Bagel Fat One specifically (rather than the more common Bebas/Bungee/Monoton) keeps this design distinct from the corpus's other retro-display sites. - **Body & Studio Note — *Fraunces*** (Variable, opsz 9..144, wght 100..900, SOFT 0..100). The humanist serif voice. Set at 16px/26px for the studio note, with optical-size locked to 14 (small-text grade), wght 380, SOFT 30 — a soft, slightly inky body face that pairs with the wet-ink mood without drifting into full hand-drawn. Used for: the studio note prose, plate captions, the daybook sentence-of-the-day. Fraunces is chosen specifically over Lora/Spectral because its SOFT axis lets the type pick up a faint pigment-bleed character that resonates with the watercolor washes. - **Mono — *JetBrains Mono*** (weights 400, 600). The tech-mono accent. Used exclusively for: axis tick labels (1, 10, 100 on log axes), plate numbers (Plate XXIV), date stamps in the daybook (`05·09·2026`), and the watermark beneath the wordmark (`vol. ix · no. ii`). Set at 11px, tracking +4%, color burgundy. JetBrains Mono is the **technical voice**, the surveyor's voice — small, precise, and present in exactly the places where a senior grapher would write in pencil along the bottom of a plate. The three voices are kept in strict zones — they never blend, they never share a line. Display speaks once at the top. Mono speaks in tick-marks and signatures. Serif speaks in the prose. This three-voice discipline is the typographic spine of the calm-serene tone: no voice ever interrupts another. **Palette — burgundy-cream at 2% (claimed and committed). Five flat fills, no gradients, no transparency except in the watercolor washes:** - `#722B3A` — **Studio Burgundy.** The primary ink. Used for hairline strokes, the daybook nameplate fill, axis labels, axis lines, Bagel Fat One wordmark on cream-on-burgundy regions. This is the burgundy of mid-century printer's ink, slightly browner than wine, slightly redder than oxblood — a working-class burgundy, not a luxury burgundy. - `#F4EAD5` — **Cold-Pressed Cream.** The page substrate. Used for the entire background, all gutters, all "negative" fills inside plates. This cream has a faint warm bias (yellow chroma 6%) that mimics 90gsm cold-pressed watercolor paper rather than the colder white of 80gsm office paper. - `#D9B5A4` — **Bisque.** The mid-tone. Used for secondary chart fills, alluvial bands, watercolor wash bases, and the alternate row in any banded plate. Bisque sits between burgundy and cream on the warm spectrum and acts as the third flat ink in the print. - `#3A2530` — **Plate Shadow Ink.** Reserved for body text in the studio note, plate captions, and the deep notches in the alluvial diagram. Almost-black with a burgundy bias — never #000, never #1A1A1A. The typography blacks always carry warmth in this palette. - `#B89968` — **Drafting Brass.** The single accent. Used exclusively for: the brass pin atop each plate, the underline-draw on the studio note's two hyperlinks, the small star marking the signed-and-finished plates. Drafting brass is dusty, slightly green-shifted gold — never bright, never metallic. Maximum 2.5% surface coverage on the page. The five fills sit on the page in **strict opaque layers** with one exception: the watercolor washes. Watercolor wash regions render in *bisque at 28% alpha* over cream, with a *burgundy at 16% alpha* secondary blot offset by 9px to create the watercolor-bleed double-image. These wash regions are the only place transparency appears anywhere in the visual system. **Five fills, one wash protocol — the entire palette ledger.** ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No icon font. Every visual artifact on graphers.net is either (a) a flat-ink SVG rendered in the studio palette, or (b) a watercolor wash composited beneath the flat ink.** Imagery sits on a binary: ink layer (top, opaque, hairline-edged) and pigment layer (bottom, translucent, soft-edged). The two layers never blend — they sit in deliberate registration error, exactly 9px offset. **The Plate Vocabulary — nine flat-ink chart species, hand-built as inline SVG.** Each is a complete, finished graph, not a placeholder: - **Plate I — *The Burgundy Line*.** A single monotonic curve on cream, drawn at 2px stroke, with 11 tick marks on the x-axis labeled in JetBrains Mono. The curve is *signed* in the bottom-right with a tiny burgundy fleur-de-tick. - **Plate II — *The Cream Stack*.** A four-band stacked bar in cream-bisque-burgundy-shadow, twelve columns wide, axis labels at 9.5px. - **Plate III — *The Duotone Scatter*.** Two clouds of dots: one bisque, one burgundy, each cloud forming a distinct constellation. No legend; the constellations are self-evident. - **Plate IV — *The Polar Sigh*.** A radial plot with eight spokes labeled NNE through NW, drawn at 60% scale, the entire plate rotated 7.5° counter-clockwise to suggest the dial has been bumped and never re-leveled. - **Plate V — *The Parallel Coordinates*.** Six vertical axes, eleven faint burgundy threads connecting them, drawn at 0.75px stroke for the threads and 1.5px for the axes. - **Plate VI — *The Sparkline Field*.** A 3×3 grid of nine miniature sparklines, each labeled with a single mono digit (I through IX in roman numerals). - **Plate VII — *The Ink-Only Candlestick*.** Twenty candles, no green/red — instead, hollow-vs-filled distinguishes up from down, the convention of pre-color financial newspapers. - **Plate VIII — *The Alluvial Tide*.** Four stages of ribbons flowing left to right, the ribbons rendered as flat bisque bands with 1px burgundy edge, weights varying from 4px to 36px. - **Plate IX — *The Empty Plate*.** A blank cream rectangle, hairline burgundy frame, single line of mono text dead-center: `awaiting subject`. This plate is never populated; it is the atelier's deliberate vacancy. **The Watercolor Wash Library.** Behind selected plates and in two register-spanning regions, the page hosts watercolor washes — soft, translucent, slightly off-register pigment fields that bleed under the flat ink. These washes are imagery, not background — they are *paintings*, made for this page, of subjects relevant to graphering: - **Wash I — *Logarithmic Spiral.*** A single golden-ratio spiral painted in bisque-with-burgundy-bloom, behind the studio note. - **Wash II — *Bell Curve Bloom.*** A normal distribution rendered as a watercolor mound with a soft burgundy bleed at the tails, behind Plate VI. - **Wash III — *Tide Marks.*** Five horizontal blot-bands of varying intensity, behind the drying rack, suggesting timeline / receding intervals. - **Wash IV — *Dividers' Trace.*** A faint compass-arc, behind Plate IV, in pure bisque at 22% alpha. - **Wash V — *Cream Edge.*** A vignette of cream-paper edge texture along the entire page perimeter, 24px deep, mimicking the deckle of cold-pressed paper. The watercolor washes are **inline SVG with `` chains** — `feTurbulence` (baseFrequency 0.014, numOctaves 4) → `feDisplacementMap` (scale 7) → `feGaussianBlur` (stdDeviation 1.4) — applied to flat shapes in the palette. No raster PNG, no texture image. The watercolor character is generated entirely in the SVG filter stack at render time. **The page ships zero raster assets.** **The tech motif (14% — present, but reframed).** Tech motifs in graphers.net are **not the corpus's usual circuits / HUD / sci-fi-glow tech**. The tech here is **the tech of measurement** — drafting tools, axis dividers, slide rules, T-squares, French curves. These appear as flat-ink line drawings (1.5px burgundy on cream) scattered between the plates: a pair of dividers in the studio note, a French curve in the drying rack, a T-square along the bottom edge of the daybook nameplate, a half-buried slide rule beneath Wash III. The tech motif is the **drafting room**, not the data center. **Decorative elements (sparingly):** a single burgundy fleur-de-tick (a stylized tick-mark with a fleur-de-lis flourish) appears as the page's only ornament — used as the signature on Plate I, as the bullet in the studio note's two list items, and as the favicon. It is the page's wax seal. ## Prompts for Implementation Build graphers.net as **one HTML document, one CSS file, one ES module, no framework, no build step, no raster assets.** The site is a single immersive scroll through the atelier — start to finish about 90 seconds at a contemplative pace — with the elastic-settle micro-interaction on plate hover as the only animated event-driven motion. Everything else breathes slowly on a global timing function. **File inventory:** - `index.html` — semantic structure, four `
` containers, all SVG inlined, no external image references. - `atelier.css` — single stylesheet, custom properties at the root, the elastic spring keyframes, the watercolor filter definitions referenced from inline SVG. - `atelier.js` — a single ES module, ~110 lines, handling: (a) the elastic-settle on plate hover, (b) the slow 0.18 Hz breath-pulse on the watercolor washes, (c) the horizontal scroll deceleration on the drying rack. No framework, no library, no `requestAnimationFrame` chains for layout. **The elastic-settle protocol (the one signature interaction).** Plates at 18% in the patterns chart — claimed and load-bearing. On `pointerenter` of any `.plate`, the plate translates +6px on the y-axis, then springs back with damping. The spring uses a CSS-only animation: `transform` driven by a custom keyframe with five waypoints (0%, 22%, 48%, 78%, 100%), with the y-translate values [0, +6px, -2px, +1px, 0] and corresponding rotates [0deg, 0.4deg, -0.15deg, 0.05deg, 0deg] — the rotate component creates the *pin-swing* effect, as though the plate were rotating slightly around its brass pin. Duration 720ms, `cubic-bezier(0.18, 1.4, 0.42, 0.92)`. The pin itself does not animate; only the plate beneath it moves. The visual metaphor: a plate hung from one pin, nudged by a draft from the open studio window. **The breath-pulse on the watercolor washes.** Every wash region pulses its alpha between 24% and 32% on a 5.6-second sine cycle — the breath of a librarian, slow and deliberate. All five washes share a single global animation timeline (no per-element offset) so the entire page breathes in unison. This is the *only* always-on motion on the site. There is no parallax, no scroll-triggered reveal, no cursor-follow, no magnetic hover, no path-draw — every other corpus-default motion pattern is deliberately absent. **Storytelling structure (one continuous scroll, four registers, ~90 seconds at reading pace):** 1. **The Daybook lands first.** Sticky at the top, burgundy nameplate, the wordmark in Bagel Fat One cream-on-burgundy at 64px, the date and volume number in mono burgundy, the sentence-of-the-day in Fraunces. The visitor reads the daybook sentence and understands immediately: this is an atelier, a periodical, a place of practice. No CTA. No menu. The reader is invited only to *scroll*. 2. **The Plate Wall fills the viewport.** Nine plates arrayed on a 12 × 3 cell grid, each a finished graph in the studio palette. The reader's eye crosses the wall left-to-right, top-to-bottom. Hovering any plate triggers the pin-swing settle. Each plate has a 14px caption beneath in Fraunces small-text (e.g., *"Plate II · The Cream Stack · pigment + ink on cream, 2025"*), and a tiny mono date in the bottom-right corner. The plate wall is the *body of work*. 3. **The Studio Note breathes.** A three-paragraph essay on the craft of graphering — written in the senior grapher's voice — flanked by Wash I (logarithmic spiral) on the left and the dividers diagram on the right. The note is the page's *philosophy* — a meditation on accuracy, on the dignity of axis labels, on why the empty plate exists. The body type is Fraunces 16/26 in Plate Shadow Ink. Two underlined links in drafting brass. No more than 220 words. 4. **The Drying Rack closes the scroll.** Seven small plates in horizontal arrangement, each at a different stage of completion — wash-only, ink-framework-only, partially-finished, signed-and-dated. The rack scrolls horizontally on wheel/touch with 1:0.4 deceleration. The final plate in the rack is signed *"— Plate XXIV, finished 05·09·2026"* in burgundy mono. After the rack, the page ends with a 96px-tall band of cream and a single mono line dead-center: `the studio is open · graphers · vol. ix · no. ii`. There is no footer. There is no contact link. There is no email signup. The scroll terminates. **The copy voice.** Every line of prose on the page is set in the voice of a sixty-year-old senior grapher who is tired, contented, and unhurried. Never use "you". Rarely use "we". Prefer impersonal third person and the passive: *"the polar plot has been re-leveled."* / *"the apprentices are drawing logarithmic axes today."* / *"on Tuesday the bisque ran short and Plate IX was left vacant."* This voice is the calm-serene tone made syntactic — it never sells, never explains, never asks. It only describes the atelier's day. **AVOID, explicitly and structurally:** - No CTA buttons. No "Try It Free." No "Get Started." - No pricing block, no plan tiers, no toggle-monthly-yearly. - No stat-grid ("100M+ graphs created!"). The corpus is full of these; this page rejects them. - No testimonials. - No nav menu, no hamburger, no sticky social bar, no email-signup modal. - No live data, no auto-incrementing numbers, no real-time anything. - No green/red sentiment color, no "+12.4%" badges, no trend arrows. - No parallax, no scroll-triggered reveal, no cursor-follow, no magnetic hover (the elastic-settle is the only event-driven motion). - No raster images. Zero PNG, zero JPG, zero WebP. **The technical detail that holds it all together.** The flat-design discipline is enforced by a CSS custom property `--ink: solid;` applied to every fill — there is no `linear-gradient`, no `radial-gradient`, no `box-shadow`, no `filter: drop-shadow` anywhere in the stylesheet, with the single exception of the watercolor SVG filter chain. Any future addition that breaks this rule breaks the design. Flat means flat. ## Uniqueness Notes This design's differentiators, each chosen against the patterns surfaced in the frequency analysis: 1. **Flat-design at 1% — claimed.** Flat-design is the second-rarest aesthetic in the entire corpus (only mcbling, evolved-minimal, and japanese-minimal sit at or below it). graphers.net commits to flat-design as the structural visual contract: opaque fills, hairline strokes, no gradients, no shadows, no skeumorphic depth. This alone separates it from the 67% of the corpus running glassmorphism and the 96% running hand-drawn. 2. **Burgundy-cream at 2% — claimed.** Only ~4 sites in the corpus use this palette, and the corpus default of "warm + gradient" (97% / 97%) is what most calm-serene sites end up wearing. graphers.net rejects the gradient and rejects the photographic warm-glow, committing instead to a strict five-fill flat palette: studio burgundy, cold-pressed cream, bisque, plate-shadow ink, drafting brass. Every fill is opaque, every edge is hairline. 3. **Watercolor as imagery, not as aesthetic.** Watercolor sits at 12% in the aesthetic frequency analysis but at 0% in the imagery frequency chart — meaning sites that *call themselves* watercolor rarely deliver actual watercolor as visual artifact. graphers.net inverts that ratio: the aesthetic is flat-design, but **watercolor is the imagery substrate**. The two coexist as deliberate registration error — flat ink on top, wet pigment beneath, offset by 9px. This is, as far as the corpus shows, a unique combination. 4. **Calm-serene tone delivered through copy voice, not just color.** Calm-serene is at 4% in the corpus but is most often expressed through palette alone (cool grays, soft blues). graphers.net delivers the tone primarily through **the senior-grapher prose voice** — passive, impersonal, unhurried, never selling — backed by a 0.18 Hz breath-pulse on the watercolor washes as the only ambient motion. The tone is structural, not decorative. 5. **Dashboard reframed as pegboard.** Dashboard sits at 32% in the corpus, almost always rendered as a live KPI control panel. graphers.net reframes the dashboard as **a pegboard of finished plates** — completed graphs hung on a cream wall like prints in a print studio. Nothing updates. Nothing refreshes. Every plate is signed and dated. The dashboard is a body of finished work, not a real-time monitor. 6. **Retro-display via Bagel Fat One specifically.** Retro-display sits at 5% and the most common faces used at that tier are Bebas Neue, Bungee, and Monoton. graphers.net picks **Bagel Fat One** — a chubby, ink-spread mid-century revival face — to anchor the wordmark, deliberately avoiding the corpus's three default retro-display picks. 7. **Elastic as pin-swing, not as bounce-on-arrival.** Elastic at 18% is most commonly expressed as a card-bounce-on-load. graphers.net binds elastic to a single signature gesture: **the plate-on-pin settle** — a 720ms damped spring that combines a y-translate with a small rotate-around-pin, producing a visual metaphor of a print stirred by a draft from the studio window. The motion is event-driven (hover-only), never on load, never on scroll. 8. **Tech motif as drafting tools, not circuits.** The tech motif at 14% is almost universally rendered as circuit traces, HUD overlays, sci-fi glows, abstract data-tech. graphers.net reframes tech as **the tech of measurement** — French curves, dividers, T-squares, slide rules — drawn as flat-ink line illustrations. The drafting room replaces the data center. 9. **Zero raster, zero photography.** Photography sits at 99% in the imagery frequency analysis. graphers.net ships **zero raster assets** — every visual is either inline SVG flat-ink or inline SVG watercolor-via-filter-chain. The watercolor character is generated at render time through `feTurbulence` + `feDisplacementMap` + `feGaussianBlur`, not from a paint texture PNG. 10. **Anti-default rejection list, structurally enforced.** The page deliberately omits: parallax (95% in the corpus), cursor-follow (85%), spring-on-arrival (84%), stagger (79%), magnetic (78%), CTA-heavy layouts, pricing blocks, stat-grids, testimonials, nav menu, sticky social bar, email signup, sentiment color, real-time data, raster images. The omission list is itself a design statement — calm-serene is achieved as much by *what is absent* as by what is present. **Chosen seed (from assignment):** *aesthetic: flat-design, layout: dashboard, typography: retro-display, palette: burgundy-cream, patterns: elastic, imagery: watercolor, motifs: tech, tone: calm-serene*. Every dimension is committed to as a load-bearing structural decision, not as a surface tag — the flat-design discipline is enforced in CSS by the absence of gradients/shadows; the dashboard is reframed as a pegboard of finished plates; the burgundy-cream palette is locked to five fills; the elastic pattern is bound to one signature gesture; watercolor imagery is generated via SVG filters; tech motifs are drafting tools; retro-display speaks once at the wordmark; calm-serene is encoded in the copy's passive senior-grapher voice and the 0.18 Hz breath-pulse. **Avoided patterns from frequency analysis:** glassmorphism (67%, refused), hand-drawn aesthetic (96%, refused — flat-design replaces it), photography imagery (99%, refused — SVG-only), warm + gradient palette (97% / 97%, refused — five flat fills), parallax (95%, refused), cursor-follow (85%, refused), spring-on-arrival (84%, refused), stagger (79%, refused), magnetic hover (78%, refused), card-grid as live tile dashboard (refused — pegboard reframing instead), full-bleed hero with photographic background (refused — cream substrate only).