# Design Language for lugubrious.dev ## Aesthetics and Tone lugubrious.dev is a digital wake -- a candlelit memorial hall for everything that dies in software: abandoned repositories, deprecated APIs, sunset products, 404'd documentation, the last commit before a maintainer vanished. The word "lugubrious" carries a knowing theatricality -- it is mourning that *performs* its sorrow, grief turned into an art form -- and the site leans into that. This is not a sad site. It is a *gorgeous* one. It treats melancholy the way a Japanese tea master treats a cracked bowl: the fracture is where the gold goes. The aesthetic is **japanese-minimal** in its bones -- vast stillness, ruthless subtraction, ma (negative space) as the loudest element on the page -- but the *tone* is **edgy-rebellious**: a developer who is tired of pretending everything is "exciting" and "shipping fast," who finds beauty in obsolescence, who writes eulogies in the changelog. Imagine a Noh stage at midnight: a single lacquered black floor, one drifting smear of gold pigment, and a voice reciting the names of dead frameworks like a sutra. The mood is solemn but never solemn-stupid; there is dark humor in the margins, a wink in the gilt. Inspiration sources: kintsugi (gold-veined repair pottery), Edo-period black lacquerware with maki-e gold dust, Hiroshi Sugimoto's near-black seascapes, the visual restraint of muji packaging crossed with the funereal gilt of a Buddhist altar (butsudan), and the rebellious deadpan of a programmer's "RIP" tweet. Watercolor enters as ink-on-black bleeds -- sumi-e gone luminous, gold pigment dropped into dark water and allowed to feather. ## Layout Motifs and Structure **Primary layout: card-grid, but rebuilt as a columbarium -- a wall of memorial niches.** The site is a wall. Each "card" is a niche in that wall: a quiet rectangle holding the relic of one dead thing -- a project name, the years it lived, a single line of last words (its final README sentence, its closing commit message). Cards are arranged on a strict modular grid (CSS Grid, 3 columns desktop / 2 tablet / 1 mobile), but with deliberate **empty cells** -- niches left vacant, "reserved," `404 NOT FOUND`. The negative space between cards is generous (min 4rem gutters) so the grid breathes like a Zen rock garden where the gravel matters more than the stones. Structure, top to bottom: 1. **The Threshold (full-viewport overture).** Pure black (#0A0908). After 600ms, a single drop of gold watercolor blooms at center -- an SVG/canvas radial bleed that feathers outward over 2.5s -- and from within it the word **lugubrious** resolves, set in a wide expressive-variable serif at clamp(3rem, 11vw, 9rem). Beneath it, smaller: *a quiet place for things that ended.* A faint instruction at the bottom edge: *descend.* 2. **The Wall (the card-grid columbarium).** The main body. Memorial cards in a modular grid. Each card on hover lifts almost imperceptibly (translateY -3px) and a hairline gold border draws itself around the niche (border-animate, 0.6s). Clicking a card opens it -- the niche expands to a full-width "spread" revealing the longer obituary, with the card's gold bleed growing to fill the background like ink in water. 3. **The Ledger (a vertical scroll-triggered litany).** A single narrow column, centered, where the names of the dead scroll past one per viewport-snap -- a path-draw SVG underline gilds each name as it enters, then dims as it leaves. Pacing is funereal: slow, unhurried, scroll-snap-type: y proximity. 4. **The Offering (closing).** A single text input on black -- *add a name* -- where a visitor types something they have lost. On submit it does NOT save anywhere (the rebellion: this site collects nothing); instead the input gilds the typed text in gold, lets it bloom into a watercolor smear, and fades it into the dark. Grief, witnessed, released. There is no top navigation bar. A faint vertical "spine" runs the right edge -- a thin gold line, like the gilt edge of a hymnal -- marking scroll position. No CTAs. No pricing. No stat-grid. The only "metric" anywhere is the years on each niche: *2014 - 2019.* ## Typography and Palette **Display / Memorial names:** "Fraunces" (Google Fonts) -- a variable "old-style" serif with a *soft* optical-size axis and dramatic high contrast at large sizes; its "wonk" and "soft" axes let it bend from grave to almost grieving-baroque. Used at clamp(2.5rem, 8vw, 8rem) for the hero and card titles. Variable-weight animation: names breathe between weight 340 and 560 over 8s, like a slow inhale. This is the **expressive-variable** typography pillar -- the type itself performs the mourning. **Secondary display / Section labels:** "Cormorant Garamond" (Google Fonts, weight 500/600, italic) -- a high-contrast transitional serif for the elegiac sub-lines (*a quiet place for things that ended*), set in italic, letter-spacing 0.02em. Its swash italics carry the theatrical, lugubrious *sigh*. **Body / Obituaries & UI:** "Spline Sans Mono" (Google Fonts, weight 400) -- a humane monospace. This is the **tech** motif speaking: dead software deserves to be eulogized in the font it was written in. Used for the last-commit lines, the years, the `404 NOT FOUND` vacancies, all at 0.9rem-1rem, letter-spacing 0.04em, in muted grey-gold. **Palette (gold-black-luxury):** - `#0A0908` -- **Lacquer Black.** The ground. Near-black with the faintest warm undertone, like urushi lacquer under low light. Primary background everywhere. - `#13110D` -- **Altar Shadow.** Slightly lifted black for card surfaces, so niches read as recessed *into* the wall. - `#C9A227` -- **Maki-e Gold.** The kintsugi vein. Borders, the hero word, active underlines, the scroll spine. Used sparingly -- it must always feel precious. - `#E7C667` -- **Candle Gilt.** Brighter highlight gold for hover states and the watercolor bloom's hot center. - `#7A6A3E` -- **Tarnished Brass.** Muted gold-grey for body text, mono labels, the years -- gilt that has aged in the dark. - `#3A352A` -- **Ash Line.** Hairlines, dividers, the faint baseline grid (at 12% opacity). - `#F2EAD3` -- **Bone Paper.** Used *only once or twice* -- a near-white warm cream for a single resonant line, like a bone showing through cloth. High-contrast by construction (gold on black), monochrome-adjacent (everything is a gradient between black, ash, and gold). No other hues. Ever. ## Imagery and Motifs 1. **Gold watercolor blooms (the kintsugi seam).** Pure CSS/canvas/SVG -- no photos. A single drop of gold pigment dropped into black water, feathering with soft fractal edges. Generated via layered radial-gradients with `filter: blur()` and subtle `turbulence` SVG feTurbulence displacement, or a lightweight canvas ink-diffusion. Each memorial card has its own dormant bloom that grows on open. The hero bloom is the largest. This is the **watercolor** imagery pillar -- but watercolor as *gilt ink*, not pastel. 2. **The crack / the seam.** A thin meandering gold line -- the kintsugi join -- that wanders down through section transitions, drawn via SVG path-draw as you scroll. It physically *connects* the cards like veins of gold through broken porcelain. Sometimes it forks. Sometimes it just... stops, mid-stroke (the maintainer left). 3. **Vacant niches.** Empty grid cells rendered as a faint hairline rectangle with centered mono text: `RESERVED`, `404`, `— — —`, or a single year with no end (*2021 -* ). Memento mori for software not yet dead. 4. **The censer drift.** A barely-there particle layer -- 20-30 tiny gold motes (#C9A227 at 4-9% opacity) drifting *slowly upward* like incense smoke or ash from a censer. Canvas, lightweight. Grounds the funereal air without obscuring the type. 5. **Maki-e dust corners.** Decorative SVG flourishes at the corners of opened cards -- sparse scatterings of gold dust grains, like Edo lacquerware. Drawn, not imaged. 6. **Tech-motif glyphs as relics.** Tiny mono symbols treated as gravestone iconography: ``, `{}`, `git`, `npm`, `EOL`, a terminal cursor `█` blinking once then going dark. Used at small scale beside names, like the cross or lotus on a memorial plaque. ## Prompts for Implementation **This is a full-screen narrative experience, not a brochure.** Build it as a procession through a memorial hall. Scroll-snap between the four acts (Threshold → Wall → Ledger → Offering). The story: *we enter a dark room, a single gold light blooms, we read the names of the dead, we walk the wall of niches, a litany scrolls past, we leave one name of our own and watch it dissolve.* No CTAs, no pricing, no stat-grids, no testimonials. The only interactivity is contemplative. **HTML/CSS structure:** - Single page, four `
` acts, `scroll-snap-type: y proximity` on the container. - The Wall act uses `display: grid; grid-template-columns: repeat(auto-fill, minmax(...))` with large `gap`. Reserve roughly 1 in 6 cells as vacant niches. - All gold blooms are CSS/SVG/canvas -- never `` photos. Build one reusable `.bloom` component: a `
` with stacked radial-gradients + `filter: blur(...)` + an SVG `feTurbulence` displacement filter for organic feathered edges. Animate its scale/opacity on `IntersectionObserver`. - Use `font-variation-settings` on Fraunces (`'opsz'`, `'wght'`, `'SOFT'`, `'WONK'`) and animate `wght` on a slow keyframe loop for the "breathing names" effect. **Animation priorities (lean toward storytelling):** 1. **Hero bloom + name resolve** (Threshold): gold watercolor radial bleed expands 2.5s ease-out; "lugubrious" fades up letter-by-letter inside it (stagger, 80ms per char). 2. **Card border-animate on hover**: a hairline gold rectangle draws itself clockwise around the niche (stroke-dashoffset, 0.6s), card lifts translateY(-3px) with a gentle spring. 3. **The kintsugi seam path-draw**: an SVG path winding through section boundaries, `stroke-dasharray` revealed on scroll progress -- forks, occasionally truncates mid-stroke. 4. **Ledger litany**: each dead name scroll-snaps to center; a path-draw underline gilds it on enter (0.8s), dims (opacity → 0.3, tarnished brass) on exit. 5. **shake-error as the rebellious signature gesture**: this is the one place the calm breaks. In the Offering, if a visitor submits an *empty* field, the input does a sharp 4-keyframe horizontal shake (translateX ±6px, 0.4s, cubic-bezier sharp) and a single line flashes in tarnished brass: *you have to have lost something.* Also: hovering a vacant `404` niche makes it shake faintly once -- the dead refusing to be disturbed. It is the site's only flash of temper, deliberately jarring against the stillness. 6. **The Offering dissolve**: on valid submit, the typed text gilds (color → Maki-e Gold), a bloom grows behind it, text + bloom fade to black over 3s. Nothing is stored. The console quietly logs `// witnessed. nothing kept.` **Voice in the copy:** elegiac with a dry, rebellious edge. Section labels like `THE WALL`, `THE LEDGER`. Obituary lines such as: *"It compiled. It mattered to seven people. It is at peace."* / *"Last commit: 'will fix later'. There was no later."* Keep it spare -- one or two lines per relic. Let the silence do the rest. ## Uniqueness Notes 1. **A card-grid reconceived as a columbarium of dead software.** No other design in the portfolio treats the card-grid as a *memorial wall* with deliberately vacant `404` niches; the empty cells are load-bearing content, not gaps. The grid mourns. 2. **Watercolor as molten gold, not pastel.** The watercolor imagery pillar is inverted -- ink-on-black gilt blooms doing the work of kintsugi seams. Gold pigment feathering through dark water is a wholly different visual register from the wet, light watercolor washes elsewhere, and it fuses directly with the gold-black-luxury palette into one idea: *the fracture is where the gold goes.* 3. **Typography that physically grieves.** Fraunces' variable axes (`opsz`/`wght`/`SOFT`/`WONK`) are animated to make memorial names *breathe* and *sigh* -- expressive-variable type used not for flash but for elegy. The font performs the mourning. 4. **shake-error as the single rebellious crack in a japanese-minimal stillness.** The whole site is ma, restraint, hush -- and then exactly two moments shake hard: an empty offering, and a disturbed niche. That violent contrast *is* the edgy-rebellious tone, weaponizing a tiny error animation as the site's signature gesture. 5. **A "dev" site that ships nothing and collects nothing.** Rebellious deadpan against startup hustle culture: no CTA, no pricing, no signup, no analytics, no data retention. The Offering input deliberately discards your input. Tech motifs (`git`, `npm`, `EOL`, the blinking cursor that goes dark) appear only as gravestone iconography. **Chosen seed/style:** aesthetic: japanese-minimal, layout: card-grid, typography: expressive-variable, palette: gold-black-luxury, patterns: shake-error, imagery: watercolor, motifs: tech, tone: edgy-rebellious. **Avoided overused patterns (per frequency analysis):** rejected the dominant `corporate` aesthetic (93%), `centered`-only layouts, the ubiquitous `gradient`/`warm` palette pairing (96%/91%) in favor of a strict gold-on-black monochrome, `counter-animate` (92%) and generic `parallax` (70%) as primary motion, and the `mono`-everything typography default (94%) -- here mono is a deliberate, limited "relic" voice while variable serif leads. Leaned into underused: japanese-minimal (1%), shake-error (2%), watercolor (4%), edgy-rebellious tone (6%), gold-black-luxury (7%).