# Design Language for gabs.games ## Aesthetics and Tone gabs.games channels the electrifying rush of a neon-drenched arcade cabinet that has been flattened into a two-dimensional poster universe -- think Saul Bass meets Jet Set Radio, rendered through the lens of contemporary flat design with zero gradients, zero shadows, and zero apologies. The visual language is **dopamine flat**: crisp geometric shapes in eye-searing neon hues slammed against jet-black voids, where every element pulses with kinetic potential like a coiled spring about to release. The mood is Saturday morning at a Tokyo game center in 2003, if the game center existed inside a screenprinted zine. Everything screams velocity, confidence, and unapologetic maximalism-within-minimalism -- loud colors, clean edges, bold commitments. The tone is energetic without being exhausting. It channels the breathless enthusiasm of a friend explaining their favorite game at 2 AM -- rapid-fire, gesture-heavy, infectious. There is no corporate polish here. No gentle onboarding. The site hits you in the face with color and motion from the first pixel, and it never lets up. The energy is sustained through rhythm and contrast rather than volume -- sharp silences (black negative space) punctuated by explosive bursts of neon. The inspiration draws equally from: the bold geometric posters of the Swiss International Style stripped of their restraint, the flat vector aesthetics of games like Katamari Damacy and Untitled Goose Game, the high-energy motion graphics of Adult Swim bumpers, and the irreverent visual language of indie game jam culture where polish matters less than personality. ## Layout Motifs and Structure The layout operates as a **full-bleed narrative scroll** -- content extends edge-to-edge with zero margins against the viewport, creating an immersive canvas where the browser window itself becomes the game screen. There is no container. There is no max-width. Every section owns the entire viewport width and height. **Section Architecture:** The page is divided into 5-6 full-viewport "screens" (100vh each), each functioning like a level in a game. Transitions between screens are not smooth scrolls but **elastic snap points** -- CSS `scroll-snap-type: y mandatory` with custom elastic easing that overshoots and bounces back, giving every section change the tactile satisfaction of a button click on a controller. **The Grid (or Anti-Grid):** Within each screen, content is positioned using absolute/fixed placement rather than traditional flow layout. Elements float at deliberately irregular positions -- a headline anchored 15% from the left and 30% from the top, an illustration drifting in the lower-right quadrant, a caption pinned to the bottom-left corner. This creates a **pinboard composition** where the eye bounces between elements like a ball in a pinball machine. No two screens share the same layout pattern. **Floating Element System:** Decorative elements (geometric shapes, mini-illustrations, typographic fragments) hover in the viewport using CSS transforms with `will-change: transform`. They drift with subtle sinusoidal motion (CSS `animation` using `@keyframes` with cubic-bezier easing), creating a sense of weightlessness. On scroll, these floating elements shift position with parallax-like offset but implemented through `transform: translateY(calc(var(--scroll-offset) * 0.3))` rather than traditional parallax, maintaining the flat aesthetic by never implying depth -- just lateral displacement. **Navigation:** A fixed circular "button" in the bottom-right corner (60px diameter, neon magenta #FF2D78 fill) contains a simple SVG hamburger icon. Tapping it triggers a full-screen overlay menu that slides in from the right with an elastic spring animation (200ms overshoot, 400ms settle). Menu items are oversized (3rem+), stacked vertically, left-aligned, with generous 2rem gaps between them. ## Typography and Palette **Typography:** - **Headlines / Display:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with distinctive geometric character and a subtle monospaced heritage. Used at 4rem-9rem for screen titles and hero text. Weight: 700 (bold). Letter-spacing: -0.03em (tightly tracked for impact). Line-height: 0.95 (headlines crashing together for visual density). Text-transform: uppercase for primary headlines, mixed case for secondary. - **Body / UI Text:** "Inter" (Google Fonts) -- the workhorse sans-serif optimized for screens, providing crystal-clear readability at small sizes against the high-contrast neon-on-black palette. Used at 1rem-1.25rem for body copy, labels, and interface text. Weight: 400 (regular) for body, 600 (semi-bold) for emphasis. Letter-spacing: 0.01em. Line-height: 1.65 for body paragraphs. - **Accent / Code / Tags:** "JetBrains Mono" (Google Fonts) -- a developer-focused monospace with ligatures and distinctive character shapes. Used sparingly for tags, labels, version numbers, and small metadata text at 0.75rem-0.875rem. Weight: 500. Letter-spacing: 0.05em. Provides a subtle "dev culture" signal that reinforces the gaming/tech identity. **Palette:** The palette is built on a jet-black canvas with five neon accent colors, each assigned a specific semantic role: | Role | Color | Hex | Usage | |------|-------|-----|-------| | Canvas | Void Black | #0A0A0A | Page background, negative space, breathing room | | Primary | Electric Magenta | #FF2D78 | CTAs, active states, primary highlights, the "player 1" color | | Secondary | Acid Lime | #BFFF00 | Success states, secondary highlights, hover accents, the "player 2" color | | Tertiary | Cyan Shock | #00F0FF | Links, informational elements, cool-toned accents | | Warm | Solar Orange | #FF6B2C | Warnings, energy bursts, decorative shapes | | Neutral | Chalk White | #F0F0E8 | Body text, headlines, primary readable content | **Color Rules:** - Black backgrounds only. Never white. Never gray. The void is the canvas. - Neon colors are used at full saturation always. No tints, no pastels, no opacity reductions. - Maximum two neon colors per screen/section to prevent visual chaos. - Text is always Chalk White (#F0F0E8) on black, or Void Black (#0A0A0A) reversed out of neon blocks. - Neon colors are never used for body text -- only for accents, shapes, and interactive elements. ## Imagery and Motifs **Custom Illustration Style:** All imagery is custom flat-vector illustration with a strict visual grammar: solid fills only, no gradients, no shadows, no outlines thicker than 2px. Characters and objects are rendered in a simplified geometric style -- circles for heads, rectangles for bodies, triangles for motion indicators. The illustration palette is limited to the six palette colors plus a single dark gray (#1A1A1A) for silhouette details. **Character Illustrations:** Simple, expressive character figures appear throughout the site -- faceless geometric avatars performing gaming actions (holding controllers, jumping, celebrating, coding). These characters are built from basic shapes: circle heads, pill-shaped bodies, rectangle limbs. Despite their simplicity, they convey emotion through posture and gesture. They are always rendered in Chalk White (#F0F0E8) with single-color accents (a magenta controller, a lime headset, a cyan screen glow). **Floating Geometric Elements:** The signature visual motif is a constellation of floating geometric primitives that populate the negative space of every screen: - **Circles:** Solid neon-colored discs (20px-80px diameter) that drift slowly across the viewport - **Triangles:** Equilateral, rotated at various angles, outlined in 2px neon strokes with transparent fills - **Crosses/Plus Signs:** 4px-wide crosses at 15px-40px, scattered like stars - **Squares:** Small (10px-25px) solid fills, rotated 45 degrees to become diamonds - **Dots:** Tiny 4px circles forming loose grid patterns in dark gray (#1A1A1A), barely visible against the black canvas but creating subtle texture These elements use CSS `animation` with varying durations (15s-45s), delays, and sinusoidal paths to create a living, breathing background that never repeats and never distracts. Their movement is slow and hypnotic -- not frantic. **Interaction Indicators:** Hoverable elements gain a "power-up" effect: a 2px neon ring expands outward from the element using `box-shadow` animation (0 0 0 0 → 0 0 0 8px with the element's accent color), then fades. This mimics the "coin collected" feedback loop from platformer games. **Decorative Dividers:** Between sections, instead of lines or whitespace, a row of animated geometric shapes marches across the viewport in a ticker-tape formation -- small triangles, circles, and squares sliding left-to-right in an infinite CSS animation loop, like the bonus round of a retro game. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should be built as a single-page vertical scroll with CSS `scroll-snap-type: y mandatory` and `scroll-snap-align: start` on each section. Each section is exactly `100vh` tall and `100vw` wide with `overflow: hidden`. The experience should feel like flipping through screens of a game, not scrolling a webpage. **Opening Sequence:** The first screen opens with a completely black viewport (#0A0A0A). After 300ms, the domain name "gabs.games" types itself onto the center of the screen in Space Grotesk 700 at 7vw, one character at a time with 80ms intervals, in Chalk White. As each letter appears, a small burst of 3-5 floating geometric shapes (random neon colors) explodes outward from the letter's position using CSS `@keyframes` with elastic timing functions. By the time the full name is visible, the screen is populated with 30+ gently drifting shapes. A subtle CSS animation then shifts the entire cluster of shapes to drift slowly upward, creating the illusion that the name is generating energy. **Elastic Animation System:** All transitions use custom cubic-bezier timing functions that create an elastic/springy feel: - **Enter:** `cubic-bezier(0.34, 1.56, 0.64, 1)` -- overshoot and settle - **Exit:** `cubic-bezier(0.36, 0, 0.66, -0.56)` -- anticipation before departure - **Hover:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)` -- smooth with gentle deceleration - **Snap:** `cubic-bezier(0.68, -0.55, 0.265, 1.55)` -- extreme overshoot for scroll-snap feel These timing functions should be stored as CSS custom properties (`--ease-enter`, `--ease-exit`, etc.) on `:root` for consistency. **Interactive Floating Elements:** The floating geometric shapes should respond to mouse movement via JavaScript: when the cursor passes near a shape (within 100px radius), the shape accelerates away from the cursor with elastic easing, then slowly drifts back to its original trajectory. This creates a "pushing through a field of bubbles" interaction without requiring WebGL or heavy computation -- pure CSS transforms driven by `requestAnimationFrame` with simple distance calculations. **Screen-by-Screen Narrative:** Each 100vh section tells a chapter of the gabs.games story: 1. **Title Screen** -- Name reveal with particle burst (described above) 2. **The Vibe** -- A single massive custom illustration (full-viewport) showing a stylized gaming scene, with key elements labeled by floating text fragments that drift into position on scroll-snap 3. **What We Do** -- Text-heavy section with oversized Space Grotesk headlines (6rem+) stacked vertically, each line a different neon color, creating a concrete-poetry effect 4. **The Collection** -- A horizontal strip of game thumbnails (CSS `overflow-x: auto` with `scroll-snap-type: x mandatory`) embedded within the vertical scroll, creating a scroll-within-a-scroll 5. **Join the Party** -- Simple contact/community section with a single oversized input field (email) styled as a game text-entry box with a blinking cursor and neon border **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Gradients of any kind -- all color transitions are hard-edged - Drop shadows, box shadows for depth (only for the power-up hover effect) - Rounded corners beyond 4px (flat design means sharp geometry) - Stock photography or realistic imagery of any kind - Thin, delicate typography -- everything is bold and confident - Gray backgrounds or off-white sections -- the void is always black **Technical Notes:** - Use CSS custom properties extensively for the color palette and timing functions - Floating elements should be generated with a small JavaScript module that creates DOM elements with randomized positions, sizes, colors, and animation parameters - Use `IntersectionObserver` for scroll-triggered animations rather than scroll event listeners - All animations should respect `prefers-reduced-motion` by falling back to instant transitions ## Uniqueness Notes **Differentiators from other designs:** 1. **True Flat-Design Discipline:** While most designs in the portfolio use gradients (91%), shadows, and depth cues, gabs.games commits to absolute flatness -- zero gradients, zero shadows, zero implied depth. Every visual element exists on a single plane. Color transitions are always hard-edged. This creates a visual language that is rare in the portfolio (flat-design at only 2% frequency) and immediately distinctive. 2. **Dopamine-Neon on Pure Black Canvas:** The palette rejects the warm tones that dominate the portfolio (100% of designs use warm palettes) in favor of a cold void-black background (#0A0A0A) with full-saturation neon accents. The dopamine-neon palette (only 5% frequency) creates an arresting visual contrast that is physiologically stimulating -- the high luminance differential between neon colors and the black canvas triggers heightened visual attention. 3. **Floating Elements as Primary Visual System:** Rather than using floating decorative elements as garnish (only 1% frequency in existing designs), gabs.games makes them the foundational visual identity. The constellation of drifting geometric primitives is not decoration -- it IS the design. The shapes respond to cursor movement, generate from text animations, and form the visual connective tissue between every section. 4. **Elastic Animation Language:** While most designs rely on scroll-triggered (97%) and parallax (79%) patterns, gabs.games builds its motion vocabulary around elastic/spring physics (15% frequency). Every transition overshoots and settles. Every interaction bounces. The site feels like it is made of rubber and energy, not paper and ink. 5. **Game-Screen Pagination:** The scroll-snap full-viewport sectioning creates a distinctly game-like navigation experience that rejects the continuous-scroll paradigm. Each section is a discrete "level" with its own visual identity, entered and exited with satisfying elastic snaps rather than smooth scrolling. 6. **Custom Illustration as Identity (Not Decoration):** With custom-illustration at only 7% frequency in the portfolio, the bespoke geometric character illustrations and scene compositions give gabs.games a visual identity that cannot be replicated with stock assets or CSS effects alone. The characters are simple enough to be rendered as SVG but distinctive enough to become mascots. **Chosen Seed/Style:** aesthetic: flat-design, layout: full-bleed, typography: sans-grotesk, palette: dopamine-neon, patterns: elastic, imagery: custom-illustration, motifs: floating-elements, tone: energetic **Avoided Overused Patterns:** - playful aesthetic (97%) -- replaced with flat-design (2%) - centered layout (99%) -- replaced with full-bleed (31%) - mono typography (99%) -- replaced with sans-grotesk (5%) - warm palette (100%) -- replaced with dopamine-neon (5%) - scroll-triggered patterns (97%) -- replaced with elastic (15%) - minimal imagery (95%) -- replaced with custom-illustration (7%) - vintage motifs (76%) -- replaced with floating-elements (1%) - friendly tone (96%) -- replaced with energetic (7%)