# Design Language for gabs.cafe ## Aesthetics and Tone **MCBling meets calm-serene nature** — gabs.cafe inhabits a narrow, beautiful intersection: the warm shimmer of Y2K mcbling (pearlescent surfaces, soft chrome edges, gentle gloss) filtered through the unhurried stillness of a garden in late afternoon. This is not the aggressive bling of nightclub aesthetics; it is the quiet sparkle of dew on a leaf, or sunlight through a glass of citrus water. The site feels personally curated, like a beloved cafe where the owner has arranged pressed flowers under glass on every table and hung soft-glowing paper lanterns above the counter. Mood references: a sunlit conservatory with botanical prints in pale gold frames; the soft iridescence of a soap bubble resting on a fern; a handwritten menu card on cream paper dusted with flecked mica. The tone is never urgent, never promotional. Visitors arrive and linger. **Dominant feeling:** warmth without heat, shimmer without noise, nature without roughness. A calm that has texture. ## Layout Motifs and Structure **Modular blocks as breathing habitat.** The page is composed of discrete, self-contained content blocks arranged in a 12-column grid that collapses gracefully. Each block is a room. Rooms have their own ambient light (a faint pearl-lustre gradient on the background, not a CTA gradient), their own decorative corner detail (a small botanical vector in the block's corner — never centered, always edge-dwelling), and generous internal padding so text never crowds the walls. Block rhythm: the blocks alternate between two compositional archetypes: 1. **Wide blocks** — full 12 columns, asymmetric internal split (7+5 or 8+4), text on one side, botanical vector motif floating on the other, slightly offset so it bleeds partially outside the block boundary 2. **Narrow paired blocks** — two 6-column cards sitting side by side, each with a flat-color pearl background, a small vector illustration at top-left, and a text body in the lower two-thirds **Progressive disclosure as navigation.** There is no horizontal nav bar. The top of the page presents only the wordmark and a single ambient sentence. As the user scrolls, each block reveals itself with a soft upward bloom (opacity 0→1, translateY 24px→0, over 600ms, easing: cubic-bezier(0.22, 1, 0.36, 1)). Deeper sections reveal only after the user has spent time with prior sections — the page breathes open rather than collapsing all at once. A fixed left-edge vertical rule (1px, `#E8C6A0` at 40% opacity) acts as a quiet progress spine. Small botanical leaf marks at intervals along this rule indicate scroll position without numbers. No footer-as-CTA. The final block is a quiet colophon block in muted pearl, with the cafe's name in display type and a single sprig illustration. ## Typography and Palette **Typographic system — futura-geometric with serif counterpoint:** - **Display / Wordmark:** [Nunito](https://fonts.google.com/specimen/Nunito), ExtraBold 800, tracked at `0.06em`, set in uppercase. Nunito's geometric rounded terminals evoke the soft balloon-letter quality of Y2K mcbling without its kitschiness. Used at `clamp(3rem, 8vw, 7rem)` for the wordmark only. - **Section Headlines:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), Medium 500, `clamp(1.5rem, 3vw, 2.5rem)`, tracked at `0.01em`. Geometric and clean, carries the futura-geometric vocabulary into readable sizes. - **Body:** [Lora](https://fonts.google.com/specimen/Lora), Regular 400, `1.0625rem` (17px), leading `1.75`. The serif counterpoint to the geometric display — warm, literary, unhurried. Lora's ink-trap serifs read as organic against the clean geometric frames. - **Captions / Micro:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), Light 300, `0.8125rem` (13px), tracked at `0.04em`, color `#B8956A`. **Palette — warm pearl:** - `#FDF6EC` — Cream Parchment. The page background. Warm white with a faint amber undertone, not pure white, not yellowed. The base light of the conservatory. - `#F2E2C8` — Soft Biscuit. Secondary block backgrounds. One step deeper than parchment, used for alternating modular blocks. - `#E8C6A0` — Warm Sienna Sand. Used for rules, borders, botanical stroke color, and the vertical progress spine. The color of dry autumn grass in late sun. - `#C4956A` — Burnished Amber. The mid-tone accent. Link underlines, active states, the leaf markers on the scroll spine. - `#8B5E3C` — Deep Walnut. Headlines, primary text. A brown deep enough for high contrast on parchment without the harshness of black. - `#2E1F0F` — Espresso Ground. Wordmark only. Near-black with warm undertone — this is the darkest ink, used sparingly. - `#F8EBD8` — Pearl Lustre. The shimmer base for mcbling gloss. Applied as a subtle `radial-gradient` on wide-block backgrounds: `radial-gradient(ellipse at 30% 40%, #F8EBD8 0%, transparent 65%)`. This is the bling — not chrome, not neon, but the soft iridescence of nacre. No pure black (#000). No pure white (#fff). No CSS-named colors. ## Imagery and Motifs **All imagery is custom SVG vector-art.** No photography (too common in the corpus). No raster icons. All illustrations are botanical in subject — drawn in a flat, geometric-organic style that bridges mcbling's clean graphic language with the nature motif brief. **The botanical vector roster:** - **Monstera leaf** — the site's primary motif. Rendered as a flat vector in 3-4 geometric facets, filled in `#C4956A` with a `#E8C6A0` highlight facet. Used in the wordmark zone and as the hero illustration. - **Fern frond** — a simplified spiraling fern rendered as a single continuous bezier path in `#8B5E3C`, stroke only (no fill), weight `1.5px`. Used in the vertical progress spine markers. - **Sprig with berries** — three circular berries on a curved stem. Berries filled `#C4956A`, stem stroked `#8B5E3C`. Used in block corners and the colophon. - **Abstract citrus slice** — a circle divided into geometric segments, a geometric take on a cross-section of yuzu or grapefruit. Filled alternating `#F2E2C8` and `#E8C6A0`. Used in the hero wide-block floating decoration. - **Petal diamond** — four petal shapes arranged at 45° intervals, each a simple bezier ellipse. Used as a decorative separator between sections, tiny (24×24px), color `#C4956A`. **MCBling shimmer details:** - Modular block backgrounds use a `box-shadow: inset 0 1px 0 rgba(255,255,255,0.6)` to simulate the top-edge highlight of a pearlescent surface - The wordmark has a `text-shadow: 0 1px 2px rgba(196,149,106,0.3)` for a soft gilded glow - Wide-block hero images have a `::before` pseudo-element with a `linear-gradient(135deg, rgba(248,235,216,0.5) 0%, transparent 50%)` overlay — the mcbling gloss catch-light **No gradients as backgrounds.** The gradient corpus dominance (87%) means gradients read as generic. All gradient usage is restricted to subtle inset shimmer overlays only. ## Prompts for Implementation **Overall structure:** A single-page scrolling experience with no horizontal navigation. The page is a vertical sequence of modular blocks. JavaScript handles only progressive disclosure (IntersectionObserver), the scroll spine progress markers, and the shimmer micro-animation on block entry. **Block entry animation (progressive disclosure):** ``` Each .block element begins: opacity: 0; transform: translateY(24px); On IntersectionObserver threshold 0.15: transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); opacity: 1; transform: translateY(0); Stagger siblings by 80ms delay increments. ``` **Vertical scroll spine:** A `position: fixed; left: 2.5rem; top: 50%; transform: translateY(-50%)` element containing the 1px rule and fern-marker dots. The dots activate (fill from `#E8C6A0` to `#C4956A`) as their corresponding section enters the viewport. No scroll-jacking — this is purely observational. **Wordmark treatment:** The Nunito ExtraBold wordmark `gabs.cafe` should render with `font-feature-settings: "kern" 1, "liga" 1`. The `.` between `gabs` and `cafe` is replaced by a small monstera icon inline SVG (16×16px, aligned to baseline) — this is the site's unique typographic signature. **Wide blocks:** Use CSS Grid: `grid-template-columns: 7fr 5fr` (or `8fr 4fr`). The botanical illustration in the 5fr column is positioned with `position: absolute` within a `position: relative` container, offset so it bleeds 20–30% outside the block boundary — requires `overflow: visible` on the illustration column and `overflow: hidden` on the page wrapper. **Pearl shimmer micro-animation:** On block entry, after the translateY animation completes, apply a single-pass shimmer: ``` @keyframes pearl-sheen { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .block:after { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%); background-size: 200% 100%; animation: pearl-sheen 1200ms ease-out forwards; } ``` This fires once on entry — a single shimmer pass that reads as living surface, not looping distraction. **Typography sizing:** Use `clamp()` throughout. Never fixed pixel sizes for display type. The body measure should be capped at `68ch` per line. **AVOID:** Sticky nav headers. Pricing tables. Stat grids. CTA button clusters. Any gradient as a primary background fill. Dark mode (this is a light, warm, conservatory site). Hover effects that feel aggressive or springy. Parallax on botanical illustrations — they should be static, grounded, growing. **Bias toward:** Silence between elements. The blocks need room to breathe. Padding inside blocks should be `clamp(2rem, 5vw, 4rem)`. The overall feel should be: you have arrived at a calm, beautiful place that has been curated with intention. ## Uniqueness Notes 1. **MCBling applied to nature, not fashion/tech** — the mcbling aesthetic is almost universally applied to Y2K fashion, Chrome-style UI, or tech aesthetics in the corpus. Using it for a botanical cafe context — soft pearl surfaces, warm shimmer, geometric botanical illustration — is an unexplored combination that avoids both cliché applications. 2. **Progressive disclosure as the primary navigation model** — rather than a nav bar or anchor links, the site reveals itself through scrolling presence. The scroll spine with botanical leaf markers replaces conventional pagination. This pattern appears at under 5% frequency in the corpus. 3. **Futura-geometric display (Nunito) paired with warm serif body (Lora)** — this specific combination of rounded-geometric display and literary serif body is unusual. Most futura-geometric designs pair geometric with geometric throughout. The Lora body adds warmth that aligns with the calm-serene brief and prevents the geometric system from reading as cold. 4. **No dark mode, no neon, no gradients as backgrounds** — explicitly resists the three highest-frequency corpus patterns (warm-gradient 94%/87%, parallax 90%, hand-drawn 71%). The shimmer is subtle nacre, not chrome. The palette is warm but achieved through carefully chosen hex browns and ambers, not orange gradients. 5. **Botanical vector-art in geometric facet style** — vector-art appears at only 1% in the corpus (underused), and the specific treatment here — geometric facets rather than naturalistic line illustration — bridges the mcbling clean-graphic vocabulary with organic subject matter. The monstera as wordmark punctuation is a signature that no other site in the corpus uses. 6. **Chosen seed/style:** aesthetic: mcbling, layout: modular-blocks, typography: futura-geometric, palette: warm, patterns: progressive-disclosure, imagery: vector-art, motifs: nature, tone: calm-serene 7. **Avoided patterns from frequency analysis:** no parallax (90% — avoided), no warm gradient backgrounds (94%/87% — restricted to shimmer overlays only), no centered layout (91% — asymmetric modular blocks used instead), no hand-drawn illustration (71% — geometric vector-art used instead), no vintage motifs (61% — nature/botanical used instead).