# Design Language for lump.dev ## Aesthetics and Tone lump.dev is a **horizontal hand-scroll about accretion** — the working notebook of a developer who builds the way river silt builds a delta: not in grand architectural gestures but as *one small lump at a time*, each commit a clot of matter dropped on the pile, the whole thing slowly taking a shape nobody planned. The word "lump" is treated literally and affectionately: a lump of clay before the wheel touches it, a lump of dough proving in a warm kitchen, the lump in your throat when a refactor finally compiles, the lump-sum of a thousand tiny merges. It is *not* lumpy-as-in-clumsy. It is lump-as-in-honest-mass: the unglamorous truth that everything good is an aggregate of small unremarkable things, and that a single warm room is the right place to make them. The aesthetic braids three threads that should not get along but do. First, **japanese-minimal restraint** — vast breathing space (*ma*), a near-empty horizon, three or four elements per panel and nothing more, the confidence to leave 60% of every screen as warm paper. Second, **art-deco-display geometry** — but the *quiet* deco of a 1930s Kyoto department-store catalogue rather than Manhattan: stepped ziggurat brackets, sunburst fans rendered as thin radiating hairlines, a wordmark with the chamfered, geometric, slightly-too-tall capitals of an old elevator floor-indicator. Third, **warm-inviting tone** — the palette is sun-through-rice-paper, the copy is first-person and unhurried ("I keep a jar of these," "this one took three weekends"), and the cursor is always welcome. The mood: **a long low table in a tatami room, lit by late-afternoon sun, with a single shelf of small clay objects you are invited to walk past, slowly, left to right.** Calm, generous, a little wry. Never corporate, never a funnel, never loud. The user is a guest who was handed tea and told "take your time." ## Layout Motifs and Structure **Primary layout: horizontal-scroll** — the entire site is one continuous left-to-right procession, a *handscroll* (emakimono) unrolled across the viewport. The vertical scroll wheel / trackpad gesture is mapped to horizontal travel; there is no vertical page beyond a hairline thumb at the bottom. This is deliberately the *slow walk past a shelf*, not a slideshow with snap-points — momentum is generous and slightly weighted, so the scroll glides like a heavy drawer. **The procession (panels, each ~100vw, joined edge to edge — NOT cards on a grid, NOT a hero-features-pricing funnel):** 1. **The Threshold (panel 0):** Almost entirely empty warm paper (#F4ECDD). Far left, vertically centered with enormous *ma* around it, a single small irregular blob — *the lump* — drawn as one closed `` of soft asymmetric curve, filled flat in clay-rust (#C8643C), no shadow. Beneath it, in small art-deco caps, `LUMP.DEV`. A hairline horizontal rule runs the full width of the entire scroll at exactly the vertical midline — it is the *table edge*, the one constant; everything in the site sits on or hangs from this single line. A faint instruction in the lower-right: `scroll →`. 2. **What A Lump Is (panel 1):** The blob from panel 0 has rolled rightward and grown — now three lumps of different sizes resting on the table line, like objects on a shelf. To the right of them, a short first-person paragraph set in narrow measure (max 34ch), explaining the premise. Above the paragraph, a thin **art-deco bracket**: a stepped ziggurat shape (three descending notches) that frames the text from the top-left corner only. Lots of empty paper above and below. 3. **The Shelf (panels 2–4, the spine of the site):** A long open shelf — really just the table line, extended — bearing a row of ~7–9 **abstract-shape "objects,"** each one a different flat geometric/organic form (a chamfered hexagon, a quarter-circle fan, a stack of three offset rounded rectangles, a single thick arc, a notched disc, a soft trapezoid) in the triad colors. Each object is a *thing made* — a tool, a library, a hack, a half-finished idea — labelled below in small caps with a one-line note. The objects are spaced unevenly (deco-ish rhythm: tight cluster, then a wide gap, then a pair) so the eye walks at varying pace. Hovering an object draws an **animated border** around it — a thin line that traces the object's silhouette in one continuous stroke (path-draw), then a small radiating **sunburst** of 5 hairlines fans out behind it. 4. **The Jar (panel 5):** A large open-topped vessel (one closed path, flat fill) sitting on the table line, *full of tiny lumps* — twenty or thirty 4–8px blobs heaped inside, each one a micro-commit. Caption: a meditation on small things adding up. A thin deco fan rises behind the jar like rays. 5. **The Warm Room (panel 6, the close):** The table line continues but the paper warms by a few degrees (a barely-perceptible gradient toward #F6E8CE near the right edge). Near the far right, the *original single lump* again — but now it is the **negative space inside a large ring**, i.e. the procession has come full circle: the thing you started looking at is the hole in the middle of everything that got made around it. Below: a quiet sign-off line and three small contact glyphs (mail, code-fork, RSS) drawn as art-deco monoline icons. A `← back to the start` link that smoothly scrolls the whole thing home. **Structural rules:** the table line (1px, #B89B6E) is sacred and unbroken across all panels. Vertical alignment is governed by it — objects rest *on* it, text hangs *below* or floats *above* it. Negative space is the dominant material: if a panel feels full, remove something. No section is taller than the viewport; everything is read by moving sideways. ## Typography and Palette **Typography — Google Fonts only, art-deco-display led:** - **Display / wordmark / panel titles:** `"Poiret One"` (400) — a genuinely art-deco geometric face with hairline strokes, perfect circles, and tall narrow capitals; it reads like vintage signage and pairs beautifully with negative space. Used for `LUMP.DEV`, panel headers, and object labels. Always `text-transform: uppercase`, `letter-spacing: 0.28em` for the wordmark and `0.18em` for labels. Wordmark size `clamp(1.4rem, 2.4vw, 2.1rem)`; panel titles `clamp(2.2rem, 6vw, 4.5rem)`, weight 400, never bold (this face has only one weight, lean into it). - **Secondary display / numerals & deco accents:** `"Limelight"` (400) — a chunkier deco display with strong geometric contrast; used *sparingly* for panel numbers (00 / 01 / 02 …) set very large and very pale (#E6D8BD) in the upper-left of panels as a watermark, and for the occasional oversized initial. - **Body / first-person notes:** `"Spectral"` (400, 500, and 400 italic) — a calm, slightly humanist serif with comfortable rhythm; warm without being twee. Body `1.0625rem`, `line-height: 1.65`, measure capped at `34ch`. Italics for asides and object provenance ("— a weekend, mostly"). - **Micro / nav / scroll hints / code fragments:** `"Spline Sans Mono"` (400) — a soft monospace for tiny labels (`scroll →`, `panel 3 of 7`, inline `npm i lump`), `0.7rem`, `letter-spacing: 0.06em`, color muted. **Palette — triadic, warm-inviting, sun-through-paper:** built on a true triad (three hues 120° apart on the wheel) but every member desaturated and warmed so it feels like aged pigment, not primary poster paint. - `#F4ECDD` — **rice paper** (dominant background, ~60–70% of every screen) - `#F6E8CE` — **warm wash** (subtle gradient toward the right edge of the final panel) - `#C8643C` — **clay rust** (triad point 1, ~30° hue) — *the lump itself*, primary accent - `#3C7C6A` — **celadon green** (triad point 2, ~150° hue) — secondary objects, the jar - `#5A5AA8` → softened to `#6E68A6` — **muted indigo** (triad point 3, ~270° hue) — tertiary objects, the closing ring, links on hover - `#B89B6E` — **brass / the table line** (neutral warm metallic, the one constant rule) - `#3A332A` — **sumi ink** (text, glyph strokes — never pure black) - `#E6D8BD` — **ghost** (oversized watermark numerals, faint deco hairlines) Usage discipline: any single panel uses paper + ink + the table line + **at most two** of the three triad colors. The full triad only ever appears together on the Shelf panels, where the row of objects rotates through all three. ## Imagery and Motifs **No photography. Everything is flat inline SVG — abstract shapes in the art-deco/japanese-minimal vocabulary, abstract-tech motifs rendered as quiet ornament.** - **The lump (recurring protagonist):** a single closed Bézier path — an irregular, pleasingly asymmetric blob, slightly flattened on the bottom where it "rests." It appears at five scales across the scroll (tiny heaped-in-jar version, shelf-object version, hero version, ring-negative-space version) and is the visual rhyme that ties the whole procession together. Flat fill, no gradient, no shadow — it has *weight by silhouette alone*. - **Abstract-shape object set (~9 forms):** chamfered hexagon, quarter-circle fan, three offset rounded rectangles (a "stack"), one thick crescent arc, a notched disc (gear-adjacent but smooth), a soft isosceles trapezoid, a half-pill, a stepped ziggurat block, a teardrop. Each flat-filled in one triad color, each ~120–200px, each resting on the table line. These are the "things made." - **Art-deco ornament (used as restraint, never decoration-for-its-own-sake):** - **Stepped ziggurat brackets** — three-notch L-shaped frames that anchor a text block from one corner only. - **Sunburst fans** — 5–9 thin (1px) hairlines radiating from a point behind an object, in #E6D8BD or a faded triad tint; revealed on hover. - **The table line** — the single horizontal rule that runs the entire scroll; conceptually a deco "datum line." - **Chamfered corners** — wherever a rectangle is needed (text panels, the jar's mouth), corners are 45°-cut, never rounded and never square. - **Abstract-tech motifs (subtle, woven into the deco):** the "stack of three rounded rectangles" object reads as layered builds / commits; faint dotted leader-lines occasionally connect an object to its label like a wiring diagram; the jar of tiny lumps is literally a commit-graph rendered as sediment; a single panel may carry a pale, large, almost-invisible **isometric grid of tiny lumps** as a background texture (abstract-tech-as-wallpaper, opacity ~0.05). The scroll-progress thumb at the bottom is a thin brass bar that fills left-to-right — a deco "tape measure." - **Texture:** a single global SVG `feTurbulence` paper grain at ~3% opacity over `#F4ECDD`, plus the faintest vignette warming the corners. That is the only texture. Everything else is clean flat color. ## Prompts for Implementation Build this as **one full-screen, full-width horizontal narrative scroll** — a digital handscroll. There is no nav bar, no hamburger, no pricing block, no stat-grid, no testimonial carousel, no CTA bank, no "sign up" anything. The "sections" are panels in a procession the visitor walks past, left to right, at their own pace. - **Scroll mechanics:** Map vertical wheel / trackpad delta and touch-drag to horizontal `translateX` on a single long flex track (`display:flex; width: max-content`). Use a lerp on the scroll position (target vs. current, factor ~0.08) so the motion is *heavy and gliding* — a drawer on good rails, not a snap carousel. Keyboard arrows nudge one panel. A thin brass progress thumb pinned to the bottom edge fills left-to-right. Respect `prefers-reduced-motion` by disabling the lerp (instant) but keeping horizontal layout. - **Opening (the Threshold):** Page loads on near-empty `#F4ECDD`. After ~250ms the table line draws itself: a 1px brass rule animating its `scaleX` from 0 to 1 from the left, over ~900ms `cubic-bezier(.22,1,.36,1)`. Once it lands, *the lump* fades up at the far left (opacity + a 6px rise) and `LUMP.DEV` letter-spaces open underneath it (start `letter-spacing: 0.05em`, animate to `0.28em` over 700ms). A small `scroll →` mono hint pulses once, gently, then sits still. - **Border-animate as the signature interaction:** Hovering (or focusing, or — on touch — entering the viewport center of) any shelf object triggers: (1) a thin stroke that *traces the object's exact silhouette* in one continuous draw — implement with an SVG path overlay matching the shape, `stroke-dasharray`/`stroke-dashoffset` animating from full to 0 over ~600ms `ease-in-out`; (2) behind the object, a **sunburst fan** of 5–9 hairlines scales/fades in from the object's base point, staggered ~30ms each; (3) the object's flat fill lifts ~2 shades warmer and translates up 4px with a soft spring. On leave, everything reverses (border retracts the way it came). This `border-animate` traced-silhouette effect is the thing the site is *about* interaction-wise — make it feel like running a fingertip around the edge of a clay object. - **Panel transitions / parallax-of-restraint:** As the track scrolls, give each panel's contents a *gentle differential drift* — the big pale watermark numeral (`Limelight`, color #E6D8BD) moves at 0.6× track speed, the objects at 1.0×, the text blocks at 1.05×, the sunburst hairlines at 1.15× — so there's depth without anything ever leaving its lane. Nothing flies. Nothing bounces across the screen. The table line never moves relative to anything. - **Stagger on entry:** When a panel scrolls into view, its elements arrive in sequence — watermark numeral first (slow fade), then the text block (8px rise + fade, 80ms after), then objects left-to-right (each 60ms apart, 6px rise), then deco brackets last (stroke draws in). Use IntersectionObserver on each panel. - **The Jar panel:** Render the vessel as one flat closed path. Inside it, generate ~25–30 tiny lump-blobs at slightly randomized positions/rotations/sizes, in a heap (lower ones larger, upper ones smaller). On scroll-into-view they don't pour in — they just *settle*: each does a tiny 3px drop with a 2px overshoot, staggered randomly across ~500ms. Behind the jar, a 9-hairline deco fan draws in. - **The Warm Room close:** The track's final panel background carries a subtle `linear-gradient(90deg, #F4ECDD, #F6E8CE)` over its rightmost third. The closing "lump" is the *hole* in a large stroked ring (clay-rust ring, paper-colored center cut). Sign-off line in `Spectral` italic. Three monoline art-deco contact glyphs (mail / code-fork / feed) — on hover each does the same silhouette `border-animate` trace, scaled down. A `← back to the start` mono link smoothly lerps the track to `translateX(0)` over ~1.6s. - **Voice:** All copy is first-person, unhurried, faintly self-deprecating. Object labels read like a craftsperson's shelf-tags: `01 — a small jar of regexes / kept since 2019`. No marketing verbs. No exclamation points except maybe one, earned. - **AVOID:** vertical scrolling beyond the hairline thumb; cards-on-a-grid; hero→features→pricing→CTA funnels; stat counters; gradients on the shapes themselves (flats only); drop shadows; pure black; any layout that fills more than ~40% of a panel with content; snap-scroll carousels; loud entrance animations. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **The unbroken "table line" datum across an entire horizontal handscroll.** Most horizontal-scroll sites are de-facto slideshows of full-bleed cards; this one is a single continuous shelf — one 1px brass rule that every element on every panel rests on, hangs from, or floats above. The procession reads as *one object* (an emakimono), not a sequence of slides, and the layout grammar (on / below / above the line) is enforced everywhere. 2. **`border-animate` as traced clay-edge, not a button outline.** The signature interaction is a stroke that follows the *exact irregular silhouette* of an abstract organic shape — a fingertip running around the rim of a lump — followed by an art-deco sunburst fan. Border-animate in the portfolio is almost always a rectangle's edges lighting up; here it's path-draw of a free-form blob, which makes it feel tactile rather than UI-y. 3. **Japanese-minimal *ma* used as the load-bearing material, fused with quiet art-deco geometry.** Not the Manhattan-skyscraper deco everyone reaches for — the restrained Kyoto-department-store deco of `Poiret One` + `Limelight`, stepped ziggurat brackets, hairline sunbursts — floating in 60–70% empty warm paper. Almost no site combines deco display type with genuine negative-space minimalism; the tension is the whole point. 4. **The "lump" as a single recurring protagonist at five scales** — heaped-in-jar micro-blobs, shelf object, hero, the negative-space hole in the closing ring — so the scroll comes literally full circle: the thing you started looking at is the void everything else got built around. Concept-as-layout, not decoration. 5. **A true desaturated triadic palette** (clay-rust / celadon-green / muted-indigo, 120° apart, all warmed and aged) with a strict discipline: max two of the three on any panel, the full triad only on the Shelf. Triadic appears in only ~4% of the portfolio, and almost none use it *quietly*. **Chosen seed / style:** `aesthetic: japanese-minimal, layout: horizontal-scroll, typography: art-deco-display, palette: triadic, patterns: border-animate, imagery: abstract-shapes, motifs: abstract-tech, tone: warm-inviting` **Avoided patterns from frequency analysis:** steered away from the portfolio's dominant clichés — `corporate` aesthetic (93%), `centered` layout (93%), `mono` typography (94%), `gradient` palette (96%), `counter-animate` (91%), `mysterious-moody` tone (94%), `photography`/`minimal` imagery defaults. Instead leaned into the under-represented end of every axis: `japanese-minimal` (1%), `horizontal-scroll` (13%), `art-deco-display` (1%), `triadic` (4%), `border-animate` (9%), `abstract-shapes` (0%), `abstract-tech` (0%), `warm-inviting` (8%).