# Design Language for gabs.cx

## Aesthetics and Tone

`gabs.cx` is a **vaporwave dream-arcade** — the feeling of walking into a shuttered 1992 Japanese arcade at 2am, where the CRT monitors still glow pink and the neon reflections pool on white marble tile. The aesthetic is not ironic nostalgia. It is sincere affection for the liminal hour when technology felt genuinely magical. The site carries a **playful-earnest** tone: it does not wink at the camera; it invites the visitor into the dream.

The visual language draws from **A E S T H E T I C S** in their truest form: pastel skies bleeding from lavender (#E8D5F5) through peach (#FDDBC3) to mint (#C9F0E8), chrome type casting soft shadows, and every interactive element responding to touch like it was built with love. The mood is **euphoric but calm** — the hype of a launch page collapsed into the warmth of a late-night chill session.

Influences: Macintosh Plus album art, Windows 95 UI rendered in pastel, early PlayStation loading screens, Japanese convenience-store aesthetics, early-web GIF culture reborn in CSS.

The site is for a personal brand / portfolio — someone named Gabs who exists in the intersection of code, creative tech, and internet culture. The tone is confident and self-assured without being corporate or sales-y. Think: a creative developer's personal homepage that feels like discovering a hidden cassette tape.

## Layout Motifs and Structure

The primary structure is a **floating card grid** — not a static Bootstrap-style grid, but an organic field of **glassmorphic cards** hovering at different z-depths. Cards appear to float above a deep gradient background, each casting a diffuse soft shadow and reflecting the ambient gradient in their frosted surfaces.

**Desktop (≥1024px):**  
A responsive CSS Grid with `auto-fill` columns of `minmax(280px, 1fr)`, 32px gap, 80px horizontal padding. Cards are staggered on load via offset animation delays. The grid does NOT lock to a fixed column count — it breathes and reflows. Maximum content width: 1200px, centered.

**Above the grid:**  
A tall hero section (100vh) with the domain name `gabs.cx` rendered in Bebas Neue at 120px, tracking 0.15em, with a **prismatic chrome effect** — CSS `background-clip: text` with an animated gradient cycling through the palette's full spectrum. Below the name, a single-line descriptor in Space Grotesk 18px, weight 300, in soft white (#F7F0FF). A subtle animated grid of perspective-vanishing lines recedes into the background (pure CSS, no canvas).

**Navigation:**  
Absolutely minimal — a floating pill nav anchored top-center, frosted glass background, 4 short labels in Space Grotesk caps, 12px, letter-spacing 0.2em. The pill casts a colored glow that shifts hue slowly as the page scrolls, following the section's dominant color.

**Footer:**  
A single centered line in Space Grotesk 13px, muted. No links, no legal, no bloat.

**Spatial logic:**  
Cards use `perspective: 800px` and `transform-style: preserve-3d`. On hover, each card rotates 3–5° on the Y axis (tilt toward cursor), rises 8px on Z, and brightens. The tilt is cursor-tracked via JS `mousemove`, creating a parallax-within-card illusion. Cards have their own internal micro-layout: icon or image at top, title in Bebas Neue, body in Space Grotesk.

## Typography and Palette

**Type system (all Google Fonts, verified):**

- **Display / hero — `Bebas Neue`** (weights: 400 only, as the font is naturally condensed display). Used for the site name, section labels, card titles. Set at 120px for hero, 32px for card titles, 48px for section headers. Letter-spacing +0.1em throughout. The condensed geometry contrasts against the softness of the palette — tension between hard and dreamy.

- **Body / UI — `Space Grotesk`** (variable, wght 300–700). Used for descriptive text, nav items, card body copy, captions. 300 weight for prose, 500 for UI labels, 600 for emphasized call-outs. The geometric-but-warm letterforms complement the vaporwave palette without feeling cold.

- **Accent / code snippets — `JetBrains Mono`** (weights 400, 600). Used sparingly for tech detail — terminal strings, version numbers, domain fragments — rendered in `#C9F0E8` (mint) on semi-transparent dark backgrounds. Adds the "tech motif" signal without dominating.

**Palette (hex values, all named):**

| Name | Hex | Use |
|------|-----|-----|
| Lavender Mist | `#E8D5F5` | Primary background gradient start |
| Peach Dream | `#FDDBC3` | Background gradient mid |
| Mint Aura | `#C9F0E8` | Background gradient end / accent |
| Chrome White | `#F7F0FF` | Hero text, nav labels |
| Rose Quartz | `#D4A5C9` | Card border shimmer, hover glows |
| Dusk Violet | `#7B5EA7` | Active states, focused ring, link hover |
| Deep Space | `#1A0E2E` | Backdrop base, card shadow |
| Frosted Card | `rgba(255,255,255,0.18)` | Card background (glassmorphic) |

The gradient background animates continuously at 8s loop — the three primary colors (Lavender, Peach, Mint) rotate position via `@keyframes` on `background-position` of a 400% wide gradient. Speed is subtle; the viewer feels warmth shifting rather than watching an animation.

## Imagery and Motifs

**No stock photography.** All imagery is either pure CSS/SVG or intentionally lo-fi:

**Glassmorphic card surfaces:**  
Cards use `backdrop-filter: blur(20px) saturate(160%)` over the animated gradient. Each card has a 1px border rendered as `rgba(255,255,255,0.35)` at top and left edges (light source simulation), dropping to `rgba(255,255,255,0.08)` at bottom and right. The effect: each card looks like a frosted acrylic panel suspended in front of a color-lit wall.

**Prismatic chrome on headings:**  
The hero `gabs.cx` text uses `background: linear-gradient(135deg, #F7F0FF 0%, #D4A5C9 25%, #7B5EA7 50%, #C9F0E8 75%, #F7F0FF 100%)` with `background-clip: text; -webkit-text-fill-color: transparent`. The gradient shifts on hover via CSS `background-position` transition.

**Retro grid floor:**  
The hero background contains a perspective grid — a classic vaporwave "infinite floor" rendered entirely in CSS. Using a single `div` with `perspective` and a repeating linear gradient creating 60px grid squares, the grid recedes to a vanishing point at the center-bottom of the hero. Color: faint violet lines (`rgba(123, 94, 167, 0.3)`) on the gradient background. No canvas, no JS.

**Floating orbs:**  
Three large `div` elements positioned absolutely, `border-radius: 50%`, with radial gradients matching the palette. They drift slowly with CSS keyframe animation (separate timing: 12s, 17s, 23s) at very low opacity (0.15–0.25), creating ambient depth-of-field blur behind cards. Filtered with `filter: blur(60px)`.

**Tech motif — constellation connectors:**  
Cards in the grid are connected by very faint SVG lines (stroke 0.5px, `rgba(212, 165, 201, 0.2)`) drawn between card corners, creating a constellation / neural-network metaphor. Lines only appear when the viewport is ≥1024px. On hover over any card, its connector lines brighten to `rgba(212, 165, 201, 0.7)` with a soft glow filter.

**Icon language:**  
Each card carries a single icon — rendered as a CSS-clipped SVG in the Dusk Violet / Chrome White color pair. Icons are in a clean, rounded outline style (24px stroke width equivalent). Topics: code brackets, link arrows, cassette tape (Easter egg card), sparkle star, terminal prompt.

## Prompts for Implementation

**Build this as a single-page, continuous-scroll experience.** No routing, no page transitions, no modal overlays. The entire site lives on `index.html`. The viewport is the portal; scrolling is the journey.

**Hero section — the anchor:**  
Begin with `position: relative; height: 100vh; overflow: hidden`. The animated gradient lives on `::before` pseudo-element at `position: absolute; inset: 0; z-index: 0`. The perspective grid lives on a second `::after` pseudo-element. The floating orbs are real DOM elements at `z-index: 1`. The hero text block is at `z-index: 2`, centered with flexbox.

Implement the animated background with:
```css
@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero {
  background: linear-gradient(-45deg, #E8D5F5, #FDDBC3, #C9F0E8, #D4A5C9, #E8D5F5);
  background-size: 400% 400%;
  animation: aurora 8s ease infinite;
}
```

**Card micro-interactions — the soul of the page:**  
Every card must implement the `mousemove` tilt effect via vanilla JS event delegation. Use `requestAnimationFrame` for smoothness:
```javascript
document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
    card.style.transform = `perspective(800px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg) translateZ(8px)`;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'perspective(800px) rotateY(0) rotateX(0) translateZ(0)';
  });
});
```

**Card stagger animation on load:**  
Use `IntersectionObserver` to trigger card entrance animations when cards enter viewport. Cards start at `opacity: 0; transform: translateY(24px)` and transition to final state in 400ms. Each card in a row gets a 60ms additional delay based on its grid column index (calculated via JS), creating a wave-stagger left-to-right.

**Navigation pill scroll behavior:**  
On scroll, read the current section's `--section-color` CSS variable and apply it as the nav pill's `box-shadow` glow color, transitioning over 300ms. This creates a live color feedback as the user moves through sections.

**Glassmorphic cards — CSS specifics:**  
```css
.card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  border-right-color: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(26, 14, 46, 0.18), 0 1px 0 rgba(255,255,255,0.5) inset;
  transition: transform 0.15s ease, box-shadow 0.25s ease;
}
```

**Constellation SVG layer:**  
A single `<svg>` element positioned `fixed; inset: 0; pointer-events: none; z-index: 0` at low opacity. Lines are drawn between card center-points using JS `getBoundingClientRect()` on DOMContentLoaded and on resize. Store card positions in an array; redraw on `ResizeObserver` callback.

**Typography loading:**  
Load only two Google Fonts: `Bebas+Neue` (400) and `Space+Grotesk:wght@300;500;600` plus `JetBrains+Mono:wght@400;600`. Use `font-display: swap` and `<link rel="preconnect">` for performance. Keep the total font payload under 80KB.

**Scrollbar:**  
Hide default scrollbar; implement a custom 4px right-edge scrollbar using `::-webkit-scrollbar` styled in Dusk Violet (`#7B5EA7`), track in transparent, thumb in `rgba(123,94,167,0.5)` with `border-radius: 4px`.

**Color-shift on section entry:**  
Each content section has a `data-section-hue` attribute (hero: `270`, work: `300`, about: `200`, contact: `330`). An `IntersectionObserver` at 50% threshold reads the hue and updates `document.documentElement`'s `--active-hue` CSS variable. The nav pill glow, floating orb tints, and card border shimmer all read this variable, creating a living hue shift as the user scrolls through sections.

**AVOID:** Pricing grids, testimonial carousels, stock hero images, cookie banners, any grid that feels like a SaaS dashboard, forced CTAs in every card.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = **vaporwave**, layout = **card-grid**, typography = **bebas-bold**, palette = **creamy-pastel**, patterns = **micro-interactions**, imagery = **glassmorphic-cards**, motifs = **tech**, tone = **playful**.

**Differentiators from the existing design corpus:**

1. **glassmorphic-cards imagery at 0% frequency — the rarest visual treatment in the registry.** No other completed design uses glassmorphic cards as its primary imagery token. This site makes the frosted acrylic panel the central visual grammar, not a decoration layer on top of photography or illustration.

2. **Vaporwave aesthetic executed through pastel warmth rather than dark-neon aggression.** The frequency report shows vaporwave at only 5%, and the 2–3 existing uses lean dark (deep purple, neon pink on black). `gabs.cx` inverts this: the palette is cream-lavender-peach-mint — vaporwave in the daylight hour, not at midnight. The retro grid, chrome text, and perspective floor exist inside a bright, warm field rather than a dark vacuum. This is a conscious sub-genre distinction.

3. **Card-grid at 5% and micro-interactions at 3% combined into a single coherent system.** The corpus rarely combines these two low-frequency tokens. Here, the card grid IS the micro-interaction system — every card is a micro-interaction surface with 3D tilt, constellation connectors, and hue-reactive glow. The patterns are not added on top of the layout; they are the layout.

4. **The Bebas Neue / Space Grotesk pairing avoids the corpus's dominant mono (89%) and humanist (38%) type choices.** Using a condensed display font (bebas-bold token, 4% frequency) for hero and card titles while pairing with Space Grotesk's geometric warmth creates a typographic voice that is neither terminal-code-cold nor editorial-serif-warm — it occupies a genuinely underused register.

5. **Avoided from frequency analysis (OVERUSED):** parallax (90%), stagger-as-primary-entrance (66%), centered layout (91%), warm palette as background (94%), hand-drawn aesthetic (71%), mono typography (89%).
<!-- DESIGN STAMP
  timestamp: 2026-05-07T17:35:48
  seed: seed
  aesthetic: `gabs.cx` is a **vaporwave dream-arcade** — the feeling of walking into a shutte...
  content_hash: 2f2b090c9335
-->