# Design Language for lower.bar ## Aesthetics and Tone lower.bar is the imagined digital estate of a Victorian engineer who, in 1887, built a signal tower on a foggy moor and somehow wired it to the internet. The aesthetic is **victorian-ornate colliding with Frutiger Aero clinical clarity** — the paradox is the point. Ornate brass-and-mahogany framing contains information in the precise, humanist typefaces of an airport departures board: **Nunito Sans** for body copy, **Libre Baskerville** for decorative drop-caps and section ornaments, **Fira Code** for any code or technical asides. The tone is **pastoral-romantic with tech substrate**: think of a love letter written in copperplate ink on vellum, sent as a TCP/IP packet. The site does not sell anything. It does not explain a product. It is a *threshold* — a place where the domain name becomes a manifesto. "lower.bar" reads simultaneously as a pub sign swaying over a misted cobblestone lane, as a signal-processing baseline, and as a declaration that the bar for beauty in digital space has been set too high by the wrong people and must be set lower — closer to the earth, closer to lived experience. The color palette is **deep burgundy as the primary ground**, supported by aged brass, fog-white vellum, and a single accent of electric signal-green that appears only in interactive states. This is `deep-burgundy` — rare in the corpus (burgundy-cream sits at only 3%) — used not as luxury-wine warmth but as Victorian wallpaper saturated with tobacco smoke and quiet authority. Visual inspiration: the decorative chapter headers of an 1890 engineering manual, combined with the glass-and-steel clarity of a Zürich SBB train departure board, combined with the atmospheric photography of a fog-covered Yorkshire moor at dusk. ## Layout Motifs and Structure The page is structured as **stacked-sections** — a deliberate choice against the corpus's dominant centered (88%) and full-bleed (75%) approaches. Each section is a discrete panel, framed by a thin `1px` rule in aged-brass (`#B8960C`), with Victorian corner ornaments rendered as inline SVG in each corner of the section boundary. The panel metaphor is a **museum display case**: each section contains its content the way a Victorian natural history case contains a pinned specimen — precisely, beautifully, with a handwritten label. **Section rhythm (top to bottom):** 1. **The Signal Header** — full viewport height, fog texture over deep burgundy ground, the wordmark `lower.bar` set large (clamp(7rem, 16vw, 18rem)) in Libre Baskerville italic with a hand-calligraphic underline drawn in animated SVG. A single `↓` glyph pulses very slowly below. 2. **The Manifesto Panel** — narrow centered column (max 640px), Nunito Sans body at 1.25rem/1.85 line-height. Three short paragraphs, each introduced by a drop-cap in Libre Baskerville at 4rem, tinted brass. No bullet lists. No headers. Prose only. 3. **The Signal Log** — a 3-column grid of "signal entries" — each one a dated dispatch, styled as a telegraph form: a thin ruled border, a `FROM:` / `TO:` / `DATE:` header block in Fira Code 0.75rem, then the body in Nunito Sans. Columns collapse to a single column on mobile. 4. **The Map Panel** — an SVG schematic of a moor landscape in outline only (no fill, 1px brass stroke), with three pinned signal towers. Each tower is a clickable node; clicking expands a **progressive-disclosure** drawer below the map — revealing detailed text about that "signal." This is the site's primary interactive gesture. 5. **The Colophon** — a narrow footer, styled as a Victorian letterhead closing: `Transmitted from lower.bar / Signal Season 2026 / All rights waived in favor of the fog.` **Spatial logic:** Sections are separated by 8rem vertical whitespace, not by horizontal rules or color changes. The vertical breathing space is the moor itself — empty, atmospheric, deliberate. No sticky navigation. No floating buttons. The user scrolls as they would walk a footpath. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark**: [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville), weights 400 italic and 700. Used for the main wordmark, drop-caps, section ornament labels, and any text that must carry Victorian historical weight. The italic at large sizes has the exact optical quality of a 19th-century book title page. - **Body / Navigation / UI**: [`Nunito Sans`](https://fonts.google.com/specimen/Nunito+Sans), weights 300 and 600. The Frutiger-clean humanist sans-serif that reads like a Swiss airport sign. Used at 1.25rem for all body text. The deliberate collision with Libre Baskerville's antiquity is the visual thesis of the site. - **Technical / Code / Labels**: [`Fira Code`](https://fonts.google.com/specimen/Fira+Code), weight 400. Used for telegraph-form headers, signal metadata, any numeric or code-formatted content. Monospaced clarity in a Victorian decorative frame. **Palette (hex values):** | Role | Name | Hex | |---|---|---| | Primary Ground | Deep Burgundy | `#4A0E1A` | | Surface | Burgundy Mid | `#6B1A2A` | | Text / High Contrast | Fog White | `#F0EDE6` | | Decorative Accent | Aged Brass | `#B8960C` | | Signal Accent (interactive only) | Electric Green | `#3DFF8F` | | Muted Secondary | Tobacco Smoke | `#8B7355` | | SVG / Illustration | Ink Line | `#2C1810` | The palette has **zero gradients** — every surface is flat. The corpus uses gradient at 78%; this site refuses gradients entirely. Depth comes from layered flat panels and the texture of a subtle SVG noise filter applied to the burgundy grounds. **Texture:** A single `` SVG filter applied at 3% opacity across all burgundy panel backgrounds, simulating the tooth of aged wallpaper or vellum. No photograph, no stock texture — procedural, infinitely scalable. ## Imagery and Motifs **Imagery is strictly minimal and illustrative — no photography.** The corpus uses photography at approximately 85% of designs. lower.bar uses **zero photographs**. All visual content is either inline SVG or CSS-drawn geometry. **The visual motif system:** 1. **Victorian corner ornaments** — Four-way mirrored SVG floral-geometric frames, 32×32px, placed at section boundaries. Drawn in aged brass (`#B8960C`) at 1px stroke weight. They echo the ornamental borders of Victorian scientific journals — precise, angular botanical geometry, not lace. 2. **The Signal Tower schematic** — The primary recurring illustration: a wireframe tower in profile, drawn as a single continuous SVG path, 1px ink-line stroke. No fill. Appears at three sizes: 400px tall in the map section, 120px in the colophon, and 24px as a favicon/micro-icon in the tab title. The tower has three horizontal signal arms that animate in a slow Morse-code-like rhythm (SVG `stroke-dasharray` animation) — representing transmission, not decoration. 3. **Moor topography lines** — Horizontal parallel lines in tobacco smoke (`#8B7355`), spaced 8px apart, with slight sinusoidal variation simulating rolling moorland. Used as a background texture in the map section only — CSS `repeating-linear-gradient` approximating surveyor contour lines. 4. **Telegraph form microtype** — Each signal log entry includes a miniature printed-circuit-board trace motif in the top-right corner: an SVG right-angle trace pattern (three connected line segments at 90° angles) in Fira Code scale. This is the **tech motif** — not futuristic, not cyberpunk, but the technology of 1890 rendered in the visual language of 1990 PCBs. 5. **Progressive-disclosure chevrons** — When a signal tower node is clicked, a chevron drawn in electric green (`#3DFF8F`) rotates 180° and an expandable drawer slides open. Electric green appears nowhere else on the page — its appearance means "active," "responding," "transmitting." ## Prompts for Implementation **The story to tell.** A visitor arrives at lower.bar as if arriving at a remote signal station on the edge of a Victorian moor. The fog is thick. A tower blinks in the distance. The site asks nothing of the visitor — no email capture, no CTA, no product pitch. It simply transmits. The visitor reads dispatches from the signal log, explores the map, and leaves having experienced something quiet and strange. **Section-by-section implementation guidance:** **Section 1 — The Signal Header:** - Full viewport height. Background: `#4A0E1A` with SVG `` noise filter at 3% opacity on a `` covering the viewport. - Wordmark `lower.bar` in Libre Baskerville italic, `clamp(6rem, 14vw, 16rem)`, color `#F0EDE6`. Vertically and horizontally centered. - Beneath the wordmark: an SVG underline path that draws itself on load — `stroke-dasharray` animation, 2 seconds, ease-in-out — in aged brass `#B8960C`. The path is not a straight line; it has a slight calligraphic waver (bezier curve with 3px vertical variance). - Below that: the character `↓` in Nunito Sans 300, `#8B7355`, with a CSS `animation: pulse 3s ease-in-out infinite` that cycles opacity between 0.4 and 1.0. No bounce. No movement. Opacity only. - No navigation bar. No hamburger menu. The `↓` is the only affordance. **Section 2 — The Manifesto Panel:** - Max-width 640px, centered in the viewport. - Victorian brass corner ornaments (SVG) at all four corners of the section boundary, 32px size. - Three paragraphs of prose. Each paragraph begins with a drop-cap: `::first-letter { font-family: 'Libre Baskerville'; font-size: 4rem; font-style: italic; color: #B8960C; float: left; line-height: 0.85; margin-right: 0.1em; padding-top: 0.15em; }`. - Body text: Nunito Sans 300, `#F0EDE6`, 1.25rem / 1.9 line-height. The text is a short manifesto about why lower is sometimes higher — pastoral, philosophical, not technical. - Entrance animation: text fades in progressively, paragraph by paragraph, using `IntersectionObserver` with a 300ms delay between paragraphs. **No parallax.** No movement — pure opacity fade. **Section 3 — The Signal Log:** - Three-column grid on desktop (min-width: 900px), single column on mobile. - Each entry styled as a printed telegraph form: - Outer container: `border: 1px solid #B8960C; padding: 1.5rem; background: #6B1A2A;` - Header block: `FROM: lower.bar / TO: YOU / DATE: YYYY-MM-DD` in Fira Code 0.75rem, `#8B7355`. The slash is a literal `/` — telegraph syntax, not a visual separator. - Body: Nunito Sans 300, `#F0EDE6`, 1rem. - Top-right corner: SVG PCB-trace micro-motif, 24×24px, `#B8960C` at 0.5 opacity. - Entrance: each card uses `IntersectionObserver` to fade in + slide up 20px on scroll. Stagger 150ms per card. **Avoid full parallax scroll** — the corpus already overuses parallax at 81%. **Section 4 — The Map Panel:** - Full-width panel, background `#4A0E1A` with moor contour lines. - SVG schematic map: three signal towers at coordinates roughly (20%, 50%), (50%, 35%), (75%, 60%) relative to the SVG viewport. Each tower is the wireframe tower schematic described above, at 120px height. - Connecting lines between towers: dashed SVG lines in aged brass, `stroke-dasharray: 4 8`, animated with `stroke-dashoffset` to appear to flow from left to right — simulating signal transmission. - Each tower is wrapped in `