# Design Language for haru.news ## Aesthetics and Tone haru.news is **a Bauhaus preparatory-course wallchart that learned to broadcast** — a Dessau workshop bulletin board reimagined as a daily ideas dispatch. The domain word *haru* (春 — spring, the season of beginnings) is read as **the morning the press starts up**: the page is the first proof pulled off a hand-press at dawn, while the ink is still cold and the registration marks still show. The `.news` suffix is taken at face value but stripped of every newsroom cliché — no breaking-news banners, no ticker, no "trending now" rail, no comment threads. Instead, the page behaves like the *teaching wallchart* the Bauhaus masters pinned outside the Vorkurs studio: a flat composition of primary forms — circle, square, triangle — each one carrying a single dispatch, each one annotated in the deadpan, demonstrative voice of a master explaining color theory to first-years. The tone is **tech-tutorial** (a 3% slot in the corpus, deliberately rare): every dispatch on haru.news is framed as a *small lesson*. Headlines read like the opening line of a workshop exercise — "Exercise 04: How a single idea propagates through a network in under one second." Body copy is numbered, stepwise, and unhurried; it explains *how* a thing works before it tells you *that* it happened. The mood is **calm, instructive, and faintly utopian** — the Bauhaus belief that good form, clearly demonstrated, makes the world legible. Nothing here shouts. The page is a quiet drafting table where ideas are pinned, measured, and explained — then the next day, taken down and replaced. There is exactly one moment of motion-as-delight in the whole site: each new dispatch *drops in* like a wooden block set onto a tabletop — a single firm bounce, then perfect stillness. That bounce is the page's signature, the only place where the strict geometry permits itself a breath. ## Layout Motifs and Structure The page is a **centered single-column composition** — the seed's `centered` constraint taken at full strength and reframed as **the wallchart pinned dead-center on the studio wall**. The content column is **a fixed 760px on desktop, dropping to fluid below 820px viewport**, and it is *truly* centered: equal margins left and right, no sidebar, no off-canvas drawer, no asymmetric pull. The centering is the point — Bauhaus pedagogy demanded that the demonstration object sit at the visual center so every student could read it from any seat in the room. Above and below the column run two **registration-mark rules**: thin (1px) horizontal lines with small crosshair `+` glyphs at each end, the way a litho proof is marked for plate alignment. These rules never move on scroll; they frame the column like the edges of a sheet of paper on a drawing board. The column is built from **stacked dispatch-plates**, one per screen, separated by generous vertical white. Each plate is a **flat geometric composition built from exactly three primary shapes** — a large circle (the "idea"), a square (the "context"), a triangle (the "vector" — where the idea is heading). The three shapes are arranged on a **strict 12-column × 12-row modular grid** drawn faintly in the background of each plate (1px ocean-tinted grid lines at 8% opacity, like the gridded newsprint a typesetter works on). The circle is always the largest element and always sits on the grid's intersections, never floating freely; the square locks to a 4×4 module block; the triangle points along a grid diagonal. No shape ever overlaps another by more than 50% — Bauhaus composition prized *adjacency and tension*, not pile-up. The dispatch text lives **inside and beside the shapes**: the headline runs along the top edge of the square, the lesson number sits centered in the circle, the body steps cascade down the right-hand grid columns in numbered blocks (1 → 2 → 3 → 4), and the triangle's hypotenuse acts as a pointing line toward the "what happens next" footnote. There is no hero image, no card grid, no bento box, no dashboard, no masonry. The masthead is a single line at the very top of the column — the word **haru.news** set in the serif display face, with a small filled circle (●) as the only ornament, plus today's date in mono. Navigation is **four tiny shape-glyphs in a row** under the masthead — ○ Today, □ Archive, △ Method, ● Colophon — never sticky, never re-skinned, never animated. The footer is one registration-mark rule and a single mono line: a build timestamp and the words "set by hand." ## Typography and Palette **Fonts — Google Fonts only, two voices, intentional Bauhaus-vs-revival tension.** - **Display & body serif — `Spectral` (variable, weights 200–800).** Spectral carries the **serif-revival** voice (a 5% slot in the corpus) for the entire site — and the pairing of a *humanist serif revival inside a strict Bauhaus geometric layout* is the design's central typographic argument. The Bauhaus masters famously rejected serifs in favor of geometric sans; haru.news puts a refined, slightly stern serif *back* into the wallchart, the way a 2026 design school might quietly admit that Jan Tschichold himself recanted. Spectral is used for: the masthead (44px, weight 300, generous letter-spacing), every headline / exercise title (32px, weight 600), all body / lesson steps (19px, weight 300, line-height 1.7), pull-quotes inside circles (26px, weight 400 italic), and footnotes (16px, weight 200 italic). Spectral's low contrast and tall x-height keep it legible at small numbered-step sizes; its slightly condensed roman gives the column a brisk, lecture-hall cadence. - **Numerals, labels, timestamps — `Space Mono` (weights 400, 700).** Space Mono handles every machine-set element: the date, the build timestamp, the lesson numbers when they appear as labels (`EX. 04`), the grid-coordinate annotations (`R3·C7`), the navigation glyph captions, and the colophon. Mono sits at 95% frequency in the corpus, so it is *not* a differentiator — it is used here strictly as the "this part was set by the machine, not the hand" register, in deliberate contrast to Spectral's "set by hand" body. Set at 13–15px, letter-spacing +0.04em, always uppercase for labels. No third font. No handwritten face. No grotesk. The whole site is two voices: the serif that explains, and the mono that measures. **Palette — `ocean-deep` (a 3% slot in the corpus), built as a Bauhaus primary-triad submerged underwater.** - `#0A1A2F` — **Abyss Navy.** The page background. Not black — a deep, slightly green-leaning ocean navy, the color of water at 40 meters. Everything sits on this. - `#F4F0E6` — **Proof Paper.** The warm off-white of uncoated press stock. Used for all body text, the column's faint inner panel, and the registration-mark rules. - `#1B3A5C` — **Deep Current.** A mid ocean-blue, one step up from Abyss. Used for the background grid lines (at low opacity), the secondary plate panels, and hover states. - `#E63946` — **Vermilion Buoy.** The Bauhaus red, dimmed and salted — the warning-buoy red you'd see breaking the surface. This is the *circle* color (the "idea"). One accent, used sparingly: the masthead dot ●, the active nav glyph, the lesson-number disc, and the bounce-landing flash. - `#F4A93B` — **Sodium Lamp.** A warm amber-gold — the color of a dock light on the water at night. This is the *square* color (the "context"). Used for headline underscores and the square plate-element fill at 20% opacity. - `#2A9D8F` — **Tide Teal.** A blue-green, the only "cool" accent that isn't navy. This is the *triangle* color (the "vector"). Used for the pointing line, the "what happens next" footnote rule, and link underlines. The three accent hues (Vermilion / Sodium / Tide) are the **Bauhaus primary triad** (red / yellow / blue) translated into an oceanic key — warm where Bauhaus would be pure, dimmed where Bauhaus would be saturated, so they read as *signage seen through water* rather than poster paint. Body type is always Proof Paper on Abyss Navy: high-contrast, restful, museum-label calm. ## Imagery and Motifs **No photography. No 3D render. No gradient mesh. No stock illustration. No icons from a library. No watercolor. No hand-drawn imperfection.** Every visual element on haru.news is **vector art** (a 3% slot in the corpus — deliberately uncommon) authored as inline SVG, hard-edged, flat-filled, no filters except a single grain overlay. 1. **The primary-shape vocabulary.** Each dispatch-plate is composed from the three Bauhaus primitives — circle, square, triangle — drawn as plain `` / `` / `` with flat fills from the accent triad. No gradients on the shapes (gradient sits at 97% in the corpus; haru.news refuses it entirely on the geometry). The shapes are *large* — the circle is typically 280–340px diameter — and they carry text directly: `` along the circle's edge for pull-quotes, plain `` centered for lesson numbers. 2. **The modular grid.** Behind every plate, a 12×12 grid of 1px Deep Current lines at 8% opacity, rendered as a CSS `repeating-linear-gradient` (not an image). Small Space Mono coordinate labels (`R3·C7`) sit at a few intersections, as if the typesetter pencilled them in. This is `abstract-tech` (a 3% motif) realized as *the drafting grid itself becomes the tech motif* — the page wears its construction lines on the outside. 3. **Registration marks.** Crosshair `+` glyphs and thin alignment rules, drawn as 1px SVG strokes in Proof Paper, framing the column top and bottom and marking the corners of each square plate-element. They reference litho-press plate alignment — the "this was printed" tell. 4. **The propagation diagram.** One plate per day carries a tiny abstract-tech vignette: a single Vermilion circle, then 3, then 9 smaller Tide-teal circles connected by 1px lines — a flat node-graph showing "how an idea spreads." Pure SVG, no animation library, no canvas. It is the most "tech" the page gets, and it is rendered as a *Bauhaus composition exercise*, not a data-viz dashboard. 5. **The bounce-block.** When a new dispatch enters the viewport, its square plate-element animates in as if a wooden type-block were *set down* on the drafting table — drops 18px and slightly oversized (scale 1.04), then settles with one firm overshoot to its locked grid position, accompanied by a single 1px Vermilion flash-ring that expands and fades. This is `bounce-enter` (a 3% pattern slot — uncommon and the page's signature motion). 6. **Grain.** A single full-page SVG `` grain overlay at ~4% opacity, multiply-blended — the tooth of uncoated paper. The *only* filter on the entire site. ## Prompts for Implementation Build haru.news as **one HTML file, one CSS file, one ES module, one inline SVG `` block (grain filter + crosshair symbol + the three primitive shape symbols)**. No framework, no router, no bundler, no build step. No GSAP, no Three.js, no Lottie, no canvas, no WebGL. The animation surface is **CSS transitions + a single `IntersectionObserver`** — nothing else. **Page shell.** A single centered `
` (max-width 760px, margin auto) holding: `
` (the wordmark in Spectral 300 + the ● + today's date in Space Mono), then `