# Design Language for historygrapher.net ## Aesthetics and Tone historygrapher.net is the instrument panel of a cartographer who charts not land but time — a device that maps events, causations, and eras the way a bathymetric chart maps ocean floor depth. The visual aesthetic is **Bauhaus-disciplined historical authority**: the severe geometric clarity of László Moholy-Nagy's layout workshops applied to the problem of making the past legible. Every element on the page earns its presence by function, then stays because it is beautiful in the way a slide rule is beautiful — form optimized past redundancy into something that reads as art. The mood is **cold-vault certainty**: the feeling of stepping into a temperature-controlled archive where the air is 18°C, the light is diffuse and directional, and every document in the cabinets has been verified to three decimal places. There is no warmth here in the sense of softness — warmth arrives through the density of knowledge, through the richness of a timeline so precisely drawn it implies the reader is trusted with precision instruments. The tone is **authoritative without condescension** — the voice of a professor who has spent forty years in the stacks and writes knowing you can keep up. No hedging. No listicles. No "here's what you need to know." The site assumes the reader came because history matters to them and treats that assumption as a contract. The Bauhaus reference is not decorative: it is structural. The Bauhaus school itself was obsessed with the question "what is the essential form of a thing" — historygrapher.net asks the same question of historical data. What is the essential form of a timeline? What geometry is native to the concept of sequence? The answers are: ruled lines, sharp angles, modular grids, and the strict hierarchy of weight-as-importance. Color temperature is **charcoal and bone with high-voltage amber accents** — the palette of carbon paper, archival kraft, and the amber glow of a darkroom safelight. The amber is used only where a fact demands emphasis: a pivot date, a causation arrow, a keystone event. Everything else is grayscale, letting the amber function as a highlighter on paper already dense with ink. ## Layout Motifs and Structure The page is structured as a **single immersive vertical descent** — the metaphor of unrolling a scroll of history, but rendered in Bauhaus grid language rather than parchment curves. There is no horizontal navigation. There is no sidebar. There is one axis: downward through time. **Macro architecture (desktop — 1440px baseline):** - A 12-column CSS Grid, columns 72px wide with 24px gutters, total content width 1080px centered in viewport. - The primary content column occupies columns 2–10 (864px); columns 1 and 11–12 are reserved for marginalia and structural ornament only. - No hero image. The page opens on a **full-viewport dark panel** — `#0d0d0d` background — with a single typographic statement, 5–7 words maximum, set in Commissioner ExtraBold at `clamp(4rem, 8vw, 9rem)`, white on black, no padding at the top, text aligned to the grid's left edge. The statement describes what historygrapher.net does in the language of the instrument: "The past, mapped to its structure." **Immersive scroll mechanics:** - As the user scrolls past the opening panel, the background transitions from `#0d0d0d` to `#141414` — a barely perceptible shift that signals entry into "the archive." - Timeline entries use **zoom-focus** entry animation: each block starts at `scale(0.92)` and `opacity: 0`, transitioning to `scale(1.0)` and `opacity: 1` as the block enters the viewport (IntersectionObserver, threshold 0.15, duration 420ms, `cubic-bezier(0.22, 1, 0.36, 1)`). - A **sticky horizontal rule** (1px, `#f5a623`, full viewport width) tracks the current scroll position at the 20vh mark, functioning as a "reading horizon" — the amber line the eye anchors to as it descends. **Sharp-angle structural motifs:** - Section dividers are not ruled lines or whitespace alone — they are **45-degree angular cuts**: a `clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%)` applied to section backgrounds, creating hard diagonal entry/exit edges that feel like shearing a document with a guillotine cutter. - Timeline entry cards have a **chamfered corner** at top-right: a `clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)` — a single cut that references the dog-eared corner of an archival folder. - The wordmark icon — a stylized graph node with directed edges — uses only `45°` and `90°` angles, no curves. It is drawn as inline SVG: two nodes (8px × 8px squares, `fill: #f5a623`) connected by a path that steps at right angles. **Icon-heavy information layer:** - Every timeline entry type is marked by a **category icon** drawn as a 24×24px inline SVG using only straight lines and 45° diagonals. Six categories: `event` (single square), `causation` (arrow), `figure` (circle with cross), `document` (rectangle with fold), `era` (bracket), `conflict` (crossed lines). All icons use `stroke: #f5a623`, `stroke-width: 2`, `fill: none`. - Icon + label pairs always appear at the top-left of each entry card, never inline with body text. **Spatial rhythm:** - Timeline entries alternate between `padding: 48px 64px` (major events) and `padding: 32px 48px` (minor entries), signaling importance through spatial weight before the reader reads a word. - Vertical gap between entries: 4px — entries are nearly flush, like stacked index cards, with the chamfered corner distinguishing them from each other. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary display and headers:** [Commissioner](https://fonts.google.com/specimen/Commissioner), weights 300 (Light), 400 (Regular), 700 (Bold), 800 (ExtraBold). Commissioner is a variable humanist sans-serif designed by Kostas Bartsokas — it has a rare quality: at large weights it reads as geometric authority (Bauhaus-compatible), at light weights it reads as documentary precision (archival-compatible). It does double duty across the entire type hierarchy. Set the opening statement at ExtraBold (800); section titles at Bold (700); card titles at Regular (400); body at Light (300) at 16px/1.6. - **Monospace data layer:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), weight 400 only. Used exclusively for: dates (formatted as `YYYY · MM · DD`), geographic coordinates, citation references, and data-layer annotations in the margins. Set at 11px with `letter-spacing: 0.12em`, `color: #8a8a8a`. The monospace layer is the "instrument readout" — it never competes with Commissioner. - **No serif fonts** — the corpus leans heavily on Cormorant/Garamond for editorial warmth. historygrapher.net refuses that warmth entirely: everything is sans or mono. **Palette:** | Role | Token | Hex | |---|---|---| | Deep Archive (primary background) | `--deep-archive` | `#0d0d0d` | | Vault Gray (secondary background, cards) | `--vault-gray` | `#1a1a1a` | | Carbon Wash (tertiary background, alt sections) | `--carbon-wash` | `#141414` | | Bone White (primary text) | `--bone-white` | `#e8e4dc` | | Muted Bone (secondary text, body copy) | `--muted-bone` | `#b0a99e` | | Archive Annotation (tertiary text, metadata) | `--archive-annotation` | `#8a8a8a` | | Amber Signal (accent — use sparingly, max 3 instances per screen) | `--amber-signal` | `#f5a623` | | Amber Dim (amber at 40% for hover states, borders) | `--amber-dim` | `#7d5412` | | Graphite Rule (borders, dividers) | `--graphite-rule` | `#2e2e2e` | The amber (`#f5a623`) is the **only warm tone on the page** and must be earned: it marks only pivot dates, causation arrows, and the hover state of interactive timeline entries. Used anywhere else, it loses its signal power. ## Imagery and Motifs **Photography: zero.** The corpus uses photography at 85%+. historygrapher.net uses none. All visual elements are generated from data or drawn as geometric SVG. **The primary visual artifact is the graph itself.** Timeline data is rendered as a directed acyclic graph (DAG) using a force-directed SVG layout: nodes are events (squares, `#1a1a1a` fill, `#f5a623` stroke, 2px), edges are causation lines (straight, `stroke: #2e2e2e`, 1px, with `#f5a623` arrowheads at 45° angles). The graph is embedded as a full-viewport SVG panel between the opening statement and the first timeline entry. It animates on load: nodes fade in from opacity 0 over 800ms staggered by 60ms each, then edges draw in using `stroke-dashoffset` animation. **Sharp-angle geometric ornaments (inline SVG, decorative only):** - **Section frontispiece:** A 180×24px SVG of a stepped angular form — like a Bauhaus staircase motif — using only `#2e2e2e` on the dark background. One per section break. - **Corner markers:** 16×16px L-shaped bracket marks in `#f5a623`, positioned at the top-left corner of major entry cards (CSS `::before` pseudo-element via `clip-path`). - **Category taxonomy icons:** Six 24×24px icons described above, all geometry, no curves. **No stock imagery, no gradients within icons, no drop shadows.** **The gradient use:** A single `linear-gradient(180deg, #0d0d0d 0%, #141414 40%, #0d0d0d 100%)` is used as the background of the opening panel — the shift is nearly invisible (7 steps on an 8-bit scale) but prevents the deep black from feeling like a failed render. No other gradients. **Micro-motion vocabulary:** - Zoom-focus entry: `scale(0.92) → scale(1.0)`, IntersectionObserver, 420ms, bezier `0.22, 1, 0.36, 1`. - Edge draw-in: `stroke-dashoffset` from full path length to 0, 600ms per edge, staggered. - Icon pulse on hover: `scale(1.0) → scale(1.08) → scale(1.0)`, 200ms, `ease-in-out` — the icon breathes once, then is still. - Amber rule scroll track: position updated via `requestAnimationFrame` on scroll, no easing (instant follow). ## Prompts for Implementation **The story:** A user arrives at historygrapher.net because they are trying to understand *why* something happened — not the what (Wikipedia has the what), but the causal structure underneath the what. The site answers that question by making causation *visible as geometry*. Events are nodes. Causes are directed edges. Time is the vertical axis. The user scrolls down through structured history the way a geologist reads a cliff face: layer by layer, each stratum earning its thickness by what it contains. **Opening sequence (the first 100vh):** The viewport is solid `#0d0d0d`. Commissioner ExtraBold at `clamp(4rem, 8vw, 9rem)`, `color: #e8e4dc`, text "The past, mapped to its structure." appears character by character via a CSS `@keyframes` that increments `clip-path: inset(0 X% 0 0)` from right to left, duration 1.2s. Below the statement: a single line in JetBrains Mono, 11px, `#8a8a8a`: the current UTC date formatted as `YYYY · MM · DD`. Then the Bauhaus staircase ornament (180×24px SVG). Then silence — 60px of `#0d0d0d` — then the graph SVG begins. **The graph panel (full viewport, sticky for 200vh of scroll):** The DAG SVG is positioned `sticky; top: 0` and has `height: 100vh`. As the user scrolls through 200vh, the graph responds: a CSS custom property `--scroll-progress` (0–1) is written by the scroll listener, and individual node opacities, edge weights, and node scale values are bound to it via `calc()`. Nodes that represent events in the "current era" (the one at the scroll horizon) brighten to full opacity; others dim to 0.2. This creates a **spotlight that moves through history as the user scrolls**. **Timeline entries:** Each entry is a `
` with the chamfered-corner `clip-path`. Structure: ``` [Icon 24px] [Category label in JetBrains Mono 11px] [Date in JetBrains Mono 11px, #8a8a8a] [Title in Commissioner Bold 700, 24px, #e8e4dc] [Body in Commissioner Light 300, 16px/1.6, #b0a99e] [Source annotation in JetBrains Mono 10px, #8a8a8a, right-aligned] ``` On hover: the amber-dim border (`#7d5412`, 1px) becomes `#f5a623` (full amber), and the icon pulses once. No other hover state. **Section breaks:** Use the 45-degree clip-path angular cuts. Each section is a new era. The section title is set in Commissioner Bold 700 at 48px, left-aligned to the grid edge, with a `#f5a623` overline (3px, full content width) above it. The word "ERA" in JetBrains Mono at 10px, `#8a8a8a`, `letter-spacing: 0.2em`, sits above the overline. **Scrolljack policy:** Zero. The page uses `scroll-behavior: smooth` for anchor links only. All scroll-responsive effects are additive (opacity, scale, color shifts) — the browser's native scroll is never intercepted. **Avoid:** - Any CTA button. No "Sign Up," "Try Free," "Get Started." The page is a document, not a funnel. - Pricing tables or feature grids. - Stock photography or illustration. - Any color other than the defined palette tokens. - Curves in any icon, ornament, or structural element (Bauhaus constraint: geometry only). - Cormorant, Garamond, or any serif font. ## Uniqueness Notes 1. **Commissioner as sole typeface — no serif, no display novelty.** The corpus defaults to Cormorant/Garamond for editorial gravitas or uses a pairing of display-plus-body. historygrapher.net uses a single humanist variable sans (Commissioner) across all levels of hierarchy, differentiating by weight (300–800) alone. This creates typographic unity rare in the corpus — the page feels like one instrument, not an orchestra. 2. **The graph-as-hero replaces imagery entirely.** 85% of corpus designs use photography; nearly all use some form of illustration. historygrapher.net makes the *data visualization itself* the primary visual surface. The DAG graph panel is not a decorative element — it is the thesis. No other design in the reference corpus uses a functional data visualization as the hero artifact. 3. **Amber as a single-hue accent against a total-grayscale field.** The corpus uses gradient palettes (81%) or warm palettes (97%) that distribute warmth across backgrounds and text. historygrapher.net uses zero warm tones except for `#f5a623` amber, which appears only on 3 specific interaction types. The contrast between total grayscale and the one warm accent creates a signal power that gradient-rich designs cannot achieve — the amber is unmissable precisely because nothing else competes with it. 4. **Zoom-focus entry at architectural scale, not card scale.** The corpus uses zoom-focus (4%) typically as subtle card micro-animations. historygrapher.net applies zoom-focus to entire section panels and the DAG graph scroll-spotlight, making the zoom-focus pattern a *narrative device* rather than a transition polish. 5. **Sharp-angle clip-path as the site's architectural DNA.** Motifs: sharp-angles is used in only 2% of the corpus, and typically as borders or dividers. Here, 45-degree chamfered corners and diagonal section cuts are applied to every structural container, every section break, every card — making sharp geometry the site's dominant visual fingerprint rather than an accent. **Chosen seed:** `aesthetic: bauhaus, layout: immersive-scroll, typography: commissioner-versatile, palette: gradient, patterns: zoom-focus, imagery: icon-heavy, motifs: sharp-angles, tone: authoritative` **Avoided patterns (from frequency analysis):** - `centered` (90% of corpus) — historygrapher.net uses left-grid-aligned composition throughout. - `full-bleed` photography (76%) — no photography at all. - `warm` palette (97%) — all backgrounds and text are grayscale; amber is the single allowed warm tone. - `gradient` used as multi-color decorative surface (81%) — the only gradient on the page is a near-invisible monochrome depth gradient on the opening panel. - Cormorant/serif typography — the corpus leans heavily on these; this design refuses them entirely.