# Design Language for gabs.cx ## Aesthetics and Tone gabs.cx is a vaporwave currency exchange frozen in crystalline blue light -- a site that transforms the concept of value (gabs = price in Korean) into an object of aesthetic worship, displayed in a digital reliquary of leather-bound luxury and spectral periwinkle haze. Like bada.cafe (which shares this seed constellation), the vaporwave aesthetic is treated with reverence rather than irony. But where bada.cafe was an espresso lounge, gabs.cx is a numismatist's private vault: every element carries the weight of currency, of denomination, of things carefully counted and catalogued. The tone is elegant-sophisticated -- the voice of someone who understands that the word "value" itself is infinitely more interesting than any number that follows it. Text is measured, precise, and occasionally philosophical. There is no sales language because nothing is for sale. The site is a meditation on the concept of exchange itself, housed in a digital environment that feels like the interior of a Faberge egg reimagined by a vaporwave artist. Visual inspiration: the leather-and-gilt interiors of a Zurich private bank's vault room; the holographic security features of Japanese yen notes magnified to mural scale; Roman coin collections displayed in blue velvet trays under gallery lighting; the album art of Hong Kong Express and Telepath rendered at the scale of institutional architecture. ## Layout Motifs and Structure The layout is **centered** -- a single axis of vertical symmetry with all content organized along a central spine, like coins stacked on a velvet tray. **Centered Architecture:** - Max-width: 720px, centered horizontally - All elements are center-aligned: text, images, decorative motifs - Generous vertical spacing: 140px between major sections on desktop - The leather texture background is fixed and full-viewport; content panels float above it **Section Flow:** 1. **The Vault (Hero):** 100vh. "GABS.CX" in Bebas Neue, enormous (9rem), centered, in ice lavender (#c8d4f0). Below: a single line in Cormorant Garamond italic describing the site's concept. The leather background is most visible here through the absence of content panels. 2. **The Collection:** 4-5 content panels, each a semi-transparent parchment rectangle floating on the leather. Each panel contains a short essay on an aspect of value/exchange. Panels have thin periwinkle borders and subtle shadows. 3. **The Denomination:** A section of three circular elements arranged horizontally (like coins), each containing a single word/concept. Circles have thin gold borders and vaporwave motif SVGs inside. 4. **The Ledger:** A single long content panel with a formatted list of value concepts, styled like entries in an antique ledger. 5. **The Seal:** Domain name small, centered, with a wireframe sphere slowly rotating above it. Silence below. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- condensed all-caps display face, used at 5rem-9rem. Weight: 400. Letter-spacing: 0.1em. The extreme verticality of Bebas Neue echoes Roman columnar proportions, appropriate for a site that treats currency as classical artifact. - **Body / Paragraphs:** "Cormorant Garamond" (Google Fonts) -- high-contrast elegant serif. Used at 18px/1.65 for body text. Weight: 400 for body, 600 for emphasis, 300 italic for the hero subtitle. The literary quality of Cormorant Garamond frames value discussions as philosophical discourse. - **Accent / Labels:** "Cormorant SC" (Google Fonts) -- small-caps variant. Used at 13px, letter-spacing: 0.18em for labels, section markers, and the ledger headings. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Vault | Midnight indigo | #0d0b1a | Behind leather layer, deepest shadows | | Leather Base | Espresso brown | #2a1810 | Leather texture base, warm grounding | | Leather Highlight | Aged cognac | #6b4226 | Leather texture highlights | | Ethereal Primary | Periwinkle blue | #7b9acc | Borders, links, decorative elements | | Ethereal Glow | Ice lavender | #c8d4f0 | Headlines on dark, glowing elements | | Panel Surface | Aged parchment | #f0e8dd | Content panels (92% opacity) | | Antique Gold | Gilt accent | #c9a96e | Coin circles, decorative rules, Greek key | | Currency Rose | Dusty pink | #d4829a | Sparse accent, denomination highlights | | Body Text | Warm charcoal | #2e2a28 | Text on parchment panels | The palette is ethereal-blue at its core: cool blue light on warm brown leather, creating a permanent twilight. The gold is restrained and antique. The rose appears only in currency-related highlights. The overall impression is an impossible dusk inside a vault. ## Imagery and Motifs **Leather Texture Environment:** The background is a CSS-generated full-grain leather: - Base: #2a1810 with radial-gradient warmth variation - Grain: SVG feTurbulence (baseFrequency: 0.65, numOctaves: 4) at 12% opacity - The leather is the world. It never scrolls. All content floats above it. **Layered-Depth Motifs:** Three visual depth layers: - Background: fixed leather texture - Middle: content panels (semi-transparent parchment with box-shadows) - Foreground: decorative SVG elements (Greek column fragment, wireframe sphere, horizon grid) Vaporwave motifs rendered in the muted palette: - A Greek Ionic column capital in periwinkle (#7b9acc) line strokes - A wireframe icosphere in gold (#c9a96e), rotating via CSS @keyframes over 120s - The vaporwave sunset grid (perspective lines converging to vanishing point) behind the closing section **Spring Animation System:** All motion uses spring easing: cubic-bezier(0.34, 1.56, 0.64, 1). Content panels spring into view (opacity 0, translateY 40px to final position) on scroll with 800ms duration and 150ms stagger. Hover underlines on links draw left-to-right. The wireframe sphere rotation is the sole exception (linear, continuous). ## Prompts for Implementation **Full-Screen Narrative Experience:** The centered layout creates a vertical corridor through the leather-and-blue environment. Each content panel is a waypoint. The user descends through the vault, encountering progressively denser content before emerging into the silence of the closing section. **Spring-Based Reveals:** Panels begin at opacity: 0, transform: translateY(40px). On viewport entry (IntersectionObserver, threshold: 0.15), they spring to final position over 800ms. Multiple panels entering simultaneously stagger by 150ms. This is the only scroll-triggered animation. **Coin Circle Elements:** Three circles (160px diameter, border-radius: 50%, border: 1px solid #c9a96e) arranged horizontally with 40px gaps. Each contains centered text in Cormorant SC and a small vaporwave SVG motif. On hover, the gold border glows: box-shadow: 0 0 15px rgba(201, 169, 110, 0.35). **Responsive Behavior:** On mobile (below 640px), content panels go full-width with 24px padding. Coin circles stack vertically. Hero text scales to 5rem. Wireframe sphere scales to 120px. The leather texture remains fixed. **AVOID:** CTA buttons, pricing calculators, exchange rate tables, corporate photography, gradient mesh, neon-bright colors, card grids, dashboard layouts. ## Uniqueness Notes **Differentiators from other designs:** 1. **Vaporwave vault for value exploration:** While sharing the vaporwave-centered-bebas-ethereal seed with bada.cafe, gabs.cx applies it to the concept of value/currency, recontextualizing the same visual vocabulary as a numismatic collection rather than a cafe. 2. **Coin-circle elements as content containers:** Circular content elements (mimicking coins) are unique in the collection -- they carry semantic meaning (currency, denomination) beyond mere visual variety. 3. **Leather texture grounding a currency concept site:** The leather-texture imagery (3% frequency) is uniquely appropriate here as it evokes the leather interiors of banking institutions and currency folios. 4. **Three-layer depth with currency-themed content:** The layered-depth motif serves the vault metaphor -- the user peers through layers to access content, like opening successive doors in a bank vault. 5. **Spring animation applied to parchment panels on leather:** The spring pattern (11%) combined with leather-and-parchment surfaces creates a unique materiality -- digital panels moving with physical weight. **Documented Seed/Style:** aesthetic: vaporwave, layout: centered, typography: bebas-bold, palette: ethereal-blue, patterns: spring, imagery: leather-texture, motifs: layered-depth, tone: elegant-sophisticated **Avoided Overused Patterns:** - corporate aesthetic (62%) -- vaporwave (3%) instead - asymmetric layout (94%) -- centered (87%, but with unique vault interpretation) - warm palette (100%) -- ethereal-blue (5%) instead - parallax patterns (98%) -- spring (11%) instead - mono typography (98%) -- bebas-bold (3%) instead - tech motifs (96%) -- layered-depth motifs instead - friendly tone (64%) -- elegant-sophisticated (5%) instead - minimal imagery (94%) -- leather-texture (3%) instead