# Design Language for gabs.ai ## Aesthetics and Tone gabs.ai is a **brutalist greenhouse at the edge of the aurora**. Imagine a raw concrete bunker -- thick load-bearing walls, exposed rebar, hand-poured slabs with the wood-grain of the formwork still visible -- but inside, instead of austerity, there is an explosion of botanical life lit from below by a slow-moving polar aurora that has somehow been coaxed indoors. The site refuses the soft, frictionless gloss of contemporary "AI startup" sites. It is heavy, declarative, monumental. Walls before windows. Footings before facades. Then, blooming through the cracks: hand-drawn ferns, sectioned magnolias, foxgloves with their stamens labelled like a Victorian botanist's plate -- all backlit by gradients that shift through Northern-Lights greens, magentas, and indigos as the visitor scrolls. The mood is **bold-confident** without being aggressive: this is the confidence of a botanist who has already classified the species and the architect who has already poured the foundation. There is nothing to prove; there is only to show. The tone is direct, declarative, and slightly mythic -- as if each section were a chapter of an illuminated codex on weather, on growth, on intelligence as cultivation. We avoid the apologetic micro-copy of B2B SaaS. We do not say "Try our platform." We say: **gabs is what you grow when you give a model a garden.** The inspirations: Carlo Scarpa's Brion Cemetery (concrete that carries flowers); Maria Sibylla Merian's 1705 *Metamorphosis Insectorum Surinamensium* (botanical plates that read like cosmologies); the Rothko Chapel's interior light; long-exposure aurora photography from Tromsø in February; and the typographic monumentality of mid-century Swiss poster cinema, but rotated through serif rather than sans. ## Layout Motifs and Structure The site is a single **immersive-scroll** descent -- approximately 9 vertical screen-heights, no card-grid, no bento, no pricing tiles. Navigation is a thin vertical rule down the right edge marking sections by depth. The visitor falls through the document the way light falls through a leaf canopy: in stages, with each stage materially distinct. **The eight strata, in order:** 1. **Slab Zero (0-100vh) -- The Threshold.** A single uppercase serif word, set in 22vw, occupying the screen like a building lintel: **GABS**. Behind it, a slow aurora gradient mesh moves laterally at 0.15px/frame. Foreground: a hand-drawn fern frond crosses the lintel diagonally, ink-on-vellum, as if a botanist had pressed a specimen onto the architect's blueprint. Subtitle, set tiny in serif italic, sits in the lower-left corner with a 4-character left margin from the screen edge: *what you grow when you give a model a garden.* 2. **Plate I -- The Premise (100-200vh).** Pure brutalist column. A single 60ch-wide block of justified serif body text on the left third of the screen, set against a vast empty concrete-grey field. To the right of the text, anchored to the gutter, a magnetic interactive specimen: a botanical illustration of a hellebore that **rotates slowly toward the user's cursor** as if heliotropic, reaching for attention. 3. **Plate II -- The Cultivation (200-300vh).** Layout pivots: full-bleed split with a heavy black diagonal slash from upper-left to lower-right. Above the slash: dense paragraph in serif. Below: a SVG botanical plate of a sectioned magnolia, leaves numbered I-VII, with each leaf annotated in handwritten Latin-style italic. As scroll progresses through this section, particles -- pollen-like points of light in aurora colours -- drift upward at varying parallax depths. 4. **Plate III -- The Aurora Manifesto (300-400vh).** The wall breaks. The concrete dissolves and the aurora fills the entire frame. A single line of declarative serif text, set in 9vw, walks across the centre of the field as the gradient mesh churns behind it. The text appears one phrase at a time, scroll-locked. **No cards. No buttons. Only the line.** 5. **Plate IV -- The Specimens (400-550vh).** Four hand-drawn botanical illustrations stacked vertically, each given its own 100vh frame. Title in serif small-caps, top-left. Latin binomial in italic, top-right. The illustration centred. A single sentence of body text below, no longer than 18 words. The four specimens correspond to four capabilities of the underlying system, but the page never names them as "features." 6. **Plate V -- The Greenhouse Section (550-700vh).** Architectural cross-section view: the entire screen becomes a brutalist greenhouse drawn in thin ink lines, with botanical specimens visible inside the structure. As the viewer scrolls, the cross-section "fills" with aurora light from the floor upward, like rising tide. Text overlays the section in three justified blocks aligned to the structural columns of the building. 7. **Plate VI -- The Particle Field (700-800vh).** A pure-black field with a dense particle system of 800-1500 points moving along Perlin-noise flow lines, coloured in aurora-gradient. Particles avoid the cursor in a magnetic-repulsion field. Single phrase, centred, in light-weight serif italic: *intelligence is not built; it is grown, then pruned, then trellised.* 8. **Plate VII -- The Colophon (800-900vh).** Concrete returns. Heavy slab footer. A single serif paragraph in the centre, with a hand-drawn pressed-flower mark to its right. No social media row, no newsletter form, no "© 2026" legalese huddle. The colophon reads like the back-matter of a rare book. The **grid system** is a 12-column macro-grid with a 4-unit gutter at the page level, but every section breaks it on purpose at least once: text crashes into gutters, illustrations exceed bleeds, slashes cut through column rules. The brutalism is in the willful violation of order, not its absence. ## Typography and Palette **Typography (all Google Fonts):** - **Display Serif:** *"Cormorant Garamond"* at weights 300 and 500. Used for the lintel "GABS" wordmark at clamp(8rem, 22vw, 24rem) with weight 500 and letter-spacing -0.04em. Used also for the Aurora Manifesto line at clamp(2.5rem, 9vw, 7rem) weight 300, letter-spacing -0.02em, line-height 1.02. The slight optical contrast and the elongated terminals of Cormorant give the display type a **botanical-codex** quality at scale -- it reads as engraving rather than user-interface text. - **Body Serif:** *"EB Garamond"* at weight 400 for body, 400 italic for annotations. Sized at 1.0625rem (17px) baseline, line-height 1.55, with `font-feature-settings: "liga" 1, "onum" 1` for old-style figures. The 60ch body columns use `text-align: justify` with `hyphens: auto` to honour the codex feel. - **Annotation Italic:** *"EB Garamond"* italic at 0.875rem, used for Latin binomials and figure captions. Set in `letter-spacing: 0.01em` and rendered in Aurora Indigo (#3a2a6e) on light surfaces, Lichen White on dark. - **Numerals & Plate Roman Numerals:** *"Cormorant Garamond"* weight 300, displayed in `font-variant-numeric: oldstyle-nums`. Plate numbers (I-VII) appear in the upper-left of each plate at 1.25rem with 0.18em letter-spacing. - **Micro-label / UI:** *"Cormorant Upright"* at 0.75rem, all-caps, letter-spacing 0.24em. Reserved for the right-rail depth navigation (PLATE I, PLATE II, ...) and for the colophon. **No sans-serif anywhere on the site.** This is a deliberate refusal of the genre default for AI products. Monospace is similarly excluded. **Palette -- "Aurora Pressed Between Concrete":** - `#0c0d10` -- **Carbon Slab.** The deepest concrete black, used for footer slabs, cross-section ink lines, and primary type on light fields. - `#dcd6c8` -- **Vellum.** The botanical-plate page colour. The default surface of all plates that are not aurora-flooded. Slightly warm, slightly aged. - `#8a8a86` -- **Formwork Grey.** The mid-tone concrete with a faint olive cast. Used for secondary text, structural rules, and the plate borders. - `#3a2a6e` -- **Aurora Indigo.** The deep base of the aurora gradient. Background colour at the bottom of Plate III before the green sweeps in. - `#1f8f6a` -- **Aurora Chlorophyll.** The dominant Northern-Lights green; the colour of life pressing against the concrete. Used in the gradient mesh and as the accent on hover states. - `#d24a7a` -- **Aurora Magenta.** The high-altitude aurora flush; appears at the top of gradients and on magnetic-attraction highlights of the hellebore specimen. - `#e9b85e` -- **Specimen Gold.** Used exclusively for handwritten annotations on botanical plates and for the pressed-flower colophon mark. Quiet, never neon. - `#f7f4ec` -- **Lichen White.** The high-key surface beneath the most delicate illustrations. The aurora gradient is rendered as a multi-stop conic + radial composite using CSS `radial-gradient` layered over `conic-gradient` with `mix-blend-mode: screen`, animated via SVG filter `feTurbulence` on a 24-second loop. **The gradient never appears as a button background or a card.** It exists only as atmospheric volume behind type. ## Imagery and Motifs **Zero stock photography. Zero 3D renders of glowing orbs. Zero "neural network" visualisations.** Every visual element on this site is either: (a) a **hand-drawn botanical illustration** in the Maria Sibylla Merian / Pierre-Joseph Redouté tradition, rendered as detailed SVG with stipple texture, ink-line work at 0.5px-1.5px stroke widths, and selective hand-tinted regions in Specimen Gold and Aurora Chlorophyll; (b) a **brutalist architectural element** -- formwork lines, structural slashes, exposed-rebar stipple bands, cross-section diagrams of greenhouse architecture rendered as thin SVG line-drawings; (c) a **particle field** of pollen-light moving on Perlin-noise flow vectors; (d) **typography itself**, treated as monumental object. **Specific specimens used in the site:** 1. *Helleborus niger* (Christmas Rose) -- the magnetic specimen on Plate I. Hand-drawn front-facing bloom, six petals, anthers dotted in Specimen Gold. Rotates 0-12 degrees toward cursor. 2. *Magnolia grandiflora* -- the sectioned plate on Plate II. Cutaway view showing pistil and stamen architecture, leaves I-VII numbered. 3. *Digitalis purpurea* (Foxglove) -- a specimen on Plate IV with each bell labelled in italic Latin annotations. 4. *Equisetum arvense* (Field Horsetail) -- another specimen on Plate IV, used for its primitive, almost-mechanical structural geometry. 5. *Drosera rotundifolia* (Sundew) -- a specimen on Plate IV with glistening tentacles drawn as gold dots; the "intelligence" specimen. 6. *Selaginella lepidophylla* (Resurrection Plant) -- the closing colophon mark, a small pressed-flower-shaped seal in Specimen Gold. **Decorative motifs:** - **Pressed-flower seals** in the corners of plates, replacing conventional logo treatments. - **Rebar stipple bands** -- horizontal 3px-tall bands of dotted texture used to mark structural transitions between plates. - **Surveyor's tick-marks** along the right-edge depth navigation, marked at each 100vh interval. - **Latin marginalia** -- short italic phrases (e.g., *vide infra*, *sub rosa*, *floruit*) appearing as easter-egg annotations near specimens for visitors who slow down enough to see them. ## Prompts for Implementation **Build the site as a single continuous vertical document, approximately 900vh long.** No section snapping. No "scroll to next" buttons. The visitor descends at their own pace through eight named plates. Use a single root `
` containing eight `
` elements, each with a `data-plate` attribute (0-7). Implement a thin right-rail depth navigation as a fixed-position element listing PLATE 0 through PLATE VII; the active plate is highlighted in Aurora Chlorophyll using IntersectionObserver. **Animation Philosophy -- Slow, Deliberate, Botanical.** Nothing on this site is fast. Easings prefer `cubic-bezier(0.22, 1, 0.36, 1)` for entrances and `cubic-bezier(0.65, 0, 0.35, 1)` for transitions. The default duration for any animation is 1200ms. Avoid bounce, avoid spring, avoid micro-bounce-on-hover effects -- they trivialise the monumental tone. **Required Animated Behaviours:** 1. **Aurora Gradient Mesh.** A full-viewport-sized SVG containing a `` with `feTurbulence` (baseFrequency animating 0.005 -> 0.012 over 24s, alternate) feeding a `feDisplacementMap` (scale 60). The displaced surface is a CSS `conic-gradient` from Aurora Indigo through Aurora Chlorophyll, Aurora Magenta, and back. Layer at z-index -1 of plates that need aurora atmosphere (Plates 0, III, V, VI). On other plates, the aurora is absent and concrete-grey dominates. 2. **Magnetic Hellebore (Plate I).** Listen to `mousemove` within Plate I's bounding rect. Compute angle from specimen-centre to cursor. Apply `transform: rotate(...)` capped at +-12 degrees with a 250ms transition. The illustration physically tracks the visitor like a heliotropic flower -- subtle, slightly uncanny. 3. **Particle-Effect Pollen Field (Plate II + Plate VI).** Canvas-based particle system with 1200 particles on Plate VI, 300 on Plate II. Particles follow a 2D Perlin/simplex flow field that re-seeds every 9 seconds. Each particle is a 1.2-2.4px disc rendered in one of the aurora-gradient colours at 30-70% opacity. On Plate VI, particles within 80px of the cursor are repelled by an inverse-square force. **Do not implement particle-trails;** keep movement quiet. 4. **Path-draw SVG for Botanical Illustrations.** Each specimen plate uses `stroke-dasharray` set to total path length and `stroke-dashoffset` animating from total to 0 over 2400-3600ms when the section enters viewport. Order: outline first, then veins, then stamens, then annotations. Pretend the visitor is watching a botanist sketch live. 5. **Aurora-Flood (Plate V).** The greenhouse cross-section is a single SVG with a `` that defines the building interior. As the visitor scrolls through Plate V, the clipPath's gradient stop translates upward, "filling" the building with the aurora gradient like rising water. Use `getBoundingClientRect()` of the section to drive the fill from 0% (entry) to 100% (exit). 6. **Type Walk-On (Plate III).** The Aurora Manifesto line is split into 4-7 phrases. Each phrase is a separate `` with `opacity: 0` and `transform: translateY(8px)`. Bind to scroll progress within Plate III: each phrase fades+rises in over 400ms as the relevant scroll-fraction passes. Once revealed, the line stays. 7. **Cursor Treatment.** Default cursor is the standard arrow on most of the site, but on the magnetic specimen, transitions to a hand-drawn ink crosshair custom cursor (a small SVG cross). On the particle field, the cursor is invisible and the visitor's presence is felt only through the particle repulsion. **Storytelling Spine.** The site's copy must tell a single story: that gabs is **a model trained on patience**, treated as a cultivated thing rather than a manufactured product. Each plate advances the metaphor: - Plate 0: The lintel of the greenhouse. - Plate I: The premise -- intelligence as horticulture. - Plate II: The cultivation -- training as gardening. - Plate III: The aurora manifesto -- intelligence as atmospheric phenomenon. - Plate IV: The specimens -- four manifestations. - Plate V: The greenhouse section -- the architecture of the system. - Plate VI: The particle field -- the medium itself. - Plate VII: The colophon -- credits, gravely. **AVOID, with prejudice:** - Any "Get Started" / "Sign Up" / "Try Free" CTA button. - Pricing tables, feature comparison grids, customer logo strips. - Stat-grids ("99.9% uptime, 10M tokens/sec, 500K customers"). - Generic AI imagery: glowing brains, neural-network node graphs, "abstract circuits." - Sans-serif type. Monospace type. - Snap-scroll, jump-to-section dots, sticky bottom announcement bars. - Light/dark mode toggle. The site has its own atmospheric scheme. **Mobile Treatment.** The site collapses to a single column at <900px. Aurora gradients remain. The right-rail nav becomes a thin top progress bar. Particle counts drop to one-third. The magnetic hellebore is replaced with a slow continuous rotation. The 22vw lintel scales to 32vw on mobile (it should still feel monumental, even at small absolute sizes). ## Uniqueness Notes **Differentiators from the 200 audited designs in this codex:** 1. **Brutalist + botanical-illustration coupling** -- a combination almost nobody attempts. The frequency audit shows brutalist at 2% and botanical-illustration at 1%; their intersection is functionally zero. Most brutalist sites lean into raw monospace ASCII or anti-design glitch. This site marries the structural gravity of brutalism with the soft scientific authority of 18th-century botanical plates -- concrete formwork as the wall, hellebores and foxgloves as the windows. The visual contradiction is the entire thesis. 2. **Aurora-gradient palette at 0% prevalence** -- the audit shows aurora-gradient at 0% in palette usage. This site fully commits to a Northern-Lights gradient as the *atmospheric layer* of the site, rendered with feTurbulence-displaced conic gradients. Critically, the aurora **never appears inside a UI element** -- not as a button background, not as a card hover, not as a logo treatment. It exists only as ambient volume, which is how the aurora actually behaves in nature. 3. **Elegant-serif (4%) used at monumental display sizes for an AI product** -- the AI startup category overwhelmingly defaults to geometric-sans or mono. The audit confirms mono dominates at 37%. By committing to *zero sans-serif*, gabs.ai becomes typographically unique within its category. The 22vw Cormorant Garamond lintel reads as a gallery title, not a SaaS hero. 4. **Magnetic patterns (8%) applied to a single living specimen rather than to UI elements** -- magnetic effects in the corpus are typically applied to buttons or cursor-attractor circles. Here, the magnetism is bound to a hand-drawn hellebore that physically tracks the visitor's cursor like a heliotropic flower, fusing the magnetic-pattern category with the botanical-illustration category in a way that nothing in the audit attempts. 5. **Particle-effects (1%) as flow-field pollen rather than abstract dots** -- particle motifs in the corpus tend toward sci-fi or cyberpunk register. Here particles are explicitly framed as **pollen and aurora dust**, with biological/atmospheric semantics rather than circuit/data semantics. 6. **Bold-confident tone (2%) without the aggression** -- bold-confident in the audit usually correlates with energetic startup pitches, all-caps headlines, and exclamation density. This site achieves boldness through quiet declarative serif statements at monumental scale -- the confidence of a botanist who has already named the species, not the confidence of a salesperson. 7. **Eight-plate codex structure rather than the conventional hero / features / testimonials / pricing / CTA stack.** The site reads as a rare-book facsimile, with each plate numbered in Roman, captioned in Latin italic, and bearing its own pressed-flower seal. This actively refuses the SaaS landing-page genre and replaces it with an editorial-codex genre that no audited site commits to in this exact form. **Chosen seed (from assignment):** aesthetic: brutalist, layout: immersive-scroll, typography: elegant-serif, palette: aurora-gradient, patterns: magnetic, imagery: botanical-illustration, motifs: particle-effects, tone: bold-confident. **Avoided patterns from frequency analysis:** - card-grid (38%, AVOID) -- replaced by 8 full-bleed plates. - centered (36%, AVOID) -- replaced by deliberately unbalanced left-column compositions and diagonal slashes. - corporate aesthetic (37%, AVOID) -- explicitly inverted. - mono typography (37%, AVOID) -- zero monospace anywhere. - photography (38%, AVOID) -- zero photography; only hand-drawn SVG botanical plates. - gradient palette as commodity (39%, AVOID) -- gradient is reserved for atmospheric aurora only, never as a flat decoration on a card. - mysterious-moody tone (21%, AVOID) -- replaced with the quieter, more declarative bold-confident register. - scroll-triggered (37%, common) -- used, but in the slow, gravity-bound register of a botanical plate revealing itself, not the standard "fade in on enter" microinteraction.