# Design Language for gabs.games

## Aesthetics and Tone

`gabs.games` is a **game curator's cabinet of curiosities** — but the cabinet is made of chrome-plated acrylic panels, backlit in two-tone neon, and the specimens inside are pinned to velvet with geometric precision. The aesthetic is **mcbling meets botanical illustration**: the visual extravagance of early-2000s rhinestone excess disciplined by the structural rigor of an Audubon plate. Every element shines — literally — but the shine is organized, catalogued, cross-referenced.

The site is a personal game library presented as a **luminous insectarium**. Each game entry is a specimen card: pressed flat, annotated in italic serif, backlit with a duotone wash of deep forest green and hot chrome yellow. The user is the naturalist walking the collection. Scrolling through the masonry grid is moving through the drawers of the cabinet, each card a revelation of iridescent wings.

Mood: fascinated authority. A host who loves these games deeply and explains them with precision, not hype. The tone is **tech-tutorial informative but laced with collector's obsession** — this is someone who has played 800 hours of a game they describe in 400 calm, specific words.

The chrome and the velvet are in tension throughout: cold mirror surfaces reflect soft organic forms. Geometric abstraction is used for every structural element; nature motifs appear only inside the specimen cards themselves, as if the games depicted contain wilderness that the cabinet's architecture keeps contained.

## Layout Motifs and Structure

The page is an **asymmetric masonry grid** — not the predictable Pinterest kind, but a masonry that breathes like a field journal. Three columns on desktop (1fr / 1.5fr / 1fr), with the center column receiving the tallest cards. On scroll, columns advance at different parallax rates: outer columns drift 8% slower than center, creating a slight concave depth.

**Card anatomy (the specimen card):**
- Each card is a rigid rectangle with a 3px chrome border — not rounded, not shadowed — just the raw edge of the display case.
- Card face shows a geometric-abstract crop of the game's imagery, rendered in duotone (forest green #2D5A27 + chrome yellow #D4AF37). The duotone wash is not a color filter applied uniformly — it is a **split-luminance map**: shadows pull toward forest green, highlights toward chrome yellow, with a narrow midtone band of near-black (#0D0D0D) as the pivot.
- On hover, the card executes a **flip along the vertical axis** (perspective 1400px, rotateY 180deg, 400ms ease-in-out). The back face reveals dense annotation: game title in an italic display serif, 4-6 line collector's note in a small serif, a 3-tier rating system rendered as filled/unfilled geometric diamonds, and a "specimen tag" in monospace showing the genre taxonomy.
- Below each card, a thin chrome-colored hairline (1px, #D4AF37) spans the full card width. This is the mounting rail.

**Macro composition:**
- A fixed viewport-width header: jet-black (#050505) bar, 72px tall. The wordmark "gabs.games" runs in display italic at 32px, flush left with 48px padding. To the right: a single genre filter rendered as a horizontal row of small geometric badge pills. No hamburger menu, no nav stack.
- The masonry grid begins immediately below the header, with 0 gap to the header bar — the first card row bleeds up to the rail.
- No sidebar. No footer navigation block. The page ends when the cards end, with a 24px strip of jet-black followed by a small centered monospaced line: a specimen count in the form `[N specimens catalogued]`.

**Spatial rhythm:**
- Card gaps: 12px horizontal, 16px vertical — tight enough to feel like a genuine cabinet, not a spacious gallery.
- The asymmetric column assignment is governed by card height, not random insertion order: games with longer descriptions always receive the center column.

## Typography and Palette

**Type system (verified Google Fonts only):**

- **Display + headings — `Cormorant Garamond`** (variable, wght 300–700, italic variant). The wordmark, card titles on flip-back, and section labels all use Cormorant Garamond Italic. H1 equivalent at 52px/700wght; card titles at 28px/500wght italic. The elegance of the serif anchors the chrome excess — old world in a new world frame.
- **Body + annotation — `Cormorant`** (regular and italic, 400/500). Collector's notes on card backs at 14px/1.65 line-height, set in #E8E2D0 on a deep charcoal (#1A1A18) card-back background.
- **Taxonomy + metadata — `JetBrains Mono`** (wght 400). All specimen tags, genre labels, filter pills, and the footer count line use JetBrains Mono at 11–12px. This is the scientific notation layer — precise, machine-readable, visually distinct from the humanist serif above it.

**Palette — duotone anchored:**

- `#050505` — Jet black (header, card border backdrop)
- `#2D5A27` — Forest specimen green (duotone shadow pole, nature motif fills)
- `#D4AF37` — Chrome gold (duotone highlight pole, border rails, active filter pills)
- `#1A1A18` — Deep charcoal (card-back background)
- `#E8E2D0` — Aged vellum (body text on card backs, light text)
- `#8B9E6A` — Lichen mid-green (inactive UI elements, tag borders)
- `#3C3A2E` — Dark khaki (card-front overlay gradient base)

**Color application:**
- Card fronts: duotone image (green #2D5A27 ↔ gold #D4AF37)
- Card backs: charcoal #1A1A18 + vellum #E8E2D0 text
- Header: jet #050505 with gold #D4AF37 accents
- Active state: gold #D4AF37 fill, jet text
- Rating diamonds: filled = #D4AF37, empty = #3C3A2E with #8B9E6A stroke

## Imagery and Motifs

**Imagery approach — geometric-abstract + nature motif inside the container:**

All card imagery uses a two-layer system:
1. **Geometric abstraction layer (always visible):** The card face always shows a Voronoi tessellation or angular facet mesh — not random, but driven by the game's visual identity. A strategy game generates a hexagonal lattice; a platformer generates diagonal shear planes; an RPG generates radiating polygon rings. This tessellation is rendered in the duotone palette and sits at `z-index 1`.
2. **Nature motif layer (visible through the abstraction):** Beneath the tessellation, at `z-index 0` and visible through the gaps between facets, are botanical/natural forms in fine stroke illustration (0.8px lines, color #2D5A27 at 60% opacity). These forms are genre-coded: strategy → branching river deltas; platformer → cross-sectioned root systems; horror → moth wing venation; RPG → seed dispersal patterns. The nature layer is never the subject — it is the specimen underneath the mounting glass.

**Motif vocabulary:**
- Mounting pins: small four-pointed star shapes in #D4AF37 at card corners (purely decorative, 6px)
- Specimen labels: cream rectangles with a single green rule, placed at the bottom-left of each card face — contain nothing on the front (inverted when card flips)
- Chrome rails: single 1px horizontal lines connecting cards across the masonry — a faint implication that all cards are drawers in one continuous cabinet
- The flip animation reveals a card back covered in a very faint pattern of repeating geometric diamonds at 3% opacity (the velvet texture of the cabinet lining)

**No photography. No UI screenshots. No game-company logos.** All imagery is constructed from the duotone tessellation + botanical line illustration system.

## Prompts for Implementation

This site is an **insectarium of games, not a game store**. Every implementation decision must serve the collector's cabinet metaphor and resist the reflexive drift toward a marketplace.

**Core constraint: duotone is the only image format.** Never render a game image in full color. Every visual representation passes through the split-luminance duotone map: shadows → #2D5A27, highlights → #D4AF37. This rule has no exceptions.

**Card flip implementation:**
```
.card-wrapper {
  perspective: 1400px;
  width: 100%;
  height: 100%;
}
.card-inner {
  transform-style: preserve-3d;
  transition: transform 400ms ease-in-out;
}
.card-wrapper:hover .card-inner {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%; height: 100%;
}
.card-back {
  transform: rotateY(180deg);
  background: #1A1A18;
}
```

**Masonry column assignment rule:** Sort cards into three columns using a greedy height-balancing algorithm (assign each card to the shortest current column). Center column receives a 1.5× height multiplier for "featured" specimens — one per screen-height of content.

**Parallax rates:** Outer columns scroll at `translateY(calc(var(--scroll-y) * -0.08))`, center column at baseline. Use `scroll-driven animations` or a lightweight IntersectionObserver when scroll-driven animations are unsupported.

**Filter pills (genre taxonomy):** Rendered in JetBrains Mono 11px, 4px vertical padding, 10px horizontal padding, 1px solid #8B9E6A border. Active state: background #D4AF37, text #050505, border transparent. Animate state change with a 150ms cross-fade, no movement.

**Typography loading:** Load Cormorant Garamond (italic, wght 300–700) and JetBrains Mono (400) via Google Fonts with `font-display: optional`. Never block render on font load.

**The chrome border:** Every card border is `3px solid #D4AF37` with `box-shadow: 0 0 0 1px #050505` — the slim jet outline that seats the gold rail into the dark cabinet. No border-radius on cards.

**Nature motif rendering:** SVG paths, inline or loaded as sprites. Stroke only, no fill. Stroke color: `#2D5A27`, opacity: 0.6. Path data is pre-generated per genre and baked into the page — no runtime generation.

**Voronoi/facet mesh:** Rendered as an inline SVG per card, generated at build time using a seeded random based on the game's slug. Cell count: 18–28 cells per card. Cell stroke: 1.2px, `#D4AF37` at 80% opacity. Cell fills: alternating between `#2D5A27` at 40% and `#D4AF37` at 15% to produce the duotone shimmer without a CSS filter.

**Scroll to load:** Use IntersectionObserver to load card annotation content lazily. The card face (tessellation + botanical layer) renders immediately. The card back content (text, ratings, taxonomy) is loaded only when the card enters the viewport, preventing a massive initial DOM.

**Specimen count footer:** `[{N} specimens catalogued]` in JetBrains Mono 12px, color #8B9E6A, centered, with 24px padding top and bottom. No border, no decoration. This single line is the only footer.

**[AVOID: game screenshots in native color, star-rating systems, price badges, "Add to Wishlist" CTAs, gradient hero banners, magazine-style featured articles, sidebar navigation, cookie banners that break the cabinet aesthetic]**

## Uniqueness Notes

1. **Duotone is split-luminance, not a CSS filter.** Every other duotone site in the registry applies a CSS `filter: sepia()` or `mix-blend-mode: multiply` over a photograph. This site constructs its duotone from scratch at the SVG layer: shadow tones are deliberately encoded as forest green, highlight tones as chrome gold, with a near-black midtone pivot. The result is a duotone that reads as a specimen under polarized light rather than a photograph through a gel.

2. **The nature motif is sub-surface.** Rather than overlaying botanical illustration on top of a geometric layout (the conventional approach), this site hides the nature layer beneath the geometric tessellation, visible only through the cracks between facets. The game world (wilderness, growth, organic complexity) lives underneath the collector's system (geometry, order, categorization). The metaphor is encoded in the z-index.

3. **Masonry driven by textual content length, not image size.** The standard masonry implementation assigns card heights based on image aspect ratio. This design assigns height based on the number of words in the collector's note — longer analysis = taller card in the center column. A game someone has played deeply takes up more physical space in the cabinet.

4. **Cormorant Garamond in a chrome/tech context.** The registry shows elegant-serif at 1% usage, and the dominant typography is sans-grotesk and tech-mono. Deploying a high-elegance italic Renaissance serif as the primary display font against a chrome-and-jet palette is a deliberate inversion — the naturalist scholar inside the machine.

5. **No hero, no CTA, no above-the-fold marketing section.** The masonry grid is the first thing the user sees, flush with the 72px header. There is no welcome text, no tagline, no promotional banner. The collection is the homepage.

**Chosen seed (per assignment):** aesthetic: mcbling, layout: masonry, typography: elegant-serif, palette: duotone, patterns: card-flip, imagery: geometric-abstract, motifs: nature, tone: tech-tutorial
<!-- DESIGN STAMP
  timestamp: 2026-05-07T17:35:25
  seed: seed
  aesthetic: `gabs.games` is a **game curator's cabinet of curiosities** — but the cabinet is...
  content_hash: 605953f086d2
-->