# Design Language for gabs.games ## Aesthetics and Tone gabs.games is conceived as **The Velvet Salon** — an after-hours parlor where games are taken seriously enough to be played beautifully. Imagine a 19th-century burgundy-walled drawing room (oxblood drapery, cream marble fireplace, candle smoke caught in a single wedge of afternoon light) — and then imagine the entire thing rendered in modern glass: every chesterfield, every backgammon piece, every velvet rope dissolved into a frosted, translucent, faintly burgundy-tinted pane that hovers in vast quiet emptiness. The site is a single, slow, confident gesture: a sophisticated host who lets the silence sit before laughing. The mood is **elegant-sophisticated** but never cold. It is the elegance of a well-oiled hinge — playful in motion, precise in stillness. There is a wink behind the velvet. The cream is whipped, the burgundy is poured, the typography is condensed because the host is *leaning in*. Every glass card lands with a small physical bounce, like a coin set down on a marble counter — sound implied, not played. The voice that pervades the site is one of *gentle mischief*: someone who knows the rules of the game intimately, has chosen to play them with you, and is going to lose on purpose at exactly the right moment. Inspirations woven together — the visual cadence of Wes Anderson interiors (centered, deadpan, dollhouse-precise), the tactile quietness of a Romain Gary first edition in oxblood cloth, the warm refraction of Apple's frosted-glass introductions of the 2020s, and the negative-space discipline of Helmut Schmid's *Typography Today*. The site should feel like the *intermission* of an opera — hushed, gilt, and full of held breath — except the opera is a board game tournament and the audience is laughing into their gloves. The presiding emotion is **anticipation made luxurious**. Not "buy now, play now, click here." Rather: *the game is about to begin, and you are exactly where you should be.* ## Layout Motifs and Structure The site is built on a **ma-negative-space** discipline: 70-78% of every viewport, at every scroll position, is intentional emptiness. Cream emptiness above. Burgundy emptiness around. The remaining 22-30% is where everything happens — and that scarcity is the whole point. Negative space is not a margin here; it is the **stage**, and content is the rare actor stepping onto it. The grid is a **9-column asymmetric salon grid** with a deliberate quirk: columns 1-3 are "the curtain" (almost always empty, a vertical run of cream that breathes), columns 4-7 are "the parquet" (where glass cards alight), and columns 8-9 are "the mantelpiece" (small bronze-sized fixtures — single condensed words, a tiny ornamental glyph, a number, the moderator's clock). The eye is trained left-to-right but the *weight* is always slightly off-center, the way a good still life refuses to sit dead in the middle. **Vertical structure, in scroll order:** 1. **The Hush** (100vh) — The opening. Pure cream (#F4ECDD). One condensed word, oversized but not enormous, dropped slightly above optical center: **gabs**. After 1200ms the second word **.games** bounces in from below in burgundy, settling with a damped overshoot. Nothing else. Eight seconds of nothing else, if you wait. The cursor is the only motion. Particle motes drift — three of them, no more — like dust in an unopened library. 2. **The Invitation** (140vh) — A single glass card, frosted oxblood, positioned in columns 4-6, scroll-pinned. As you scroll, the card does not move; instead, the invitation engraved on its face *is written*, line by line, in condensed type: "An evening, a table, six guests, two dice, no clocks." Below the card, a vast cream void. To the right, in columns 8-9, a tiny moving glyph — a single rotating game token, hand-drawn, in burgundy line — that turns once per 6 seconds. 3. **The Cabinet of Games** (multi-screen, horizontal-scroll within vertical-scroll) — Six glassmorphic cards arranged in a *honeyed parquet* — not a grid but a deliberately arrhythmic alignment, like cards laid out for solitaire. Each card is a game. Each card has its own particle behavior (chess: slow drifting motes that align to invisible squares; backgammon: motes that bounce off the bottom; go: motes that orbit gravitational stones; bridge: motes that fall in suit-coloured pairs; mahjong: motes that *click* into rows; charades: motes that briefly form a recognizable silhouette and disperse). Cards are vertically misaligned by 20-80px to break the rectangle. 4. **The Long Hall** (one full vertical screen of near-emptiness) — A burgundy stripe runs floor to ceiling on the left third. Cream fills the rest. A single line of condensed type, set very small, runs along the burgundy stripe vertically: *"the room remembers every game played in it."* This is the site's spine. Mandatory pause. 5. **The Roster** (200vh) — A roster of "regulars" — fictional or real players, hosts, designers — laid out as **ma-negative-space portraits**: each portrait occupies a single glass card centered in columns 4-6, with 80vh of empty cream between portraits. You meet them one at a time. The cards bounce in. The names are condensed. Below each name, a single italic line: their *tell* (the thing they always do at the table). 6. **The Drawing Room** (the contact / join area, but never named that) — A hand-drawn burgundy door, glassmorphic, occupies the right side of the screen. To its left, in cream, a single sentence: *"the door is always slightly ajar."* Hovering the door causes it to *bounce-enter* a millimeter of opening; clicking opens a frosted modal that is itself just a quiet form. No CTA shouts. No "JOIN NOW." Just a door. 7. **The Closing Hush** (60vh) — Returns to the opening's cream emptiness. The word **gabs.games** sits centered, smaller now, the way a host's signature appears at the end of a letter. A final dust-mote drifts past. **No section is dense.** No section has more than three primary elements. The layout is composed of *fewer things, set further apart, held longer*. This is the structural translation of the elegant-sophisticated tone: discipline as luxury. ## Typography and Palette **Typography (Google Fonts only):** - **Salon Display**: **Oswald** — weight 600 and 700, set with `letter-spacing: -0.015em` and `font-stretch: condensed` where supported. Used for the wordmark, section headings, and game titles. Oswald is the workhorse of the **condensed** seed: it gives the leaning, eager, narrow vertical that suits the playful-but-precise voice. Set in lowercase for headings (the host does not shout), uppercase for tiny labels (small caps in spirit). - **Whisper Display**: **Big Shoulders Display** — weight 800 and 900, used very sparingly for the single oversized word in The Hush and for one or two ornamental moments. This is the deeper, narrower, more dramatic condensed face — used like a single drumbeat in an otherwise quiet room. - **Body Editorial**: **Cormorant Garamond** — weight 400 italic for the *tells*, the marginal lines, the italic quotations woven throughout. This is the cream-coloured handwriting of the salon — refined, slightly old-fashioned, never ironic. - **Body Reading**: **Inter** — weight 400 and 500, used for actual paragraph copy where there is any. Inter is the unobtrusive butler: it lets the condensed display and the italic Cormorant carry the personality. - **Numerals and Glyph Annotations**: **Cormorant Garamond** old-style figures (for clocks, vintage scoreboards, dates of game origin), **Oswald** lining figures for any tabular game stats. Numbers are styled with an underline that draws in on hover (path-draw-svg style), as if scored on a slate. **Palette (burgundy-cream, with named extensions):** - **Cream Velvet**: `#F4ECDD` — the primary background. The hush. Roughly 70% of all pixels on the site. - **Whipped Cream**: `#FBF6EA` — for inner surfaces of glass cards, slightly lighter than the wall behind them. - **Burgundy Curtain**: `#5A1A2C` — the deep oxblood. Used for primary type accents, the spine stripe, the glass card tints, the door. - **Burgundy Smoke**: `#8B3A4F` — a softer, slightly dusty burgundy used for hover states, the particle effects, and the rotating game-token glyph. Reads as the same color as the curtain but lit from a different angle. - **Brass**: `#B79268` — a single accent hue used only for tiny ornamental moments — the moderator's clock hands, the period-end glyph, the underline-draw on hovered numerals. Used in 1-2% of pixels at most. Brass is the rule: never use it for body text, never use it for backgrounds. - **Ink Black**: `#1F1418` — used only for body type and the hairline rules between cards. Almost-black with a burgundy undertone, never pure #000. - **Glass Frost (overlay)**: `rgba(90, 26, 44, 0.18)` over `backdrop-filter: blur(28px) saturate(140%)` — the canonical glassmorphic-card composition. The card pulls a faint burgundy out of the air without dimming the cream behind it. **Type rules:** - Display headings always condensed, always lowercase, never tracked open. - Italic Cormorant is for the host's voice — first person, marginal, intimate. - Inter is for explanatory copy only; it never appears at display sizes. - Numerals at display size always old-style (Cormorant); at body size always lining (Inter); never mixed in the same line. ## Imagery and Motifs **The Glass Salon Card**: The site's primary imagery unit. Every meaningful object is a glassmorphic card — frosted, faintly burgundy-tinted, with a 28px backdrop blur, a 1px inner highlight (`box-shadow: inset 0 1px 0 rgba(255,255,255,0.4)`), a 24px corner radius, and a soft outer shadow that is *cream-coloured*, not black (`0 30px 60px rgba(90,26,44,0.08)`). Cards never sit flat on the cream; they hover 4-8px above it, and on bounce-enter they overshoot to 12px before settling. Each card contains **one** thing: a game, a name, an invitation, a door. Never a list. Never a grid of sub-elements. The card's interior negative space is itself ma — generous cream around a single condensed word. **Particle Motes (the salon's dust)**: A continuous, very low-density particle field — 60-90 motes total across the entire viewport at any moment, no more. Each mote is a tiny burgundy-smoke dot (1-2px) with a long fade tail and a very slow drift (60-120 seconds to cross the screen). Motes respond to the cursor with a *gentle parallax repulsion*: they swerve, never violently. In each section, the motes adopt a section-specific behavior (see Cabinet of Games above). The motes are the site's heartbeat — barely there, never absent. **The Token Glyph**: A single hand-drawn line illustration (SVG) of a generic game token — a small disk with an engraved star — rendered in 1px burgundy stroke with no fill. It rotates once every 6 seconds. It appears in the mantelpiece column (8-9) of every section as a quiet ornamental signature, like a printer's mark. **The Door**: A single illustrated SVG of a paneled door, drawn in burgundy hairline strokes on a glassmorphic card, occupying the right portion of the Drawing Room section. The door is always *slightly* ajar — about 6 degrees. On hover, it bounces open another 4 degrees. Beyond the door, faintly visible through frosted glass, is a warmer cream — the suggestion of more rooms. **The Spine Stripe**: A single 33vw burgundy column running the full height of the Long Hall section, bleeding into adjacent sections by 80vh fade. The stripe is the only block of saturated color on the site. Vertical condensed type runs up its length, set in cream. **The Marbled Endpaper Texture**: A subtle, low-contrast paper texture — burgundy on cream, recalling 19th-century book endpapers — applied at 4% opacity behind the entire site. Detected only on a slow second look. Never the focus. **No photography.** The site has zero photographic imagery. Every visual is glass, line, type, color, and dust. This is deliberate: photography would break the dollhouse spell. **No icons in the conventional sense.** No hamburger menu, no magnifying glass, no shopping cart. Navigation, where it exists, is a single condensed word ("rooms") in the corner, expanding on hover into a vertical list of section names with a small particle bloom. **The Moderator's Clock** (motif, not literal): A very small ornamental glyph in brass that appears at the top-right of each section, rendered as a tiny analog clock face with hands set to a section-specific symbolic time (the Hush is set to 11:55, the Invitation to 11:58, the Closing Hush to 12:01). Easy to miss. Rewards re-visits. ## Prompts for Implementation **Opening sequence (the first 9 seconds):** 1. (0-200ms) Page paints pure Cream Velvet. A single mote drifts in from the upper left. 2. (400-1100ms) The word **gabs** writes itself in Oswald 700 condensed, Burgundy Curtain, dropped slightly above optical center (column 4-6, row at 42% from top). The write-on uses a CSS `clip-path: inset(0 100% 0 0)` animating to `inset(0 0% 0 0)` over 700ms, eased with `cubic-bezier(0.7, 0, 0.3, 1)` — a slow, confident reveal, not a typewriter. 3. (1200-1800ms) The word **.games** bounces in from 24px below its final position with a damped spring (`stiffness: 180, damping: 14`), settling with a single 4px overshoot. Color: Burgundy Smoke, slightly lighter than gabs — like a quieter echo. 4. (2000ms onward) Two more motes drift in. The cursor begins to gently repel motes within a 120px radius. Nothing else happens. The site *waits*. 5. There is no "scroll down" indicator. Trust the visitor. They will scroll when they are ready. **Bounce-enter discipline:** Every glass card that enters the viewport on scroll uses the same bounce-enter signature: translateY(40px) → translateY(-8px) overshoot → translateY(0) settle, total duration 720ms, eased with a custom spring. Cards stagger by 120ms when more than one enters together. The bounce is *small* — never cartoonish. Think of a Mont Blanc pen tip touching paper, not a beach ball. **Glassmorphic card construction (canonical):** ``` background: linear-gradient(135deg, rgba(251,246,234,0.55), rgba(244,236,221,0.35)); backdrop-filter: blur(28px) saturate(140%); border: 1px solid rgba(90,26,44,0.10); border-top: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 30px 60px -20px rgba(90,26,44,0.18), 0 8px 20px -8px rgba(90,26,44,0.10); border-radius: 24px; ``` Cards never have hard edges. Cards never sit flat. Cards never tile. **Particle system (canonical):** - Use `requestAnimationFrame`, not CSS keyframes — the motion must be irregular. - Motes are positioned in a `` overlay at z-index 0, blend-mode `multiply` over the cream so they read as faint burgundy dust. - Each mote has independent drift velocity (Perlin-noise-modulated), max speed 0.4 px/frame. - Cursor exerts a repulsion force inversely proportional to distance, capped at radius 120px, eased. - Mote count: 60 baseline, +20 in the Cabinet of Games (per-card behaviors), -10 in the Long Hall (the hush is hushed). - Motes never form text, never form logos, never advertise. They are dust. Respect that. **Scroll behavior:** - Use `scroll-snap-type: y proximity` between sections — gentle, not enforced. Visitors can skim, but the site *prefers* to settle on a section. - Each section's primary card pins for 80% of its scroll-length using `position: sticky`, then releases. - No parallax-of-parallax. One layer of subtle parallax on the Spine Stripe (0.85x scroll speed) and on the particle field (0.92x). That is all. - The site never auto-scrolls. The site never hijacks scroll. The site respects the visitor's hand. **Storytelling spine:** The site reads as a single act of hospitality. From The Hush ("you have arrived") through The Invitation ("here is what we do") through The Cabinet ("here are the games we play") through The Long Hall ("here is the room they happen in") through The Roster ("here are the people you'll meet") through The Drawing Room ("the door is open") to The Closing Hush ("you may stay as long as you like"). There is no sales funnel. The visitor is *being entertained*, not *converted*. **Avoid (firmly):** - CTA-heavy layouts. No "Sign Up Now" buttons. No "Join the Beta." The door is the door. - Pricing blocks. There is no pricing. If pricing must exist somewhere, it lives behind the door, not in the salon. - Stat grids. No "1,200+ players" or "500 games hosted." The salon does not boast. Numbers, where they appear, are intimate (a single year of founding, a single dice roll). - Testimonial walls. No quote-grids. If a regular has something to say, it appears as a single italic Cormorant line below their name on their portrait card. One line. Never more. - Carousels with dots. No automated rotation. The visitor moves at their own pace. **Cursor behavior:** The cursor is a small Burgundy Curtain dot, 6px, with a faint trailing ring of Brass at 2px stroke that lags by 80ms. Over interactive elements, the dot grows to 12px and the ring tightens to it. Over text, the dot shrinks to 3px. The cursor is the visitor's lapel pin — small, present, never garish. **Sound (optional, off by default):** A single optional ambient layer — vinyl crackle at -42dB, a distant clinking glass once every 90 seconds — toggleable via a tiny brass speaker glyph in the corner. Never auto-plays. Never on by default. **Responsive collapse:** On screens narrower than 900px, the 9-column salon grid collapses to a 4-column intimate grid. The Spine Stripe becomes a 12vw stripe on the left. Glass cards span columns 2-4. The mantelpiece column merges into the parquet. Motes reduce to 40 baseline. Negative space remains 65%+. The site does not become "mobile-first dense" — it remains *spacious*, even on a phone. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Salon-scale negative space as luxury, not minimalism.** Many sites in this collection use ma-negative-space (9% in frequency analysis) as a Japanese-zen device — restraint, sparseness, contemplation. gabs.games uses ma-negative-space *as European salon hospitality*: the empty cream is not a void but an *uncrowded room*. The host has reserved the entire floor for you. This is a reframing of negative space from absence-as-rigor to *absence-as-welcome*. No other site in the collection treats emptiness as warm hospitality rather than meditative discipline. 2. **Glassmorphic cards inside a velvet salon, not a SaaS dashboard.** Glassmorphism (6% frequency) almost always pairs with corporate, fintech, or futuristic-tech contexts in this collection. Pairing glassmorphic-cards with burgundy-cream and elegant-sophisticated tone produces something genuinely uncommon — *frosted oxblood glass* — which evokes 19th-century parlor pieces (decanters, paperweights, card-table edges) more than 2020s software. The glass is doing different cultural work here. 3. **Condensed typography played soft, not aggressive.** Condensed type (7% frequency) typically drives high-energy, headline-shouting, editorial-bold or sports-poster aesthetics. Here, Oswald and Big Shoulders are set in *lowercase, at calm sizes, against vast cream*. The condensation reads as *leaning in*, not *shouting*. Condensed-as-intimate is a deliberate inversion of the dominant condensed convention in this collection. 4. **Bounce-enter as restraint, not bounce.** Bounce-enter (rare in frequency: <1%) typically implies cartoonish, playful, kid-friendly sites. Here, the bounce is *4-8px overshoot, 720ms, single damped settle*. It registers as a small physical landing — a coin set down, a card laid — never as a bounce-bounce-bounce of springy cheer. It is the *playful* seed channeled through *elegant-sophisticated* execution. 5. **Particle-effects as dust motes in a sunlit room.** Particle-effects (1% frequency) usually serve cyberpunk, neon, or futuristic-tech visuals — high-density, high-saturation, performative. Here particles are *dust in afternoon light* — 60-90 motes, slow Perlin drift, faint burgundy on cream, blend-mode multiply. They are the site's atmosphere, not its spectacle. 6. **Burgundy-cream as oxblood-and-vellum, not generic warm.** Burgundy-cream is at 0% frequency in the collection. The specific palette here — Burgundy Curtain `#5A1A2C`, Cream Velvet `#F4ECDD`, with Brass `#B79268` as a 1% accent — explicitly references 19th-century leather-bound book covers and salon interiors, not the warmer terracotta-or-orange ranges that dominate the warm palette (41%) or the deep-burgundy palette (1%) elsewhere. 7. **No photography, no icons, no CTAs, no stat grids.** The collection's frequency analysis shows photography at 40% and card-grid at 40% — both dominant. gabs.games refuses both. There are no photographs and no card *grids* (cards are arrhythmically scattered, never tiled). The site is built entirely from type, line, color, glass, and dust. 8. **A single sustained narrative gesture.** Most sites in the collection are sectioned reading experiences with multiple voice registers. gabs.games is *one voice, one room, one evening* — the host's voice from The Hush to The Closing Hush. The structural unity is itself the differentiator. **Chosen seed (from assignment):** aesthetic: playful, layout: ma-negative-space, typography: condensed, palette: burgundy-cream, patterns: bounce-enter, imagery: glassmorphic-cards, motifs: particle-effects, tone: elegant-sophisticated. **Avoided patterns flagged by frequency analysis:** - Avoided **card-grid** (40%) — cards here are arrhythmically scattered, never tiled into a regular grid. - Avoided **photography** (40%) — zero photographic imagery; visuals are entirely glass, line, type, and dust. - Avoided **centered** (38%) — the layout is asymmetric salon-grid with 70%+ deliberate emptiness, off-center weighting. - Avoided **gradient palette** (41%) — the palette is flat oxblood and cream with a single brass accent; no gradients dominate. - Avoided **mono typography** (39%) — no monospace fonts; the type system is condensed display + Cormorant italic + Inter body. - Avoided **scroll-triggered** (39%) and **parallax** (28%) as load-bearing devices — used only minimally on the Spine Stripe and particle layer. - Avoided **mysterious-moody tone** (23%) — the tone is elegant-sophisticated *with warmth*, not gothic or noir. - Avoided **corporate aesthetic** (39%) and **hand-drawn aesthetic** (22%) — neither register applies.