# Design Language for gabs.ai ## Aesthetics and Tone gabs.ai is an underwater command center where bioluminescent data streams flow through kelp forests of gradient mesh -- a seapunk research station that catalogues the value (gabs = price/cost in Korean) of things that were never meant to have prices. The seapunk aesthetic immerses everything in oceanic light: teal, aquamarine, deep navy, with surfaces that ripple and shimmer like looking through water at a computer screen. But this is not decorative ocean-theming -- it is a complete environmental immersion where the interface itself seems submerged. The tone is tech-tutorial -- precise, instructional, methodical. The site explains concepts about value and pricing with the clarity of a well-written API documentation page, but rendered in the visual language of a deep-sea research facility. Code-like precision meets oceanic atmosphere. Terminal commands are displayed in gradient-mesh bubbles. Explanations unfold in split-screen panels as if monitoring two data streams simultaneously. Visual inspiration: the bioluminescent creatures of the Mariana Trench photographed through scientific equipment; the underwater scenes in Neon Genesis Evangelion; a Bloomberg Terminal submerged in an aquarium; the gradient mesh experiments of Y2K-era Adobe Illustrator tutorials applied to tidal patterns. ## Layout Motifs and Structure The layout uses a **split-screen** architecture -- the viewport is divided into two persistent columns that function as parallel information streams, like the dual monitors of a research workstation. **Split-Screen System:** - Left panel: 45% width, fixed navigation and contextual information - Right panel: 55% width, scrollable main content - A 2px vertical divider line in #00f0ff separates the panels - The left panel has a subtle gradient-mesh background animation; the right panel has a solid dark background **Section Flow:** 1. **The Surface (Hero):** Both panels share a single hero moment. Left panel: "GABS" in large grotesk type. Right panel: ".AI" completing the domain. Below: a gradient-mesh ocean surface animation spanning both panels, creating the moment of "diving below." 2. **The Depth (Content):** Left panel becomes a fixed sidebar showing section navigation and abstract-tech motif illustrations (circuit-like diagrams of value networks). Right panel scrolls through content sections: tutorials, explanations, interactive examples about pricing and value concepts. 3. **The Lab:** A section where the split-screen ratio inverts (right becomes narrow, left becomes wide) for a demonstration/example area. This break in the pattern creates emphasis. 4. **The Trench:** Final section. Both panels go dark. A single gradient-mesh sphere pulses in the center of the viewport, bridging both panels. Below it, the domain name and a closing thought. ## Typography and Palette **Typography:** - **Display / Headlines:** "Inter" (Google Fonts) -- the definitive modern grotesque, with tight metrics and excellent rendering at all sizes. Used at 3rem-7rem for display text. Weight: 800. Letter-spacing: -0.03em. Inter's sans-grotesk precision perfectly suits the tech-tutorial tone while remaining legible against the complex gradient-mesh backgrounds. - **Body / Tutorial Content:** "Inter" at 16px/1.7, weight 400 for body, 600 for emphasis. Keeping the same family throughout reinforces the technical, systematic feel -- like a documentation site where typographic consistency is a feature. - **Code / Terminal:** "Fira Code" (Google Fonts) -- a monospace with programming ligatures. Used at 14px for code examples, terminal commands, and data values. The code blocks use a slightly lighter dark background (#1a2a3a) to differentiate from the surrounding ocean dark. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ocean | Abyssal navy | #0a1628 | Primary background, right panel | | Reef Dark | Teal-black | #0d2137 | Left panel background, code block backgrounds | | Bioluminescent Cyan | Electric aqua | #00f0ff | Primary accent, links, divider line, highlights | | Mesh Teal | Gradient anchor A | #0ea5a0 | Gradient-mesh component, secondary accent | | Mesh Violet | Gradient anchor B | #6b3fa0 | Gradient-mesh component, deep-water tones | | Mesh Emerald | Gradient anchor C | #00c897 | Gradient-mesh component, life/growth tones | | Text Primary | Seafoam white | #e0f7fa | All body text on dark backgrounds | | Text Muted | Dim aqua | #5a8a8a | Metadata, comments, navigation labels | | Abstract-Tech Line | Bright teal | #4dd0e1 | Circuit/network diagram strokes in motifs | The palette is dark-neon with an oceanic specificity. Every color has an underwater referent: the abyssal navy of deep water, the electric cyan of bioluminescence, the teal and emerald of coral reef life, the violet of deep-sea twilight zones. ## Imagery and Motifs **Gradient-Mesh as Living Water:** The primary imagery is gradient-mesh -- CSS/SVG gradient meshes that animate slowly, simulating the undulating surface of water viewed from below: - The left panel background uses a radial-gradient mesh with 4 color stops (#0ea5a0, #6b3fa0, #00c897, #0d2137) that shift positions over a 20-second CSS animation cycle - A hero gradient-mesh sphere (200px) in the closing section uses the same palette, pulsing with opacity oscillation - These meshes are never static -- they always move slightly, maintaining the underwater atmosphere **Abstract-Tech Motifs:** The abstract-tech motif manifests as network diagrams in the left panel: - SVG node-and-edge graphs representing value networks: circles connected by lines, each node labeled with a concept (cost, worth, exchange, debt) - Drawn in bright teal (#4dd0e1) 1px strokes on the dark teal-black background - These diagrams are semi-interactive: on hover, nodes glow and connected edges brighten **Scale-Hover Interaction:** The scale-hover pattern applies to content blocks in the right panel: - On hover, content sections scale to 1.01x and gain a faint border-left: 2px solid #00f0ff - The scaling is subtle -- enough to create a "focusing" effect, as if adjusting a microscope - Transition: 200ms cubic-bezier(0.25, 0.8, 0.25, 1) ## Prompts for Implementation **Full-Screen Narrative Experience:** The split-screen creates a dual-stream experience: the left panel provides orientation (where am I, what section is this, what abstract diagram applies) while the right panel delivers content. The user's attention shifts between panels like monitoring two screens in a lab. **Split-Screen Implementation:** Use CSS Grid: grid-template-columns: 45% 55% on the main container. Left panel: position: sticky, top: 0, height: 100vh, overflow: hidden. Right panel: overflow-y: auto. The 2px divider is a pseudo-element on the grid container. **Gradient-Mesh Animation:** Left panel background: multiple overlapping radial-gradients with animated background-position. Example: background: radial-gradient(circle at 30% 40%, #0ea5a0 0%, transparent 50%), radial-gradient(circle at 70% 60%, #6b3fa0 0%, transparent 50%), radial-gradient(circle at 50% 80%, #00c897 0%, transparent 40%). Animate the percentage positions via @keyframes over 20s, infinite. **Responsive Behavior:** On mobile (below 768px), the split-screen collapses to a single column. The left panel content moves to a top bar and a bottom navigation. The gradient-mesh animation simplifies to a single radial-gradient. All content scrolls vertically. **AVOID:** CTA buttons, pricing tables (ironic given the domain theme -- the site discusses pricing conceptually, not commercially), testimonials, stock photography, card grids, cookie banners. ## Uniqueness Notes **Differentiators from other designs:** 1. **Seapunk aesthetic is extremely rare (unique use):** Seapunk has essentially zero representation in the collection. This design creates a complete oceanic immersion through palette, gradient-mesh animation, and spatial metaphor -- the user is literally "below the surface" of conventional interfaces. 2. **Split-screen as dual research streams (3% frequency):** While split-screen exists rarely, it is never used to create a fixed-context / scrollable-content duality that mimics a dual-monitor research setup. 3. **Gradient-mesh as animated underwater environment:** Gradient-mesh imagery (7%) is typically static. Here, the mesh constantly shifts, creating living water that transforms a background technique into an atmospheric system. 4. **Tech-tutorial tone in an oceanic environment:** The collision of precise, instructional documentation-style writing with deep-sea visual language creates a unique experience -- like reading a technical manual written by marine biologists. 5. **Abstract-tech motifs rendered as value-network diagrams:** The abstract-tech motif (9%) is recontextualized as networks of economic concepts (value, cost, exchange), directly serving the domain's theme of gabs (value/price). **Documented Seed/Style:** aesthetic: seapunk, layout: split-screen, typography: sans-grotesk, palette: dark-neon, patterns: scale-hover, imagery: gradient-mesh, motifs: abstract-tech, tone: tech-tutorial **Avoided Overused Patterns:** - corporate aesthetic (62%) -- seapunk instead - asymmetric layout (94%) -- split-screen (3%) instead - warm palette (100%) -- dark-neon (7%) instead - parallax patterns (98%) -- scale-hover (1%) instead - mono typography (98%) -- sans-grotesk (5%) instead - tech motifs (96%) -- abstract-tech (9%, but with unique value-network interpretation) - friendly tone (64%) -- tech-tutorial (3%) instead - minimal imagery (94%) -- gradient-mesh (7%) instead