# Design Language for infra.day ## Aesthetics and Tone infra.day is a **sci-fi** atrium dressed in the calm, sun-flecked light of a Sunday afternoon. It imagines a future infrastructure — not the grim industrial pipework of cyberpunk, but a **solarpunk observatory** where civic systems (water, transit, power, mesh) are presented like specimens in a botanical conservatory. The site behaves as if you have wandered into the lobby of a planetary maintenance bureau circa 2087, where every console is rimmed in brass, every screen is bordered by a fern, and the whole atmosphere is **calm-serene** — a place of patient stewardship, not crisis. The mood draws from three deliberate, slightly contradictory references: - **Hayao Miyazaki's *Castle in the Sky*** — verdant ruins, drifting motes of pollen, the gentle hum of ancient machinery half-swallowed by moss. - **Mid-1970s NASA documentation** — a softer, more humanist sci-fi, when futurism still wore turtlenecks, drank coffee from ceramic mugs, and typeset its mission reports in Garamond. - **Ezra Stoller's photographs of modernist atriums** — long shadows, glass walls, indoor gardens framed by cantilevered concrete. The result is **sci-fi without coldness**: holographic readouts that breathe, metallic surfaces softened by warm afternoon sun, and the sense that someone, somewhere, is gently tending to the planet's systems — like a librarian watering the ferns between shelves of mission logs. The tone is unhurried, contemplative, and quietly hopeful. There are no alarms, no dashboards in red. The infrastructure is fine. The infrastructure is being cared for. Today is a good day, and we have made it so. ## Layout Motifs and Structure **Primary layout: portfolio-grid** with a curatorial, exhibition-catalog discipline. The page presents twelve "infrastructure days" — one card per day, arranged in a 4-column × 3-row **portfolio-grid** on desktop (collapsing to 2×6 on tablet, 1×12 on mobile). Each card represents a single day in the operational life of the planet: *Aqueduct Tuesday*, *Solar Sabbath*, *Mesh Monday*, *Foundry Friday*, etc. The grid is not a product catalog — it is a *portfolio*, an exhibition of days. **Grid Specifications:** - **Cell aspect ratio:** 4:5 (portrait), giving each "day" the proportions of a museum display card. - **Gutters:** 28px horizontal, 36px vertical — generous but disciplined. - **Outer margins:** clamp(48px, 6vw, 120px), creating a deliberate matting effect like prints in a gallery. - **Cell construction:** Each cell is a layered composition: (a) a botanical photograph or illustration as the base layer, (b) a translucent brass-plated "instrument panel" overlaid in the lower third, (c) a Garamond title set in the upper-left corner with a hand-drawn registration mark. **The Tilt-3D System:** The grid is the soul of the interaction. On hover (or on touch-hold for mobile), each card responds to cursor proximity with a subtle **tilt-3d** transform, calculated from the cursor's offset within the card: ``` rotateY = (cursorX - cardCenterX) / cardWidth * 8deg (max ±8deg) rotateX = -(cursorY - cardCenterY) / cardHeight * 8deg (max ±8deg) ``` The transform-origin is the card's center, with `perspective: 1400px` set on the parent grid. A subtle parallax happens *inside* the card too: the brass panel layer translates 12px in the opposite direction of the tilt, the title layer translates 6px in the same direction, and the botanical photograph stays still. This produces a layered-depth effect — the card feels like a small dimensional diorama, not a flat rectangle. **Header / Atrium Zone (above the grid):** A full-bleed atrium frame: a single horizontal band, 38vh tall, containing the site name "infra.day" set in massive Cormorant Garamond italic, suspended over a slowly drifting horizon — a vector illustration of a botanical conservatory roof seen from inside, with steel ribs, glass panes, and a fern frond softly intruding from the upper-right corner. A small brass plaque in the lower-left reads *"A Portfolio of Operational Days · Vol. III"*. **Footer / Colophon Zone (below the grid):** A second atrium band, mirror-image of the header. Contains a hand-drawn compass rose, a paragraph of Garamond-set "stewardship notes," and a single line in mono: `bureau.of.infrastructure // sol.system // sunday hours`. No social icons. No newsletter signup. **No conventional navigation.** The portfolio-grid is the navigation. Clicking a day card expands it to a full-viewport detail view via FLIP animation (1200ms ease-out), where the card's botanical layer fills the screen and the brass panel slides up from the bottom edge to occupy the lower 40%, becoming a readable instrument panel of that day's "infrastructure logs." ## Typography and Palette **Typography** All fonts are Google Fonts. - **Display / Atrium Title:** **"Cormorant Garamond"** (Google Fonts) — the chosen seed typography is **garamond-classic**, and Cormorant is its most expressive contemporary heir. Used in 300 weight italic for the "infra.day" wordmark at clamp(4rem, 11vw, 10rem). The italic forms have long, calligraphic descenders that evoke 17th-century French printing while holding their own at massive scale. Letter-spacing: -0.015em. The wordmark is rendered as text, not an image, so it can animate. - **Card Titles / Section Headings:** **"EB Garamond"** (Google Fonts) — a more workhorse Garamond, set at 1.625rem, 500 weight, slight small-caps treatment for the day labels (`Aqueduct Tuesday`, `Solar Sabbath`). Letter-spacing: +0.06em on the small-caps. EB Garamond's robust hairlines hold up against the busy botanical backgrounds where Cormorant would dissolve. - **Body / Stewardship Notes:** **"EB Garamond"** (Google Fonts) at 400 weight, 1.0625rem, line-height 1.7, max-width 62ch. Generous, readable, conservatory-literature warmth. - **Instrument Panels / Telemetry:** **"JetBrains Mono"** (Google Fonts) at 0.8125rem, 400 weight, used inside the brass instrument panels for "live" telemetry strings: `mesh.uplink: 99.94% · cycle 41,302 · temp +18.4°C · last steward: M. Aalto`. Used sparingly — never for body content, only for the diegetic readouts. - **Marginalia / Plaques:** **"EB Garamond"** italic at 0.875rem, used for the gallery-style brass plaques below each card and in the colophon. **Palette — Complementary** The chosen seed palette is **complementary**: a single complementary pair (warm copper-orange against deep teal-cyan) anchors the entire site, with neutrals derived from desaturated extensions of both poles. This produces the exact "warm afternoon sun against cool conservatory glass" tension the design needs. - `#0d2b2e` — **Atrium Deep** (deep teal, near-black). The primary background. The color of conservatory glass at dusk. - `#1a3f43` — **Patina Mist** (mid-teal). Card frames, secondary surfaces. - `#3d6b6a` — **Verdigris** (oxidized copper-teal). Borders, instrument-panel rims. - `#c47a3e` — **Brass Sun** (warm copper-orange — the complementary anchor). Used for instrument panels, accent rules, and the atrium-frame chrome. This is the warm pole opposite Atrium Deep. - `#e8a86b` — **Pollen Drift** (light brass). Hover states, telemetry highlights, and the soft glow that drifts across the page. - `#f4ead6` — **Almanac Cream** (parchment / paper). Used for body text on dark backgrounds and as the page color of the Stewardship Notes block at the bottom. - `#7d9b86` — **Fern Sage** (muted desaturated green, derived from the teal pole shifted toward natural foliage). Used for botanical illustration accents and the live status dots. - `#9a4a28` — **Burnt Sienna** (a deeper, darker complementary echo). Used for the registration marks, the compass rose, and printed serial numbers on the brass plaques. The palette is deliberately warm-leaning despite the deep teal base — sunlight wins. The complementary tension between #0d2b2e and #c47a3e is the page's heartbeat: the eye is drawn to brass, but rests in teal. ## Imagery and Motifs **Core Visual Motifs** 1. **Nature-Elements (the chosen imagery seed):** Each of the twelve day-cards is anchored by a botanical photograph or detailed vector illustration of a single plant specimen. These are not stock nature shots — they are deliberately curated to feel like 1950s botanical-monograph plates: a fern unfurling against deep teal, a single seed pod, a water-lily floating on dark water, a copper-tinted maple leaf, a moss colony on volcanic rock, a fiddlehead, a single tendril of climbing vetch. Each plant is selected to symbolically rhyme with its day's infrastructure subject (the aqueduct day pairs with water-lily, the solar day with sunflower spiral, the mesh day with mycelial network photographs). 2. **Retro-Patterns (the chosen motifs seed):** The brass instrument panels are decorated with hand-drawn pattern motifs sampled from 1960s–1970s technical manuals: dotted Ben-Day fields, hand-stippled gradients, Letraset rule-borders, registration crosshairs, perforation marks, and serial-number stamps. Every panel has at least three retro-pattern decorations — a stippled gradient bar, a registration mark in the corner, and a Letraset-style rule terminating in a small diamond. These patterns are SVG, drawn at low complexity, and stay crisp at any zoom. 3. **Brass Instrument Panels:** Each day-card carries a horizontal brass panel in the lower third — a thin rectangle of #c47a3e with a 1px #9a4a28 inner stroke, slightly bevelled with a CSS `linear-gradient` from #e8a86b at top to #c47a3e at bottom. The panel contains the day's name in EB Garamond small-caps, a single telemetry line in JetBrains Mono, and three tiny circular indicator dots (Fern Sage = nominal, Pollen Drift = note, Burnt Sienna = attention). 4. **Pollen Particles (Ambient Motion):** A constant, very slow drift of 18–24 pollen-mote particles across the entire viewport. Each is a 2–4px circle in #e8a86b at 12–18% opacity, drifting at 8–14px/second on shallow sinusoidal paths. They are decorative atmosphere — sunlight through dust in a glass conservatory. Generated in a single canvas layer at 30fps to keep CPU minimal. 5. **The Hand-Drawn Compass Rose:** A single SVG illustration in the footer, drawn in #9a4a28 strokes, evoking the back-cover of a 1960s field manual. Its needles slowly rotate (one full revolution per 90 seconds) — the only constantly-moving element on the page besides the pollen. 6. **Registration Crosses (`+`):** Tiny printer's registration marks in #9a4a28 placed at every major grid intersection — visible only on close inspection, but they reinforce the "printed catalog" metaphor. Three crosses per card: one at top-left of the card, two flanking the brass panel. 7. **Conservatory Architecture:** The header and footer atrium bands feature a thin SVG illustration of a Victorian-modernist conservatory roof — steel ribs, hexagonal glass panes, a fern frond intruding from one side. Drawn in #3d6b6a at 0.8 opacity, it functions as a horizon line. ## Prompts for Implementation **Page Narrative:** Treat infra.day as a single bound volume — *A Portfolio of Operational Days, Volume III* — that the visitor has just opened on a reading desk in a glass-walled conservatory, late on a Sunday afternoon. The page should feel less like a website and more like sliding a portfolio book out of its sleeve and turning the cover. There is no "pitch," no "value proposition." There is only the atrium, the twelve days, and a quiet stewardship. **Scene 1 — Atrium Open (0–1500ms):** The page loads to Atrium Deep (#0d2b2e). The conservatory roof illustration draws itself in #3d6b6a using `path-draw-svg` over 1200ms — steel ribs first, then glass panes, then the fern frond unfurling last from the upper-right corner. As the fern completes its draw, the wordmark "infra.day" fades in at 0 → 1 opacity over 600ms in Cormorant Garamond italic, with the dot in `infra.day` rendered as a small Brass Sun (#c47a3e) circle that pulses once. Pollen particles begin drifting from offscreen at t=1200ms. No skip button. No hero CTA. Just the atrium, breathing. **Scene 2 — Portfolio Reveal (1500–3500ms):** The twelve day-cards reveal in a **stagger** sequence, 80ms between each, using a soft spring (stiffness 180, damping 22). Each card enters with: opacity 0 → 1, translateY 24px → 0, scale 0.96 → 1. The botanical layer of each card fades in *first*, then the brass panel slides up from beneath the card's bottom edge with a `clip-path` reveal taking 400ms. The Garamond title appears last, character-by-character with a 30ms stagger using a `path-draw-svg` simulation on a stroked text outline — as if a calligrapher's nib is writing each letter. **Scene 3 — Curator's Pass (3500ms onward, autonomous):** Once cards are revealed, a soft "curator's spotlight" pulses across the grid — a 200px-radius radial gradient of Pollen Drift at 8% opacity, drifting from card to card every 4 seconds in a soft S-curve. This continues until the user moves their cursor, at which point the spotlight follows the cursor instead (cursor-follow). When the cursor is idle for 8 seconds, the curator's spotlight resumes its automatic tour. **Scene 4 — Hover and Tilt-3D:** When the cursor enters a card's bounding box, the **tilt-3d** transform begins. The transition uses a fast spring (stiffness 280, damping 24, response 0.2s). On cursor exit, the card returns to rest with the same spring. Inside the card, the layered parallax of botanical / panel / title gives the impression of a small physical specimen box catching the afternoon light. The brass panel's gradient also subtly shifts — its highlight band tracks the cursor as if catching reflected light. **Scene 5 — Card Detail (FLIP Expansion):** Clicking a card triggers a FLIP animation (1200ms `cubic-bezier(0.65, 0, 0.35, 1)`) where the card expands to fill the viewport. The other 11 cards fade to opacity 0.08 and blur 8px. The expanded card's botanical layer scales to fill the viewport, the brass panel grows into a full-width instrument console at the bottom (40vh tall), and Stewardship Notes set in EB Garamond appear in a column on the upper-right, max-width 42ch, fading in with a 400ms stagger. A small "← return to portfolio" plaque appears in the upper-left in EB Garamond italic — the only navigation element. Pressing Escape or clicking the plaque reverses the FLIP. **Scene 6 — Idle Drift:** If the user is idle for 30 seconds anywhere, the page enters a "conservatory drift" state: pollen density doubles, the curator's spotlight slows by 40%, and the wordmark in the atrium very subtly breathes (scale 1.0 → 1.005 → 1.0 over 6 seconds). The site is content to wait. **Hard Avoidance List:** - **No CTAs.** No "Get Started," no "Sign Up," no "Book a Demo." This is a portfolio, not a funnel. - **No pricing blocks.** No tiers. No "$/month." - **No statistics grids.** No "10,000+ happy customers." The brass panels carry diegetic telemetry only — they are not metrics dashboards. - **No testimonials, no logos-of-customers strip, no FAQ accordion.** - **No light mode.** The atrium is always at dusk. - **No emoji icons.** Only hand-drawn SVG glyphs in the brass-plaque tradition. - **No sticky header.** The atrium frame is a single moment, not a persistent chrome. **Technical Implementation Notes:** - Use a single `` for pollen particles, sized to viewport, redrawn at 30fps via `requestAnimationFrame`. Pause when `document.hidden`. - Tilt-3D should be implemented with `transform: perspective(1400px) rotateX() rotateY()` on the card root, with inner layers transformed independently. Use `will-change: transform` only during interaction, removed after 200ms idle, to avoid GPU memory bloat. - The Garamond character-by-character draw on titles can be implemented with SVG `` + `stroke-dasharray` / `stroke-dashoffset` animation — Cormorant Garamond has the contrast to read well even when stroked. - Botanical photographs should be served as WebP, ~1200×1500 max, with a duotone CSS filter (`hue-rotate` and `saturate`) tuned to harmonize with the Atrium Deep palette — a deep-teal duotone that lets each plant feel like a 1970s monograph print rather than a stock photo. - All animations honor `prefers-reduced-motion: reduce` — pollen freezes, tilt-3D becomes a 1px translate, FLIP becomes an instant cross-fade. The atrium remains beautiful at zero motion. ## Uniqueness Notes **Differentiators from other designs in this batch:** 1. **Solarpunk-conservatory framing of sci-fi:** Most sci-fi designs in the corpus default to cyberpunk's harsh neon, terminal greens, or HUD stat-grids (sci-fi appears at only 5% — already underused, and almost always in its colder mode). This design does the opposite: it pairs sci-fi with **calm-serene** tone, **garamond-classic** typography, and **nature-elements** imagery to produce a *warm* sci-fi — a humanist 2087 where infrastructure is gardened, not deployed. There is no other design in the batch that uses Garamond italic at display scale against a brass-and-teal complementary palette over botanical photography. 2. **Portfolio-grid as the entire navigation, treated as a museum catalog:** The portfolio-grid layout (deeply underused in the frequency analysis — not even reaching the 5% threshold in the layout category) is here treated not as a project showcase but as a curated exhibition of *days*. The "twelve days" framing is itself a unique conceptual hook — no other design organizes its content as a calendar of operational days, each presented as a museum card. 3. **Tilt-3D as diegetic specimen-box behavior, not as a "wow" effect:** Tilt-3D appears at only 6% in the frequency analysis. Most uses are gimmicky "card flips" on glassmorphic cards. Here, tilt-3D is justified by the metaphor — each day is a small physical specimen box that catches the conservatory light. The internal parallax (botanical / brass / title moving at three different rates) makes the tilt feel architectural rather than decorative. 4. **Complementary palette anchored on a brass-vs-teal pair, not on red-vs-cyan or orange-vs-blue clichés:** Complementary palettes appear at only 7% and tend toward the warm-cool obvious. This palette uses #c47a3e (oxidized brass-orange) against #0d2b2e (deep conservatory teal) — a very specific historical reference (mid-century laboratory hardware against patinated metal) that no other design in the batch will mirror. 5. **Retro-patterns deployed as printer's marginalia, not as background tile:** Retro-patterns are usually used as full-bleed tiled backgrounds (vapor grids, pop-art dots). Here they are used as *marginalia* — registration crosses, Letraset rules, stippled gradients on instrument panels — recreating the texture of a 1970s technical-manual page, which no other design adopts. 6. **No CTA, no funnel, no pitch:** The brief allowed CTAs; this design refuses them. The page is a portfolio you contemplate, not a product you buy. Combined with the calm-serene tone and the patient curator's spotlight, the experience deliberately resists the corporate-gradient default that dominates 92% of the batch's aesthetic. **Chosen Seed:** aesthetic: sci-fi · layout: portfolio-grid · typography: garamond-classic · palette: complementary · patterns: tilt-3d · imagery: nature-elements · motifs: retro-patterns · tone: calm-serene **Avoided Patterns Referenced from Frequency Analysis:** - Avoided **corporate** aesthetic (92% saturation — opted for sci-fi at 5%). - Avoided **gradient** palette (95% saturation — chose complementary at 7%). - Avoided **mysterious-moody** tone (94% saturation — chose calm-serene at 9%). - Avoided **mono** typography as a primary face (93% saturation — chose garamond-classic, with mono used only for diegetic telemetry). - Avoided **counter-animate** (90%) and **parallax** (68%) as headline patterns — chose tilt-3d (6%) as the primary interaction, with parallax used only inside the tilt as a layered-depth hint. - Avoided **centered** layout (91%) and **full-bleed** sections (44%) — chose portfolio-grid as the entire structural backbone.