# Design Language for plotgrapher.com

## Aesthetics and Tone

plotgrapher.com is a **whimsical data-cartography studio** — a place where mathematical plots become hand-drawn treasure maps and scatter graphs bloom into ink-and-neon constellations. The aesthetic is dark-mode with a handmade warmth underneath: deep obsidian backgrounds draped in typewriter-tick grid lines, illuminated by muted ember-and-lavender plot traces that look less like D3 output and more like a night-cartographer's field journal left open on a desk.

The tone is **whimsical-creative**: irreverent about data visualization conventions, fascinated by the beauty of mathematical curves, and slightly theatrical — as if a Victorian natural philosopher had access to a synthesizer. Think: Isotype posters crossed with a 1970s experimental film title card, executed in charcoal and glow. Nothing is clinical. Every coordinate is a character.

The mood reference: a mathematician's notebook left on a café table at 2am, filled with annotated curves, margin jokes, hand-stamped axes, and coffee-ring data points. The screen itself is the notebook page.

## Layout Motifs and Structure

The page is built on **diagonal-sections** — not rectangles stacked horizontally, but parallelogram-shaped bands that cut across the viewport at a consistent 5–8° tilt, creating a feeling of perpetual lean, of data flowing sideways across a graph. Each section is a distinct "plot layer" in the metaphor: axes, data, annotation, legend.

**Core spatial system:**
- A ghost grid of faint ruled lines (0.5px, #2a2a3a, 15° tilt) covers the entire viewport like graph paper, always visible behind all content — the "plotter sheet."
- Content lives inside **tilted bands**: each `<section>` uses `clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0 100%)` (or similar) to cut sharp diagonal edges top and bottom, making the stacked sections interlock like puzzle pieces.
- The left edge carries a **vertical axis ruler** — a 36px fixed strip showing tick marks at regular intervals as the user scrolls, the labels updating to reflect scroll depth (0 → 100, echoing a Y-axis).
- The bottom of each section has a **sharp-angle data callout**: a parallelogram-cut text badge jutting into the next section from below, containing a cryptic annotation like "→ local maxima" or "∂ inflection at 0.77."
- Typography sits at intentional off-axis angles: major headings are rotated between -3° and +3° — subtly off-level, like a hand-drawn label.

**Section sequence (narrative flow):**
1. **Origin (0,0)** — Full-bleed hero: a single large animated curve tracing itself onto the plotter sheet. Title types in.
2. **The Scatter** — Feature showcase as plotted data points, each "point" a small interactive card that expands on hover.
3. **The Curve Fitting** — Long-form description section, text in editorial columns with inline SVG curve ornaments in the margins.
4. **The Legend** — Footer/credits section, styled as an actual plot legend box with colored line samples.

## Typography and Palette

**Fonts (Google Fonts only):**

- **Display / Hero headlines:** "Playfair Display" — a high-contrast editorial serif used at very large fluid sizes (clamp(3.5rem, 8vw, 9rem)), set in italic for the main title. Its sharp serifs echo the sharp angles in the layout. Used for section titles at 600 weight.
- **Body / Annotation text:** "Space Mono" — a monospace font that reads as typewriter/terminal output. Used for all body paragraphs, data annotations, axis labels, and callout badges at 0.9rem–1rem. The fixed-width rhythm reinforces the "graph paper" grid metaphor.
- **Accent / Secondary labels:** "Caveat" — a casual handwriting-style variable font used only for marginal annotations, whimsical asides, and the "field notes" passages scattered between sections. Weight 400–600, slight color tint.

**Palette — muted dark:**

- `--ink-void`: `#0d0d14` — near-black with a faint blue cast; the plotter sheet background
- `--ink-grid`: `#1e1e2e` — slightly lighter, used for section backgrounds alternating with void
- `--grid-rule`: `#2a2a3a` — the ghost grid lines, barely visible
- `--ember-trace`: `#c9845a` — a muted terracotta-amber; primary plot trace color and heading accent
- `--lavender-trace`: `#9b87c2` — soft dusty lavender; secondary trace and link color
- `--chalk-white`: `#e8e4d9` — warm off-white for body text, slightly cream-tinted
- `--annotation-green`: `#7aad8c` — muted sage green for positive callouts and success states
- `--callout-yellow`: `#c9b85a` — muted gold-yellow for highlighted annotations and "maxima" badges

## Imagery and Motifs

**No photography. No stock imagery. No icon libraries.** All visuals are procedural, SVG-native, or CSS-drawn.

**Gradient-mesh backgrounds:**
Each section's background carries a subtle radial gradient mesh: two or three overlapping `radial-gradient` spots in muted ember/lavender, positioned off-center (e.g. 80% 20%), at 15–25% opacity. This creates depth and warmth without breaking the dark base. The gradient coordinates shift slightly per section, as if the light source is slowly panning.

**Plot trace motifs (the cardinal visual):**
The primary decorative element is the **SVG path curve** — sinusoidal, cubic Bézier, or Lissajous figures rendered as thin stroked paths (1.5–2px) in `--ember-trace` and `--lavender-trace`. These appear:
- As large hero background traces (animated via `stroke-dashoffset` on scroll)
- As section divider ornaments
- As inline flourishes between paragraphs in the editorial section
- As the actual data being "graphed" in the scatter section

**Sharp-angle accent motifs:**
Parallelogram-cut badges, chevron-tipped callout arrows, and razor-cut corner chips (`clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)`) throughout. These sharp geometric cuts reinforce the "plotter cutting tool" metaphor and recur consistently as the brand's geometric vocabulary.

**Typewriter tick marks:**
Along the Y-axis ruler strip and grid lines, small perpendicular tick marks (2–4px lines) appear at every grid intersection. These are CSS-generated via `::before`/`::after` pseudo-elements and create a sense of precise measurement across the plotter sheet.

**Scatter constellation:**
In the "Scatter" section, 40–60 small SVG circles (3–6px radius) are placed pseudo-randomly within a bounded plot area. They glow faintly (`box-shadow: 0 0 6px var(--ember-trace)`), and connecting lines between "related" points form a constellation pattern. On hover, a card expands from a clicked point using a CSS `transform: scale(1) translateY(-4px)` reveal.

## Prompts for Implementation

**Plotter-sheet grid layer:**
Implement a full-viewport `<div class="plotter-sheet">` fixed behind all content. It carries two `background-image` linear-gradient layers: one for horizontal rules (every 40px, `--grid-rule` at 1px), one for vertical rules (every 40px). Rotate the entire element `5deg` via `transform: rotate(5deg) scale(1.2)` to create the diagonal grid effect without visible edge artifacts.

**Hero section — curve self-drawing:**
On page load, render an SVG `<path>` representing a parametric curve (e.g. `d="M 0,300 C 150,50 350,550 500,300 S 800,50 1000,300"`). Set `stroke-dasharray` equal to the path's total length (computed via `path.getTotalLength()`). On load, animate `stroke-dashoffset` from full-length to 0 over 2.4 seconds with `cubic-bezier(0.4, 0, 0.2, 1)` easing. The title text types in character-by-character using a JS interval starting at 1.2s (mid-draw), so the curve and title finish simultaneously. Space Mono for the typed title.

**Diagonal section cuts:**
Each `<section>` element uses:
```css
clip-path: polygon(0 3.5%, 100% 0%, 100% 96.5%, 0 100%);
margin-top: -3.5vh;
position: relative;
z-index: auto;
```
Alternate sections use the mirror: `polygon(0 0%, 100% 3.5%, 100% 100%, 0 96.5%)`. This creates the interlocking diagonal-band layout. Negative margin collapses the gap so bands appear flush.

**Y-axis scroll ruler:**
A fixed `<aside class="y-axis-ruler">` on the left side, 36px wide, full viewport height. It contains tick marks generated as CSS background repeating-linear-gradient. A `<span class="y-label">` element is updated via `requestAnimationFrame` as the user scrolls: `label = Math.round((scrollY / maxScroll) * 100)`. The label reads "y = 47" etc., updating live. Font: Space Mono 11px, `--chalk-white` at 50% opacity.

**Typewriter text effect:**
All passages styled as "field notes" (using Caveat) receive a typewriter reveal: characters are individually wrapped in `<span>` elements with `animation-delay: Nms` (staggered 30ms each), fading in from opacity 0 with a 0ms duration (instant appear, not fade). An `IntersectionObserver` triggers the animation when the element enters the viewport.

**Scatter constellation section:**
Use an inline SVG element sized to the section width. Generate point positions using a seeded pseudo-random function (LCG with fixed seed) so positions are deterministic across page loads. Render points as `<circle>` elements. For constellation lines, pre-define 8–12 edges between "interesting" point pairs and render as `<line>` elements at 20% opacity in `--ember-trace`. On hover/click of a `<circle>`, expand a foreignObject card using CSS transition.

**Gradient-mesh section backgrounds:**
Each section `<div class="section-bg">` uses:
```css
background:
  radial-gradient(ellipse 60% 40% at 80% 20%, rgba(201,132,90,0.18) 0%, transparent 70%),
  radial-gradient(ellipse 40% 60% at 20% 80%, rgba(155,135,194,0.15) 0%, transparent 70%),
  var(--ink-grid);
```
Alternate sections shift gradient positions to `20% 80%` / `80% 20%` for visual variation.

**Sharp-angle data callout badges:**
```css
.callout-badge {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  background: var(--ember-trace);
  color: var(--ink-void);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  padding: 4px 16px;
  letter-spacing: 0.08em;
}
```
Place these at section transitions with annotation text: "∂/∂x = 0 at t=0.6", "→ asymptotic", "local minima detected."

**Scroll-driven curve traces in editorial section:**
As user scrolls through the "Curve Fitting" section, SVG trace paths in the left margin progressively draw themselves via `stroke-dashoffset` driven by an `IntersectionObserver` ratio (0→1). Each trace is a different mathematical curve: one sinusoid, one damped oscillation, one logarithmic arc.

**Bias note:** The page tells a story of discovery — the user is exploring a mathematical landscape, not buying a product. No pricing blocks, no CTA banners, no testimonial grids. The only "calls to action" are the interactive data points that expand to reveal features. Everything else is pure narrative: the curve drawing itself, the field notes appearing, the constellation forming.

## Uniqueness Notes

**3+ Differentiators:**

1. **Diagonal-section interlocking layout (rare):** The `diagonal-sections` layout appears in only 2% of the corpus. plotgrapher.com uses it as the fundamental structural metaphor — every section is a tilted parallelogram band that interlocks with its neighbors like a multi-layer graph overlay, not just a cosmetic diagonal stripe.

2. **Live Y-axis scroll ruler:** A fixed sidebar ruler that displays the user's scroll position as a live data value ("y = 47") in the graph-paper metaphor. This is an entirely novel navigation/orientation device not found in reference designs — it transforms scroll progress into a coordinate readout, reinforcing the "you are inside a plot" experience at every moment.

3. **Deterministic scatter constellation:** Feature cards are presented as plotted data points in a procedurally generated but deterministic SVG scatter plot. The constellation of connecting lines between points creates a network visualization as the actual feature browsing interface — not cards in a grid, but nodes in a graph, true to the domain.

4. **Typewriter-annotated mathematical callouts:** Rather than generic progress indicators or decorative dividers, the section transitions are bridged by sharp-angle badge callouts containing real mathematical notation ("∂/∂x = 0 at t=0.6", "→ asymptotic"). The typewriter reveal effect is applied specifically to the Caveat "field notes" handwriting passages, creating a two-register reveal: Space Mono for precision, Caveat for human observation.

5. **Gradient-mesh as plot illumination:** The muted radial gradient meshes on each section background are framed as the "light source" of the plotter — as if a lamp is shining on different areas of a large sheet of graph paper. The gradient positions shift between sections to imply the light panning, giving the dark-mode palette depth without glare.

**Chosen seed (per assignment):** aesthetic: dark-mode, layout: diagonal-sections, typography: eclectic-hybrid, palette: muted, patterns: typewriter-effect, imagery: gradient-mesh, motifs: sharp-angles, tone: whimsical-creative

**Avoided patterns from frequency analysis:**
- `photography` (87% — overwhelmingly overused; avoided entirely)
- `minimal` imagery (43% — second most overused; avoided in favor of active SVG construction)
- `dark-mode` is 13% (present but not dominant; used here with the notebook/plotter warmth variant rather than generic dark-mode)
- `eclectic-hybrid` typography at 6% keeps this in the less-used half; the specific trio (Playfair Display + Space Mono + Caveat) is a combination not seen in reference designs
- `diagonal-sections` at only 2% is one of the most underused layout patterns — strongly preferred here
<!-- DESIGN STAMP
  timestamp: 2026-05-10T11:57:58
  domain: plotgrapher.com
  seed: seed
  aesthetic: plotgrapher.com is a **whimsical data-cartography studio** — a place where mathe...
  content_hash: d46819988d60
-->