# Design Language for gabs.boo ## Aesthetics and Tone **gabs.boo** carries the tension embedded in its own name: *gabs* suggests someone who talks — easily, warmly, with a slight excess — while *.boo* is a ghost's calling card, the domain extension that the internet assigned to things friendly-haunted and peculiarly alive. The site is built on the premise of a **retro-futuristic broadcast station that went silent in 1987 and just came back online** — a pirate radio tower on a mountain, its analog dials replaced by something glowing and geometric, its transmission restored but subtly wrong. The frequency is familiar; the signal is not. The aesthetic is **retro-futuristic** — not the chrome-and-bubble variety of Frutiger Aero, and not the dystopian neon sludge of cyberpunk. This is the *other* retro-future: the one drawn by industrial designers in 1962, where the year 2000 was going to have ribbed aluminum ceilings, brushed navy instrument panels, and sans-serif signage in gold leaf pressed onto dark enamel. A **Deco-industrial future**: the optimism of the World's Fair colliding with the weight of actual machinery. The tone is **grounded-earthy** — no levitation, no starfields, no empty infinity. The site sits on something real: raw concrete texture beneath the metallic surfaces, earth pigments bleeding through the navy, a heaviness that says *this machine has mass*. The retro-futurism is not escape; it is presence. The visitor is standing in the control room, not orbiting above it. The mood is **quiet authority interrupted by moments of precision**: long silences, then a calibrated movement, then silence again. The site does not perform excitement. It transmits. ## Layout Motifs and Structure The layout is **masonry** — but not the casual Pinterest waterfall that the corpus has used. This masonry is **instrument panel masonry**: a field of rectangular readout windows, each a different height, arranged like the gauges and displays on an aircraft cockpit's instrument cluster. The columns are fixed (three on desktop, two on tablet, one on mobile), and the blocks fill them in strict cascade order, but the **vertical heights vary deliberately** — some panels are squat two-line readouts, others are tall transmission logs. The dominant spatial language is **tight, dense, rectilinear**, with breathing room expressed not through whitespace between elements but through **inset padding within each panel** — the gap is interior, not exterior. Panels sit flush or near-flush to each other, separated only by a 1–2px hairline in `#8A9BB0` (a cool slate that reads as aged chrome on dark navy). **Navigation** is a slim horizontal bar at the top — single line, all-caps, letter-spaced — sitting above the panel field like the callsign strip on a radio console. No dropdown, no hamburger on desktop. On mobile it collapses to a three-dash icon that opens a full-height side panel. **Macro composition across the viewport:** - Top: callsign navigation bar (height: 44px, sticky) - Below: the full-bleed masonry panel field, edge-to-edge, no outer margin on large screens - Individual panels have internal padding of 20–28px - No footer in the traditional sense — the last row of panels terminates with a single full-width panel acting as a colophon/transmission-end strip **Scroll behavior:** The page is a single long vertical scroll. No horizontal scroll. No full-screen sections. No snapping. The masonry field simply continues, panel after panel, like flipping through a flight log. ## Typography and Palette **Typography (Google Fonts only — verified):** - **Display / Callsign wordmark**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all-caps, tight tracking (-0.03em), used for the `gabs.boo` wordmark at `clamp(4rem, 10vw, 10rem)` and for panel category labels (uppercase, 0.9rem, tracking 0.2em). Bebas Neue carries the blunt geometric authority of Deco-era industrial signage — every letter is a stamped metal plate. - **Panel body / Content voice**: [`IBM Plex Serif`](https://fonts.google.com/specimen/IBM+Plex+Serif) — weight 300 for long-form text, weight 500 for subheadings within panels. IBM Plex Serif is designed for readability in data-dense contexts while retaining a subtle bookish warmth. It bridges the machine-precision of the aesthetic with the human voice implied by "gabs." - **Data labels / Readout text**: [`IBM Plex Mono`](https://fonts.google.com/specimen/IBM+Plex+Mono) — weight 400, used exclusively for timestamps, status strings, coordinates, and any numeric value appearing inside a panel. Pairs with IBM Plex Serif as siblings from the same type family, creating tonal unity while distinguishing data from prose. - **Palette:** | Role | Name | Hex | |------|------|-----| | Ground (background) | Deep Navy | `#0D1B2A` | | Panel surface | Slate Navy | `#152236` | | Primary accent | Antique Gold | `#C8A84B` | | Secondary accent | Pale Metallic Silver | `#B8C8D8` | | Hairline / Chrome detail | Aged Chrome | `#8A9BB0` | | Warm earth bleed | Oxidized Bronze | `#7A5C3A` | | Text primary | Cream White | `#F0EAD6` | | Text secondary / muted | Dusty Slate | `#8898A8` | | Alert / Highlight | Transmission Red | `#C44D3A` | The palette is **navy-metallic**: the dominant field is deep navy with layered slate navy panels. Gold and silver provide the metallic register — antique gold for active/important elements, pale silver for structural chrome. The oxidized bronze leaks through as an earthy undertone, grounding the palette against pure coldness. ## Imagery and Motifs The visual world is **abstract-tech** — no photography, no portraits, no illustration in the traditional sense. All imagery is generated from three families of SVG-based form: **1. Instrument Overlays (inline SVG, rendered per panel)** Each panel may contain a header-area SVG overlay — a fragment of an instrument face: a partial arc indicating a gauge sweep, a crosshair reticle fragment, a signal-strength bar array (five vertical bars of decreasing height), or a waveform flatline with a single spike. These overlays are drawn in `Aged Chrome` (`#8A9BB0`) at 12–16% opacity, providing texture without competing with content. They are never centered; always edge-placed or corner-anchored. **2. Grain Overlay (CSS/SVG noise layer)** Every panel receives a **grain overlay**: a fine-grain noise texture at 4–6% opacity applied as a pseudo-element over the panel surface. This is critical to the earthy-grounded tone — without grain, the navy reads as pure digital screen; with it, the surface breathes like enamel on metal. The grain is implemented as an SVG `feTurbulence` filter with `baseFrequency="0.65"` and `numOctaves="3"`, applied via `filter: url(#grain)` at `mix-blend-mode: overlay`. **3. Art-Deco Geometric Borders (inline SVG, structural)** Panels flagged as "featured" or "hero" receive a thin Art Deco geometric border inset — not a simple rectangle, but a **stepped corner treatment**: the corner has a small notch cut at 45°, with a single-pixel gold line running parallel inside the panel edge for 40–60px before stopping. This is the most visible decorative element and should be used sparingly (no more than two panels visible at any scroll position). The line color is `Antique Gold` (`#C8A84B`), stroke width 0.5px. **Motif language summary:** - Waveform segments (sine curve fragments, SVG path, no fill, 1px stroke) - Grid-line overlays (faint, 1px, `#8A9BB0` at 8%) - Stepped Art Deco notch corners - Fine grain noise - Signal-bar arrays (5 bars, alternating filled/empty based on content state) - Transmission-end line: a full-width 1px rule in `Transmission Red` (`#C44D3A`) that appears only at the bottom of the page ## Prompts for Implementation **The story to tell.** The visitor arrives at `gabs.boo` and finds a transmission terminal — a field of readout panels arranged like a control room display from a broadcasting station. Each panel is a broadcast: a note, a project, a fragment of thought, a dated log entry. The station is someone's presence — warm, dense, talking too much in short bursts (*gabs*), haunting its own frequency (*.boo*). The panels don't slide in dramatically. They are simply *there*, as if the terminal has been running since 1987 and the visitor has just walked into the room. **Animation and interaction rules (elastic pattern):** - Panel entrance on page load uses **elastic easing** (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`) — each panel scales from 0.92 to 1.00 with a slight overshoot. Stagger the entrance with 40ms delay between panels in reading order (left-to-right, top-to-bottom in the masonry flow). Duration: 280ms per panel. - On hover, a panel undergoes a **subtle elastic lift**: `transform: translateY(-2px) scale(1.005)` with the same elastic easing at 160ms. The panel's hairline border brightens from `Aged Chrome` to `Antique Gold` simultaneously. - The grain overlay has a **micro-pulse**: every 8–12 seconds (randomized per panel), the grain opacity shifts from 5% to 9% and back over 600ms (ease-in-out). This is imperceptible at a glance but creates a sense of the surface *breathing*. - The Art Deco corner gold lines have a **draw-on entrance**: when the panel enters the viewport via IntersectionObserver, the gold lines animate from 0px to full length (40–60px) via `stroke-dasharray`/`stroke-dashoffset` over 500ms, delayed 200ms after the panel's scale entrance. - **No parallax on scroll.** The corpus overuses parallax (90%). This site scrolls as a single plane — the control room does not distort when you move through it. - **No stagger on scroll** — only on initial page load. After load, panels already on-screen are static; new panels entering the viewport via scroll simply fade-in at `opacity: 0 → 1` over 180ms, no transform. **Panel construction:** - Each panel is a `
` with `role="region"` and an `aria-label`. - Panel header: `Bebas Neue`, uppercase, 0.9rem, tracking 0.2em, in `Dusty Slate` (`#8898A8`), acting as a category/type label (e.g., `TRANSMISSION`, `LOG`, `PROJECT`, `SIGNAL`, `ARCHIVE`). - Panel title (if present): `IBM Plex Serif` 500, 1.15rem, `Cream White`. - Panel body: `IBM Plex Serif` 300, 1rem, `Cream White` at 85% opacity, line-height 1.65. - Panel timestamp/metadata: `IBM Plex Mono` 400, 0.75rem, `Dusty Slate`. **Layout specifics:** - Masonry implemented via CSS `columns` property (3 columns at >960px, 2 at 640–960px, 1 below 640px), `column-gap: 2px`. Each panel has `break-inside: avoid`. - Background: `Deep Navy` (`#0D1B2A`) with a very subtle radial gradient: `radial-gradient(ellipse 120% 80% at 30% 20%, #1A2D42 0%, #0D1B2A 60%)` — a barely perceptible lighter patch in the upper-left quadrant, as if a distant light source exists off-screen. - The grain filter SVG is defined once in the `` block of an invisible `` at the top of the ``, referenced by all panels. **AVOID:** - CTA buttons (no "Sign Up", "Get Started", "Contact Me" primary actions) - Hero sections with isolated large images - Stat grids (no "100+ projects", "5 years experience") - Pricing blocks - Testimonial carousels - Parallax scrolling - Full-screen section snapping - Any font not listed above (do NOT add a fourth typeface) ## Uniqueness Notes 1. **Masonry as instrument panel array, not content waterfall.** The corpus uses masonry (10%) as a grid for images or cards with varying text height. This site reframes masonry as a *cockpit instrument cluster* — panels of intentional height variation representing readout windows, not content overflow. No other design in the registry uses this framing. 2. **Grain overlay as primary texture, not decorative accent.** At 1% in the corpus, grain-overlay is a rarely-used element. Here it is the *primary surface material* — every panel requires grain. The SVG `feTurbulence` implementation with `mix-blend-mode: overlay` at 4–6% opacity gives the navy surfaces the quality of enamel on metal, directly serving the retro-industrial tone. This is not a background texture; it is the panel material itself. 3. **Retro-futurism grounded by earth pigments.** At 2% in the corpus, retro-futuristic is already rare. This design is the only one in the registry that pairs retro-futurism with `grounded-earthy` tone — the oxidized bronze (`#7A5C3A`) bleeding into the navy palette is a deliberate refusal of the clean chrome-and-white retro-future. The earthiness comes from a palette tone, not from imagery (no wood, no soil, no organic shapes). 4. **Art Deco stepped corner as the *only* decorative motif.** The design suppresses all other Deco ornamentation in favor of a single, minimal Deco gesture: the notched corner with inset gold line. This restraint is the Deco move — classical ornament applied with industrial parsimony. No filigree, no sunbursts, no festoons. 5. **Elastic easing as page-load cinematic, then static thereafter.** The corpus uses elastic (9%) typically for hover microinteractions across the board. This design inverts the convention: elastic is used *once*, cinematically, on page load — the panels snap into being with controlled overshoot — and then the page is completely static except for grain micro-pulse. After the entrance, the site does not animate unless hovered. The pirate station came on air with a burst of signal, and now it transmits steadily. Seed: `aesthetic: retro-futuristic, layout: masonry, typography: art-deco-display, palette: navy-metallic, patterns: elastic, imagery: grain-overlay, motifs: abstract-tech, tone: grounded-earthy`