# Design Language for luminescence.dev ## Aesthetics and Tone `luminescence.dev` is a **bioluminescent tide pool at 2 AM** — an encounter so quiet and unhurried that you wonder whether the light is alive or dreaming. The aesthetic is wabi-sabi translated into voltage: cracked porcelain glazed with electric teal and acid-citron, the glaze pooling in fractures, glowing from within rather than projecting outward. Nothing is polished. Nothing is trying to sell you something. The imperfection is structural. The site belongs to a developer or creative practitioner who works at the border of the organic and the synthetic — someone who keeps a handmade notebook next to a terminal, who finds the same beauty in a corroded copper contact and a lichen-covered rock. The domain name itself carries the metaphor: luminescence is not reflected light, it is generated light, light that comes from chemical transformation, from living things processing energy into glow. This is a site that glows from within. Tone is **minimal-oblique** — very few words, placed with deliberate distance, like stones in a dry garden. There is no persuasion here. Sentences end without CTAs. White space is not emptiness; it is pressure. The color story is neon-electric meeting wabi-sabi: oversaturated neon chromas (#00FFB3 teal-citrine, #C8FF00 acid-chartreuse, #7B00FF ultraviolet) sitting against a ground of **near-black ink wash** (#0A0A0F) with deliberate imperfection — the blacks are not flat, they carry a faint grain, a memory of brushed sumi ink. The neons are not chrome-smooth either; they are rendered with a slight diffusion halo, as though the light is escaping through a membrane. ## Layout Motifs and Structure The layout is **hero-dominant** in its most literal, most uncompromising form. The hero is not a banner. It is the entire primary experience — a full-viewport organism that breathes, shifts, and reacts to the viewer's presence. Below the hero, the page does not continue with a typical section cascade. Instead, it opens into a sequence of **three very long voids** — each one a single truth, set at massive scale against absolute darkness, with the water-bubble system floating through both the hero and the voids in a continuous vertical river. Grid logic: - **Hero zone**: 100vw × 100svh, no padding, no navigation bar at load. The site name (`luminescence.dev`) appears as a single line of grotesque-neo type at ~14vw, left-aligned at 8% from left, vertically positioned at 42% from top. Below it, a single descriptor: three words, set in uppercase tracking at 0.35em, in `#C8FF00`, at 1.8vw. That is the entire hero text system. - **Void sections** (×3): Each is 80–120vh tall. Content is a single element — a phrase, a number, an abstract thought — positioned off-center by a deliberate asymmetry (one left-margin at 12%, one at 55%, one at 8%). The type never centers. The asymmetry is the message. - **End state**: the page closes with a contact area that is nothing but an email address in `#00FFB3` at 4vw, on black, centered, no labels, no form fields. Navigation is **deferred and minimal**: a single fixed dot (8px circle, `#7B00FF`, top-right, 32px margin) that expands on hover to reveal four monospaced links. The dot does not pulse, animate on scroll, or compete. It simply waits. No grid lines are visible. No cards. No dividers. No sticky headers. The page breathes. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Primary display — `Space Grotesk`** (variable, wght 300–700). Set the site name at `14vw`, weight 300, tracking `-0.02em`. The lightness of 300 weight against absolute black creates the wabi-sabi porosity — the letterforms look slightly dissolved, slightly incomplete. On hover over the hero, the weight variable-transitions from 300 → 450 over 600ms: the name thickens as if reacting to presence. - **Accent / section titles — `Space Grotesk`** same family, weight 700, set at `5vw`, uppercase, tracking `0.35em`. The contrast between 300 and 700 within one family is the typographic argument: the same material, different states of matter. - **Body / fragments — `Space Grotesk`** weight 300, size `1.4rem`, line-height `2.2`, maximum width `42ch`. Only used in the three void sections for the fragment text. Color: `#8A8A9E` (desaturated violet-gray) — quiet, not competing with the neons. - **Monospace system — `JetBrains Mono`** (Google Fonts) for the navigation links, email address, and any code-adjacent labels. Set at `0.85rem`, no bold, color `#00FFB3`. **Palette:** | Token | Hex | Use | |---|---|---| | `--void` | `#0A0A0F` | Page ground — near-black with violet undertone | | `--ink-wash` | `#12121A` | Secondary surface — bubble-field layer | | `--teal-citrine` | `#00FFB3` | Primary neon — glow lines, hover states, email | | `--acid-chart` | `#C8FF00` | Secondary neon — descriptor text, accent strokes | | `--ultraviolet` | `#7B00FF` | Tertiary neon — navigation dot, bubble cores | | `--ghost-violet` | `#8A8A9E` | Body text — quiet, recessive | | `--membrane` | `rgba(0,255,179,0.06)` | Bubble fill — translucent, barely-there | | `--fracture` | `rgba(200,255,0,0.12)` | Crack lines in wabi-sabi texture overlay | The neons are always used at **reduced opacity for fills** (0.06–0.18) and **full opacity for strokes and text**. Never flat neon fills on large areas — always membrane-thin. ## Imagery and Motifs **No photographs.** The frequency analysis confirms photography at 90% across the registry — luminescence.dev opts out entirely and deliberately. The site contains zero images from a camera. **Water-bubble system** — the defining visual organism of the site. This is not a particle system in the conventional sense. The bubbles are rendered as SVG `` elements with: - Stroke only (no fill) in `#00FFB3` at 8–18% opacity, stroke-width `0.5–1px` - Radius range: `8px` to `120px`, distributed across a Poisson-disc spacing so they never touch - Each bubble has a second inner ring at `r * 0.72`, same stroke, `3%` opacity — the ghost of a membrane - A single specular dot: `` at position `(cx - r*0.4, cy - r*0.4)`, fill `#C8FF00`, opacity `0.6` — the refracted light catch - Bubbles drift upward at `0.15–0.6px/frame` (randomized per bubble), with a sinusoidal lateral oscillation of `±6px` over `4–9s` cycles - New bubbles are born at the bottom as old ones exit the top — continuous, never looping - The density increases from hero (sparse, 30–40 bubbles) through void sections (60–80 bubbles) toward the base (20 bubbles) — breathing in and out with the page rhythm **Wabi-sabi texture overlay** — a single SVG `` filter applied at 2% opacity across the entire page surface, adding organic grain that breaks the digital flatness. The filter uses `baseFrequency="0.65 0.85"` and `numOctaves="4"`, creating a noise that reads as paper grain, not digital noise. This is the imperfection that makes the neons feel biological rather than synthetic. **Fracture motif** — three hairline SVG paths (stroke: `#C8FF00`, stroke-width `0.5px`, opacity `0.15–0.25`) distributed across the hero. They are non-geometric, drawn as if a ceramic glaze cracked while cooling: branching, irregular, never forming a pattern. They do not animate. They simply exist as evidence of a prior event. **Negative space as motif** — the three void sections are predominantly dark absolute space. The motif is the bubble field moving through darkness, with a single line of text interrupting the space asymmetrically. The darkness is the subject. The neon text and bubbles are visitors. ## Prompts for Implementation Build this as **a single scrolling organism, not a page with sections**. The scroll is one continuous body of water — dark, lit from within by the bubble field, punctuated by three moments of language and one final signal (the email address). **Implementation mandates:** **1 — The bubble field is structural, not decorative.** Implement the bubble system in a single `` element positioned `fixed`, behind all content (z-index: 0), with `pointer-events: none`. Draw in a `requestAnimationFrame` loop. Do not use a particle library. The canvas should span `100vw × 100vh` and remain fixed as the user scrolls — the bubbles float independently of scroll position, creating a sense that the dark world continues beyond the viewport edges. Bubble count: start at 45, add 5 more per 1000px of total page height beyond the viewport. **2 — The hero weight transition is the primary interaction.** On `mousemove` inside the hero section, compute the cursor's distance from the site-name element. When cursor is within `200px` of the name, begin transitioning `font-variation-settings: 'wght' 450` over `600ms cubic-bezier(0.16, 1, 0.32, 1)`. When cursor leaves the `200px` radius, return to `300` over `1200ms` — the weight decays slowly, reluctantly. This is the entire interactive system. Nothing else tracks the cursor. **3 — Fade-reveal is the scroll grammar.** Every piece of text content (site name, void section fragments, email) begins at `opacity: 0` and `transform: translateY(12px)`. On entering the viewport (IntersectionObserver, threshold 0.3), transition to `opacity: 1, translateY(0)` over `900ms cubic-bezier(0.16, 1, 0.32, 1)`. No stagger delays. No bounce. No spring. Just the clean fade-reveal — the thing surfacing through water into light. **4 — The grain overlay is a CSS layer, not a library.** Apply the wabi-sabi texture as a `::before` pseudo-element on ``, using an SVG `filter` with `feTurbulence`. The pseudo-element covers `100vw × 100vh`, is `position: fixed`, `z-index: 999`, `pointer-events: none`, and uses `mix-blend-mode: overlay` at `opacity: 0.03`. This is the membrane between the viewer and the void. **5 — No CSS frameworks. No UI libraries. No scroll hijacking.** Pure HTML, CSS custom properties, vanilla JS. The page should load in under 1.5s on a fast connection. The only external resource is the Google Fonts CDN import for Space Grotesk and JetBrains Mono. Total JS budget: under 8KB unminified. **6 — The void sections must feel genuinely empty.** Each void section has `min-height: 90vh`. The single text fragment within each is set with `position: absolute` within the section, deliberately off-axis, small (never larger than `3.5vw`), and in `--ghost-violet`. These are not headings. They are field notes. Example fragment texts (these are genuine content, not placeholders): `"light without source"` / `"the gap between keystrokes"` / `"what persists after compilation"`. **7 — The navigation dot must not compete.** The dot is `position: fixed`, top-right, 32px from edges. On hover, it expands to `width: 200px, height: auto` using `clip-path: inset(0 round 8px)` reveal animation over `300ms`. Inside: four `` tags in JetBrains Mono. On mouse-leave, reverse. The dot color `#7B00FF` is the only ultraviolet element in a fixed position — it acts as the site's single consistent anchor, the one thing that always glows. **Avoid:** pricing blocks, testimonials, feature grids, CTA buttons, stat counters, newsletter forms, social proof rails, hero CTAs, sticky top navigation bars, modal overlays, scroll-progress indicators, back-to-top buttons, loading spinners. ## Uniqueness Notes **Chosen seed:** aesthetic: wabi-sabi, layout: hero-dominant, typography: grotesque-neo, palette: neon-electric, patterns: fade-reveal, imagery: water-bubbles, motifs: nature, tone: minimal. **Differentiators from every other design in the registry:** 1. **Wabi-sabi + neon-electric cross — zero prior precedent.** The frequency report shows wabi-sabi at 4% and neon-electric at 2%. No other design in the registry crosses these two axes: typically neon is paired with futuristic/tech aesthetics, and wabi-sabi is paired with earth tones or muted palettes. `luminescence.dev` argues that imperfection and electric glow are not opposites — bioluminescence is literally wabi-sabi neon, an organic imperfection that generates light. 2. **Hero-dominant at 2% frequency, executed as an anti-pitch.** Most hero-dominant layouts use the hero for persuasion — tagline, CTA, feature summary. This design uses the hero as a meditation: one word at monumental scale, maximum weight contrast, zero supporting marketing copy. The hero is not the beginning of a sales funnel; it is the entire statement. 3. **Water-bubbles as structural SVG+Canvas organisms, not background decoration.** The frequency report shows water-bubbles at 4% — and in those prior uses, bubbles are typically static CSS backgrounds or library-based particles. Here, the bubble system is a hand-coded canvas organism with Poisson-disc spacing, specular catch-light, drift physics, and density modulation across page zones. It is the site's living connective tissue, not a background pattern. 4. **Fade-reveal as the singular animation vocabulary.** The registry shows fade-reveal at 6%, but most designs layer it with stagger (57%), spring (36%), and parallax (80%). `luminescence.dev` uses fade-reveal alone — no stagger, no parallax, no spring — because the wabi-sabi philosophy resists excess. The single animation type mirrors the single font family and the single interactive gesture (the weight transition). The entire site speaks with one motion accent. 5. **Typography is one family, one axis, one argument.** Space Grotesk at weight 300 vs. 700 is the entire type system. No serif/sans contrast, no display/body pairing, no size-explosion hierarchy. The grotesque-neo seed is executed at its most reductive — the same letterform across all scales, differentiated only by weight and size. This is registered as grotesque-neo (3%) but used more austerely than any prior instance.