# Design Language for gabs.wiki ## Aesthetics and Tone gabs.wiki is a **private cabinet of curiosities rendered in smoked glass and oxblood leather** — imagine a Victorian gentleman scholar who demolished his study, rebuilt it in brushed obsidian, and now keeps his encyclopedic notes behind frosted-glass panels that catch candlelight. The site is not a reference tool; it is a **personal episteme** — an act of conspicuous intellectual collecting. Every surface breathes dark-academia's ink-and-mahogany atmosphere but the delivery mechanism is glassmorphic: each entry card is a pane of tinted glass suspended over a deep, textured velvet background, catching refracted light at its edges. The tone is **opulent-grand**: nothing is casual, nothing is compressed. Headings are proclamations. Body copy is unhurried and dense, as though typeset for a limited folio edition. The domain name itself — "gabs" as in gabardine, or as in the Latin *gabare* (to brag, to boast) + wiki — implies a narrator who knows they are performing erudition and revels in it. The aesthetic is the antithesis of utilitarian wikis: no tables with zebra rows, no breadcrumb navbars, no accessibility-gray body text. Instead: deep ink-black backgrounds, warm amber-gold text, frosted panel surfaces, and a typographic hierarchy so pronounced it reads like a cathedral's stone inscription ledger. ## Layout Motifs and Structure The entire composition follows an **F-pattern reading flow** — but a baroque, deliberate F, not a scanning F. The horizontal strokes of the F are thick feature bands: the first is a full-width masthead with the site name set in a massive display typeface, with a short epigraph below it. The second horizontal band is a featured entry row — three glassmorphic cards set side by side, each full-width of their column. The vertical stroke of the F descends along the left 60% of the viewport as a continuous scroll of text entries, while the right 40% is a persistent sidebar housing a navigation tree and a floating "recent additions" panel. **Spatial logic:** - Masthead: 100vw × 28vh, dark velvet background with subtle wave-form SVG animation (sine waves in amber at 3% opacity rising from the bottom) - Primary content column: `max-width: 820px`, left-aligned within a 60% left zone, padding `4rem 3rem` - Right sidebar: fixed, `320px` wide, `calc(100vh - 28vh)` tall, frosted glass surface (`backdrop-filter: blur(18px)`, `background: rgba(20,10,5,0.55)`) - Featured cards row: three cards in a `repeat(3, 1fr)` grid, each `280px` tall with `border: 1px solid rgba(200,160,80,0.25)` and `box-shadow: inset 0 0 40px rgba(0,0,0,0.6)` - Entry cards in the main column stack vertically with `gap: 2.5rem`, each with a frosted panel surface and a left-edge amber accent bar (`4px solid #C8A050`) - No horizontal scroll. No sticky nav. The F is a single-page vertical document. **Wave-form motif:** A continuous SVG `` animates along the masthead bottom edge — three overlapping sine waves in `#C8A050`, `#8B5E20`, and `rgba(200,160,80,0.4)` at speeds of 8s, 12s, and 20s respectively, `animation-timing-function: linear, infinite`. This wave-form reappears subtly as a CSS `clip-path` on the divider between the masthead and the featured-card row. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Masthead**: [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 900 italic. The fat-stroke/thin-stroke contrast of Playfair Display at 96–128px creates the monumental inscription quality. Used only for the site name and major section frontispieces. - **Subheadings / Card Titles**: [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC), weight 600 small-caps. Small-caps headings at 22–32px give every entry title the gravity of an encyclopedia lemma. - **Body / Entry Text**: [`IM Fell English`](https://fonts.google.com/specimen/IM+Fell+English), weight 400, with the italic variant for quotations and marginalia. IM Fell English replicates a 17th-century English type foundry; its irregular ink-trap irregularities at 17px body size on a dark background produce the exact feeling of reading a leather-bound journal by amber light. - **UI Labels / Sidebar Navigation**: [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk), weight 400–500 at 13–14px. A single functional sans for all metadata: dates, categories, tag chips. Provides necessary contrast against the display typefaces without breaking the atmosphere. **Palette (minimum 3 colors, dark-academia + high-contrast):** - `#0D0705` — Near-black obsidian, the page background. Warm black with a faint red undertone, not cold gray-black. - `#1A100A` — Deep mahogany shadow, used as the body of each glassmorphic card before the blur layer. - `#2C1A0E` — Dark walnut, sidebar background base and section dividers. - `#C8A050` — Antique gold / amber, the primary accent and the color of all display text. High contrast against `#0D0705` (~9:1 ratio). - `#E8D4A0` — Parchment cream, used for body text and secondary headings. Warm white, not pure white. - `#8B5E20` — Burnished bronze, for secondary accent elements: sidebar borders, wave-form lower layer, tag chip backgrounds. - `#4A2C10` — Dark leather brown, for card borders and the left-edge accent bar hover state. - `#F5EDD8` — Aged paper near-white, used only for pull-quote text and the masthead epigraph. - Glassmorphic panel: `background: rgba(28, 16, 8, 0.55); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(200, 160, 80, 0.2);` ## Imagery and Motifs **Wave-forms:** The structural motif throughout is the sine wave rendered in gold. The masthead carries a live three-layer SVG wave animation. Section breaks use a static single-wave SVG rule instead of a horizontal line. The sidebar top has a small wave-form header in `#C8A050` at 2px stroke weight. **Glassmorphic Cards:** Every content card — featured entry, inline entry, sidebar recent-additions item — is a glassmorphic panel. The frosted glass is dark-tinted (not light): `backdrop-filter: blur(18px) saturate(140%)`, `background: rgba(28,16,8,0.55)`, `border: 1px solid rgba(200,160,80,0.2)`, `border-radius: 6px`. The glass edge catches a faint gold highlight on the top-left corner via `box-shadow: inset 1px 1px 0 rgba(200,160,80,0.15)`. **Zoom-Focus interaction:** When a user hovers an entry card, the card undergoes a gentle zoom-focus transform: `transform: scale(1.015) translateZ(0)` with `transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`. Simultaneously, the background behind the card (the velvet texture layer beneath the glass) applies a `filter: blur(2px)` transition, reinforcing the optical depth of the glass panel. This is the primary interaction pattern — deliberate, measured, never bouncy. **Decorative motifs:** - A faint repeating diagonal texture on the body background: `background-image: repeating-linear-gradient(135deg, rgba(200,160,80,0.03) 0px, transparent 1px, transparent 8px, rgba(200,160,80,0.03) 9px)` — suggests the warp of gabardine fabric. - The masthead logo/wordmark uses a thin gold rule above and below the site name, 1px solid `#C8A050`, with `letter-spacing: 0.12em` on the site name. - Entry category tags are pill-shaped chips in `background: rgba(139,94,32,0.35)`, `color: #E8D4A0`, `font-family: Space Grotesk`, `font-size: 11px`, `text-transform: uppercase`, `letter-spacing: 0.1em`. ## Prompts for Implementation **Overall narrative:** The site is an **illuminated manuscript that learned to breathe** — static knowledge given life through restrained motion. Every animation is slow and purposeful; nothing snaps or bounces. The wave-forms in the masthead are geological, not lively. The zoom-focus on hover is an optical lens, not a button state. **Masthead implementation:** Full-width dark section, `min-height: 28vh`, `background: #0D0705`, with an SVG wave-form animation positioned `position: absolute; bottom: 0; left: 0; width: 100%`. The site name `gabs.wiki` in Playfair Display 900 italic at `clamp(64px, 8vw, 120px)`, color `#C8A050`. Below it, an epigraph in IM Fell English italic, `#F5EDD8`, `font-size: clamp(14px, 1.5vw, 18px)`. **Featured cards row:** Three glassmorphic cards in a CSS Grid `repeat(3, 1fr)`, `gap: 1.5rem`, `padding: 2rem`. Each card: `min-height: 280px`, dark glass panel as described, Cormorant SC title at top in `#C8A050`, IM Fell English body excerpt in `#E8D4A0`, Space Grotesk tag chips at bottom. No images — the card surface IS the visual object, refracting the background texture through it. **Main content column:** Left-aligned vertical stack of entry cards. Each card uses the glassmorphic panel style with a `4px solid #C8A050` left border. Card title: Cormorant SC 600 at 22px, `#C8A050`. Body: IM Fell English 400 at 17px, `#E8D4A0`, `line-height: 1.75`. Metadata line (date, category) in Space Grotesk 400 at 12px, `#8B5E20`. **Right sidebar:** Fixed position, 320px, starts below the masthead. Dark glass panel for the whole sidebar container. Inside: a navigation tree in Space Grotesk 14px, hierarchy shown by `padding-left` increments of 1rem, each item color `#E8D4A0` with hover color `#C8A050` and `transition: color 200ms`. Below the nav: a "Recent Additions" section with 5 mini entry cards (smaller version of main cards, no body excerpt — just title and date). **Zoom-focus JS:** Attach mouseover/mouseout listeners to all `.entry-card` elements. On enter: `card.style.transform = 'scale(1.015) translateZ(0)'`, `card.style.transition = 'transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94)'`. The card's `z-index` elevates to 10 on hover to ensure it renders above neighbors. No library needed — plain DOM events. **Wave SVG animation:** Three `` elements using `d="M0,40 C200,10 400,70 600,40 C800,10 1000,70 1200,40 L1200,80 L0,80 Z"` (and similar with phase offsets). Each path uses a ``. Stroke: none. Fill: `#C8A050` at opacity 0.06, 0.04, 0.03 for the three layers. **AVOID:** CTA buttons, hero-image backgrounds, stat grids, pricing sections, breadcrumb navigation, hover effects that bounce or use spring physics, pure-white backgrounds, cold gray text, sans-serif-only typography. ## Uniqueness Notes 1. **Dark glassmorphism over velvet obsidian** — most glassmorphic sites use light/frosted glass over blurred photos. This site uses dark-tinted glass panels over a near-black textured background with no photography at all — a wholly different optical effect, like looking through smoked amber glass at candlelight. 2. **F-pattern as baroque architecture** — the F-pattern is almost never used as a deliberate compositional choice (5% usage); here it is treated as the floor plan of a scholar's study: two horizontal shelves (masthead + featured cards) and one tall vertical column (entries), with a fixed sidebar as the standing bookcase on the right. 3. **IM Fell English for body text on dark** — the rough ink-trap irregularities of this 17th-century revival font, rendered in warm parchment color on near-black, produce a tactile reading experience unavailable with clean modern serifs. 4. **Wave-forms as structural dividers** — wave-form motifs (5% usage) are treated here not as background decoration but as the site's primary structural separator, replacing every horizontal rule and section break. 5. **No photography, no illustration** — every visual object is either typographic or glassmorphic. The glass panels' refraction of the textured background IS the imagery. 6. **Zoom-focus as the sole interaction** — rather than a palette of micro-interactions, one single pattern (zoom-focus, 3% usage) is applied consistently. It reads as a magnifying glass hovering over manuscript pages. Chosen seed: aesthetic: dark-academia, layout: f-pattern, typography: retro-display, palette: high-contrast, patterns: zoom-focus, imagery: glassmorphic-cards, motifs: wave-forms, tone: opulent-grand Avoided overused patterns from frequency analysis: centered layout (91%), full-bleed sections (76%), photography-based imagery (92%), parallax scrolling (90%), warm/gradient palettes (93%/87%), mono typography (87%), stagger animations (66%).