# Design Language for gazza.news ## Aesthetics and Tone gazza.news is **a botanical broadsheet hand-pressed in a glasshouse** — the imagined daily of a small herbarium-newsroom that occupies the upper gallery of a Victorian palmhouse converted, in 2026, into a working newsroom for plant news, garden news, weather news, and the soft civic gossip of a city seen through its public flora. "Gazza" is the diminutive of *gazzetta*, the Venetian small-coin that bought the first printed news sheet in 1566; here the coin has been replaced with a **pressed forget-me-not**, and the reader pays for tonight's edition by pinning a flower to the masthead with their cursor. The aesthetic vow is **botanical**, but the **botanical of an editorial pressboard, not of a garden-supply store**: every blue is the blue of a damp morning windowpane in February when the cyclamens are still asleep; every petal is drawn at the weight of a Redouté plate but rendered with the rounded, friendly contour of a contemporary children's-book illustrator (think Beatrice Alemagna, Carson Ellis, Christian Robinson) so the page feels learned-but-unstuffy, **a herbarium that giggles**. The tone is unapologetically **whimsical-creative** — captions that read "the dandelion files a complaint," sub-heads that read "Mosses, briefly" — but the underlying typography and grid are precise, almost technical, the way a real herbarium label is precise: Latin name, vernacular name, collector, date, locality. The whimsy is **the surface tension of a careful pond**, not the splash. Atmospherically the page lives in **the ethereal blue of pre-dawn condensation on glass**: not the glassmorphism of frosted dashboards, but the actual physical blue of breath fogging a cold pane, the blue you see when you exhale onto the inside of a cloche over a trillium at 5:47 AM. Every interaction must reinforce this — the page should feel **drawn breath, held breath, exhaled breath**, never an alarm. There is **no breaking-news red anywhere on the property, no chyron, no blink, no auto-refresh count**; the broadsheet is set once at dawn and re-read all day. The reader leaves having learned the Latin name of one new plant and the small civic news of one small place. A faint **graphite-rule undertone** runs beneath the whole composition — the soft 0.5pt rule of an old taxonomic key — to keep the botanical from sliding into cottagecore. gazza.news is **a botanist's newsroom**, not a flower stall. ## Layout Motifs and Structure The page is **one full-bleed pressed-flower spread** rather than the usual editorial column-stack. The composition is built on a **specimen-sheet metaphor**: imagine an A1 herbarium mounting sheet laid edge-to-edge across the viewport, with eight pressed-and-pinned story-specimens arranged by an unhurried curator. Full-bleed here is **NOT** the standard hero-image-fills-screen — it is the *paper itself* that fills the screen, a single uninterrupted Cloche White field running 100vw × 100vh at the top, then continuing as one continuous unbroken field for the entire scroll length. There are no section-breaks, no horizontal rules across the page, no banded backgrounds. The paper is one piece. **Macro-grid: the eight-pin layout.** Eight story-specimens are pinned to the sheet. Each occupies a generous, irregular bounding box — never the same dimensions twice — measured in *thumb-widths* rather than columns. The thumb-width unit (`--tw: clamp(48px, 6vw, 96px)`) governs all spacing. Specimens 1, 4, and 7 are wide (12tw × 8tw); specimens 2, 5, 8 are narrow-tall (6tw × 12tw); specimens 3 and 6 are square (8tw × 8tw). The boxes are placed by hand on a 24×N implicit grid using `grid-template-areas` with named slots that read like a curator's pinning order: `lead`, `tide`, `frost`, `bloom`, `seed`, `moth`, `root`, `dusk`. The empty cells between specimens are not gutters — they are **paper showing through**, deliberate negative space that lets the eye move the way it would on a real specimen sheet. **The pinning ritual.** Every specimen is anchored to the page by **a single 6px-radius dot of Garnet Pin** at its top-left corner — a literal pin head — with a 0.5px Pin Shadow cast 2px down-right. Beneath each pin a hand-lettered **specimen tag** sits at a 4° tilt: a 220×60px ivory rectangle bearing the Latin name (in italic), the vernacular name, the byline, and the timestamp (set as a tide line: "21:14 KST, low tide +0.4m"). The tag is pinned by a second tiny pin in its upper-left, and a hairline thread of Iris Thread runs from the tag-pin to the specimen-pin, drawn as an SVG path with `stroke-dasharray` to suggest cotton fibre. **Floral-botanical illustration as content vehicle.** Each of the eight specimens leads with a **hand-drawn, rounded-contour botanical illustration** (forget-me-not, dog-violet, snowdrop, hellebore, periwinkle, lobelia, columbine, cornflower) of the day's mood-flower. The illustration is **approximately 60% of the specimen's area**, set against the paper itself with no card, no shadow, no frame. The headline sits *under* the illustration in the manner of a herbarium plate's caption, never on top of it. Body text is in the lower third of the specimen, never beside the illustration. **Organic-blobs as ground.** The Cloche White paper is *very subtly* mottled by four enormous, almost-transparent organic blobs — soft Stomata Blue at 4% opacity, drawn in SVG with `` for paper-grain — that sit behind everything and shift on slow parallax-LITE (translateY only, never X, never rotation; max ±20px over the whole scroll). They are **the ghost of condensation on the glasshouse window**, never decorative shapes, never the modern "blob" of an SaaS landing page. They are weather, not graphics. **Masthead.** The masthead spans the full width of the sheet at the top: a 96px-tall band of Cloche White with the wordmark `gazza.news` set in 72px Quicksand Light, in Iris Thread blue, drawn beneath a single hand-illustrated **forget-me-not in profile** at 64px tall. To the right of the wordmark, in 11px Quicksand Medium (small-caps via OpenType `smcp`), the day's tide and moon-phase: "Vol. III, No. 247 — waxing crescent — last frost 41 nights ago." There is no nav. There is no menu. There is a single hairline of Graphite Rule at the bottom of the masthead. That is everything. **Footer.** A single 48px tall band at the absolute bottom of the page reading, in 13px Quicksand 400, "set in the upper gallery, 5:47 AM, by hand" with a tiny pressed cyclamen at the right margin. No social icons. No copyright stamp. No newsletter form (subscription, when it exists, is *Specimen 8 — Dusk: Subscribe*). **Vertical rhythm.** The eight specimens are not separated by section breaks; they bleed into each other on the shared paper, with vertical gaps measured in **garden inches**: spec-1 to spec-2 = 4tw, spec-2 to spec-3 = 6tw, spec-3 to spec-4 = 4tw, spec-4 to spec-5 = 8tw (the page's longest exhale), spec-5 to spec-6 = 4tw, spec-6 to spec-7 = 6tw, spec-7 to spec-8 = 4tw. The longest gap (spec-4 to spec-5) is **the noon gap**, where the paper rests. **Responsive.** At ≥ 1280px the eight-pin layout holds as designed. At 768–1279px the layout collapses to a **two-column zigzag**: specimens alternate left-anchored and right-anchored with the same negative space between them. At < 768px the layout collapses to **one centred column**, but each specimen retains its tilted tag and pin; the pin moves to the upper-left of the specimen, the tag dangles below it on the same Iris Thread. The eight-pin metaphor is preserved at every breakpoint; the paper never becomes cards. ## Typography and Palette **Type system — three Google Fonts only.** - **Quicksand** (Google Fonts, weights 300/400/500/600) — the primary face of the entire newsroom. A **rounded-sans** of unusual bookishness, drawn by Andrew Paglinawan: terminals are softened to friendly bulbs, the lowercase `g` has a single open loop like a clipped petal, the `a` is a two-storey, the figures are old-style. Quicksand is the perfect carrier for a botanical broadsheet because its rounded contour matches the rounded contour of the illustrations exactly. Used at: 72px Light for the masthead, 32px SemiBold for headlines, 17px Regular for body, 13px Medium small-caps for taglines and timestamps. **Tracking: -0.5% on display sizes, +1% on body, +6% on small-caps.** - **Cormorant Garamond Italic** (Google Fonts, weight 500 italic only) — used **exclusively** for Latin specimen names on the tags, set at 15px italic in Iris Thread. Never used anywhere else on the site. The Latin italic appearing only on the tags is **a typographic vow**: the page has one classical voice and it speaks only when naming. - **Caveat** (Google Fonts, weight 400) — used **exclusively** for the curator's marginalia: tiny handwritten notes in 14px Caveat that appear in the empty paper-showing-through cells, reading things like "n.b. — the moss section runs short tonight," "see also: fig. 7," "ask the editor about the columbine." These notes are positioned with absolute positioning at hand-chosen coordinates and rotated at irregular small angles (-3°, +2°, -5°, +4°). They are **not** decoration — they are **the byline of the page itself**. **Palette — Stomata Eight.** The site's palette is an eight-colour system built from a single anchor of ethereal-blue, named after botanical and atmospheric phenomena. Every colour is calibrated for the paper-on-paper feel. - `#F4F6FA` **Cloche White** — the paper itself, used for the entire 100vw × 100vh background. Not pure white; carries 6% blue-violet to read as glasshouse-condensed. - `#E5ECF5` **Stomata Blue** — the soft mottle of the four organic blobs, used at 4% opacity over Cloche White. Named for the breathing pores on the underside of a leaf. - `#B7CDE6` **Vapour** — the colour of breath on glass at dawn, used for hairline rules, for the tide-tag's background, and for the IntersectionObserver's reveal-shadow. - `#7C9DC9` **Iris Thread** — the primary accent, the colour of the threads connecting pins to tags, the wordmark, all body links (underlined hover). The closest match in nature is the dog-violet's filament, not the iris itself. - `#3E5A82` **Compositor Indigo** — the colour of body text, all 17px Quicksand Regular. Never pure black; chosen so the page reads as a still-damp letterpress proof rather than a screen. - `#1F2D45` **Pressboard** — the deepest blue on the page, used for headlines, for the masthead wordmark's drop-shadow at 8% opacity, and nowhere else. Reserves itself for emphasis. - `#C97A6F` **Garnet Pin** — the lone warm note in the entire palette, used **only** for the eight pinheads, the eight tag-pinheads, the focus rings, and the hover-state of links. Less than 1% of the page's pixel area is Garnet Pin; this scarcity is what makes the colour read as a *pin*. - `#9C8758` **Pressed Gold** — the colour of pressed cyclamen petals, used **only** for the masthead's tiny forget-me-not centre and the footer's pressed cyclamen. ≤ 0.2% of pixel area. **Hierarchy rules.** - All headlines: 32px Quicksand SemiBold in Pressboard, never larger, never bolder. - All sub-heads: 19px Quicksand Medium in Compositor Indigo. - All body: 17px Quicksand Regular in Compositor Indigo, 1.55 line-height, 64ch max measure. - All tags: 13px Quicksand Medium small-caps in Iris Thread, except the Latin name which is 15px Cormorant Garamond Italic in Iris Thread. - All marginalia: 14px Caveat 400 in Vapour at 80% opacity (so it reads as a soft pencil note). - All link underlines: drawn as 1.5px SVG paths in Iris Thread, with the underline-draw animation triggering on hover (700ms, ease-out). **Typographic vow.** No display weight ever exceeds SemiBold. No tracking ever exceeds +6%. No drop-cap. No all-caps anywhere outside the OpenType `smcp` small-caps. No italic anywhere except the Latin tags. The page's typographic restraint is its luxury. ## Imagery and Motifs **The eight illustrated specimens.** Eight hand-drawn-feeling botanical illustrations, one per specimen-slot, all rendered as inline SVG (no rasters) so they remain crisp. The illustrations are drawn in the hybrid style of **a Redouté plate filtered through Carson Ellis**: rounded petal contours, no harsh outlines, two-tone fills (a wash + a darker accent), no realism, no rendering of light, no shadow on the plant itself. Each illustration uses **only three palette colours**: Vapour for the wash, Iris Thread for the contour, and a single accent (Pressed Gold for centres, Garnet Pin for fruit/seed). The eight specimens, in order: 1. **Forget-me-not** (*Myosotis arvensis*) — leads with the day's main story. 2. **Snowdrop** (*Galanthus nivalis*) — leads with the morning weather and tide. 3. **Dog-violet** (*Viola riviniana*) — leads with the city's botanical-civic news (which park lost a tree, which courtyard gained a planting). 4. **Hellebore** (*Helleborus niger*) — leads with the longread of the day, set noon-gap-deep. 5. **Periwinkle** (*Vinca minor*) — leads with the moss-and-lichen brief. 6. **Lobelia** (*Lobelia erinus*) — leads with the curator's interview of the week. 7. **Columbine** (*Aquilegia vulgaris*) — leads with the night's stargazing forecast and pollinator notes. 8. **Cornflower** (*Centaurea cyanus*) — the dusk specimen, leads to the subscribe form. **Decorative recurring motifs.** - **Pinheads.** Eight 6px-radius Garnet Pin dots, plus eight smaller 4px-radius pins on the tags. These are the only *circular* elements on the entire page; everything else is petalled or rectangular. - **Iris Thread.** A 0.5px stroke connecting each pin to its tag, drawn as an SVG `` with two control points so it bows under gravity. Eight threads total. The thread has a 1.5px Vapour shadow cast 1px down to suggest it lifts off the paper. - **Tide-line.** A horizontal hairline in Vapour, 0.5px, that runs along the bottom of every tag, with a single tiny tick mark indicating the tide height. Functional ornament: the tick's position encodes the actual current tide via a CSS variable updated once per page load. - **Pressed-paper grain.** A 0.04-opacity SVG `` filter applied to the body element. This is the only "noise" on the page and it is barely visible at desktop; it shows up only when you tilt the screen toward the light. - **Cyclamen press.** A single tiny pressed cyclamen at the lower-right of the footer, drawn at 24px tall in Pressed Gold with Iris Thread veins. Appears nowhere else. - **Lobed margin.** The far-right edge of the page (≥1280px only) carries an extremely subtle scalloped margin — three 48px-radius lobes spanning the full page height — drawn in Stomata Blue at 6% opacity. It evokes the deckled edge of handmade paper without simulating it. At < 1280px this disappears entirely. - **No photographs anywhere.** This is the imagery vow. No bokeh, no lens flare, no gradient mesh, no 3D render, no glassmorphic card, no neon glow, no marble texture. Botanical illustration only. **Cursor.** The default cursor remains the system cursor on body areas. Over each specimen, the cursor becomes a custom **24×24 SVG of a brass herbarium pin held at 30°**. There is no cursor-following blob, no parallax-tied cursor halo, no magnetic snap; the cursor change is the *only* cursor effect on the site, and it is instant (no animation). **Mood imagery.** The first viewport on load shows: Cloche White paper, the masthead with the forget-me-not, three pinned specimens visible above the fold (Specimens 1, 2, 3), the Iris Thread connecting their tags, and a faint suggestion of the noon-gap below. The reader's first impression must be **"this is a real specimen sheet that someone pinned this morning,"** not "this is a website about plants." ## Prompts for Implementation Build gazza.news as **one HTML file, one CSS file, one ES module, one SVG sprite**. No framework. No bundler. No build step. The page is a botanical broadsheet pressed into a single full-bleed sheet of Cloche White paper; every interaction must reinforce that the page is *paper, pinned, with breath on the glass overhead*. **Page shell.** A single `
` covering the full body, with `background: #F4F6FA;` and the `feTurbulence` paper-grain filter applied via SVG `` referenced through `filter: url(#grain)` on a sibling `
` that sits absolutely positioned at `inset: 0` with `pointer-events: none; mix-blend-mode: multiply; opacity: 0.04;`. Inside `
`: `
` (96px tall, full-width, with the wordmark and the tide-and-moon line), then a single `
` using `display: grid; grid-template-columns: repeat(24, var(--tw)); grid-auto-rows: var(--tw); grid-template-areas: ...` with the eight specimen named slots placed by hand. Each specimen is `
` containing `` (the forget-me-not, etc), `

`, `
` (the pinned tag with Latin name, vernacular, byline, tide), `
` (the corner pinhead), and `

` body copy. The Iris Thread connecting pin to tag is rendered as an SVG path inside the specimen's relative-positioned bounding box, drawn from pin to tag with two cubic-bezier control points. **The four background blobs.** A single absolutely-positioned `` at `inset: 0; z-index: 0; pointer-events: none;` containing four `` blobs filled in Stomata Blue at 4% opacity, with their `transform: translateY()` updated by a single rAF loop driven by `window.scrollY * 0.04`. Maximum vertical drift across the whole page is ±20px. There is no horizontal motion. There is no rotation. There is no scaling. The blobs are *weather*. **The eight illustrations.** Inline SVG, drawn at 240×240 viewBox, scaled by CSS to fit each specimen's allotted illustration area (which varies by specimen). Each illustration uses exactly three palette colours (Vapour wash, Iris Thread contour, one accent). The contour is drawn with `stroke-linecap: round; stroke-linejoin: round;` and a stroke-width of 1.5–2px depending on petal scale. Stems are drawn as cubic-bezier paths with 2.5px stroke. There are **no rasters** anywhere. **Animation rules. There are exactly three animations on the entire site, and they are the page's only motion budget:** 1. **Underline-draw on hover.** Every link's underline is an SVG `` with `stroke-dasharray: var(--len); stroke-dashoffset: var(--len);` that animates to `0` over 700ms with `cubic-bezier(0.65, 0, 0.35, 1)` on `:hover`. On unhover, the underline retracts over 500ms. Every link. 2. **Hover-lift on specimens.** On `:hover`, each `
` translates upward by 6px (translateY: -6px) over 320ms with `cubic-bezier(0.4, 0, 0.2, 1)`. The specimen's tag rotates a fractional additional 1.5° in the same easing. The specimen's Iris Thread re-tightens (its SVG path's control points are recomputed via JS to maintain a slightly tauter bow). **Critically, the pin stays still** — the specimen lifts away *from the pin*, simulating that the paper has buckled slightly in the breeze, exposing the pin's depth. The specimen casts no shadow during lift; the only feedback is the geometric translation and the tightening thread. On unhover, the specimen settles back over 480ms. 3. **Blob drift on scroll.** As described above. Subliminal. **That is the entire animation system.** There is no parallax beyond the blobs. There is no cursor-follow. There is no spring (in the springy-bounce sense — the easing curves are smooth). There is no stagger. There is no magnetic. There is no morph. There is no tilt-3d. There is no card-flip. There is no reveal-on-scroll. There is no typewriter. There is no counter-animate. There is no path-draw on the illustrations themselves (they are static — only the underlines draw). The page is **as still as a pressed flower**, and the three permitted animations are the three small breaths the glasshouse permits: the link's quiet underline, the specimen's lift in the breeze, the blob's slow weather. **The marginalia layer.** Six to eight `