# Design Language for gabs.cafe ## Aesthetics and Tone gabs.cafe is a **liminal cafe at the edge of a future world** -- a place where conversation ("gabs") happens between people who have not arrived yet. The aesthetic resolves a deliberate paradox: **ethereal vapor lit from below by deep-burgundy embers**. Imagine a chrome espresso machine inside a cathedral that is also a starship, photographed through gauze, scored by a low synth drone. The mood is intimate yet vast -- a private booth in a building that goes on forever. The tone is **futuristic-cutting-edge** but never cold. Every sharp diagonal is softened by a haze; every geometric letter is haunted by a faint bloom. Visitors should feel like they have walked into a transmission already in progress -- as if the site has been talking to itself for hours and only now turns to acknowledge them. There is no urgency, no pitch, no "join now". The site behaves like a room: you push the door, vapor curls around your ankles, voices murmur behind a screen of velvet light, and you decide whether to sit down. Inspirations: the slow lobby drift of Wong Kar-wai's "2046", the molten reds of Refn's "Only God Forgives", the diagonal stage geometry of Kraftwerk's late-period tours, Lottie-driven product reveals on Apple Vision keynote pages, Tarkovsky's burgundy curtains in "Stalker", the exhaust-glow color science of Blade Runner 2049's farmhouse interior, and the architectural diagonals of Daniel Libeskind's Jewish Museum drawings -- all dipped in cafe steam. ## Layout Motifs and Structure The page is built on a **diagonal-sections** spine: the entire viewport is sliced by a single 14-degree axis that tilts from upper-left to lower-right and never breaks. Sections do not stack as horizontal bands; they shear past each other along this axis, like train cars passing on parallel tracks. The diagonal is the only constant -- everything else drifts. **Primary structure (single continuous canvas, ~6 viewport heights):** 1. **The Vestibule (0 -- 100vh):** A full-bleed stage at rest. Centered, a Lottie animation of a rotating burgundy ember slowly inhaling and exhaling vapor (the "gab"). The site title `gabs.cafe` is set in geometric sans at clamp(4rem, 12vw, 14rem), letter-spacing -0.04em, sitting on the diagonal axis so the baseline tilts. Below it, in 1.1rem Space Grotesk, a single line: *"a cafe for conversations that have not happened yet."* No nav. No buttons. Just a hairline diagonal seam (1px, #6E1A2A, opacity 0.4) sliding across the screen at the 14-degree angle. 2. **The First Gab (100 -- 220vh):** As the user scrolls, the diagonal seam stays fixed in screen space while content panels slide along it. On the upper-left of the seam: a slow Lottie of two abstract speech blooms (geometric ovals deflating and inflating in alternation). On the lower-right: a paragraph of typeset prose, ragged-right, set in Cormorant Garamond italic against the burgundy field, talking about the cafe in second person ("you pushed open the door, you ordered nothing, you sat down anyway"). The seam acts as a balance beam between image and word. 3. **The Bar (220 -- 340vh):** A horizontal cross-section that pretends to be a long mahogany counter receding into vanishing point. Implemented as a mixed-media collage: a low-poly 3D render (CSS transform-style: preserve-3d, perspective: 1200px) of stylized cafe stools, layered with a grainy black-and-white still photo (treated to single-channel burgundy), layered with vector lottie sparks rising from the bar surface. Six "menu items" are inscribed on the bar in Major Mono Display -- but they are not coffees, they are **modes of conversation**: WHISPER, ARGUE, CONFESS, INVENT, MOURN, FLIRT. Hovering a mode triggers a Lottie ignition: a single burgundy spark crawls up from the word like a slow fuse and blooms into ash above it. 4. **The Booth (340 -- 460vh):** The diagonal pivots: the seam reverses to a 14-degree right-to-left tilt, mirroring the first half. This is the "private" half of the cafe. A vertical strip of full-bleed mixed-media (photograph + scribble overlay + dot-matrix print of a fern) holds one side; the other side is empty cream-colored vapor. A single Lottie animates a thin burgundy thread tying the two halves -- a literal conversational thread sliding through scroll position. 5. **The Hour (460 -- 560vh):** A clock that is not a clock. Twelve geometric-sans numerals arranged on a tilted ellipse, with a single burgundy-ember Lottie tracing the perimeter once per minute. Around the ellipse, fragments of conversation float in and out (real CSS animation, not Lottie -- short phrases set in 0.85rem Space Grotesk, opacity pulsing between 0.2 and 0.7, drifting along the diagonal). This is the visual representation of the "cafe hour" -- a unit of time peculiar to the building. 6. **The Threshold Out (560 -- 600vh):** Everything dims except for the original burgundy ember from the Vestibule, now isolated in a vast field of cream vapor, slowly receding. Final line, set tiny: *"the door closes by itself."* **Spatial logic:** the diagonal is the river; sections are stones in it. There is no "section" in the traditional sense -- a paragraph in one stratum may visually overlap a Lottie from the next, separated only by z-index and opacity. The reader should feel that they are reading inside a single long room, not navigating discrete pages. **Negative space:** at least 35% of every viewport is empty cream-vapor. Do not fill the diagonal; let it breathe. The burgundy is rationed -- it appears only at moments of emphasis, never as background. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Title:** "Space Grotesk" -- a clean geometric-sans with subtle humanist warmth in its terminals. Used for the site title and all section labels at clamp(3rem, 9vw, 11rem), weight 500, letter-spacing -0.035em. Its slightly rounded apertures keep the futurism from going sterile -- this is geometric-sans with breath. - **Mono Accent:** "Major Mono Display" -- an all-caps geometric mono used exclusively for the six "modes of conversation" on the Bar (WHISPER, ARGUE, CONFESS, INVENT, MOURN, FLIRT) and for tiny diagonal labels along the seam. Set at 0.95rem with letter-spacing 0.18em, weight regular. Its uniform character widths reinforce the cafe-as-machine metaphor. - **Editorial Serif:** "Cormorant Garamond" italic -- used for the second-person prose passages in The First Gab and The Booth. Italic only, weight 300-400, set at 1.25rem with line-height 1.7. The italic provides a hand-on-paper warmth that anchors the futurism in human voice. - **UI / Caption:** "DM Sans" -- weight 400, used at 0.85rem for the floating conversation fragments around The Hour and any micro-copy. Functional, neutral, gets out of the way. **Palette:** - `#6E1A2A` -- **Ember Burgundy** (primary accent). The deepest, richest red-violet. Used for the Lottie ember, the diagonal seam, the rising sparks, the conversational thread. Never used as a background, only as a pulsing point of warmth. - `#3A0E18` -- **Velvet Shadow** (depth burgundy). The shadow side of the ember; used for type set on cream backgrounds when burgundy needs to be readable, and for deep gradients beneath The Bar. Carries all the gravitas of the palette. - `#A23B4D` -- **Bloom Burgundy** (highlight). The flushed cheek of the ember -- a slightly desaturated rose that appears in Lottie bloom moments and in hover states. Provides the only "warm-light" feeling in the palette. - `#F2EAD8` -- **Vapor Cream** (background). A warm off-white with a faint yellow undertone -- not paper, but lit fog. The dominant background. About 65% of every viewport. - `#1A1620` -- **Cathedral Ink** (deep neutral). Not black; a near-black with violet undertones. Used for body text on cream and for the thin diagonal grid that appears under The Bar. - `#9E8A78` -- **Smoke Bronze** (secondary neutral). A muted warm gray-bronze used for the photographic mixed-media in The Booth (single-channel toning) and for ornamental hairlines. - `#D4C5A8` -- **Old Lace Halo** (tertiary cream). The slightly darker cream used for vapor gradients and for the background of the floating clock fragments. **Palette logic:** five warm tones (cream, lace, bronze, bloom, ember) plus one anchor (cathedral). The composition is roughly 65% cream / 20% bronze + lace / 12% burgundy / 3% ink. Burgundy is the ember of the cafe -- it is precious, never wasted as a wash. ## Imagery and Motifs **Mixed-media philosophy:** every visual element is a deliberate collage of three layers: (a) a vector Lottie animation, (b) a single-channel toned photograph (toned to Smoke Bronze or Velvet Shadow), and (c) a hand-drawn or scribbled overlay rendered as inline SVG. No layer ever stands alone. The imagery should feel like a print piece that someone has photographed, scribbled on, then animated -- three eras of media compressed into one frame. **Core motifs:** - **The Ember:** A small (96-160px) Lottie loop of a glowing burgundy core that breathes -- it inhales (compresses, brightens to bloom) over 3 seconds, exhales (expands, dims to deep velvet) over 5 seconds. This is the heartbeat of the entire site. It appears in The Vestibule (centered, large), The Bar (six small versions, one beside each mode), The Hour (one tracing the ellipse), and The Threshold Out (final isolated). Implemented as a Lottie JSON with two shape layers (core circle, halo radial) and an opacity keyframe sequence. - **The Diagonal Seam:** A single 1px hairline at 14 degrees, ember burgundy, opacity 0.4, rendered as an SVG line that spans 140vw to ensure it always exits the viewport on both sides. It is the only constant element on the page. Tiny mono labels in Major Mono Display ride along it at intervals (`14:21`, `BOOTH 4`, `GAB 003`). - **Speech Blooms:** Lottie animations of stylized speech bubbles that are not bubbles -- they are oval vapor blooms that rise, distort, and dissipate. Two color variants: cream blooms (against burgundy fields) and burgundy blooms (against cream). Each bloom has a 4-keyframe lifecycle: emerge (scale 0.2 -> 0.8), distend (skew 8deg, opacity 0.7), drift (translate-y -40px), dissolve (opacity 0). - **Conversational Threads:** Lottie path-draw animations of thin burgundy threads that connect two points in the layout, scrubbed by scroll position. The thread literally draws across the diagonal seam as the user moves through The Booth, then unravels into the cream vapor. - **Mixed-Media Plates:** Three composite illustrations sit at fixed coordinates in The Bar and The Booth. Each is built from: a high-grain black-and-white photo (toned single-channel burgundy or bronze), a vector overlay of geometric shapes (circles, diagonals, hairlines in cream), and a Lottie sparkle layer. Subjects: a curling steam plume from a cup; a hand reaching across a counter; a single fern frond pressed under glass. None are decorative -- each is a fragment of the cafe's reality. - **The Tilted Ellipse:** The clock in The Hour is a geometric ellipse rotated 14 degrees to align with the diagonal axis. Twelve numerals (set in Space Grotesk weight 300) sit on the perimeter; the ember Lottie traces the path. The ellipse never shows hands -- time at the cafe is gestural, not measured. - **Vapor Gradients:** Soft radial gradients (cream -> old-lace) used as ambient background fills. They drift slowly via long-cycle CSS animations (40-60s) so the page never feels static. **No stock imagery. No generic icons.** Every photographic element is hand-treated to single-channel burgundy or bronze tone. Every vector element is custom geometry that respects the 14-degree diagonal grid. ## Prompts for Implementation **Narrative as structural principle:** the implementation must serve the fiction that the visitor has walked into a cafe mid-conversation. There is no "homepage", "about", "products" -- there is a single continuous building rendered in scroll. Build it as a single HTML document with one long `
` and six `
` strata, each occupying ~100-120vh. No internal anchor navigation that jumps; the only way through is to scroll, which is the only way to walk through a room. **Diagonal axis as global constraint:** establish a CSS custom property `--axis: 14deg` at `:root`. Use `transform: rotate(var(--axis))` on the seam SVG and on subtle text labels that ride the seam. Do NOT rotate the entire page. Type stays upright; only the seam, micro-labels, and the clock ellipse honor the diagonal. This preserves readability while keeping the structural metaphor intact. **Lottie integration:** load the Lottie web player (lottie-web) once via a single CDN script. Embed at minimum five Lottie animations: the Ember, the Speech Bloom, the Spark Fuse, the Path Thread, and the Ellipse Tracer. Author them as inline JSON or load from `/assets/lottie/*.json`. Use `IntersectionObserver` to play/pause based on viewport visibility -- never run all five simultaneously. Scroll-scrub the Path Thread Lottie using `lottie.goToAndStop(progress, true)` driven by a scroll-linked custom property. **Storytelling cadence:** the page should reveal its narrative slowly. Set scroll-snap on the `
` element to `proximity` (NOT mandatory) so the user can rest in each stratum without being yanked. Each stratum should hold attention for 8-12 seconds at a normal scroll speed. Lottie animations on entry should have a 200-400ms delay so the reader settles before motion begins. **Mixed-media composition:** each "Mixed-Media Plate" is a `
` containing a stack of three layers: an `` (single-channel toned photo), an inline `` (geometric overlay), and a `
` (sparkle layer). Stack them with `position: absolute` inside a `position: relative` figure of fixed aspect ratio. Mix-blend-modes: photograph at `multiply` against the cream background; SVG overlay at `normal`; Lottie sparkle at `screen`. The blend creates the impression of layered print. **Type behavior:** use `font-feature-settings: "ss01", "ss02"` on Space Grotesk to engage its alternate single-story 'a' and angular '7' -- both reinforce the geometric-sans character. Set `text-rendering: optimizeLegibility` and `font-kerning: normal`. The site title at extreme size should use `font-variation-settings` if a variable axis is exposed; otherwise fix at weight 500. **Color usage discipline:** burgundy is a guest, not a host. No solid burgundy backgrounds -- the deepest the page ever gets is The Bar, which uses a Velvet Shadow gradient (#3A0E18 -> #1A1620) at 12% opacity over Vapor Cream. Burgundy appears only as: the seam, the Lottie embers, the type accents in The First Gab, and the mode words on hover. If a viewport contains more than ~12% burgundy, it has gone too far. **Motion principles:** every motion is slow. Default easing: `cubic-bezier(0.22, 0.61, 0.36, 1)` (a gentle decelerate). Default duration: 800-1400ms. The Ember's breathing is 8 seconds. Hover ignitions on the Bar modes are 1.2s. Scroll-driven motion is linear (because scroll is linear). Avoid bounce, spring, or elastic; the cafe does not bounce. **Accessibility-irrelevant note (per project):** ignore reduced-motion accommodations and focus on visual aesthetic completeness. Build the full immersive experience. **AVOID:** CTA buttons, pricing tables, stat grids, testimonials, feature comparison cards, "join the waitlist" forms, social proof rows, FAQ accordions, footer link farms, hero CTAs of any kind. There is no conversion path. The cafe does not sell anything. **Prefer:** full-screen ambient experiences, single-line micro-copy, Lottie-driven moments of attention, scroll as the only navigation, prose written in second person, type that breathes, color that smolders. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **Cafe-as-transmission narrative:** No other design treats its subject as a pre-existing place that the visitor has interrupted. The site is not "about" a cafe -- it IS a cafe, mid-conversation, that the visitor has walked into. The second-person prose, the absence of nav, the persistent diagonal seam, and the slow Lottie embers all serve this single fiction. The user is a guest, not a customer, not a reader. 2. **Diagonal-sections (6% frequency, underused):** the 14-degree axis is not decorative -- it is the structural spine of the entire page. Every other layout in the catalogue stacks horizontal bands; this one shears them. The diagonal also pivots once at the midpoint (The Booth), creating an X-shape across the entire scroll arc -- a structural rhyme that no other design uses. 3. **Deep-burgundy palette (1% frequency, deeply underused):** burgundy is treated as ember rather than wash. The discipline of rationing it to ~12% maximum per viewport produces a chromatic effect rare in the catalogue: a site that feels saturated without being saturated, warm without being warm-toned overall. Most warm-palette designs in the corpus use terracotta, ochre, or sepia; this one uses the specific bruised red-violet of velvet curtains lit from below. 4. **Lottie-animation as primary visual language (not stagger/parallax):** the most common pattern in the corpus is scroll-triggered staggered reveals (39% frequency). This design rejects that vocabulary entirely. Lottie embers, blooms, threads, and tracers are the entire motion alphabet. There are no slide-up text reveals, no card flips, no counter animations. The motion vocabulary is curated to a single medium. 5. **Mixed-media imagery (uncatalogued):** rather than choosing photography (40%), minimal (18%), or generative-art (5%), this design layers all three on every visual plate. The deliberate collision of a toned photograph, a vector overlay, and a Lottie sparkle within one figure produces a "three-eras-of-print" feeling that no single-medium imagery strategy can achieve. 6. **Geometric-sans (6% frequency) softened by Major Mono Display + Cormorant italic:** instead of using geometric-sans as the entire type voice, it is paired with a geometric mono (for ritual mode words) and a humanist italic serif (for prose). The three voices represent: the cafe's signage, its menu, and its murmurs. No other design uses this exact triad. 7. **Six "modes of conversation" instead of features:** WHISPER, ARGUE, CONFESS, INVENT, MOURN, FLIRT replace the obligatory feature/service/product grid. They are the only "list" on the page, and they are emotional verbs, not nouns -- the site catalogues ways of talking, not things sold. 8. **Tilted ellipse as time-keeper:** the clock in The Hour borrows the 14-degree axis to convert a circle into an ellipse, transforming a generic clock motif into a piece of architecture native to this specific page. The Lottie ember tracing the ellipse is the only "clock hand" the site has, and it never tells the actual time. **Avoided patterns from frequency analysis:** - card-grid (40%) -- replaced with continuous diagonal flow. - centered (38%) -- replaced with diagonal-anchored composition. - gradient palette (41%) -- replaced with disciplined six-color warm warm-only set. - mono typography (39%) -- mono is used only as accent (Major Mono Display), not as primary voice. - scroll-triggered stagger (39%) -- replaced entirely with Lottie-driven motion. - parallax (28%) -- not used; the diagonal seam is fixed in screen space, providing a different spatial trick. - corporate aesthetic (39%) -- the cafe is the precise opposite of corporate. - photography (40%) as standalone imagery -- only used as one layer of a three-layer mixed-media composite. **Chosen seed:** aesthetic: ethereal, layout: diagonal-sections, typography: geometric-sans, palette: deep-burgundy, patterns: lottie-animation, imagery: mixed-media, motifs: futuristic, tone: futuristic-cutting-edge.