# Design Language for luminescence.dev ## Aesthetics and Tone luminescence.dev is a **street-style field guide to cold light** -- a developer-facing catalogue of luminescent phenomena (bioluminescence, fluorescence, phosphorescence, chemiluminescence, triboluminescence) presented as if a graffiti-literate naturalist had photocopied their notebook, slapped it on a wall, and let the paste-up dry under a blacklight. The governing idea: *light that does not come from heat* -- glow without burn, brightness without sun. Every surface should feel like it is faintly emitting rather than being lit. The aesthetic fuses **street-style** zine culture -- riso-print misregistration, marker tags, sticker-bombed corners, photocopier grit, hand-cut paper edges -- with the eye-watering chroma of a **dopamine-neon** palette. But the *tone of voice* is deliberately **minimal**: terse, lower-case, almost clinical captions. Headlines shout in color; the words themselves whisper. "phosphorescence. stores photons. releases them slow. that's it." The friction between maximal visual energy and minimal verbal energy is the whole personality -- a quiet kid in a loud jacket. Mood references: a New York lamppost plastered with thirty layers of band flyers, seen through night-vision; a 1970s "wonders of nature" school filmstrip re-photographed off a CRT; glow-in-the-dark plastic stars peeling off a bedroom ceiling at 3am; a deadstock fluorescent-marker pack from a stationery shop that closed in 1988. The result reads young, urban, slightly nocturnal, and unmistakably *built by someone who codes* -- monospace creeps into the margins, hex codes are printed like specimen labels. Crucially: **no glassmorphism, no gradient mesh, no soft glow-blur clichés.** The "glow" here is achieved with hard-edged neon fills, halftone dot fringes, and a single tasteful CSS `text-shadow` bloom -- never frosted panels. ## Layout Motifs and Structure **Primary layout: card-grid** -- a strict, visible 12-column modular grid where each luminescent phenomenon gets its own "specimen card," arranged like a contact sheet pinned to corkboard. This is *not* the soft floating-card SaaS grid; it is a **riso poster grid**: cards have 2-3px solid ink borders, hard drop "offset shadow" blocks (no blur), and sit flush against thin rule lines so the whole page reads as a single printed sheet rather than scattered tiles. - **Header band:** full-width, no hero photo. Just an oversized stacked wordmark "LUMIN- / -ESCENCE" in the eclectic display face, set against a flat near-black field, with a hand-drawn marker underline stroke that *draws itself* under the word on load. A row of vintage specimen-label tags ("vol. 1", "cold light", "field notes", ".dev") sits beneath like museum captions. - **The specimen grid (main body):** cards of two sizes only -- 1×1 ("entry") and 2×1 ("feature"). Each card: a thick-bordered rectangle containing (top) a hand-cut icon glyph in a neon spot color, (middle) the phenomenon name in display type, (bottom) a 2-4 word mono caption and a tiny specimen number ("№ 04 / triboluminescence"). Cards are intentionally slightly *mis-aligned* by 1-2px and rotated 0.4-0.8deg in alternating directions -- the paste-up wobble. On hover, a card "lifts" off the page (translateY + the offset shadow grows) and its underline redraws in a different neon. - **Interleaved "torn strips":** every few rows, a full-bleed horizontal strip breaks the grid -- a band of color with a single oversized statement set in the display face ("not all light is fire."), edges rendered as a jagged torn-paper SVG mask, halftone dots bleeding off the tear. - **Footer:** a "back matter" block styled like the inside back cover of a zine -- colophon in mono, a stamped-looking circular badge, and a final marker scrawl. No newsletter box, no pricing, no stat counters. Negative space is generous *inside* the grid (cards breathe), but the grid lines themselves stay assertive. The page should feel like one continuous printed object you scroll *down*, not a sequence of full-screen acts -- though each "torn strip" functions as a punctuation breath. ## Typography and Palette **Typography -- eclectic-hybrid** (deliberate clash of three unrelated voices, the way a flyer mixes whatever letterpress blocks were in the drawer): - **Display / phenomenon names & wordmark:** **"Bungee"** (Google Fonts) -- a chromatic urban-signage face built for stacking and layering; its blunt, sticker-like forms carry the street-style energy. Used at clamp(2.2rem, 6vw, 7rem) for the wordmark, clamp(1.4rem, 3vw, 2.6rem) for card titles. For the big torn-strip statements, switch to **"Bungee Shade"** for an inline 3D-shadow effect that reads like spray stencil with a hard cast shadow. - **Sub-display / specimen labels & tags:** **"Anton"** (Google Fonts) -- ultra-condensed grotesque, all-caps, used small and tracked-out for the vintage museum-label captions ("FIELD NOTES · VOL. 1 · COLD LIGHT"). Its compression contrasts hard against Bungee's chunky width -- that contrast *is* the eclectic-hybrid. - **Body / running text:** **"Work Sans"** (Google Fonts) at weight 400, lower-case-leaning, set short-measure (max ~58ch). Calm, humanist, almost invisible -- it is the "minimal tone" carrier. Line-height 1.65. - **Mono / captions, hex labels, colophon, specimen numbers:** **"DM Mono"** (Google Fonts), used at 0.8-0.95rem, letter-spacing 0.02em, lower-case. This is where the "built by a dev" signal lives -- it labels colors, phenomena, and code-ish footnotes like specimen tags. **Palette -- dopamine-neon** on near-black ink (a printed-on-black-paper riso feel), minimum spot colors below; gradients are *forbidden* -- every fill is flat: - `#0B0B0E` -- **ink black**, the paper. Almost all backgrounds. - `#F4F1E8` -- **bone white**, the "newsprint" -- card interiors, body text on dark, the few light sections. - `#FF2D95` -- **highlighter magenta**, primary neon -- wordmark accents, underline draws, the loudest torn strip. - `#1FE0C8` -- **chemical cyan-mint**, secondary neon -- icons, hover-state underlines, "bioluminescence" entries. - `#F6FF3B` -- **blacklight yellow**, tertiary neon -- specimen numbers, the "phosphorescence" entries, warning-stripe accents. - `#9B5DE5` -- **UV violet**, quaternary -- "fluorescence" entries, secondary borders, the stamped badge. - `#FF7A1A` -- **safety orange**, used sparingly for "triboluminescence / chemiluminescence" entries and tear-edge fringes. Color assignment is *semantic*: each of the five phenomenon families owns one neon, so the grid becomes a legible color-coded contact sheet rather than a random rainbow. Borders and rules are always `#0B0B0E` on light cards, `#F4F1E8` on dark. ## Imagery and Motifs **imagery: icon-heavy** -- the site is carried by a custom set of ~14-18 inline SVG glyphs, no photography, drawn in a single deliberately-imperfect "marker on tracing paper" line style: ~3.5px stroke, rounded-but-slightly-shaky paths, occasional doubled lines (the photocopier ghost), filled with one flat neon. Each glyph reads at a glance: - a **jellyfish / firefly / anglerfish / dinoflagellate wave** for bioluminescence - a **highlighter pen, a tonic-water bottle, a scorpion under "UV"** for fluorescence - a **glow star, a watch dial, a light-switch in the off position** for phosphorescence - a **cracked sugar cube, a peeled wintergreen-gum strip, two flint stones** for triboluminescence - a **glow-stick snapped in half, a firefly-jar, a chemical flask** for chemiluminescence - plus interface glyphs: a hand-cut **scissors**, **paper-clip**, **push-pin**, **stamp ring**, **arrow scrawl**. **Vintage motif layer** -- the whole thing is dressed as a recovered artifact: a faint **halftone dot screen** overlay (CSS radial-gradient tile at low opacity, or an SVG pattern) on every card; **registration-mark crosshairs** in the page corners like a print proof; a **"VOL. 1"** masthead; a **circular rubber-stamp badge** ("FIELD-TESTED · COLD LIGHT ONLY · luminescence.dev") rendered in slightly-broken-edge SVG with a 6deg tilt; **dog-eared corners** on a few cards; a single faux **price-sticker / library due-date card** graphic repurposed as the colophon frame. Torn-paper edges everywhere a strip meets another color, generated with a jagged SVG `clipPath`. **Decorative patterns:** thin diagonal **caution stripes** (yellow/black) used as 4px accent bands; a sparse field of tiny **plus signs and asterisks** scattered like riso speckle dust in margins; **hand-numbered specimen tags** ("№ 07") in mono with a hand-drawn circle around them. ## Prompts for Implementation Build this as **one long printed sheet you scroll down**, not a slideshow of full-screen acts -- but treat the load sequence and each torn strip as cinematic beats. - **Load sequence (the print coming off the press):** background `#0B0B0E` from frame one. The stacked "LUMIN-/-ESCENCE" wordmark fades up in `#F4F1E8`; then the **marker underline draws itself** left-to-right under it via `stroke-dashoffset` animation in `#FF2D95` (~700ms, ease-out, slight overshoot wobble). Then the specimen cards **stamp in** in a staggered scan order (row by row, left to right, ~40ms apart) -- each card does a tiny `scale(0.96)→1` + opacity pop with its hard offset-shadow snapping into place last, like a stamp hitting paper. Halftone overlay and corner registration marks fade in last. After first visit, store a flag and skip straight to the grid. - **underline-draw is the signature interaction** (this is the chosen `underline-draw` pattern, used boldly): every card title, every nav tag, every footer link has an SVG/`::after` underline that draws on hover via `stroke-dashoffset` (or scaleX from 0) in that card's semantic neon -- and *undraws* on leave. Use it generously; it is the connective tissue of the whole site. - **Card hover:** `translateY(-6px)` + the solid offset-shadow block grows from 4px to 10px (no blur, ever) + a 2px halftone "buzz" -- and the card's neon underline draws. On a `2×1` feature card, also nudge its icon glyph 4px and let one doubled "photocopier ghost" stroke offset slightly. Honor `prefers-reduced-motion` by keeping color/shadow changes but dropping the translate and stroke animations. - **Torn-strip beats:** as each full-bleed color strip scrolls into view, the torn `clipPath` edge "rips" -- animate the jagged path points with a quick scroll-triggered keyframe so the tear *happens* -- and the oversized Bungee Shade statement slides up with its 3D inline shadow lagging ~30ms behind the face (a faux-letterpress impression). Halftone dots drift slowly off the torn edge (subtle infinite `translate`). - **Marker / scrawl details:** the footer scrawl and the stamped badge use `stroke-dasharray` reveals on scroll-into-view; the badge can rotate-in with a slight `rotate(-6deg)→ -3deg` settle, like it was pressed by hand. - **Color-coded grid logic:** drive phenomenon-family color via a CSS custom property `--neon` on each card; everything inside (icon fill, underline, specimen number, top hairline) reads from it. Filtering/sorting (if any) just dims non-matching cards to ~25% rather than removing them -- keeps the contact-sheet integrity. - **Texture, cheaply:** one tiled halftone dot SVG at 8-12% opacity over the whole page (mix-blend-mode: multiply on light cards, screen on dark); a faint 1px paper-grain via a base64 noise PNG at very low opacity. Registration crosshairs are four small fixed-position SVGs in the viewport corners. - **Type pairing in practice:** Bungee for names/wordmark, Bungee Shade for big statements, Anton tracked-out and tiny for labels/tags, Work Sans for the rare paragraph, DM Mono for hex codes / specimen numbers / colophon. Never let two display faces touch without an Anton label or a mono caption between them -- the "eclectic" must feel curated, not chaotic. - **AVOID:** CTA-stacked hero sections, pricing tables, stat/number-grid blocks, testimonial carousels, "trusted by" logo walls, soft gaussian glow-blur, frosted-glass panels, gradient backgrounds, stock photography, parallax-heavy multi-act full-screen scroll-jacking. Keep verbal content terse and lower-case; let color do the shouting. ## Uniqueness Notes **Differentiators from other designs in this set:** 1. **Street-style / riso zine aesthetic on a strict card-grid** -- `street-style` is at 0% in the frequency analysis and the soft "card-grid" (14%) is here re-imagined as a hard-edged riso *contact sheet* with solid ink borders and blur-free offset shadows. Nothing here uses glassmorphism, gradient mesh, or floating SaaS cards -- the polar opposite of the dominant `corporate` (93%) / `gradient` (96%) / `mysterious-moody` (94%) defaults. 2. **dopamine-neon flat-fill palette as a semantic color-code** -- `dopamine-neon` is at 0% in frequency. Five eye-watering neons on near-black, each *assigned* to one luminescence family, turning the grid into a legible color key. Zero gradients, which deliberately breaks from the 96%-gradient norm. 3. **eclectic-hybrid typography stack with chromatic display type** -- `eclectic-hybrid` is at 0%. Bungee + Bungee Shade + Anton + Work Sans + DM Mono is a four-to-five-voice clash anchored by mono "specimen labels," nothing like the `mono` (94%) / `humanist` (34%) staples used straight. 4. **icon-heavy + vintage motif system instead of photography** -- `icon-heavy` imagery sits at ~1%; here ~14-18 hand-drawn "marker on tracing paper" SVG glyphs plus halftone screens, registration crosshairs, a rubber-stamp badge, torn-paper edges, and dog-eared corners carry the entire visual load -- a printed-artifact world, not a photo site (photography 66%). 5. **underline-draw used as the primary, pervasive interaction** -- `underline-draw` is at 8%; most sites lean on `counter-animate` (92%) / `parallax` (70%). Here a self-drawing marker stroke is the signature gesture, present on the wordmark, every card title, every tag, every footer link. 6. **maximal visuals, minimal voice** -- the `minimal` tone (common as a label, rare in this loud a context) is expressed as terse lower-case clinical captions deliberately at odds with the riot of color -- a tension few designs attempt. **Chosen seed / style:** aesthetic: street-style, layout: card-grid, typography: eclectic-hybrid, palette: dopamine-neon, patterns: underline-draw, imagery: icon-heavy, motifs: vintage, tone: minimal. **Avoided overused patterns (per frequency analysis):** corporate aesthetic (93%), centered/full-bleed-act layouts (93%/47%), gradient + warm palettes (96%/91%), mono-only typography (94%), mysterious-moody tone (94%), counter-animate (92%), parallax (70%), photography imagery (66%). Also explicitly steering clear of glassmorphism, gradient-mesh, soft glow-blur, CTA-heavy hero stacks, pricing blocks, and stat-grids.