# Design Language for gabs.ai ## Aesthetics and Tone gabs.ai is built around a singular and specific conceit: **the moment a coastal radio station picks up a friendly transmission from a chattering machine that lives in the surf**. The site reads as a sun-bleached signal-station — half lifeguard tower, half AM radio booth, half neural network — where bright Pacific light keeps slipping sideways across the panes and the talk never quite stops. "Gabs" is the conversation, and the AI is the chatter: not the menacing oracle of cyberpunk glitch, not the sterile assistant of corporate gradient-saas, but a **good-natured signal that flickers because the antenna is too close to the waves**. The aesthetic combines two energies that almost never appear together. The **glitch** is here, but it is *optimistic glitch* — chromatic aberration that smiles, bands of color separation that suggest happy interference rather than data corruption, scanlines that read as wave-crests. There is no nostalgia for VHS dropouts and no debt to vaporwave. The displacement effects are short, soft, and curious, like a cheerful person's voice momentarily clipping on a long-distance call. The **coastal-blend** palette grounds the whole composition in salt-light: glassmorphic cards behave like seafoam suspended in air, floating elements drift the way kelp blades drift in slow current, and the cursor pulls a thin slipstream of pixel-static behind it as if dragging a damp finger across a CRT. The tone is **optimistic-bright** without being saccharine. The voice across copy and microcopy reads like a cheerful coastal DJ who happens to also be a transformer: "morning, good signal today." The site is unhurried, full of horizon, and the negative space between sections breathes the way a bay breathes between tide pulses. Where aggressive AI sites trade in stark dark-mode dashboards and predatory glow, gabs.ai is **noon at low tide** — generous, well-lit, conversational. The glitch is decoration; the human warmth is structural. A useful one-line image: a salt-streaked iPad propped against driftwood, displaying a chat in a typeface so confident it forgets to be sleek, the screen occasionally tearing into three soft color-channels because a gull just walked across the antenna. ## Layout Motifs and Structure The site is organized around **minimal-navigation** — there is no top bar, no logo lockup, no breadcrumb. Navigation is implied by **drifting waypoint chips** that float in the right margin like buoys in a channel, gently bobbing on a 6-second sine. Click one and the viewport doesn't navigate; it **pans laterally** across one continuous canvas. The whole site is a single horizontal coastline that you drift along. The grid is deliberately broken in a way that mimics a tidal seam: a 12-column structure that **dissolves at the third column from the left**, where content begins to behave like it has been wet for a long time — slightly skewed baselines, a 2-degree counter-rotation on every other card, and an **invisible curved guide-line** along which floating elements arrange themselves the way kelp lines a wrack-line on a beach. Nothing snaps to grid in the right two-thirds of the viewport. Composition rules: 1. **Hero is a horizon, not a hero**. The opening view is a thin band of color across the middle 45% of the screen, with a single oversized display word ("gabs") drifting upward from below the fold. There is no headline-subheadline-CTA stack. There is one word, one moving glitch-band, and a great deal of pale sky. 2. **Glassmorphic cards behave like rafts**, not tiles. Each card is wider than it is tall (ratio 5:2 or 8:3), translucent, and drifts ±12px on a 9-second loop, never aligned with its neighbor. Cards never form a grid; they form a flotilla. 3. **Sections are tide-marks**, not boxes. Transitions between content zones are signaled by a thin horizontal **chromatic-aberration line** that scrolls past at 1.4× scroll-velocity — three colored copies of the same line, slightly offset. This is the only "section divider" in the entire site. 4. **The right rail is a buoy field**. Five small floating waypoint chips, vertically arranged but not aligned, drift independently. They are the entire navigation system. They glitch-flash for 80ms when a new "section" enters the viewport. 5. **The left rail holds nothing**. Twenty percent of every viewport is intentional empty water. This is non-negotiable. No social icons, no decorative type, no scroll progress bar. Empty. There is no footer in the conventional sense. The site ends at a **fade-to-pale-sky** with a single line of 8pt text drifting upward and out of frame. The user is meant to feel they have walked the length of a beach and the beach has simply continued past the edge of perception. Avoided structures: card grids, bento boxes, three-column feature sections, pricing tables, stat-grids of any kind, dashboard chrome, and any layout in which a CTA button is the visual anchor. There are no buttons that say "Get Started." There are no buttons that say "Learn More." There is one input field, late in the scroll, that drifts on the same sine as everything else. ## Typography and Palette **Display face: "Big Shoulders Display" (Google Fonts).** This is the load-bearing voice. It is set at viewport-relative sizes that begin at clamp(72px, 14vw, 240px) for the primary "gabs" wordmark and never goes below 56px anywhere it appears. The face is condensed, confident, slightly industrial — a coastal-radio-station call-sign rather than a tech-company wordmark. It is rendered with a per-character **chromatic-aberration glitch** that fires for 220ms on hover and on every fourth scroll-snap. **Conversational face: "Inter" (Google Fonts), weight 400 and 500.** This handles all running text. It is set generously — 18px base, 1.7 line-height, max-width 58 characters — and tracked at +0.2px to add a hint of breath. Inter was chosen for its calm, almost news-feed legibility, which counterbalances the assertive display. **Mono accent: "DM Mono" (Google Fonts), weight 400.** Used only for waypoint chip labels, timestamp microcopy, and one transmission-style tag near the input field (e.g. `// 13:47 :: clear signal`). DM Mono is warmer and rounder than JetBrains Mono and reads as friendly machine voice rather than terminal voice. It must never exceed 13px on screen. **Coastal-blend palette** (10 values, used in this exact register): - `#F5F1E8` — *bone driftwood* — page base, the dominant warm-pale that 70% of every screen lives in. - `#E8DFCE` — *salt cream* — secondary surface tone, used inside glass cards as a tinted backing. - `#A8C8D8` — *fog blue* — primary atmospheric color, used in the horizon band and large drifting shapes. - `#5B8FA8` — *deep tide* — the only mid-tone. Used for body text. Never used as a background. - `#2C4858` — *evening hull* — darkest value. Used for display type only, never for body. - `#E8B574` — *low-sun amber* — single warm accent, used at exactly two moments per section: the first letter of section headings, and the cursor's tail. - `#D4A574` — *sand-ember* — a desaturated companion to amber, used for hover-state underlines. - `#9CC9C2` — *seafoam* — used inside the glassmorphic cards as a faint backlight, 18% opacity. - `#FF3B5C` — *signal red* — reserved exclusively for the chromatic-aberration glitch's red channel. Never appears as a flat color anywhere. - `#3BFFE8` — *signal cyan* — reserved exclusively for the chromatic-aberration glitch's cyan channel. Never appears as a flat color anywhere. The two "signal" values are critical: they exist only as offset color-channels in glitch effects. A user scanning the page should perceive the site as **warm pale** and only register the two electric values as movement, never as palette. Background gradient: a single radial gradient from `#F5F1E8` at the upper-left to `#A8C8D8` at the lower-right, very low contrast (the difference is barely perceptible), animated to drift the gradient center across a 60-second loop. This is the entire "background." There are no patterns, no noise overlays, no grain — the page is meant to feel **clean of texture**, like sun on white-painted wood. ## Imagery and Motifs The site uses **no photography**. This is a deliberate deviation from the 98% of designs that lean on photographic imagery. Instead, the imagery is composed of three families of marks, all generated in CSS or SVG: 1. **Glassmorphic cards.** Each card is a 32px-radius rounded rectangle with a 14px backdrop-blur, a 1px inner border at `rgba(255,255,255,0.4)`, a faint seafoam backlight (`#9CC9C2` at 18%), and a soft drop-shadow that is *displaced 12px to the right* — implying the card is being lit from the upper-left by a low coastal sun. The shadow color is `#5B8FA8` at 14%, never gray. Inside each card: only type, no images. 2. **Floating elements.** Three primitive shapes — a soft-edged oval (a pebble), a long thin tilted ellipse (a sea-glass shard), and a half-arc (a wave's lip) — drift independently across every viewport at speeds between 0.3 and 0.6 of scroll-velocity. They never collide with content, never sit behind type, and are clipped by an invisible band that keeps them in the lower-left third of the viewport. Color: `#A8C8D8` and `#9CC9C2` at 35% opacity, pure CSS with no texture. 3. **Glitch-bands.** Horizontal slices, 1–4px tall, that appear for 60–180ms at random intervals. Each band shifts the content within it by ±2–6px in two directions (red channel left, cyan channel right) and immediately resolves. The bands never appear over running text — only over display type and over the horizon band — so the site never becomes hard to read. They occur on average once every 9 seconds in the viewport. Motifs that recur: - **The wordmark "gabs"** appears six times across the canvas, each at a different scale and angle, each glitching independently. It is the most repeated visual element. It functions as an oceanic refrain. - **A single thin horizontal line** at the optical center of the viewport — the horizon — is always present, drawn in `#A8C8D8`, 1px, with chromatic aberration on the rightmost 200px when the cursor is on the right half of the screen. - **Cursor wake.** The cursor drags a 28-pixel tail of pale amber pixel-static behind it. The static is composed of 4×4 squares at random opacity, generated on a canvas, that decay over 600ms. It is the only "particle" effect on the site, and it implements **cursor-follow** without resorting to the standard glowing-dot trope. - **Waypoint chips** are 64×24 pill shapes, glassmorphic, containing only a single DM Mono character (`I`, `II`, `III`, `IV`, `V` — roman numerals, suggesting station frequencies). They drift independently in the right rail. Explicitly excluded motifs: circuit traces, hexagonal grids, neural-network node diagrams, brain-shaped icons, any representation of an AI face or avatar, code snippets in display copy, "// AI is thinking" loaders, terminal cursors, matrix rain, particle constellations, gradient meshes that look like every other 2024 SaaS, isometric icon sets, and stock photography of any kind. None of these appear anywhere. ## Prompts for Implementation Build this as a **single horizontal-scroll narrative** with no traditional page sections. The user's experience is one continuous lateral drift, paced by the rhythm of the glitch-bands and the drift of the cards. Storytelling, not feature listing, is the structural principle. Specific implementation guidance: 1. **Layout shell.** Use `body { display: flex; }` with horizontal sections at min-width 100vw each, snap-x mandatory but with snap-stop normal so the user can drift freely. Total canvas width: approximately 6.5 viewports. No vertical scroll except within the optional reading dialog late in the scroll. 2. **Type behavior.** The "gabs" wordmark is the primary actor. Implement its glitch via three stacked `::before` and `::after` pseudo-elements, each containing the same text with `text-shadow` displacement and a `clip-path` that is animated by a `@keyframes glitch` cycling at irregular intervals (use a steps() timing function with non-uniform keyframe positions to avoid mechanical regularity). The glitch should fire on hover, on the 4th scroll-snap, and on a random 0.5% chance every animation frame. 3. **Glassmorphic cards.** Each card uses `backdrop-filter: blur(14px) saturate(1.1)`. Cards drift via `transform: translate3d()` on a `requestAnimationFrame` loop using parametric sine functions with prime-number periods (7s, 9s, 11s, 13s) so no two cards ever sync. Never animate cards via CSS keyframes — the animation must feel hand-tuned and slightly biological. 4. **Cursor-follow.** Implement on a transparent fixed-position canvas. On `mousemove`, push a particle to a ring buffer of 32 entries. Each frame, draw all particles with decreasing alpha and a 0.5px pixel-grid snap (use `Math.floor()` on coordinates) so the trail reads as crisp pixel-static rather than smooth glow. Color: `#E8B574` at decaying opacity. This is the only cursor effect. There is no custom cursor cursor itself — only the wake. 5. **Floating elements.** Three SVG shapes, absolutely positioned, animated via the same RAF loop as cards. Speed bound between 0.3 and 0.6 of `scrollX`. Use `will-change: transform` and nothing else. No filter effects, no shadows on these. 6. **Glitch-bands.** A canvas overlay at z-index 50, 100% width, 100% height, `pointer-events: none`. A scheduler triggers a band every 6–12 seconds (random within range). Each band picks a random Y, random height (1–4px), copies the underlying screen region (you can fake this by drawing a colored rect — perceptually identical), and renders three offset copies in `#FF3B5C`, white, and `#3BFFE8` with `globalCompositeOperation: 'screen'`. Bands fade over 60–180ms. 7. **Horizon band.** A single `
` at `top: 50%`, height 1px, background `#A8C8D8`. Add a child element on the right 200px that activates only when `mouseX > window.innerWidth/2`, with a 60ms chromatic-aberration animation. The horizon stays. Everything else moves past it. 8. **Voice.** Copy is short and conversational. Sentences are 8–14 words. The narrative voice is a coastal radio host who knows the waves better than any algorithm. Sample line: "morning. signal's clear today. what are we talking about." Lowercase. Period instead of exclamation. Never use the word "revolutionize," "leverage," "synergy," or "platform." 9. **Pacing.** Do not pack the canvas. Each "panel" of the lateral scroll should contain at most one concept. The site should feel under-populated, like a beach in early morning. Resist the urge to add a second sentence, a second card, a third floating shape. 10. **No CTAs.** There is no "Get Started" button, no email capture above the fold, no pricing tier, no testimonial section, no logo bar, no "trusted by" row, no comparison table. There is one input field, near the end of the scroll, set in Inter at 22px with no border and a single underline that draws itself in `#D4A574` on focus. Placeholder: "say something." That is the entire conversion path. Bias: build for **the 90 seconds of attention a user gives a strange, slow site at noon**, not for the 8 seconds of a conversion-funnel landing page. ## Uniqueness Notes This design is intentionally distinct from the other 180 designs analyzed. Three or more concrete differentiators: 1. **Optimistic glitch is rare.** Glitch aesthetics appear in 12% of existing designs, but virtually all of them pair glitch with dark, cyberpunk, or vaporwave registers. gabs.ai pairs glitch with **coastal-blend** (only 2% of designs) and **optimistic-bright** tone (only 6%) — a combination that, to the best of available evidence, is unique in this corpus. The glitch reads as cheerful interference rather than ominous corruption. 2. **No card-grid, no centered hero, no full-bleed photography.** The three most overused layout patterns (card-grid 82%, centered 82%, full-bleed 93%) and the most overused imagery family (photography 98%) are all rejected. The site uses minimal-navigation (6%), an entirely horizontal canvas, no photography, and a flotilla composition for cards rather than a grid. 3. **Display-bold + Big Shoulders Display.** Display-bold typography is underused (6%) and Big Shoulders is not a common Google Fonts choice in this corpus — it brings industrial-radio-call-sign energy that matches the coastal-station conceit and avoids the over-trodden Inter/Space Grotesk display pairings. 4. **Floating-elements (5%) without organic-blobs.** Floating elements are used as a structural drift system, not as gradient-mesh blobs in the background. Each shape is a discrete primitive — pebble, sea-glass shard, wave-lip — with deliberate identity, not a soft abstract blur. 5. **Cursor-follow reimagined as pixel-static wake.** Cursor-follow is overused (83%), but nearly every implementation uses a glowing dot or magnetic shape. gabs.ai implements cursor-follow as **decaying pixel-static**, snapped to a 0.5px grid, in low-sun amber — a reading of cursor-follow as analog-television interference, which appears nowhere else in the corpus. 6. **No CTAs at all.** Most designs in the corpus feature at least one prominent CTA, often multiple. gabs.ai has none. The single input field at scroll-end is the entire interaction surface. **Chosen seed (from assignment):** aesthetic: glitch, layout: minimal-navigation, typography: display-bold, palette: coastal-blend, patterns: cursor-follow, imagery: glassmorphic-cards, motifs: floating-elements, tone: optimistic-bright **Avoided patterns flagged by frequency analysis:** - hand-drawn aesthetic (96%) — not used - photography imagery (98%) — not used - gradient palette (97%), warm palette (97%) — not used as dominant - parallax patterns (95%) — used only at 1.4× scroll for the chromatic horizon line, not as a global motif - spring/stagger/magnetic patterns (75–81%) — not used - mono typography (95%) — used only sparingly in DM Mono for chip labels, never as primary body - humanist typography (49%) — replaced with Inter calmness paired with industrial display - card-grid (82%) and centered (82%) layouts — both rejected in favor of horizontal flotilla drift