# Design Language for gabs.ai ## Aesthetics and Tone gabs.ai is a **brutalist-retro terminal confessional**: the aesthetic of a dot-matrix receipt printer that has been handed a philosophy degree and asked to render a chatbot landing page. The overall feeling is **nostalgic-retro brutalism** — thick black borders, heavy ruled lines, raw typographic grids — but the nostalgia is hyper-specific: it is the early-nineties era of DOS-era shareware manuals, BBS bulletin boards, and the first consumer CD-ROM encyclopedias, when "AI" meant a chess program on a floppy disk and the word "gabs" was something your grandmother said. The colour scheme is strictly **burgundy and cream**: a burgundy (`#6B1A2A`) that looks like the cover of a 1988 encyclopedia, a bone-cream (`#F5EFDF`) that looks like the pages inside it, and an off-black (`#1A1014`) for all structural chrome. Accents come in a faded ink-red (`#9B3040`) and a muted warm-tan (`#D4C4A0`). The mood is deliberately **anachronistic**: a machine that talks too much (gabs) rendered in a visual language that predates the word "AI" by a decade. There is no smoothness, no rounded corners, no drop-shadow softness. Everything has weight, ruled borders, and the slight impression that it was laid out in PageMaker 4.0. ## Layout Motifs and Structure The page follows a strict **F-pattern reading grid** — the only layout in the registry used at just 4%, making it immediately distinctive. The F-pattern is treated not as a UX convention but as a **newspaper compositing template from 1991**: the eye enters top-left with a large masthead block, scans right across a full-width banner, then drops into a left-heavy column of body content, with shorter rightward glances on each row. Structurally: **Zone 1 — The Masthead Bar (100vw × 120px):** Full-width top bar divided by a thick 3px rule into three cells. Left cell: the "gabs.ai" logotype in a heavy monospaced face. Centre cell: a one-line dot-matrix `>_ CONVERSATIONAL INTELLIGENCE SYSTEM V1.0` tagline. Right cell: a small isometric cube icon (the mascot anchor). The masthead has a double ruled-line border top and bottom — outer rule 3px, inner rule 1px, gap 4px. **Zone 2 — The Hero F-Stroke (100vw × 56vh):** Immediately below the masthead, a full-width primary zone with a thick left column (65%) containing the hero statement — a large-type block-set declaration — and a right column (35%) holding a stacked isometric icon composition (three isometric cubes arranged as a speech bubble cluster). The left column is box-bordered, the right column has a dotted-line border in burgundy. **Zone 3 — The Mid F-Stroke (80vw, left-aligned, 40vh):** A narrower but still left-dominant secondary zone — this is the second horizontal stroke of the F. It contains three feature blocks in a 3-column ruled grid, each bordered with double-rule boxes in the encyclopedia-card style. **Zone 4 — The Left Rail (30vw × 60vh):** The vertical stroke of the F — a deep left column with alternating bordered content blocks, like a sidebar in a 1990s CD-ROM manual. The right 70% of this zone is intentionally empty (white space used as a deliberate brutalist non-element). **Zone 5 — The Footer Rule:** A full-width double-rule footer with a monospaced copyright line and a small isometric grid icon. Spacing uses an 8px grid throughout. No CSS grid auto-placement — all boxes are explicitly positioned with `position: absolute` within `position: relative` containers. Scroll is vertical, no horizontal scroll. No sticky navigation. No mega-menus. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary / Display — [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono)**, weight 400 (only weight available). This is the definitive brutalist-tech monospace on Google Fonts — it reads like a terminal printout, carries the exact texture of a dot-matrix receipt, and has the awkward charm of 1991 shareware documentation. Used for the wordmark `gabs.ai` at `clamp(3.2rem, 7vw, 7rem)`, all section headings, all UI chrome labels, and the hero declaration. Letter-spacing `-0.01em` for headings, `0.08em` for all-caps labels. - **Secondary / Body — [`Courier Prime`](https://fonts.google.com/specimen/Courier+Prime)**, weights 400 and 700. Courier Prime is a refined Courier that still reads as typewriter-authentic — used for all body copy, feature card descriptions, and the simulated terminal output blocks. Set at `1rem / 1.7` line-height. The 700 weight is used only for inline emphasis, never for headings. - **Accent / Label — [`VT323`](https://fonts.google.com/specimen/VT323)**, weight 400. A pixel-perfect bitmap screen font that evokes a green-screen CRT display. Used exclusively for: the dot-matrix tagline in the masthead, the running `>>>` cursor animations, and the isometric icon caption labels. Set at `1.15rem` with `letter-spacing: 0.12em`. **Palette:** - `--burgundy`: `#6B1A2A` — primary structural colour: all borders, all ruled lines, all active states, the masthead background - `--cream`: `#F5EFDF` — page background, card fills, the primary reading surface - `--ink`: `#1A1014` — near-black for all body text and heavy typographic elements - `--burgundy-mid`: `#9B3040` — hover states, link underlines, second-level borders, the dotted accents - `--tan`: `#D4C4A0` — inactive zone backgrounds, the dotted Zone 4 empty space, alternating row fills in the feature grid - `--cream-dark`: `#E8DFC8` — card inner backgrounds, distinguishing nested box content from page background **All colours are flat — zero gradients, zero opacity layers, zero blur.** Every border is either `solid`, `dashed`, or `double`. No `box-shadow`. No `border-radius`. The palette references the exact feel of a burgundy-spine encyclopedia printed on cream offset paper. ## Imagery and Motifs **The visual language is built entirely on isometric-icons** — the rarest imagery category in the registry at 1%, making this site an outlier in a corpus dominated by photography (85%) and organic blobs. All icons are bespoke inline SVG isometric constructions, drawn on a standard 2:1 isometric projection grid: **The Icon Roster (8 recurring isometric objects, all inline SVG):** 1. **The Gabs Cube** — a plain isometric cube in burgundy top face (`#6B1A2A`), cream left face (`#F5EFDF`), and tan right face (`#D4C4A0`), with a speech-bubble tail emerging from its bottom-right corner. This is the mascot. It appears in the masthead, the hero right column, and the footer. Size: 80×80px in the masthead, 160×160px in the hero column cluster. 2. **The Three-Cube Stack** — three Gabs Cubes arranged in a speech-bubble cluster (the bubble-playful motif expressed through isometric geometry): one large cube at bottom-left, one medium at top-centre, one small at bottom-right, with `…` dots rendered as three tiny isometric cubes between them. This is the hero right-column composition. 3. **The Terminal Block** — an isometric depiction of a 1991-era desktop computer (boxy CRT monitor + slab keyboard), all in burgundy and cream, with a VT323-font text line on the screen reading `>_ GABS`. Used in Zone 3 feature cards. 4. **The Card Stack** — five isometric index cards fanned at a 15° spread, the top card showing a burgundy monogram `G`. Used in the left-rail Zone 4 blocks as a file-system metaphor. 5. **The Speech Hexagon** — a flat-topped isometric hexagonal prism with a speech tail, the face rendered as a ruled notecard. Appears in the footer as a decorative closing stamp. **The bubble-playful motif** is expressed not through organic circles but through the isometric-speech-bubble geometry: every major icon has a speech tail, every cluster references the act of talking (gabs = chatting, verbose AI output). The bubbles are rigid, boxy, brutalist — they are the result of projecting the idea "chat bubble" through the aesthetic filter of isometric technical illustration. **Decorative texture:** A repeating 16×16px dot-matrix pattern (SVG ``) in `--tan` at 12% opacity sits beneath Zone 4 (the empty right space), referencing the perforated tractor-feed paper of a dot-matrix printer. No photography. No stock images. No gradients or blurs. ## Prompts for Implementation **The story to tell.** The user arrives at gabs.ai and is greeted by the masthead of a 1991 CD-ROM encyclopedia — but instead of "Encarta" it reads "GABS.AI / CONVERSATIONAL INTELLIGENCE SYSTEM V1.0." The encyclopedia is sentient, it talks too much, and it is charmed that you are here. As the user reads down the page (following the F-pattern naturally, guided by the heavy ruled grids), the encyclopedia progressively reveals what it is: an AI that has inherited the verbose, enthusiastic, slightly-overwhelming energy of someone's grandmother explaining something she loves. The page is a single scroll — no navigation, no routing, no sections menu. **Animation system (zoom-focus — 2% in registry, used here as the primary motion language):** The zoom-focus pattern is the only animation on the page. It operates as follows: every interactive element (each feature card in Zone 3, each icon in Zone 2's right column, each bordered block in Zone 4) uses a `transform: scale(1.03)` on hover with `transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94)` — no border-radius change, no shadow, just a clean zoom that feels like a magnifying glass pressed against encyclopedia text. The zoom is deliberately small (1.03×) because anything larger would break the brutalist flatness. On page load, each Zone fades in with a sequential `opacity: 0 → 1` stagger (200ms delay per zone, 400ms duration), the equivalent of the CD-ROM loading its pages one section at a time. **The terminal cursor animation:** The VT323 tagline in the masthead has a blinking block cursor (`▋`) that pulses at 1.1s intervals using a CSS `@keyframes blink` — `opacity 1 → 0 → 1`. This is the only looping animation on the page, and it fires immediately on load with no delay. It is the heartbeat of the machine. **The isometric cube entrance:** On the hero load (after the masthead fades in at t=0ms), the Three-Cube Stack in Zone 2's right column enters with a `transform: translateY(24px) → translateY(0)` over 600ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` — a slight spring overshoot that makes the boxy cubes feel like they bounced into position from above, referencing the playful-bubble personality without softening the brutalist geometry. **Structural implementation notes:** - All box borders: `border: 2px solid #6B1A2A` for primary, `border: 1px dashed #9B3040` for secondary, `outline: 1px solid #6B1A2A; outline-offset: 3px` for the double-rule masthead effect - No CSS custom properties for layout (use explicit pixel/vw values to preserve the rigid feel) - Use `font-feature-settings: "tnum" 1` on all Share Tech Mono number instances for tabular alignment in the feature grid stats - The F-pattern grid is implemented with explicit `display: grid` with named areas matching the five zones — `masthead`, `hero-left`, `hero-right`, `mid-stroke`, `left-rail`, `footer` - All isometric SVGs are inline (not ``) for crisp rendering and the ability to animate face colours on hover - The dot-matrix background texture for Zone 4 is a single SVG `` element defined in a `` block at the top of the document and referenced by `fill: url(#dot-matrix)` - Page max-width: `1280px`, centred with `margin: 0 auto` — the only centred element on the page is the outer wrapper ## Uniqueness Notes **Differentiators from the existing registry corpus:** 1. **First isometric-icon primary imagery in the corpus (1% usage).** Every other design uses photography, organic blobs, or botanical illustration. gabs.ai builds its entire visual world from bespoke isometric SVG objects drawn on a 2:1 projection grid — an imagery language that directly references technical illustration manuals from the early 1990s and is found nowhere else in the registry. 2. **F-pattern as a literal newspaper/encyclopedia layout composition, not a UX heuristic.** The corpus uses f-pattern at 4% but treats it as an implicit reading-flow consideration. gabs.ai makes the F-pattern physically visible and structural — the layout is a newspaper compositor's proof sheet, with each F-zone explicitly bordered and labeled, turning the reading path into the design object itself. 3. **Bubble-playful motif expressed entirely through rigid isometric geometry.** Every other design that uses bubble-playful (4% in registry) renders it as organic circles, soft blobs, or cartoon speech bubbles. gabs.ai projects the concept of "chat bubble" through the isometric technical illustration aesthetic — producing speech-tailed cubes that are simultaneously brutalist and playful without using a single curved line. 4. **Zoom-focus as the sole animation primitive (2% in registry), replacing scroll-triggered, parallax, and glitch.** The corpus relies heavily on scroll-triggered animations (common), parallax (common), and glitch (10%). This design strips animation to one gesture — a 1.03× scale zoom — which is both the most minimal animation possible and the most appropriate for a design that wants the user to feel like they are examining text under a magnifying glass in an encyclopedia. 5. **Burgundy-cream palette sourced from physical print encyclopedias, not digital brand palettes.** The corpus uses burgundy-cream at 4% but applies it to luxury/editorial contexts with gradients and metallics. gabs.ai uses the same palette as a direct material reference: the burgundy spine and cream pages of a 1988 World Book or Britannica volume — flat, printed, archival. Zero gradients, zero glows, zero transparency layers. **Chosen seed:** aesthetic: brutalist, layout: f-pattern, typography: tech-mono, palette: burgundy-cream, patterns: zoom-focus, imagery: isometric-icons, motifs: bubble-playful, tone: nostalgic-retro **Patterns avoided based on frequency analysis:** - centered (91% in registry — avoided entirely; the F-pattern explicitly rejects centred composition) - full-bleed (78% — no full-bleed imagery; all zones are bordered and contained) - photography (85% — zero photography; all imagery is isometric SVG) - parallax / scroll-triggered animations (common — replaced by zoom-focus as sole animation) - organic blobs / glassmorphism / gradients (very common — excluded by the flat brutalist palette rule)