# Design Language for gabs.wiki ## Aesthetics and Tone gabs.wiki occupies the gleefully absurd intersection where a Fortune 500 quarterly investor deck collides with a playground slide -- a site that wears the spotless pinstripe suit of enterprise SaaS while gabbing nonstop in the register of a kid showing you their butterfly collection. "Gabs" means small talk, idle chatter, the ribbons of nothing-conversation that loop between people on porches and in elevator lobbies, and this wiki treats those ribbons as serious infrastructure. The aesthetic is **corporate-aesthetic-as-stagecraft**: every surface is rendered with the calm, confident vocabulary of a billion-dollar B2B platform (clean rules, generous structure, the unshakable horizon line of a flagship landing page) -- and then those surfaces are made to **wiggle, breathe, and dance** like Lottie characters who have stopped pretending not to know they are being watched. Imagine the lobby of a glass-walled headquarters where the receptionist is a 2D animated raccoon, the wall-mounted infographic is whistling, the org chart undulates like a kelp forest in slow current, and the elevator door breathes. The mood is **playful corporate -- corporate that has stopped lying about being fun**. The site is loud about being a wiki of conversations, of running gags, of the small-talk taxonomy that no enterprise tool has ever bothered to formalize. Confidence without solemnity. Grandeur without gravitas. A press kit that giggles. The dominant emotion is *delighted competence*: the same calm-shouldered authority you'd find in a fintech homepage, but pitched a half-step higher and given a wink. Every interaction overshoots its mark by exactly enough to land as a joke -- buttons that bounce a beat too long, headings that take their time arriving, a scroll narrative that pauses to look at the camera before continuing. Nothing is rushed. Nothing is grim. The wiki is in on the bit and proud of it. ## Layout Motifs and Structure The structural backbone is **immersive-scroll** (underused at 9%) -- a single, continuous, full-viewport vertical narrative that treats the page as a story told in twelve enormous breaths. There is no card grid. There is no bento. There is no homepage-then-pages-then-pricing-block. Instead, the entire site is one cinematic pull-quote of a scroll, organized into stacked **full-bleed acts** in which each act takes ownership of the whole viewport and earns the right to be left behind. **The Twelve Acts (each ~100-140vh):** 1. **The Lobby** -- A spotless corporate hero with a single oversized headline ("All the Gabs, Filed and Annotated") and a Lottie raccoon receptionist who watches the cursor and eventually waves. 2. **The Mission Statement** -- An institutional rendering of an absurd corporate mission, delivered with deadpan typographic gravity. Background: a slow generative-art curve animation that exhales every nine seconds. 3. **The Org Chart of Small Talk** -- A flowing-curve infographic that connects gab-types ("the elevator gab," "the parking-lot gab," "the Slack-thread gab") into a living structure that reorganizes on scroll. 4. **The Annual Gab Index** -- An "annual report" page where the financials are replaced by absurd metrics (Words Spent on Weather, Rate of Sigh per Coffee, Coefficient of Awkward Pause) presented with the calm authority of a Bloomberg terminal. 5. **The Library** -- A horizontal carousel of documented gabs, each rendered as a generative SVG portrait. 6. **The Process** -- A diagrammatic walk-through of how a gab becomes a wiki entry, drawn as flowing curves that path-draw on entry. 7. **The Glossary** -- A typographic stack of defined terms, each one bouncing into place like a Lottie character on cue. 8. **The Recurring Bits** -- A timeline of running jokes through history, scrolled horizontally inside a vertical scroll lock. 9. **The Atrium** -- A breathing pause: full-viewport calm, a single curve drifting across the screen, the only sound (visual sound) the slow exhale of the background gradient. 10. **The Annex** -- A pretend-corporate compliance section ("Gab Audit Trail," "Footnote Provenance") rendered with the most boring corporate typography possible -- and then a single Lottie raccoon dances through the footnotes. 11. **The Letter from the Editor** -- A long, generous serif essay block that reads like a CEO letter, carefully formatted, perfectly justified, talking about absolutely nothing. 12. **The Sign-off** -- A single Lottie wave goodbye and a footer rendered as a sober corporate sitemap, but with one entry that giggles when you hover it. **Spatial logic:** Each act snaps softly into view (CSS `scroll-snap-type: y proximity`, never mandatory -- the snap is a suggestion, not a cage), with internal sub-scroll allowed inside acts that have horizontal carousels. The horizontal scroll *inside* act 8 uses `position: sticky` + `transform: translateX()` mapped to vertical scroll progress -- the page never visually leaves the column. **The grid beneath:** A 12-column corporate grid with 24px gutters governs every act, and *every act violates it on purpose at exactly one point*. The act is corporate-disciplined except for one element that breaks the column to wave at the user -- a hand reaching out from an org chart, a Lottie character standing in a margin, an oversized character that overflows the gutter. Discipline interrupted by personality. That's the whole structural idea. ## Typography and Palette **Typography (all Google Fonts, no fabrications):** - **Display / Hero / Act Titles:** **"Big Shoulders Display"** (Google Fonts) at weight 800-900, sizes from `clamp(3.5rem, 10vw, 11rem)`, with `letter-spacing: -0.02em` and `line-height: 0.92`. This is the typography of a billboard at a stock exchange -- broad-shouldered, condensed, unapologetic. Its industrial confidence is exactly the corporate spine the design needs to subvert. Used for one phrase per act, never more. Each title arrives with a stagger animation where individual letters bounce into final position with an elastic settle (Lottie-style overshoot). - **Subdisplay / Pull Quotes / Section Bridges:** **"Archivo Black"** (Google Fonts) at weight 900, sizes from `clamp(1.6rem, 3.5vw, 3rem)`. Used for the deadpan corporate sub-statements -- the moments where the wiki sounds the most like a press release. Tight, authoritative, brick-solid. - **Body / Long-form Editorial Prose:** **"Source Serif 4"** (Google Fonts) at weight 400, size `1.0625rem`, `line-height: 1.7`, with `font-feature-settings: "onum"` for old-style figures. This is the corporate-essay voice -- the CEO letter, the annual-report editorial, the institutional whitepaper. It earns the right to be funny by being beautifully serious. - **UI / Captions / Footnotes / Compliance:** **"IBM Plex Mono"** (Google Fonts) at weight 400, size `0.8125rem`, `letter-spacing: 0.04em`. The voice of corporate metadata -- timestamps, audit trails, footnote indices, version numbers. The site's joke is funniest when its small print is dressed exactly like a SEC filing. - **Accent / Decorative / Lottie-paired Captions:** **"Caveat"** (Google Fonts) at weight 600. A single hand-drawn typeface used *exclusively* for the moments when a Lottie character "writes" something on screen -- a marginal note, a doodled arrow, a personal aside. Caveat is the wink under the suit. Used sparingly. Maximum five instances across the entire site. **Palette -- a true complementary scheme (palette: complementary, underused at 3%):** The palette is built on a strict complementary axis -- **deep teal-petrol** opposite **vibrant warm orange** -- with three structural neutrals that maintain the corporate skeleton. - `#0E3A45` -- **Boardroom Petrol** (primary anchor, deep teal-blue): the trust color. Used for headlines, the dominant background of the corporate acts, primary text on light surfaces. - `#F46A2A` -- **Stage-light Orange** (complementary accent, sits at ~190deg opposite Petrol on the wheel): used for accents, Lottie character highlights, flowing-curve strokes, the one gleeful element that interrupts each disciplined act. - `#F7F3EC` -- **Letterhead Cream** (warm white): the dominant page background -- not pure white. Cream gives the corporate surfaces a slight letterheaded warmth that reads as "official" rather than "sterile." - `#1A1A1A` -- **Ink Black**: used for body text on cream, hairline rules, footnote dividers, and Plex Mono metadata. - `#E9DFD0` -- **Document Beige**: the secondary surface color, used for inset blocks, "report" panels, and the Annex compliance section. - `#7BBFC6` -- **Aerated Petrol** (a pale tint of Boardroom Petrol): used for soft fills behind generative-art curves and as the resting color of breathing background panels. - `#FFB888` -- **Soft Stage Light** (a pale tint of Stage-light Orange): used as a subtle wash behind playful Lottie scenes and for hover-state swells. **Color application rules:** - Boardroom Petrol and Stage-light Orange must never both occupy more than 30% of any single viewport simultaneously -- the complementary pair is meant to *clash on purpose at a single focal point per act*, not to coexist as wallpaper. - The cream/beige neutrals do the heavy lifting (~70% of any viewport). - Ink Black is always reserved for typography and 0.5px hairlines -- never for fills. - The accent orange always belongs to *the breaking-the-grid element* -- the moment of personality. ## Imagery and Motifs **No stock photography. No headshots. No skyline shots.** Every visual element is generated, drawn, or animated. **Core visual systems:** - **Generative Art Backgrounds (imagery: generative-art, underused at 6%):** Each act's background is a softly animated generative composition rendered live in Canvas2D. The system is built on **Perlin-noise-driven flowing curves** (motifs: flowing-curves, rare at 1%) -- 30-60 thin parallel ribbons that drift across the viewport at slow speeds (0.04-0.12 px/frame), their amplitude and frequency modulated by `simplex-noise` over a 24-second loop. The curves are stroked at 1.5px in `#0E3A45` at 12% opacity, against a Letterhead Cream base. Each act has its own seed value, so the generative pattern is recognizably different per scene but unmistakably part of one family. On scroll, the curves' density increases subtly as the user descends, climaxing at the Atrium (act 9) before dispersing again. - **Lottie Character Cast (patterns: lottie-animation, rare at 1%):** A small recurring cast of vector-drawn 2D characters provides the playful counterpoint to the corporate stage. The cast is intentionally tiny -- four characters total, each loaded as a Lottie JSON file rendered via lottie-web: - **Pip the Receptionist** (a raccoon in business casual): the host. Appears in act 1, act 9, and act 12. Watches the cursor, waves, looks bored, looks delighted. - **Auditor Barb** (a heron with reading glasses): appears in act 4 and act 10, gravely reviewing the absurd metrics. - **The Intern** (a small unidentified blob with legs): appears scampering between acts 6 and 7, carrying a stack of folders. - **The Ghost of the Footnote** (a translucent wisp that looks like a question mark): appears at the bottom of acts 4, 8, and 11, hovering near footnote markers. Lottie animations are kept short (2-6 second loops), file sizes under 80KB each, and triggered by IntersectionObserver on entering the act. Idle loops are gentle (a slow blink, a head turn). Active animations (full waves, full dances, the Intern's sprint) are triggered by hover or scroll-completion events. - **Flowing-Curve Infographics:** The org-chart, the process diagram, and the glossary connectors are all rendered as flowing SVG curves -- never straight lines, never right angles. Connections between concepts are drawn as gentle Bezier arcs that path-draw on scroll using `stroke-dasharray` and `stroke-dashoffset` animation. The curves echo the generative background, so the data structure feels native to the world it lives in. - **The Annual Report Charts:** Bar charts, line charts, and pie charts that look authentically corporate -- IBM-style precision, perfect axes, perfect labels -- rendered with the absurd data they're charting. ("Words Per Coffee Break," "Rate of Sigh by Quarter.") Each chart is a static SVG that animates in via a path-draw reveal, then sits perfectly still, daring the viewer to take it seriously. - **The Document Texture:** Subtle paper grain (a single 200x200 PNG noise overlay at 4% opacity, multiply-blend) on the cream background. Just enough to suggest the printed page beneath the digital. This sells the "letterhead" register without becoming a vintage-paper pastiche. - **No icons.** No icon library. The corporate-icon vocabulary is the most overused element in modern SaaS design and the wiki refuses it on principle. Where an icon would normally appear, the site uses either a Lottie character, a typographic glyph (a giant numeral, a giant letter), or nothing. ## Prompts for Implementation **Narrative Architecture:** The site is one long scroll, twelve acts, no navigation menu in the conventional sense. A small fixed-position progress indicator in the top-right corner shows the current act number (e.g., "04 / 12") in IBM Plex Mono, and clicking it opens a single-screen overlay that lists all twelve acts with smooth-scroll anchors. That's the entire navigation. The whole point is that the user *descends* through the wiki rather than browsing it. **Animation Philosophy -- the central design principle:** The animation system has exactly two registers, and they must coexist visibly: 1. **The Corporate Register** -- still, restrained, deliberate. Generous easing. Slow path-draws. Letters that arrive at their final position with measured stagger. Background curves that drift like a stock-ticker chart on a slow trading day. The corporate register's job is to project confident calm. 2. **The Lottie Register** -- elastic, overshooting, animated with the unmistakable bounce-and-settle of vector cartoon. Lottie characters arrive with a squash-and-stretch, react to cursor proximity, and sometimes wave for no reason. The Lottie register's job is to interrupt the corporate calm with personality at *exactly one point per act*. The rule is: each act gets one Lottie moment and only one. Two would be too many. Zero would be too few. The contrast between the two registers is the entire joke. **Implementation tools:** - **lottie-web** for all character animations. Load JSON files lazily (only when act enters viewport). - **Canvas2D + simplex-noise** for the generative flowing-curve backgrounds. Each act has its own seeded noise field. Use `requestAnimationFrame` with a delta-time clamp to keep motion smooth. - **GSAP or vanilla JS with `IntersectionObserver`** for scroll-triggered reveals. No library is mandatory -- the animations are simple enough to script directly. - **CSS `scroll-snap-type: y proximity`** to gently encourage act-by-act scrolling without forcing it. - **CSS Grid + Container Queries** for the 12-column corporate grid. **The Sound of Silence Rule:** The site is silent. No audio. No autoplay video. The corporate parody is funniest in silence -- the press release that whispers itself. **The One-Joke-Per-Act Rule:** Every act has exactly one moment of personality -- one Lottie character, one breaking-the-grid element, one absurd line in the corporate-register text. The discipline of "one" is what keeps the wiki from collapsing into a children's book. The wiki is corporate first, playful second, and the playfulness is *earned* by the surrounding restraint. **The Narrative Voice:** All copy is written in the register of a calm, confident corporate spokesperson who is cheerfully obsessed with idle chatter. Phrases like "Our compliance framework for elevator small talk has been audited to ISO 9001 standards" and "Q3 saw a 12% rise in weather-related opening gambits" are delivered without comment. The wiki does not wink at its own jokes -- the corporate frame *is* the joke, and the frame must be held perfectly straight. **AVOID:** No CTA-heavy layouts. No pricing tables. No stat-grid blocks. No "Sign up for our newsletter" modals. No testimonials. No partner logos. No feature-comparison tables. No hero with a button. The wiki is **pure narrative descent** -- there is nothing to buy, nothing to convert on, nothing to optimize. It is a wiki, and it is read. **Performance is incidental, but:** Lottie files should be kept small. Canvas backgrounds should pause when off-screen. The generative noise can be rendered at half-resolution and CSS-scaled up without visible loss. None of this is a constraint -- it's a craftsmanship floor. ## Uniqueness Notes **Differentiators from the other 200 designs in this codex:** 1. **Corporate aesthetic as stagecraft, not as default.** While "corporate" is the most common aesthetic in the codex (42% of all designs), gabs.wiki wears it as deliberate costume rather than as house style. Almost every other corporate-aesthetic site in the codex is sincere -- it wants to look like a SaaS, fintech, or consultancy. gabs.wiki uses corporate visual language *as the setup of a joke*, with every disciplined surface there to be interrupted by exactly one moment of vector-cartoon levity. The corporate-and-playful collision is what no other site here attempts. 2. **Lottie-driven character cast in a typography-dominant world.** Lottie animation is the rarest pattern in the entire codex (1% of designs use it). gabs.wiki commits fully -- four named recurring characters, distributed deliberately across twelve acts, each with idle and reactive animations. No other site has a character cast at all. The Lottie register is the second voice of the whole design. 3. **True complementary palette, used as a single point of clash per act.** Complementary palettes are rare in the codex (3%) and almost always used as broad gradient washes. gabs.wiki uses Boardroom Petrol and Stage-light Orange as a *focal* complementary pair -- the orange appears only at the one element per act that breaks the corporate grid, never as background, never as broad fill. The pair clashes intentionally, at one point, on purpose. 4. **Flowing-curve motif as both decoration and information architecture.** Flowing curves appear in only 1% of designs. gabs.wiki uses them as the connecting tissue of every infographic -- the org chart, the process diagram, the glossary connectors are all curves, never lines. The same curve language appears in the generative background. Form and decoration are unified. 5. **Display-bold typography (Big Shoulders Display, Archivo Black) at corporate scale.** Display-bold typography is almost absent from the codex (2%). gabs.wiki uses it as billboard hero type, set against the cream-and-beige corporate document register, creating a tension between "investor deck" and "billboard at the stock exchange" that no other design here attempts. 6. **Twelve-act immersive scroll with strict one-Lottie-per-act discipline.** Immersive-scroll is underused (9%), but more importantly, the structural rule of "exactly one personality moment per act" has no parallel in the codex. The site is mathematically restrained -- twelve acts, twelve Lottie moments, zero icons, four characters total. The constraint is the design. 7. **Playful tone delivered through deadpan corporate copy.** Playful tone (6%) is usually paired with playful aesthetic. gabs.wiki inverts this: the visual language is unbroken corporate sobriety, and the playfulness lives entirely in (a) the absurd subject matter (small talk, weather chatter, sighs per coffee), (b) the Lottie cast, and (c) one breaking-the-grid moment per act. The wiki never tells a joke -- it just calmly documents an absurd subject in perfect formal dress. **Frequency-aware avoidance:** - No card-grid (45% saturation). - No photography (45% saturation). - No gradient palette (46% saturation). - No mono-only typography (44% saturation -- Plex Mono is used here only for metadata). - No mysterious-moody tone (27% saturation -- gabs.wiki is bright, cream-lit, and gently amused). **Documented chosen seed:** aesthetic: corporate, layout: immersive-scroll, typography: display-bold, palette: complementary, patterns: lottie-animation, imagery: generative-art, motifs: flowing-curves, tone: playful.