# Design Language for lump.dev ## Aesthetics and Tone lump.dev is an **energetic, flat-design universe** — bold shapes with crisp zero-shadow edges that feel hewn from polished gemstone, alive with kinetic momentum. The site tells the story of raw creative potential: lumpy, irregular masses of pure jewel-toned color that refuse to be smoothed away. Think a jeweler's tray caught mid-tumble — sapphires, emeralds, amethysts scattering across a matte obsidian table, each facet flat-cut but radiating chromatic intensity. Mood: electric confidence. Not a startup pitch. Not a portfolio. A declaration from something elemental — a creative force that doesn't apologize for occupying space. The tone is kinetic, restless, and genuinely alive. Background particles drift like charged dust motes in a gemstone vault; they don't chase the cursor, they just exist — autonomous, purposeful, magnetic. The leather-texture motif enters not as a background fill but as a **material accent** — tooled vegetable-tan leather panels embedded in specific sections, as if the site is a hand-bound codex whose cover was blown open by the jewel energy within. The contrast of warm leather grain against flat jewel geometry creates a tactile tension that is entirely unique. ## Layout Motifs and Structure **Parallax-sections architecture** — each scroll section is a distinct vertical world with independent depth layers moving at different scroll rates: - Layer 0 (fixed): particle field — slow drifting jewel-dust dots in #9B59B6 and #1ABC9C at 8% opacity - Layer 1 (0.2× scroll): large flat geometric shapes — circles and irregular pentagons, jewel-colored, clipped to viewport edges, creating a sense of planetary mass - Layer 2 (0.6× scroll): leather-texture panel — a single inset rectangle with SVG leather grain, stitched border, aged-brass fastener details at corners - Layer 3 (1× scroll): foreground content column — centered, 680px max-width, with massive variable-weight headings Section transitions use a **blur-to-focus reveal**: as each section enters the viewport, content starts at `filter: blur(12px) scale(0.96)` and transitions to `blur(0) scale(1)` over 600ms cubic-bezier(0.16, 1, 0.3, 1). The blur doesn't fade in from zero — it snaps from blurry obscurity into crystalline focus, like a gemstone being placed under a loupe. Between sections, a horizontal **jewel-bar divider**: a 3px line in a gradient from #E74C3C to #9B59B6 to #1ABC9C, broken by small diamond SVG glyphs at irregular intervals. The overall rhythm: fullscreen hero → leather codex panel → floating jewel gallery → dark particle section → closing manifesto screen. No grid of cards. No icon-feature rows. No pricing table. Each section is a single focused moment. ## Typography and Palette **Primary font:** Syne (Google Fonts) — variable weight 400–800, used for all headings. At hero scale (clamp(4rem, 12vw, 10rem)), Syne's geometric letter forms read as pure flat shapes, matching the design system. Weight animates on scroll: starts at 400, arrives at 800 as section focuses. **Secondary font:** DM Mono (Google Fonts) — used exclusively for metadata, labels, and any code-adjacent content. Monospaced precision against Syne's geometric warmth. **Body font:** Instrument Sans (Google Fonts) — regular 400 for running prose, 16px/1.75 line-height, maximum readability against dark backgrounds. **Palette — Jewel Tones on Obsidian:** - `#0D0D0F` — Obsidian void (base background) - `#141416` — Charcoal surface (section backgrounds, subtle) - `#1ABC9C` — Emerald pulse (primary accent, CTAs, active states) - `#2980B9` — Sapphire depth (secondary accent, links, borders) - `#9B59B6` — Amethyst glow (tertiary accent, particle colors, highlights) - `#E74C3C` — Ruby flash (error states, emphatic punctuation, divider start) - `#F39C12` — Topaz warmth (hover states, leather accent trim) - `#C8A96E` — Aged brass (leather texture fastener color, stitching detail) - `#F5F5F0` — Mineral white (primary text on dark backgrounds) - `#6C6C72` — Graphite dust (muted labels, secondary text) **Typography sizing scale (fluid):** Uses `clamp()` at every level. H1: `clamp(3.5rem, 10vw, 9rem)`. H2: `clamp(2rem, 5vw, 4.5rem)`. H3: `clamp(1.25rem, 2.5vw, 2rem)`. Body: `clamp(0.95rem, 1.5vw, 1.125rem)`. All fluid — no breakpoint jumps. ## Imagery and Motifs **Particle field system:** 120 SVG circles, diameter 2–6px, distributed via Poisson-disc sampling so no cluster appears. Colors: 60% `#9B59B6` at 6% opacity, 30% `#1ABC9C` at 5% opacity, 10% `#F39C12` at 8% opacity. Each particle has an independent drift animation: translate XY over 8–22s, looping with `animation-direction: alternate` and randomized `animation-delay`. No canvas required — pure CSS animations on inline SVG elements inside a `position:fixed` layer. **Leather texture panel:** A single `
` in the second section with a repeating SVG background pattern simulating tooled leather — diagonal hatching at 45° with 1px strokes at #5C3D1E on a #3D2409 base, overlaid with a radial gradient vignette (rgba(0,0,0,0.4) at edges to transparent at center). Stitched border: a 2px dashed `#C8A96E` border with `border-radius: 4px`, `gap: 8px` in the dash pattern. Four corner "fasteners" implemented as 16px circles in `#C8A96E` with inner `8px` circles in `#8B6914`, positioned at absolute corners. **Flat geometric accent shapes:** Large flat polygons in jewel tones, no gradients, no shadows. Implemented as inline SVG with `clip-path: polygon()`. On each parallax layer, 2–3 shapes exist: a 40vw circle clipped to the viewport left edge (sapphire), a pentagonal mass in amethyst at the upper right, and a thin horizontal rectangle in emerald at 30% viewport height. These shapes do not animate independently — they are the parallax layers themselves. **Jewel-bar dividers:** Between every major section, a full-width `
` replaced by a custom SVG: 2px horizontal line with `stroke: url(#jewel-gradient)`, interrupted every 200px by a `` diamond shape in `#F5F5F0` at 40% opacity. **Typography as motif:** The word "LUMP" rendered at 40vw width in Syne weight 800, filled with `conic-gradient` using all five jewel colors, positioned absolutely behind content as a watermark at 4% opacity. Rotated 7°, blur(2px). ## Prompts for Implementation **Build this as a vertical scroll journey — a gemstone geologist's field notebook.** The page opens on darkness with particles slowly assembling, then the word "LUMP" emerges letter-by-letter (staggered, blur-to-focus, 100ms between letters), then the hero text arrives at weight 800. Everything after is scroll-triggered. **Section 1 — The Void:** Full-viewport black with particle field. Single centered heading: weight 400 at load, animates to 800 on scroll. Subheading in DM Mono, 14px, tracking 0.2em, in graphite. No images. Just type and particles. **Section 2 — The Codex:** Leather panel takes 60% of viewport width, centered. The panel contains the "manifesto" text — 3–4 short paragraphs in Instrument Sans. Parallax: the panel moves at 0.7× scroll rate, the flat sapphire circle behind it at 0.3×. Blur-focus: the panel's text starts blurred, focuses as section centers in viewport. **Section 3 — The Gallery:** Three oversized flat-design "gem cards" arranged in a staggered horizontal row (not a grid — offset by 40px Y each). Each card is a simple colored rectangle (no border-radius, no shadow) with a single word in Syne 800 and two lines of DM Mono metadata below. Cards use `IntersectionObserver` to trigger blur-to-focus sequentially with 150ms stagger. **Section 4 — The Particle Chamber:** Full-viewport dark section where particle count doubles (CSS class swap adds 60 more particles). A single `
` in the center — large Syne italic, weight 600, color: #1ABC9C. Parallax amethyst pentagon moves at 0.2× scroll rate (fast apparent movement due to low parallax factor). **Section 5 — The Close:** Closing screen with the LUMP watermark at 12% opacity instead of 4%. Single line of text in DM Mono. No footer nav. No links. A single horizontal jewel-bar divider at the top of this section. **CSS architecture notes:** - Use `@property --blur-amount` for animatable custom property on blur - `scroll-driven animations` API for parallax (with JS fallback using `scroll` event + `requestAnimationFrame`) - `will-change: transform` on all parallax layers - All section transitions: `transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)` - Variable font: `font-variation-settings: 'wght' var(--weight)` driven by scroll position **AVOID: hero CTA buttons, pricing tiers, testimonial carousels, feature icon grids, footer navigation columns, form inputs, stock photography, any kind of checklist or bullet-point marketing block.** ## Uniqueness Notes **Chosen seed:** aesthetic: flat-design, layout: parallax-sections, typography: variable-fluid, palette: jewel-tones, patterns: blur-focus, imagery: leather-texture, motifs: particle-effects, tone: energetic **Differentiators from all other designs in the registry:** 1. **Leather codex vs. gemstone geometry tension.** No other design in the registry pairs warm artisan leather texture with cold jewel-tone flat geometry. This material contrast — aged craftwork against precision-cut synthetic mineral — is entirely novel and creates a visceral texture war that makes the page unforgettable. 2. **Particle field implemented in pure CSS/SVG, not canvas.** The 120-dot particle system uses only inline SVG elements with CSS keyframe animations (translate XY, animation-direction: alternate). This means zero JavaScript for the atmospheric layer — it degrades gracefully, respects prefers-reduced-motion via a single media query, and requires no WebGL or canvas fallback infrastructure. 3. **Variable font weight driven by scroll position as content-layer animation.** Headings animate from thin (400) to black (800) weight as the user scrolls into each section, using `font-variation-settings` driven by a scroll-mapped custom property. Weight is not a static style choice — it is a real-time indicator of narrative arrival. This is distinct from typefaces that are just "bold" or "variable" as a static attribute. 4. **LUMP wordmark as ambient depth layer.** The domain name itself becomes the background texture — rendered at 40vw in the page's own heading font, rotated 7°, filled with a conic jewel gradient, at 4% opacity. As the final section renders, opacity lifts to 12%, making the brand name materialize from the page's own substrate. This self-referential layering appears in no other design. 5. **Underused patterns deliberately chosen:** flat-design (rare in registry), particle-effects as a motif (underused), blur-focus pattern (underused), leather-texture imagery (essentially absent). This design avoids the heavily overused hand-drawn (61%), editorial (50%), and terminal (30%) aesthetics dominant in the registry.