# Design Language for graphers.dev ## Aesthetics and Tone graphers.dev is **a quiet wheat-paste archive on a sepia-lit alley wall, photographed at golden hour and then traced over in vector by a topologist who only believes in nodes and edges**. The domain says *graphers* — people who think in graphs — and the site refuses both prevailing readings of that word. It is **not** a mathematician's blackboard (no LaTeX, no MathJax, no axiomatic columns) and it is **not** a corporate "graph database" landing page (no node.js logos, no D3 force-graphs spinning under a hero CTA). It is a **street-style field archive** of hand-pasted graph posters: the kind of layered, weather-worn poster wall you walk past in a back-alley of an old printing district, where every poster is a graph — adjacency lists rendered as concert flyers, BFS traversals as missing-cat notices, planarity proofs as gig posters from a band that broke up in 1978. Each poster has been pasted on top of older posters, and the older posters bleed through at the corners, so the **layered depth** of the wall is the real subject. The mood is **calm-serene**, deliberately. Street-style aesthetics in the registry skew loud — graffiti, neon, paint-splatter, energetic shouting type. graphers.dev refuses that. Its street is the morning after, before the city is awake: the posters are already pasted, the paint is already dry, the wheatpaste smell is gone, the alley is empty, the light is low and warm, and the photographer is alone with the wall and a wide-angle lens. Inspiration runs from **Shepard Fairey's OBEY archives photographed at 6am**, **Wolfgang Tillmans' wall studies**, **the Bibliothèque nationale de France's Album de la rue collection of Paris poster fragments c. 1900**, and the **typographic gravity of L'Atelier Populaire's 1968 silkscreen archive when seen now, fifty years later, fading on a museum wall**. Tone of voice in copy: low, observational, reverent of typography, never urgent. Sentences end before they need to. The page does not sell. The page is the wall, and the wall has been here longer than the visitor. The dominant emotion is **the patience of paper outlasting noise**. Even the loudest poster on the wall has been pasted there long enough that it has begun to belong to the wall. Every interaction confirms that calm: hovers are slow, scrolls are gentle, nothing snaps, nothing bounces, nothing pulses for attention. A visitor who never moves the cursor and never scrolls still sees the entire archive, because **the page is a photograph first and an interface second**. ## Layout Motifs and Structure The page is constructed as **a single sepia photograph of a 4200px-tall poster wall, scrolled vertically**, with eight foreground "plates" (the freshly-pasted posters) layered over five middle-ground strata (older, half-torn posters) over two background strata (the underlying brick and the original wheat-paste residue). Layered depth — the seed motif — is implemented as **literal z-axis stacking at 12 distinct depths**, not as parallax-fakery. CSS `transform-style: preserve-3d` on the wall container, eight `translate3d(_, _, Zpx)` depths from `Z = -180px` (deepest brick) to `Z = +24px` (most recently pasted poster). The visitor scrolls past the wall; **the wall does not scroll past the visitor**. There is no parallax-y "the back layer moves slower" — instead, the foreground posters cast soft drop-shadows onto the layers behind them, and at certain scroll positions the foreground poster's shadow sweeps across an older poster, briefly revealing typography that was hidden in the seam. **Master grid.** A 14-column grid, asymmetric, with column widths drawn from the **Fibonacci-derived ratio 1:1:2:3:5:3:2:1:1:2:3:5:3:2** (normalized to viewport width). The wider columns are where the foreground posters live; the narrow columns are alley gaps where the wall behind shows through. Gutters are deliberately uneven — `clamp(8px, 1.6vw, 24px)` — so the page never feels like a CSS grid even though it is one. Vertical rhythm is set by the **paper height of an A2 poster (594mm)** scaled down to a CSS unit `--poster-h: 56vh`, and every plate is a fractional multiple: `0.5`, `0.75`, `1.0`, `1.25`, `1.6`, `2.0`. No two adjacent plates share the same multiple — the wall is **not** rhythmic, it is **accreted**. **Vertical structure.** Twelve plates from top to bottom, none of them named "hero" or "footer": 1. **The Doorway Plate** — full viewport-height, no copy, just the photographed alley with a faint title `graphers.dev` rendered as a wheat-paste poster pasted *in the photograph* (rasterized to look like ink on paper, not crisp web type). The visitor enters the alley. 2. **The Index Poster** — a single A2-format poster pasted at slight skew (-2.4°) listing eight section names hand-set in display type, with one already half-torn corner showing the brick beneath. 3. **The Adjacency Wall** — six small posters in a loose 3-column wheatpaste cluster, each a different way of drawing the same five-vertex graph (matrix, list, edge-set, planar embedding, BFS-tree, DFS-tree). The cluster is the same data, six readings. No labels. 4. **The Long Strip** — a single 1.6× tall poster, set vertically along a Fibonacci-narrow column, that is **a single SVG path being drawn** as the visitor scrolls — the path is a graph traversal, the line is the path-draw motif, and reaching the bottom of the strip reveals the destination vertex. 5. **The Torn Poster Pair** — two posters that overlap; the upper poster has a 38% torn corner, and behind the tear is a *different* graph poster from a year earlier, with copy referencing an earlier version of graph theory pedagogy. 6. **The Frosted Vitrine** — three glassmorphic cards floating just in front of the wall, slightly tilted, holding the most-recent essays. The cards are translucent and **frosted**, so the wall is visible through them — sepia bleeds through the glass and tints the card titles. 7. **The Edge-List Catalogue** — a long vertical list, set in display type, of graph-related primitives, set as if pasted as a typographic-only poster: no images, just a column of words. 8. **The Path-Draw Plate** — a full-bleed plate where one continuous SVG line is drawn from the top-left to the bottom-right of the viewport, branching seven times, terminating at seven labelled leaves. This is the page's animated centerpiece, drawn over 14 seconds on first reveal and never repeated. 9. **The Marginalia Cluster** — fifteen tiny stickers (each a 64–96px square poster), pasted in the alley gap between two plates, each containing a one-line aphorism about graphs. The eye finds them only on close approach. 10. **The Old Notice Board** — a plate styled as a *much* older poster from earlier in the wall's history, partly obscured by the more recent posters above it; type in this plate is **smaller** and more faded, copy is in the past tense, and it documents the design's own previous iteration as a curatorial gesture. 11. **The Paste-Up Studio** — a transparent glassmorphic card showing a still-life of the tools used to make the wall (a brush, a bucket of wheatpaste, a roll of paper, a scalpel) in faint sepia line-illustration, with a single quiet sentence about how the page was made. 12. **The Sign-Off Stamp** — a small circular wax-seal-style stamp pasted at the bottom-right corner of the wall, with the date and a single graph (a triangle, the smallest non-trivial graph) printed inside it. No "back to top" link. No newsletter signup. There is **no nav bar**. There is **no fixed header**. There is **no sidebar**. There is **no footer**. The page is the wall. The visitor's only navigation tool is the scrollbar — and the scrollbar is hidden, replaced by a thin sepia rule (1px, `#9c7c52`, 0.4 alpha) drawn down the right margin that thickens slightly as the cursor approaches. There is **no CTA**. There is **no pricing**. There is **no statistics grid**. The only thing the page asks the visitor to do is **stay**. ## Typography and Palette **Type stack — Google Fonts only, three families, strict assignment.** - **Big Shoulders Display** (variable, weights 100–900). The **display-bold** voice — used for poster headlines and the few oversized typographic plates. Set heavy (weight 800–900), narrow tracking (-0.04em), occasionally letter-spaced wider (+0.18em) when a plate wants to feel like a 1968 silkscreen. Optical size at headline scale: clamp(64px, 9.4vw, 168px). On the wall the type is **rendered as if printed on rough wheat-paste paper** — a per-letter SVG filter (feTurbulence at baseFrequency 0.62 + feDisplacementMap with scale 1.4) introduces a subtle paper-fiber displacement so the edges never look web-crisp. The displacement is seeded per-letter from the letter's Unicode code point, so the same letter always displaces the same way; the wall is not a randomizer. - **Cormorant Garamond** (italic preferred, 18–22pt). Body prose. Used sparingly — most plates have no body copy at all. When present, it is set 22pt / 32pt leading, italic, color `#3a2814`. Cormorant is selected for its tall ascenders and slightly archaic ductus that reads as **the typewriter on the printer's desk**, not as a modern serif. Drop-cap on the first paragraph of plates 3, 6, and 11 only — set in Big Shoulders, 96pt, color `#7a4a1c`. - **JetBrains Mono** (regular, 13pt). The technical voice — used **only** in three places: the captions under graph-poster plates that name a graph-theoretic primitive, the timestamp on the sign-off stamp, and the URL bar of the Frosted Vitrine cards. Tracking +0.02em. Color `#5a4a36`. Never used for body copy. Never used for headlines. The mono voice is the curator's pencil, not the page's voice. **Three-family rule:** no fourth family is added. No Inter. No system stack. No emoji. **Palette — sepia-nostalgic, eight stops.** The palette is an actual sepia photograph reduced to swatches, plus two cool counter-notes that exist solely to make the warm tones legible at headline scale. Hex values are exact and used as CSS custom properties (`--paper-1` through `--paper-8`). - `#f3e3c4` — **wheat-paste paper**, the dominant background tone, the colour of a poster's blank field; used as page background and as the lightest plate fill. - `#e6cf9c` — **paper aged-edge**, the slightly darker tone where the poster has been touched by hands and weather; used at plate borders and torn-edge gradients. - `#c79b58` — **sepia mid-tone**, the colour of a sun-faded ink that was once black; used for body type at small scale and for path-draw SVGs. - `#9c7c52` — **alley shadow**, the colour of the brick behind the wall when warm-lit at golden hour; used as a UI accent and as the hidden scrollbar rule. - `#7a4a1c` — **fresh ink**, the colour of the poster ink that has not yet faded; used for display headlines and for the pasted poster-titles in plate 1. - `#3a2814` — **deep ink**, the deepest sepia, used only for italic body copy and the torn-edge inner-shadow on torn-corner posters. - `#5a4a36` — **pencil**, a desaturated brown used for mono captions and JetBrains Mono technical labels. - `#1c1f2a` — **midnight ink**, the **single cool counter-note**, used only inside the path-draw SVG strokes (so the graph-line reads against the warm wall) and for the wax-seal sign-off stamp; restricted to ≤ 4% of the visible page area at any scroll depth. The white `#ffffff` is **never used**. Pure black `#000000` is **never used**. The page never reaches either extreme of the value scale; the contrast range is held inside `#1c1f2a` to `#f3e3c4`, which is ≈ 4.7:1 at headline scale and is *deliberately not* the maximum legible contrast — the visitor's eye is meant to **lean in** to read. This is a calm page; calm pages do not shout. A **persistent grain overlay** (a 1024×1024 noise PNG, 0.06 alpha, screen-blend mode, `mix-blend-mode: overlay`) sits at the topmost layer of the entire page, including over the glassmorphic cards. The grain is the photograph's emulsion; without it the design is graphics, not a photograph. ## Imagery and Motifs **The wall's images are all hand-made.** No stock photography. No 3D renders. No Lottie. No vector clip-art. The image vocabulary is exactly four kinds: 1. **Path-draw SVG graphs.** The site's primary image type. Twelve hand-drawn graphs, each authored as a single SVG with `` elements at stroke-width 2.4px, stroke `#1c1f2a` over a sepia plate. Each graph is **drawn**, not displayed: on first scroll into view, the path is animated using `stroke-dasharray` from full-length to 0 over 6–14 seconds, depending on the graph's edge count. Vertices appear as small `` nodes (r=6, fill `#7a4a1c`, stroke `#1c1f2a` 1.4px) that fade in **after** their incoming edge has finished drawing — so the graph feels traversed, not displayed. Each path is hand-bezier'd; no automated layout (no force-directed, no dagre). The bezier handles are visible as faint pencil marks at 0.2 alpha, in `#5a4a36`, suggesting the curves were drawn by hand at the studio. Twelve graphs total: a triangle, a Petersen graph, a binary tree of depth 4, a planar embedding of K₄, an adjacency-pentagon, a BFS traversal of a 9-node maze, a DFS spiral, a bipartite K₃,₃, a forest of three rooted trees, a single Hamiltonian cycle on a hexagon, an isomorphism between two pentagonal drawings, and a directed acyclic graph of seven nodes representing the design's own information architecture. 2. **Glassmorphic cards as vitrines.** A vitrine is a glass-fronted display case. Eight cards across the page; each is a **`backdrop-filter: blur(18px) saturate(1.05)` plate** with a 1.4px sepia-tinted border (`rgba(154,124,82,0.42)`), a soft-warm inner glow (`box-shadow inset 0 0 36px rgba(243,227,196,0.22)`), and a **double-rim** outer shadow (a tight 2px sepia rim + a wide 60px golden-hour bloom) that gives the card a feeling of *paper under museum glass*. Critically, the cards are **glassmorphic over a photographic backdrop** — the wall's textures show through, and the visitor reads the wall through the glass. Tilt: each card sits at a slight, fixed -1.4° to +2.6° rotation (no animation; the tilt is the personality, not the motion). The cards never grow, never lift on hover, never sparkle. They are **museum cases, not buttons**. 3. **Wheat-paste poster compositions.** Each plate that is not a graph or a vitrine is a **pasted poster** — a `
` element styled to look like A2 paper pasted on a brick wall. Implementation: a base layer (cream paper texture, 0.92 alpha, `#f3e3c4`), a typography layer (Big Shoulders headlines + occasional Cormorant body), an **edge-tear mask** (an SVG `` with a hand-drawn deckle edge — eight different masks, applied at random per-poster from a deterministic seed), and a corner-curl shadow (a faint `#9c7c52` drop-shadow at the bottom-right corner suggesting the poster lifts there). Posters are slightly skewed (-2.8° to +1.6°) and slightly off-grid; no two posters are perfectly horizontal. 4. **Abstract-tech motifs in the margins.** The motif vocabulary on the wall is **graphs, edges, vertices, traversals, and paths** — never circuit boards, never CPU dies, never "AI-glow." Decorative marks scattered in the alley gaps include: tiny vertex circles (r=3, fill `#7a4a1c`), tiny edge segments (1.4px stroke `#9c7c52`), a one-line adjacency-list snippet rendered in JetBrains Mono at 11pt, a hand-drawn ε (epsilon) glyph that appears in three places as the artist's initial-mark, and a single `(V, E)` notation pasted as a tiny 32×24 sticker in the upper-right of the doorway plate. **Abstract-tech is held to graph-theoretic primitives only**; the page never indulges in generic "tech" iconography. **No human figures, no faces, no logos, no flags, no product mockups, no laptop frames, no UI screenshots, no testimonial photos, no team photos, no map.** The wall has none of these because the alley has none of these. The single living thing referenced anywhere on the page is **a wheatpaste brush** in plate 11, drawn in line-illustration only. ## Prompts for Implementation Build graphers.dev as **one HTML file, one CSS file, two ES modules, twelve hand-authored SVGs (one per graph), three SVG deckle-edge clipPaths, one 1024×1024 grain PNG, and one cream paper-fiber PNG**. No framework, no router, no SPA shell, no build step required. No GSAP, no Three, no Lottie, no canvas, no WebGL. The animation surface is **CSS transitions + `stroke-dasharray` + a single `IntersectionObserver` tick** — that is sufficient. **Storytelling is the organizing principle.** The page is a *walk past a wall*. The visitor enters the alley at plate 1, walks the length of the wall through plates 2–11, and signs off at plate 12. There is no hero, there is no CTA, there is no above-the-fold conversion, there is no pricing block, there is no stats grid, there is no logo cloud, there is no team section, there is no testimonial carousel, there is no newsletter capture, there is no cookie banner styled as a poster (cookie banner, if required by jurisdiction, sits as a small wheatpaste sticker in the bottom-left, deferred and unanimated). The page is **fully visible without ever clicking anything**. **Animation philosophy: every motion is the slow swing of a poster corner in still air.** Easing is a single shared curve `cubic-bezier(0.22, 0.61, 0.36, 1.0)` and durations are slow-bias: 600ms minimum, 14s for the longest path-draw, 2400ms for plate fade-ins. There are no spring-physics simulations, no magnetic snaps, no cursor-followers — these patterns are heavily overused in the registry (parallax 95%, cursor-follow 85%, spring 84%, magnetic 78%) and graphers.dev refuses all four. Instead the animation budget is spent on **`path-draw-svg`** (the seed pattern, used at 28% in the registry — meaningfully under-deployed for its expressive power) applied to the twelve graphs, plus **`fade-reveal`** at 10% (slow plate appearances) and **`underline-draw`** at 17% (a single under-draw on a single phrase per plate). No bounce, no shake, no pulse, no skeleton, no zoom-focus. **No cursor reactivity at all** — the cursor is the visitor's quiet observer, not a magnet for the page. **Path-draw implementation detail.** Each of the twelve graph SVGs has its `` initialized with `stroke-dasharray: ; stroke-dashoffset: ;`. An IntersectionObserver fires once per graph (`threshold: 0.4`), sets `stroke-dashoffset: 0` with a `transition: stroke-dashoffset Xs linear`, and the path draws. The vertices `` nodes have their `opacity: 0` initially, with a per-circle `transition-delay` calculated from `(edge_index_into_circle / total_edges) * draw_duration` so they appear exactly at the moment the line reaches them. The bezier-handle pencil marks animate with the same dasharray technique but at 0.2 alpha and 0.4× the duration. The animation is one-shot; once drawn, it stays drawn. **Layered-depth implementation.** The wall is one `
` with `transform-style: preserve-3d` and `perspective: 1800px` on the parent. Each plate is `
`. Twelve `--z` values from -180px to +24px, eight `--skew` values from -2.8° to +2.6°. The viewport scrolls along the `
` normally; the perspective transform causes deeper plates to appear slightly smaller in the projection, which is the **physical truth** of layered depth, not a parallax fake. On `prefers-reduced-motion: reduce`, the perspective collapses to 0 (`perspective: none`) and the plates flatten to a 2D wall — depth becomes a stacking-order without parallax, which still reads as layered. **Glassmorphic-card implementation.** Eight `