# Design Language for infra.day ## Aesthetics and Tone infra.day is **a pop-art silk-screen poster for the plumbing of the world** — a loud, friendly, Lichtenstein-meets-public-utilities celebration of the boring miracles that keep the lights on. The conceit: "infra.day" is treated as a fictional civic holiday, the one day a year a town throws a parade for its water mains, fiber trunks, load balancers, and the people who babysit them at 3 a.m. The site is the commemorative wall-poster for that parade — the kind printed in four flat spot colors on cheap newsprint, pinned above a server-room coffee machine, slightly off-register so the cyan ghosts a millimeter past the black. The mood is **warm, gregarious, gently theatrical**. Pop-art (1% in the corpus — almost untouched) gives us thick contour lines, Ben-Day dot fields, halftone gradients, speech-balloon callouts, and primary-adjacent flats — but we swap the canonical pop-art red/yellow/blue for a **terracotta-warm** earthenware palette so the whole thing reads like a 1962 poster left in the sun: sun-baked clay, burnt apricot, dusty teal shadows, oat-paper ground. Think Roy Lichtenstein if he'd done a WPA mural about uptime; think Corita Kent's joyful serigraphs about ordinary infrastructure; think the cover of a children's "how a city works" book that grew up and learned about BGP. Nothing here is sleek or chrome or "enterprise." It is hand-pulled, slightly imperfect, and proud of it. The tone of voice is the friendly tour guide who genuinely loves the boiler room. This is **not** a SaaS landing page. No pricing tiers, no "trusted by" logo wall, no signup form above the fold. It is a story-poster you scroll through like reading a comic strip about the day the infrastructure got its parade. ## Layout Motifs and Structure The structure is a **masonry** layout (8% in the corpus — underused) treated as a **printed broadsheet pinned to a corkboard**: irregular-height "poster panels" of varying widths packed tight, like clippings, ticket stubs, and torn poster sections overlapping on a wall. The masonry is *deliberately ragged* — columns of unequal width (a fat 5fr lead column flanked by a narrow 2fr ticker rail and a medium 3fr column), gutters of a generous `clamp(20px, 3vw, 44px)`, and panels rotated by tiny amounts (`-1.4deg` to `+1.1deg`) so the whole board looks tacked up by hand at the end of a long shift. Composition rules: - **The masthead** is a full-bleed top band — the parade poster's title block — with the words "infra.day" set enormous in the display face, a thick black 5px contour stroke, a halftone-dot terracotta fill, and a hand-drawn bunting of pennant triangles strung corner to corner. Off-register: a 2px-offset cyan-ghost duplicate of the title sits behind the black. - **Below the masthead**, the masonry board begins. Panels are not uniform cards — they're a mix of: tall "float-portrait" panels (a single piece of infrastructure rendered as a flat pop-art illustration), wide "strip-comic" panels (3–4 frames with speech balloons telling a micro-story, e.g., "The Pager at 03:14"), square "Ben-Day swatch" panels (pure decorative dot fields with a one-line caption), and a narrow vertical "ticker rail" that runs the full board height like a torn strip of telex tape, scrolling counters. - **Off-grid intrusions:** thick black contour lines and bunting strings cross panel boundaries — drawn on a single fixed SVG overlay — so the masonry reads as one continuous poster rather than disconnected tiles. A few halftone "spotlight" cones leak diagonally across two or three panels. - **The footer** is the "printed in four colors / no rights reserved, please repost" colophon strip — registration crop-marks in the corners, a tiny printer's-mark rosette, the spot-color bars (the four palette swatches as a CMYK-style strip), all set small in the mono face. - **Spatial rhythm:** masonry resolves to a single column on narrow viewports, panels un-rotate to 0deg for legibility, and the bunting reflows as a simple top border. On wide viewports the board can be 3–4 ragged columns wide and the eye is meant to wander, not march. ## Typography and Palette **Typography — garamond-classic as the unexpected lead voice (1% in the corpus — nearly virgin), against a pop-art display face and a workshop mono.** - **`EB Garamond`** (Google Fonts, regular + italic + 500/600) — the body voice and, surprisingly, the *editorial backbone* of the whole poster. Long captions, the micro-essays inside strip panels, and the "field notes" run in EB Garamond at `clamp(16px, 1.05vw + 11px, 19px)`, leading `1.62`, measure capped at `62ch`. The choice is the joke and the soul of the design: a stately Renaissance book face describing pager rotations and TLS handshakes, the way an old encyclopedia would dignify "the humble sewer." Italics carry asides and the names of services. Drop-cap the first letter of each strip-essay in the display face for a comic-book "POW" feel. - **`Bungee`** (Google Fonts, regular + Bungee Shade for the masthead) — the display / poster face. Used for "infra.day," panel titles, speech-balloon SHOUTS, and the bunting letters. Heavy, square-ish, built for signage; gets the 5px black contour stroke and halftone-dot fill treatment. Bungee Shade provides the built-in drop-shadow layer for the masthead's off-register ghost. Set in ALL CAPS for titles, generous letter-spacing `0.04em`. - **`Space Mono`** (Google Fonts, regular + bold) — the workshop / instrument voice. The ticker-rail counters, timestamps ("03:14:07"), the colophon strip, crop-mark labels, and any "raw output" snippet. 13–15px, letter-spacing `0.02em`. This is the only "tech" typographic gesture and it's intentionally tiny and marginal — the machine whispering under the hand-pulled poster. Pairing logic: a 16th-century book face (calm, literate) + a 21st-century signage face (loud, friendly) + a monospace (precise, marginal) = "scholarly affection for unglamorous machines," which is the entire thesis. **Palette — terracotta-warm (3% in the corpus), the pop-art primaries reskinned as fired clay:** - `#E8DCC4` — **oat newsprint** — the paper ground; everything sits on this warm off-white. - `#C8552A` — **kiln terracotta** — the dominant flat; masthead fill, primary contour-stroked shapes, bunting. - `#E8A04C` — **burnt apricot** — the secondary flat; Ben-Day dot fields, highlight panels, "sunlight" tones. - `#3F6F6B` — **dusty teal** — the cool counterweight; shadow shapes, the off-register cyan-ghost (used at ~70% opacity), secondary illustration fills. - `#7A3A22` — **scorched umber** — deep accent for the deepest shadow flats and underlines. - `#1C1A17` — **press black** — every contour line, every body-text glyph, the registration crop-marks. Not pure `#000` — a warm near-black, like cheap ink. - `#F4ECDB` — **bleached margin** — the lightest paper tone, used for speech-balloon interiors and panel insets. Usage discipline: flats are FLAT (no CSS gradients except authored halftone-dot SVG patterns), every colored shape that matters gets the press-black contour, and the off-register ghost (a 2px-offset duplicate in dusty teal at 70%) appears on the masthead and on hovered panel titles only — used sparingly so it stays a delight, not a tic. ## Imagery and Motifs **Imagery — water-bubbles (6% in the corpus) reimagined as pop-art Ben-Day-dotted bubble fields, plus flat serigraph illustration. Zero photography. Zero 3D render. Zero stock vector.** Every illustrative element is a hand-built SVG in the silk-screen idiom: - **The hero illustrations** are flat, contour-stroked pop-art renderings of infrastructure given a parade-float dignity: a water tower wearing a paper crown; a coil of fiber-optic cable rendered like a garden hose with light "leaking" out as a stream of dotted bubbles; a stack of pancakes that is secretly a load balancer (each pancake a server, syrup = traffic); a humble bollard light standing like a lone sentinel. All in 2–3 flat terracotta-family colors + black contour + a halftone-dot shadow. - **Water-bubbles as the recurring motif:** rising columns of perfectly circular bubbles, each bubble *not* a gradient sphere but a flat circle filled with a Ben-Day dot pattern, outlined in 3px press-black, drifting upward with a gentle counter-rotational sway. They appear leaking from cables, rising from a "data lake" panel, and as the ambient background texture of the ticker rail. They are the design's signature — friendly, fizzy, slightly absurd. - **Ben-Day dot fields & halftone gradients:** authored as SVG `` tiles (a 6px grid of 2.4px dots) in apricot and teal; used to "shade" flat shapes and to fill the "swatch" masonry panels. Halftone *gradients* (dots growing from 1px to 4px across a span) simulate shading on the larger floats. - **Speech balloons & burst callouts:** classic comic-book balloons with the pointed tail, and the spiky "BAM!"-style burst shapes — used for the strip-comic micro-stories and for one-word captions ("UPTIME!", "FAILOVER!", "ON CALL"). Hand-lettered feel via Bungee. - **marble-classical accents (6% in the corpus):** exactly one recurring nod to permanence — small classical motifs rendered in the same flat pop-art line: a Doric column drawn as a stack of servers with a fluted shaft; a laurel wreath around the "infra.day" title; an egg-and-dart border on the colophon strip; a marble bust of a generic "Patron Saint of Uptime" on a plinth in one panel. Rendered FLAT in oat + umber with black contour — marble as a *drawing*, never a texture. - **Print artifacts as decoration:** registration crop-marks in viewport corners, a printer's rosette in the footer, faint 4%-opacity Perlin-noise "newsprint tooth" over the whole viewport (one fixed SVG filter), and a deliberate 1px CMYK-style mis-registration halo on a handful of shapes. No icon library. No emoji. Every glyph that isn't text is a purpose-built SVG drawing. ## Prompts for Implementation **Storytelling spine (HTML structure):** the site is a single long page that reads like a commemorative parade poster top-to-bottom in four to six minutes. No router, no SPA, no traditional nav menu. ```
…
…
…
…