# Design Language for lunge.dev ## Aesthetics and Tone `lunge.dev` is a **goblincore treasure cabinet** rendered in black lacquer and molten gold — the aesthetic of a creature that has accumulated beautiful things and arranged them with strange, obsessive logic. The site does not whisper luxury. It *announces* it the way a magpie announces a coin: bluntly, gleefully, without apology. The mood is **optimistic-bright through abundance** — not the cold gleam of a jewelry store but the warm radiance of candlelight bouncing off a hoard. Every surface is intentional: the gold is not decorative trim, it is structural. The black is not empty space, it is velvet. Inspiration draws from three sources held in deliberate tension: 1. **Medieval alchemical manuscripts** — illuminated marginalia, decorative border knots, red-ink annotations in cramped script at odd angles, gold-leaf flourishes on section dividers. 2. **1920s Art Nouveau shop signage** — sinuous letterforms, ornamental frames that grow outward from text blocks like vines, gold on black as the canonical color relationship. 3. **Goblincore aesthetic** — hoarded objects displayed with pride, the joy of things-that-belong-together even when they shouldn't, imperfect symmetry, the pleasure of a full shelf. The site reads as a single continuous cabinet of curiosities. There are no blank walls. Every margin is claimed. --- ## Layout Motifs and Structure The page uses a **fixed sidebar + sliding content panel** architecture — two distinct zones that each obey their own laws. **Left Sidebar (28vw, fixed, full-height):** The sidebar is the hoard itself. It is a tall, narrow cabinet face rendered in `#0A0A0A` with a 1px `#C9A84C` border on its right edge. It contains: - A monogram glyph at top (the "L" of lunge rendered as an alchemical symbol, SVG) - A vertical navigation list — each item is a **tabbed drawer label** pressed into the black surface, gold text, with a tiny decorative corner bracket - A rotating band of abstract-shape thumbnails at the bottom third, slowly cycling through the site's imagery vocabulary - A decorative border pattern running the full height of the sidebar's inner right edge: a repeating Art Nouveau vine-and-knot motif at 12px wide, gold strokes on black, SVG-rendered **Right Content Panel (72vw, slides):** Each navigation item triggers a **slide-reveal** of its content panel. Panels slide in from the right with a cubic-bezier ease that has a slight overshoot — the content lunges into view (the domain name made literal). The outgoing panel slides left and slightly scales down (0.96) before exiting. **Panel internal grid:** Each content panel uses a **two-column asymmetric sub-grid** — a narrow left gutter (14%) for section labels and decorative running ornaments, and a wide right reading column (86%). The gutter prints vertical section labels rotated 90° counter-clockwise in `Cormorant Garamond` small-caps, gold. **Transition choreography:** - Sidebar navigation items receive a `slide-reveal` underline that draws from left on hover — a 2px gold rule animated with `clip-path: inset(0 100% 0 0)` transitioning to `inset(0 0% 0 0)` over 220ms - On panel entry, the section label in the gutter fades in 80ms after the panel arrives - Abstract shape decorations in the panel header slide up from 20px below their final position, staggered 40ms per shape **No full-screen hero. No pricing blocks. No stat grids.** The entire layout is driven by the sidebar navigation — the user navigates the cabinet drawer by drawer. --- ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & primary headings — `Cormorant Garamond`** (Google Fonts, variable, wght 300–700, ital). Set at `font-weight: 300`, `font-style: italic` for main headings — the thin italic cuts elegantly against the black surface. H1: 72px / 1.1 line-height. H2: 40px / 1.2. The weight axis animates to 500 on hover for headings that are interactive. - **Body & running text — `EB Garamond`** (Google Fonts, wght 400–800). Set at 400 weight, 17px, `line-height: 1.75`. The slight imperfection of EB Garamond's optically-sized letterforms adds the goblincore texture — it is not sterile. - **Navigation labels & UI chrome — `Cinzel`** (Google Fonts, wght 400–900). All-caps, letter-spacing 0.15em, 13px for sidebar nav items. Gold `#C9A84C` on black. Cinzel's Roman-inscription letterforms carry the alchemical / Art Nouveau lineage. - **Accent / annotation text — `Cormorant SC`** (Google Fonts, small caps variant). Used for section gutter labels, footnotes, and running ornament captions at 11px. **Palette:** | Role | Name | Hex | |---|---|---| | Background (velvet) | Obsidian | `#0A0A0A` | | Primary surface | Deep Lacquer | `#111111` | | Raised surface / cards | Midnight Panel | `#1A1A1A` | | Primary accent | Alchemical Gold | `#C9A84C` | | Bright accent / hover | Bright Burnish | `#E8C86A` | | Warm highlight | Candlelight | `#F5DFA0` | | Body text | Aged Vellum | `#E8E0CE` | | Muted text | Ash | `#8A8070` | | Border / rule | Tarnished Gold | `#6B5B2E` | | Deep shadow | Void | `#050505` | All surfaces use `box-shadow: inset 0 0 60px rgba(0,0,0,0.6)` to create the velvet depth. Gold text uses `text-shadow: 0 0 18px rgba(201,168,76,0.3)` at full gold weight — a warm candle-ambient glow, never harsh neon. --- ## Imagery and Motifs **Abstract shapes as object-displays:** The site has no photography. Instead, every visual element is a **constructed abstract shape** built from SVG geometry — curves, overlapping rings, bisected ellipses, irregular polygons with chamfered corners. These are not random: each shape is designed to suggest a *found object* — a worn coin, a brooch outline, a ring cross-section, a knotted cord — without depicting it literally. Shapes are rendered in `#C9A84C` stroke (1.5–2px) on transparent fill, sometimes with a sparse `#C9A84C10` fill for depth. **Retro-pattern borders and dividers:** Every section transition uses a **retro-pattern ornamental divider** — a horizontal band 32px tall containing a repeating SVG motif. Motif vocabulary: - **Chain-link pattern**: interlocking ovals at 4px stroke, gold on black, 24px repeat unit - **Fleur-de-lis row**: compressed Art Nouveau fleur motif, 20px wide, 28px tall, gold fill with black outline - **Diamond-and-dot band**: alternating ◆ 8px and · 4px, centered vertically, 16px horizontal repeat - **Vine-scroll frieze**: sinuous S-curves with leaf nubs, 32px tall, continuous horizontal repeat These patterns are rendered inline SVG with `pattern` elements and `patternUnits="userSpaceOnUse"` — they tile perfectly and respond to viewport width without media query breakpoints. **Sidebar abstract shapes — rotating inventory:** The lower third of the sidebar cycles through a set of 8 pre-designed SVG abstract shapes, one visible at a time, with a `slide-reveal` entrance from bottom and exit upward. Cycle interval: 4.5 seconds. Each shape occupies a 160×160px square with 16px padding, centered in the sidebar column. **Alchemical marginalia:** At random positions in the content panels (determined by a seeded pseudo-random function keyed to section index), small SVG glyphs appear in the gutter — alchemical symbols (☿ ♄ ☉ ♁ rendered as custom SVG paths, not Unicode), sized 14–18px, in `#6B5B2E` (tarnished gold), as if annotated by a previous reader. --- ## Prompts for Implementation This site is a single-page application with sidebar navigation driving panel reveals. Implement it as a narrative cabinet — the user discovers each panel the way they would open a drawer in an antique shop display case. **Core implementation directive:** The `slide-reveal` pattern is the soul of this site. Every transition must feel *deliberate* — not instant, not sluggish. Target 340ms for panel transitions using `cubic-bezier(0.23, 1, 0.32, 1)` (easeOutQuint). The slight overshoot in this curve is the "lunge" — it gives the motion a living quality that matches the domain name. **Sidebar implementation:** ``` position: fixed left: 0; top: 0; bottom: 0 width: 28vw; min-width: 240px; max-width: 380px background: #0A0A0A border-right: 1px solid #C9A84C overflow: hidden ``` The sidebar never scrolls. Its content is vertically distributed with CSS Grid (`grid-template-rows: auto 1fr auto`): monogram at top, navigation in the middle, abstract shape carousel at bottom. **Panel transition mechanics:** Maintain a panel stack. When a navigation item is activated: 1. The current panel transforms: `translateX(-4vw) scale(0.96)` with opacity fading to 0 over 200ms 2. The incoming panel starts at `translateX(100%)`, then transitions to `translateX(0)` over 340ms — beginning after 80ms (slight overlap with exit) 3. The section gutter label fades in at 420ms (80ms after panel arrival) 4. The panel's abstract shapes stagger in: first at 460ms, then +40ms per subsequent shape **Navigation hover states:** Each nav item in the sidebar receives: - A `clip-path` animated gold underline (slide-reveal, 220ms) - The bracket decorations (`[` `]` or `⌊` `⌉` in Cinzel) translate from -8px to 0 on hover over 180ms - Active items: `background: linear-gradient(90deg, #1A1A1A 0%, #0A0A0A 100%)` with left border `4px solid #C9A84C` **Retro-pattern dividers:** Each section within a panel begins with an ornamental divider. Implement as inline SVG with a `` definition. On panel entry, the divider pattern draws in from left using `clip-path: inset(0 100% 0 0 round 0)` animating to `inset(0 0 0 0)` over 600ms, beginning at 300ms after panel arrival. **Abstract shape carousel (sidebar):** Use a single `
` with `overflow: hidden`. On interval tick: - Current shape exits upward: `translateY(-100%)` over 400ms, then `opacity: 0` - Next shape enters from below: starts `translateY(100%)`, transitions to `translateY(0)` over 400ms beginning 200ms after exit starts This is a contained `slide-reveal` loop. **Typography rendering:** Load Cormorant Garamond (300, 300i, 500, 700i), EB Garamond (400, 500), Cinzel (400, 700), Cormorant SC (300, 500) from Google Fonts. Use `font-display: swap` and preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`. **Gold glow ambient system:** The page should feel warm — not like a screen, like a lit room. Achieve this with: - `body` background: `#050505` with a radial gradient centered on the content panel: `radial-gradient(ellipse 80vw 60vh at 64vw 40vh, #1A1507 0%, #050505 70%)` - Sidebar gets: `box-shadow: 4px 0 32px rgba(201,168,76,0.08)` on its right edge - Active panel: `box-shadow: -8px 0 48px rgba(201,168,76,0.05)` on its left edge **Content direction:** Tell the story of `lunge.dev` as a journey through rooms in the cabinet. Each panel is a room: - **Entry**: Who keeps this cabinet (the developer / creator identity) - **Work**: The objects they've made — projects displayed as abstract-shape cards, each with a Cinzel title and EB Garamond one-line descriptor - **Approach**: How they think — written in Cormorant Garamond italic, 20px, generous line-height, as if pulled from a personal notebook - **Contact**: A single gold-bordered form panel, minimal fields, with a submit button that briefly animates its border in the chain-link retro-pattern on hover **AVOID throughout:** - No call-to-action buttons beyond the contact panel - No statistics ("10+ years", "50+ projects") — the cabinet speaks for itself - No hero image or full-width banner - No section that reads as a pricing table - No carousel of client logos --- ## Uniqueness Notes **Chosen seed:** aesthetic: goblincore, layout: sidebar, typography: elegant-serif, palette: gold-black-luxury, patterns: slide-reveal, imagery: abstract-shapes, motifs: retro-patterns, tone: optimistic-bright **Differentiators from every other design in the registry:** 1. **The sidebar is the hoard, not navigation chrome.** Most sidebar layouts treat the sidebar as a utilitarian navigation rail. Here the sidebar IS the aesthetic — it is a fixed, decorative cabinet face with its own animated abstract-shape carousel, alchemical monogram, and Art Nouveau vine border. It contributes as much visual information as the content panels. 2. **slide-reveal as the only interaction pattern, applied at four distinct scales simultaneously.** Navigation underlines (220ms), panel transitions (340ms), section divider draw-ins (600ms), and the sidebar shape carousel (400ms) all use the same clip-path/translate slide-reveal mechanic at different durations and axes. The site has one motion vocabulary, fluent at every scale. The registry shows slide-reveal at 2% — this is deliberately underused territory. 3. **Retro-pattern ornamental dividers as structural typography.** The chain-link, fleur-de-lis, diamond-dot, and vine-scroll SVG bands are not decorative borders — they are typographic section breaks that carry equal visual weight to headings. They tile from viewport edge to edge and animate on panel entry, making section transitions feel like turning pages in an illuminated manuscript. 4. **Goblincore optimism expressed through gold saturation, not whimsy.** Goblincore in web design defaults to earthy greens and browns with scattered object illustrations. This design subverts that expectation by pairing goblincore's accumulation-joy and found-object reverence with a gold-black luxury palette — the goblin who has specifically hoarded treasure, rendered with Art Nouveau elegance rather than earthy chaos. The tone is unambiguously bright and proud, not dark or cluttered. 5. **elegant-serif at 2% registry frequency, deployed as the primary type system.** Cormorant Garamond italic at 300 weight against black is a combination almost absent from the registry. The thin italic cuts with surgical precision — it is the opposite of the heavy display type that dominates most luxury-aesthetic designs (where bold commands attention). Here, the type *suggests* rather than shouts, which amplifies the gold accents by contrast. **Patterns deliberately avoided (overused per frequency analysis):** - parallax (79% in registry) — not used - scroll-triggered (35%) — not used; all animation is triggered by navigation/hover, not scroll position - asymmetric layout (42%) — the sidebar layout is structurally consistent, not broken-grid - photography (85% imagery frequency in registry) — zero photographs