# Design Language for lunge.dev ## Aesthetics and Tone lunge.dev is a developer toolkit for "the decisive move" — the single forward thrust that ships a feature, breaks a deadlock, commits the migration. The brand idea is the *lunge* itself: the fencer's extension, the runner's first explosive stride, the chess sacrifice that wins the board. We render that motion not as a thin minimal line but as something **inflated, sculptural, and heavy with consequence** — a gilded bronze figure mid-extension, frozen in a museum's central hall. The aesthetic is **inflated-3d wrapped in opulent-grand staging**: puffy, pillow-soft 3D forms (rounded, balloon-like geometry with deep ambient occlusion and creamy specular highlights) — but instead of the usual candy-bright Blender-toy palette, these forms are cast in **jewel tones**: amethyst purple, emerald green, deep sapphire, garnet red, with edges that catch a thin gold rim-light. Think a Fabergé egg reimagined as a bouncy 3D blob; a baroque cartouche rendered as inflatable vinyl; a coronation throne shaped like a beanbag. Decadence and squish in the same frame. The mood: **opulent, ceremonial, slightly absurd in its grandeur** — a product that takes itself seriously enough to commission a gilded ceiling fresco about `git push`. The tone of voice is grand, theatrical, a touch operatic ("Make the move. The board will follow."), but the surfaces are soft, inviting, almost edible. Inspiration touchstones: the Hall of Mirrors at Versailles dipped in liquid latex; Jeff Koons' balloon dogs forged in a jeweler's workshop; a deluxe chocolate box where every truffle is a different gemstone; the velvet rope and brass stanchions of an opera lobby, but the rope is a giant inflatable noodle. ## Layout Motifs and Structure **Primary layout: f-pattern, deliberately and visibly.** The eye-tracking F is normally an invisible UX heuristic — here we make it the literal architecture and ornament it like a coat of arms. Every major section is built on a left-anchored vertical spine with two horizontal "crossbars" branching right: - **The Spine** — a thick (clamp(56px, 7vw, 110px)) vertical band running down the left ~14% of the viewport, rendered as an inflated 3D column: a puffed amethyst pilaster with a soft gold capital at top and a rounded plinth at bottom. It carries the section index ("I. EXTEND", "II. COMMIT", "III. RECOVER") set vertically in gold Playfair Display, and it stays pinned/parallaxes slower than content. - **First Crossbar (the top stroke of the F)** — the widest content row: the section's grand headline in oversized Playfair, plus a single hero 3D object floating to the right. - **Second Crossbar (the middle stroke)** — a shorter row, indented, holding the supporting paragraph and one inflated "module card." - **The Descender** — below the second crossbar, content tapers: small print, captions, a thin gold hairline, lots of jewel-dark negative space. The reader's gaze naturally exits down-left, into the next section's spine. The whole site reads as a stack of these illuminated F-folios. On mobile the spine collapses to a slim left gutter rail (8px puffed bead) and the crossbars stack, but the left-anchored, top-heavy rhythm survives. **Composition rules:** - 12-column grid; the spine eats columns 1–2, crossbar-one spans 3–12, crossbar-two spans 4–10, descender spans 4–8. - Generous vertical air: each section is min 100svh, content vertically centered within its F. - Layered depth: 3 z-planes — (back) gradient-mesh atmosphere, (mid) faint grid-lines blueprint, (front) inflated 3D objects + type. Front plane casts large soft shadows onto the mid plane. - One — and only one — hero 3D object per section. It is large (40–55vw), it overlaps the headline slightly, and it slowly rotates. ## Typography and Palette **Typography:** - **Display / Headlines:** **"Playfair Display"** (Google Fonts) — high-contrast Didone serif with dramatic thick/thin transitions and elegant ball terminals. This is the "playfair-elegant" voice: regal, editorial, theatrical. Used at clamp(3rem, 8.5vw, 8.5rem), weight 700/900, tight tracking (-0.015em), occasional italic for emphasis ("the *move*"). Section roman numerals also in Playfair, weight 900, vertically set on the spine. - **Subheads / Eyebrows:** **"Cormorant Garamond"** (Google Fonts), weight 600 italic — a softer, more lyrical serif for the small ceremonial labels above headlines ("a toolkit for the decisive"). - **Body / UI / Code:** **"Spline Sans"** (Google Fonts), weight 400/500 — a humanist sans with gently rounded joints that echoes the inflated geometry without being childish; sets long-form text and labels at 1.05–1.2rem with comfortable 1.65 line-height. For inline code and commands, **"Spline Sans Mono"** (Google Fonts) — same family's monospace, rounded and warm, rendered inside puffed "key-cap" pills. **Palette — jewel-tones over a near-black velvet ground, with gold rim-light:** - `#0E0A14` — **Velvet Void** (primary background; an almost-black aubergine, the opera-house dark) - `#1A1330` — **Midnight Amethyst** (mid-plane panels, the gradient-mesh's deep node) - `#7B3FA0` — **Amethyst** (the spine column, primary jewel) - `#1F8A6E` — **Emerald** (secondary 3D objects, accent fills) - `#1E5BC6` — **Sapphire** (tertiary 3D objects, link hover) - `#A6203A` — **Garnet** (rare alert/emphasis jewel, error states) - `#D9B45A` — **Old Gold** (rim-light, hairlines, Playfair display fills on dark, capitals/plinths) - `#F4ECDA` — **Champagne** (high-key text on dark, the "paper" of descender captions) - `#EFD9A8` → `#B98B3C` — **Gilt Gradient** (linear-gradient used on key headlines and the gold capitals, simulating brushed leaf) Gradient-mesh atmosphere: large soft radial blooms of Amethyst → Sapphire → Emerald at ~12–18% opacity drifting across Velvet Void, blurred to 120px, so the background reads like aurora through smoked glass. ## Imagery and Motifs **The inflated 3D object library (CSS/SVG/canvas-faked 3D — no real WebGL needed):** 1. **The Lunge Figure** — an abstract, puffy mannequin frozen mid-lunge: a balloon-torso leaning forward, a long extended "arm" reaching off-frame right. Amethyst body, gold rim-light, huge soft drop shadow. The site mascot; appears in the opening section, slowly extending further on scroll. 2. **The Gem-Drop** — a faceted-yet-rounded gemstone blob (think a cut emerald that's also a gummy bear). One per crossbar as the hero object; rotates slowly; refracts a faint gold caustic onto the panel below. 3. **The Puffed Cartouche** — baroque oval frame ornament, rendered as inflated piping; wraps section roman numerals and pull-quotes. 4. **The Stanchion Rope** — a thick rounded "velvet rope" of gilt gradient that swags between section anchors as a scroll-progress indicator down the left margin, near the spine. 5. **Key-cap Pills** — code snippets and shortcuts sit in fat, rounded, slightly-3D keycaps with a top highlight and bottom shadow, tinted by the nearest jewel. **Decorative patterns:** - **Grid-lines as blueprint underlay** — a faint (#D9B45A at 6%) engineering grid on the mid-plane, slightly perspective-skewed, so the opulent objects look "designed" / measured. Major grid lines thicker; intersections marked with tiny gold plus-ticks. - **Fade-reveal masks** — content and objects enter via soft luminance-gradient wipes (a feathered edge sweeping in), never hard cuts. - **Gilt hairlines** — single 1px Old Gold rules separate the F's descender from the next spine; sometimes a hairline draws itself (path-draw) along the F's strokes on entry, like illuminating a manuscript's rubrication. - **Caustic flecks** — sparse, slow-drifting tiny gold dots, like dust in a spotlight. No photography. No icon sets — any "icons" are mini inflated 3D primitives (puffed arrow, puffed bracket, puffed semicolon). ## Prompts for Implementation Build this as a **single full-screen narrative scroll** — a procession through illuminated F-folios, each a self-contained ceremonial scene. Treat scroll position as the spotlight operator at an opera: it reveals one tableau at a time. - **Curtain / Overture (section 0):** Velvet Void fills the screen. The gradient-mesh aurora is barely visible. A thin Old Gold hairline draws itself top-to-bottom on the left (the future spine), then a horizontal hairline draws right across the top, then a shorter one across the middle — the F skeleton, rubricated line by line (path-draw-svg, ~2.4s total). As the strokes complete, the Spine "inflates" into 3D (scale + shadow bloom), its gold capital pops on with a soft spring, and the wordmark **"LUNGE"** fades-reveals in Playfair Display 900, gilt gradient, the "U" exaggeratedly extended like a lunging stride. A Cormorant Garamond italic eyebrow beneath: *"a developer's toolkit for the decisive move."* The Lunge Figure floats in from the right via fade-reveal, leaning forward. - **Scroll mechanics:** Each section pins briefly while its F assembles: spine slides up into place (slower parallax), crossbar-one headline fade-reveals word-by-word with a faint gold underline-draw, the hero Gem-Drop rises and begins a slow continuous Y-rotation, crossbar-two paragraph + module card fade in staggered, descender hairline draws, then the section releases and the next spine rises from the bottom-left. Honor `prefers-reduced-motion` by swapping all motion for instant fade-reveals and disabling rotation. - **The inflated look in pure CSS:** layered `box-shadow` (one large soft dark for ambient occlusion, one tight inset light for the "balloon" highlight), heavy `border-radius` (40–50% on cards, full pill on bars), `filter: drop-shadow()` on SVG blobs, and a subtle radial-gradient overlay per object (top-left light → bottom-right jewel-dark) to fake form. The gold rim-light = a 1.5px conic or linear gradient border that's brighter on the upper-left arc. - **Gradient-mesh background:** 3–4 absolutely-positioned, heavily-blurred radial gradients (Amethyst/Sapphire/Emerald) animated with very slow `@keyframes` translate/scale drift (40–80s loops). Sits behind everything at low opacity over Velvet Void. - **Grid-lines plane:** a fixed pseudo-element with a repeating-linear-gradient grid in Old Gold @6%, given a slight `transform: perspective(800px) rotateX(2deg)` so it recedes; parallaxes faster than the spine, slower than foreground objects. - **Micro-interactions:** hovering a key-cap pill makes it "press" (translateY + shadow shrink) and emit a tiny ripple; hovering a Gem-Drop tilts it 3–5° toward the cursor (tilt-3d) and intensifies its caustic; the Stanchion Rope's swag tightens as you scroll past each anchor. - **Closing folio:** the Lunge Figure, now fully extended, "lands" — a single spring settle — and the gilt gradient sweeps across the final Playfair line: *"Make the move. The board will follow."* Then a calm descender of Champagne fine print on Velvet Void, one last gold hairline, and the spine's plinth glints once. **AVOID:** CTA-stacked hero sections, pricing tables, three-up feature/stat grids, testimonial carousels, dashboard chrome, generic SaaS gradients-on-white. This is a procession, not a landing page. No real photos; no stock 3D icon packs; keep the F-pattern legible — never let decoration drown the left-anchored top-heavy reading rhythm. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Jeweled inflated-3d** — the puffy 3D trend almost always arrives in candy/dopamine brights; here it's cast in deep amethyst/emerald/sapphire/garnet on velvet-black with gold rim-light. Opulence + squish is a pairing essentially unused elsewhere (inflated-3d at 0%, jewel-tones at 3%, opulent-grand at 5%). 2. **F-pattern as visible architecture and ornament** — instead of f-pattern being an invisible UX rule of thumb, the literal F (vertical spine + two horizontal crossbars + tapering descender) is the page skeleton, rubricated like an illuminated manuscript on entry. f-pattern is at ~1% in the portfolio; making it the *star* is novel. 3. **Operatic-procession scroll, not a landing page** — full-screen narrative folios with a "spotlight operator" scroll metaphor, theatrical Playfair copy, and zero conversion furniture — directly opposite the corporate-gradient-SaaS default that dominates the set. 4. **Gold-leaf gilt-gradient typography on near-black** with Playfair Display (playfair-elegant ~0%) paired with rounded humanist Spline Sans — high-contrast Didone elegance over soft 3D, a deliberately mismatched-on-paper, harmonious-in-practice pairing. 5. **Decorative grid-lines blueprint + gradient-mesh aurora layered behind tactile 3D** — grid-lines motif (~1%) and gradient-mesh imagery (~2%) are both rare; used here as the "designed/measured" substrate beneath the opulent objects. **Chosen seed/style:** aesthetic: inflated-3d, layout: f-pattern, typography: playfair-elegant, palette: jewel-tones, patterns: fade-reveal, imagery: gradient-mesh, motifs: grid-lines, tone: opulent-grand **Avoided patterns from frequency analysis:** steered clear of the saturated defaults — corporate aesthetic (93%), centered layout (93%), mono typography (94%), gradient/warm palettes (96%/91%), counter-animate (91%), parallax-as-everything, mysterious-moody as the sole tone (94%), photography/minimal imagery (66%/69%). Parallax is used sparingly and in service of the F-spine, not as the headline trick.