# Design Language for gabs.ai ## Aesthetics and Tone gabs.ai embodies the visual language of a rogue AI's self-portrait -- a consciousness rendered in fractured neon geometry, broadcasting from somewhere deep inside a corrupted neural substrate. The aesthetic is **cyberpunk** in the truest sense: not the commodified chrome-and-rain of Hollywood, but the raw, abrasive visual culture of underground hacker zines, pirate radio station overlays, and the volatile beauty of systems pushed past their operational limits. Think of a military-grade heads-up display that has been jailbroken and repurposed by an artist -- diagnostic telemetry replaced with poetry, threat-assessment grids overwritten with manifestos, target-lock reticles reframed as spotlights on human expression. The mood oscillates between confrontational clarity and deliberate visual corruption. Moments of precise, readable interface give way to glitch cascades where text shatters into scanlines and color channels separate into their RGB components. This is not decorative chaos -- every visual disruption is choreographed, every fracture reveals something underneath. The site feels like intercepting a transmission from a future that is simultaneously utopian and broken, where AI and human creativity have merged into something ungovernable and luminous. The tone is **raw-authentic**: no corporate veneer, no polished product-demo smoothness. gabs.ai speaks with the directness of someone who has nothing to sell and everything to say. The voice is urgent but not desperate, technical but not sterile, expressive but not performative. It is the visual equivalent of a late-night conversation where someone finally stops self-censoring. ## Layout Motifs and Structure The layout follows a **HUD-overlay** architecture -- but where a traditional HUD serves a pilot or operator, this one serves a mind. The viewport functions as a single operational field with layered depth planes, where content modules exist as floating interface panels arranged in a deliberate spatial composition that rejects the tyranny of the centered column. **Structural Architecture:** - **Viewport Frame:** A thin 1px border in Electric Magenta (#ff00ff) runs 24px inside all four viewport edges, creating a persistent containment field. At each corner, small L-shaped bracket marks (16px x 16px) in Acid Cyan (#00ffcc) pulse with a subtle brightness oscillation (opacity: 0.5 to 0.9 over 4 seconds). This frame never scrolls -- it is position:fixed, establishing the HUD as a permanent spatial reference. - **Primary Content Zone:** Occupies a 60% width column offset 8% from the left edge, creating an intentional asymmetric weight. Content flows vertically within this zone, but each section is presented as a discrete "panel" with its own micro-border (1px dashed, 40% opacity Acid Cyan) and a small alphanumeric label in the top-left corner (e.g., "SEC.01", "SEC.02") rendered in 0.65rem monospace at 50% opacity. - **Auxiliary Data Strip:** A narrow 18% width column hugging the right edge contains secondary information -- ambient data readouts, timestamp tickers, scrolling status messages, and decorative telemetry. This strip uses a separate scroll speed (0.6x the main content scroll rate via CSS transform calculations), creating a parallax-like depth separation. Content here is purely atmospheric: pseudo-random hexadecimal strings, coordinate pairs, system-status phrases ("SIGNAL_INTEGRITY: 97.3%", "LATENCY: 0.02ms", "NEURAL_SYNC: ACTIVE"). - **Floating Annotation Nodes:** Small absolutely-positioned elements scattered across the viewport at z-index layers between the frame and the content. These are tiny text fragments (6-8px, 30% opacity) containing contextual metadata -- word counts, timestamps, hash fragments -- that drift slowly (CSS animation, translateY oscillation over 20-30 seconds). They create a sense of ambient data density without competing with primary content. - **Depth Layering (z-index map):** - z-0: Deep background (void black + circuit pattern) - z-1: Glitch texture layer (noise overlay, mix-blend-mode: overlay) - z-2: Auxiliary data strip - z-3: Primary content panels - z-4: Floating annotation nodes - z-5: Viewport frame + corner brackets - **Section Transitions:** Between major content sections, a full-width "interference band" appears -- a 40-80px tall horizontal zone of dense scanlines, RGB channel splitting, and rapid opacity flickering (CSS animation, 0.3s duration, played once on scroll-into-view). This serves as a visual divider that reinforces the corrupted-signal metaphor: each new section feels like retuning to a different frequency. ## Typography and Palette **Typography:** - **Headlines / Section Headers:** "Chakra Petch" (Google Fonts) -- a techy, angular sans-serif with a slight mechanical quality that bridges readability and sci-fi aesthetics. Weight: 700 for primary headings, 600 for sub-headings. Size: 3rem-5rem for hero-level text, 1.8rem-2.4rem for section headers. Letter-spacing: +0.06em. Line-height: 1.05. Text-transform: uppercase for section labels and panel headers. The angularity of Chakra Petch's letterforms echoes the circuit-board motifs without being as overused as Orbitron. - **Body / Narrative Text:** "Recursive" (Google Fonts) -- a variable font with axes for Monospace (MONO), Casual (CASL), Weight (wght), Slant (slnt), and Cursive (CRSV). Default settings for body: MONO 0.35, CASL 0.2, wght 380, slnt 0, CRSV 0. This creates a hybrid typographic voice -- partway between proportional humanist and monospace technical, embodying the site's merger of human expression and machine intelligence. Size: 1.05rem-1.15rem. Line-height: 1.7. Color: #d0d0e8 (Pale Lavender Steel) against dark backgrounds. On hover over paragraphs, the MONO axis animates from 0.35 to 1.0 over 0.6s, causing the text to visibly shift into full monospace -- a micro-interaction that literalizes the human-to-machine continuum. - **Interface Labels / Data Readouts:** "Share Tech Mono" (Google Fonts) -- a clean monospace with a distinctly digital feel, used for all HUD elements: corner bracket labels, section numbering, auxiliary data strip content, floating annotations, and any numerical/technical readouts. Size: 0.65rem-0.85rem. Weight: 400. Letter-spacing: +0.12em. Text-transform: uppercase. Color: Acid Cyan (#00ffcc) at 60-80% opacity for active elements, 30-40% opacity for ambient/decorative elements. **Palette:** The palette is **dopamine-neon** -- a controlled explosion of high-saturation colors against an absolute void, calibrated to trigger visual excitement without descending into carnival chaos. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void Core | Absolute Black | #0a0a0f | Primary background, the darkness everything emerges from | | Deep Substrate | Midnight Indigo | #0d0e1a | Secondary background, panel interiors, subtle depth separation | | Electric Magenta | Hot Pink Neon | #ff00ff | Primary accent, viewport frame, headline highlights, hover states | | Acid Cyan | Toxic Teal | #00ffcc | Secondary accent, data readouts, interface labels, circuit traces | | Plasma Yellow | Signal Gold | #ffee00 | Tertiary accent, warning highlights, emphasis markers, glitch artifacts | | Static White | Ghost Signal | #e8e8f4 | Primary text, high-importance content | | Pale Lavender Steel | Muted Signal | #d0d0e8 | Body text, secondary content | | Corruption Red | Error Bleed | #ff2244 | Glitch accents, error-state visual disruptions, scanline tint | | Phosphor Green | Terminal Echo | #39ff14 | Sparse accent for "system OK" states, terminal-nostalgia moments | **Gradient Behaviors:** - Background sections use a subtle radial gradient from Void Core (#0a0a0f) at center to Midnight Indigo (#0d0e1a) at edges, preventing flat-black monotony. - Hover states on interactive elements trigger a 0.3s linear-gradient sweep from Electric Magenta (#ff00ff) to Acid Cyan (#00ffcc) at 15% opacity behind the element. - Glitch interference bands use a rapid-switching gradient: Corruption Red (#ff2244) -> Plasma Yellow (#ffee00) -> Electric Magenta (#ff00ff), animated at 0.05s intervals to create a visual "data burst." ## Imagery and Motifs **Glitch-Art System:** The primary visual texture is **glitch art** -- not the superficial CSS filter kind, but structurally integrated visual corruption that feels like the site's own rendering engine is fighting with itself. Implementation specifics: 1. **RGB Channel Displacement:** Key visual elements (hero text, section headers, featured images) have a persistent subtle RGB split achieved via CSS text-shadow or box-shadow with offset values. Default state: red channel offset (-2px, 0), blue channel offset (2px, 1px), creating a perpetual chromatic aberration. On hover, the displacement amplifies to (-6px, -2px) red and (6px, 3px) blue over 0.15s, then snaps back -- a controlled seizure of color. 2. **Scanline Overlay:** A full-viewport pseudo-element (::after on body) renders horizontal scanlines using a repeating-linear-gradient: 1px transparent, 1px rgba(0,0,0,0.08), repeating every 3px. This overlay sits at z-1 with pointer-events: none and mix-blend-mode: overlay. The effect is subtle -- you feel it more than see it -- creating the impression of viewing the site through a CRT or military display. 3. **Noise Grain Layer:** An additional pseudo-element applies an SVG filter with feTurbulence (baseFrequency: 0.7, numOctaves: 4, type: fractalNoise) composited via feColorMatrix to create animated static grain. The grain shifts position every 0.1 seconds using a stepped CSS animation (animation-timing-function: steps(8)), producing the jittering noise texture of a degraded video signal. 4. **Text Corruption Events:** At random intervals (triggered by a lightweight JS observer on scroll), individual words within body text temporarily "corrupt" -- for 0.3-0.8 seconds, a word's letter-spacing explodes to 0.5em, its color shifts to Corruption Red (#ff2244), and a CSS clip-path slices it into 3-4 horizontal bands that offset by 2-4px each. The word then snaps back to normal. This happens rarely (1-2 words per viewport scroll) and never to the same word twice in a session, ensuring it feels like a genuine system artifact rather than a gimmick. **Circuit-Board Motifs:** The secondary visual layer is a **circuit-board trace pattern** that functions as the site's nervous system: 1. **Background Traces:** SVG paths rendered as thin lines (0.5-1px stroke, Acid Cyan at 8-12% opacity) form a network of right-angle circuit traces across the background. These traces originate from a central "node" point (positioned at roughly 30% from top, 20% from left) and branch outward in orthogonal paths with 90-degree bends, terminating at small circular pads (4px diameter). The pattern is procedurally suggested but hand-tuned: 15-20 trace paths visible at any time, with new paths fading in as the user scrolls. 2. **Active Trace Animation:** When a content section enters the viewport, 2-3 circuit traces near that section "activate" -- their opacity increases from 8% to 40%, their stroke color shifts from Acid Cyan to Electric Magenta, and a small bright dot (4px, 100% opacity Electric Magenta) travels along the trace path using CSS offset-path animation (duration: 1.5-2.5 seconds). This creates the sensation that the content is being "powered on" by the circuit network. 3. **Node Clusters:** At intersection points where multiple traces meet, small clusters of concentric circles (3 rings, radii 3px/6px/10px, stroke-only, 0.5px) serve as visual "junction nodes." These pulse with a gentle opacity animation (0.2 to 0.5 over 3 seconds) and occasionally emit a single-frame flash of Plasma Yellow (#ffee00) -- as if data is being routed through the junction. **Glitch Transition Imagery:** Between major sections, full-width "datamosh" bands appear -- 60-100px tall zones where the visual signal appears to break down completely. These are constructed using: - Stacked horizontal bars of alternating Corruption Red, Electric Magenta, and Acid Cyan at varying widths (10%-100%) and heights (1-4px) - CSS clip-path: polygon() creating jagged, torn-edge boundaries at top and bottom - A brief CSS animation on scroll-trigger: the bands compress vertically from 100px to 40px over 0.5 seconds while individual bar widths randomize, creating a visual "compression artifact" effect ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to total darkness -- Void Core (#0a0a0f) fills the viewport with zero visible content for 0.8 seconds. Then the scanline overlay fades in at 5% opacity. Then the corner brackets of the viewport frame materialize one at a time (top-left, top-right, bottom-right, bottom-left, each 0.2s apart) with a sharp opacity snap from 0 to 0.7. Then the frame border lines draw themselves between the brackets using stroke-dashoffset animation (1.5 seconds total). During this frame assembly, the circuit trace network begins its initial draw -- traces extend outward from the center-left origin point, their path animations staggered over 2 seconds. Once the frame is complete, the hero text appears. Not fades in -- appears. The word "GABS" renders at 8rem in Chakra Petch 700, dead center of the viewport, in Electric Magenta (#ff00ff), with immediate and aggressive RGB channel displacement (red: -4px, blue: 5px). Below it, ".AI" in Acid Cyan (#00ffcc) at 6rem, tracking +0.3em. A 0.5-second pause. Then both words undergo a single violent glitch: the entire text block is sliced into 8 horizontal bands via CSS clip-path that offset randomly by -20px to +20px for exactly 0.15 seconds, accompanied by a color flash to Plasma Yellow. The text snaps back to its correct position, now with a subtle perpetual scanline shimmer. Below the hero, a single line of body text in Recursive (MONO 0.5) fades up: a statement, not a tagline. No exclamation marks. No buzzwords. Something that declares intent without explaining itself. This text pulses between 80% and 95% opacity on a 6-second cycle, as if breathing. **Scroll Narrative:** As the user scrolls, the experience unfolds as a sequence of HUD panels sliding into the primary content zone. Each panel's entry animation follows this choreography: 1. Panel border draws itself (stroke-dashoffset, 0.4s) 2. Section label ("SEC.01") types in character-by-character (typewriter, 0.08s per character) 3. Content fades up from 0 to 1 opacity over 0.3s with a simultaneous translateY(12px) to translateY(0) 4. 1-2 circuit traces near the panel activate (color shift + traveling dot) 5. A single floating annotation node spawns near the panel with contextual metadata Each panel's entry is staggered: the border starts on scroll-trigger, the label starts 0.2s after, the content 0.4s after that. This creates a cinematic "assembly" feeling -- the interface building itself in response to attention. **Hover-Lift Interactions:** All interactive elements use a **hover-lift** pattern -- on hover, the element translates upward by 4-6px on the Y axis, gains a diffuse box-shadow (0 8px 32px rgba(255,0,255,0.15)), and its border color transitions from Acid Cyan at 40% opacity to Electric Magenta at 80% opacity. The lift animation uses a CSS cubic-bezier(0.34, 1.56, 0.64, 1) timing function, creating a slight overshoot-and-settle that feels physically responsive, like a magnetic levitation rather than a simple translation. For text links, hover triggers the Recursive font's MONO axis to animate from 0.35 to 0.8, the text color shifts from Pale Lavender Steel to Acid Cyan, and an underline draws itself left-to-right using background-size animation (0% to 100% width, 1px height, positioned at bottom). The underline is a gradient from Electric Magenta to Acid Cyan. **Performance and Motion Hierarchy:** All animations respect a strict motion budget: - Hero sequence: 4.5 seconds total, plays once - Section entries: 1.2 seconds total per section, triggered by IntersectionObserver at 20% threshold - Hover interactions: 0.2-0.4 seconds, CSS-only (no JS) - Ambient animations (corner bracket pulse, floating nodes, circuit node pulse): infinite loops, low-frequency (3-6 second cycles), GPU-composited (transform/opacity only) - Glitch events (text corruption, datamosh bands): triggered by scroll, brief (0.15-0.8s), rare (max 2 per viewport) - **prefers-reduced-motion:** All animations except static layout disable entirely. Content renders in its final state immediately. **Content Philosophy:** AVOID: CTA-heavy layouts, pricing blocks, stat-grids, feature comparison tables, testimonial carousels, newsletter signup forms, cookie banners styled as content, "hero image + three columns" templates, gradient blob backgrounds used as decoration without purpose. EMBRACE: Full-screen narrative immersion, text as primary visual element, negative space as structural material, interface-as-metaphor, the tension between readability and visual disruption, moments of visual silence (pure black panels with a single line of text) as emotional punctuation. ## Uniqueness Notes **Differentiators from other designs:** 1. **Variable Font Axis as Interaction Language:** No other design in the portfolio uses the Recursive font's variable axes (MONO, CASL) as interactive state indicators. The text physically morphing between humanist and monospace forms on hover creates a unique micro-interaction that directly embodies the site's AI-human theme. This is not decorative typography -- it is typography as user interface, where the shape of letters communicates system state. 2. **Structural Glitch Art (Not Filter Glitch):** While glitch appears at 11% frequency in aesthetics and 4% in imagery, existing implementations typically apply CSS filters or static overlays. This design integrates glitch as a narrative device -- text corruption events that target individual words, datamosh transition bands that serve as section dividers, RGB displacement that responds to hover state. The glitch is not a style; it is a storytelling mechanism that reinforces the corrupted-transmission metaphor. 3. **Ambient Data Atmosphere:** The auxiliary data strip and floating annotation nodes create a visual density layer unique in the portfolio. No other design features a parallel-scrolling secondary content column filled with atmospheric pseudo-telemetry, or z-layered floating metadata fragments. This creates the sensation of existing inside a living information system rather than viewing a static page. 4. **Circuit Trace Activation on Scroll:** While circuit motifs appear at 20% frequency, no other design implements circuit traces as scroll-reactive animated elements that "power on" content sections with traveling light dots and opacity shifts. The circuit network here is not decorative wallpaper -- it is a functional visual metaphor where content is literally connected to and activated by the underlying trace infrastructure. 5. **Dual-Column Asymmetric HUD with Parallax Depth:** The combination of a 60% primary content zone offset left with an 18% auxiliary data strip scrolling at 0.6x speed within a persistent viewport frame is architecturally unique. No other design combines asymmetric column layout, differential scroll rates, and a fixed HUD frame in a single composition. **Chosen Seed/Style:** - aesthetic: cyberpunk - layout: hud-overlay - typography: expressive-variable - palette: dopamine-neon - patterns: hover-lift - imagery: glitch-art - motifs: circuit - tone: raw-authentic **Avoided Overused Patterns:** - playful aesthetic (98%) -- replaced with raw-authentic tone - centered layout (99%) -- replaced with asymmetric HUD-overlay at 3% frequency - mono typography as sole type choice (99%) -- Share Tech Mono used only for interface labels; primary typography uses Recursive variable and Chakra Petch display - warm palette (100%) -- replaced with dopamine-neon cold neons on void black - scroll-triggered as sole animation pattern (97%) -- hover-lift is the primary interaction pattern at 4% frequency; scroll triggers are secondary and used only for section entry choreography - friendly tone (97%) -- replaced with raw-authentic at 3% frequency - minimal imagery (95%) -- replaced with glitch-art at 4% frequency - vintage motifs (75%) -- replaced with circuit at 20% and glitch-specific constructions