# Design Language for lune.dev ## Aesthetics and Tone lune.dev is the field logbook of a one-person lunar cartography practice -- a developer who builds tools the way an old observatory keeps records: in heavy ledger-bound volumes, in hand-tinted plates, in margins crowded with marginalia and orbital arithmetic. "Lune" is the moon in French, but here it is also a unit of measure, a sliver, a thin crescent of attention. The site is the inside of a concrete moon-station: a brutalist bunker with one north-facing window, where someone has pinned watercolor selenographic plates to the bare formwork walls and traced the orbits of small satellites in burnt-orange chalk across the slab. The mood is **minimal but weighted** -- not the airy, oxygen-rich minimalism of a startup landing page, but the spare, load-bearing minimalism of a poured-concrete vault: very few elements, each one massive, each one carrying real structural meaning. The brutalism is honest -- exposed béton brut, visible tie-holes, off-form board-marked texture rendered in CSS gradients -- but it is humanized by two warm intrusions: the **burnt-orange** of a sodium lamp burning in a cold room, and the **Playfair Display** serif, which behaves like a brass instrument-plate bolted to a grey wall. Nothing glows. Nothing is friendly in the conventional UI sense. The warmth comes from craft -- the watercolor bleeds, the slightly imperfect hand-drawn SVG arcs, the way the type is set with the care of an engraver. Inspiration sources: the raw concrete galleries of the Barbican and Boston City Hall; 19th-century lunar atlases (Beer & Mädler, the hand-colored plates of the Mappa Selenographica); early-1960s NASA mission control with its grey consoles and amber CRTs; the way a circuit board's copper traces look like a city seen from orbit; the quiet authority of a brass theodolite plaque. The tone of voice in any copy: terse, declarative, lowercase where the brutalist grid wants it, but never cute. Captions, not slogans. Coordinates, not calls-to-action. ## Layout Motifs and Structure **Primary layout: card-grid** -- but a brutalist card-grid, where the "cards" are not soft floating rectangles with drop shadows. They are **concrete modules**: chunky slabs with thick 3-4px borders in near-black (#1c1a17), hard right angles, zero border-radius, and a board-marked formwork texture. Each module sits inside an unforgiving 12-column grid with **visible gutters** -- the grid lines themselves are drawn as thin burnt-orange hairlines (#c2410c at 22% opacity), the way an architect leaves the setting-out grid printed on a drawing. Spatial system: - **The Window (hero):** A single full-viewport module occupying columns 2-11. It is the "north-facing window" of the moon-station -- a deep recessed frame (inset box-shadow stacks creating a 6-step concrete reveal, like a gun-slit aperture in a thick wall) containing a large watercolor moon. The site title is set in oversized Playfair Display, partially overlapping the window frame, breaking the grid intentionally -- the only element permitted to cross a module boundary. - **The Plate Wall:** The main body is a card-grid of 6-10 modules of varying column-span (2-col, 4-col, 6-col, occasionally a full 10-col panorama module). Each module is a "plate" -- a project, a tool, a note, a fragment of the cartography practice. Modules are flush against each other with only the gutter between them; no module floats. The grid is allowed to be slightly **broken** -- one module shifted down by 40px, one rotated by exactly -1.2deg as if a plate was pinned crooked. - **Ledger Margins:** Every module has a left margin column reserved for marginalia -- a vertical line of mono-set coordinates, a small index number set in Playfair small-caps, a tiny hand-drawn SVG glyph (a crescent, a tick mark, a tie-hole circle). - **The Slab Floor (footer):** A single full-bleed concrete module, darkest in the palette, with a faint burnt-orange circuit-trace pattern running through it like rebar diagrams. Holds the contact coordinates set as if stamped into wet concrete (inset text effect). Scroll behaves like walking the length of a bunker corridor: each module section locks attention briefly, the burnt-orange grid hairlines parallax very slightly slower than the content (4-6px offset max -- restrained), and the watercolor plates in each module reveal their painted edges as they enter the viewport. ## Typography and Palette **Typography:** - **Display / Titles / Section Headers:** "Playfair Display" (Google Fonts, weights 400/700/900, including italic). This is the brass-instrument-plate voice. Used enormous at the hero -- `clamp(3.5rem, 11vw, 9rem)` -- in weight 900, tight tracking (`-0.02em`), with the swash italic reserved for a single emphasized word. Section headers at `clamp(1.8rem, 4vw, 3.2rem)`, weight 700. Small-caps Playfair (via `font-variant: small-caps` and letter-spacing `0.16em`) for module index labels and marginalia headings -- this is the "engraved plaque" treatment. - **Body / Captions:** "Spectral" (Google Fonts, weight 400, 500, with italic) -- a serif designed for screens with enough warmth to sit beside Playfair without clashing, but quieter and more even in color. Body text at `1.05rem`, line-height `1.7`, max-width `62ch`. Captions in Spectral italic at `0.9rem`. - **Coordinates / Marginalia / Technical labels:** "Space Mono" (Google Fonts, weight 400/700) -- the logbook's arithmetic. Used for the marginalia coordinate strings (`SEL 23.4° N / 11.0° E`), module reference numbers, the footer's stamped contact lines, and any inline code. Letter-spacing `0.04em`, often rendered in burnt-orange. Type contrast principle: Playfair = the title bolted to the wall (rare, huge, elegant). Spectral = the painted caption on the plate (present, calm). Space Mono = the pencil arithmetic in the margin (frequent, small, orange). Three voices, never blurred. **Palette:** - `#cdc6bb` — **Béton Clair** (warm pale concrete, primary background -- the lit wall) - `#a39c8e` — **Formwork Grey** (mid concrete, module fills, board-marking shadows) - `#6b6457` — **Shadow Pour** (deep concrete, recessed window reveals, secondary modules) - `#2b2823` — **Slab Dark** (near-black brown-grey, the footer slab, heavy borders, body text) - `#1c1a17` — **Tie-Hole Black** (the darkest -- module outlines, text on light, the inside of the aperture) - `#c2410c` — **Burnt Orange** (the sodium lamp -- grid hairlines, mono coordinates, the chalk orbit traces, key accents) - `#e2772f` — **Ember Orange** (lighter burnt-orange, hover states, the brightest watercolor glow, link underline-draws) - `#7c8a7e` — **Verdigris Wash** (a desaturated sage-green, used sparingly in the watercolor plates as the "old map ink" and for one or two cool counterpoints so the orange does not become monotonous) Backgrounds favor Béton Clair with concrete-texture overlays; modules alternate Formwork Grey and Shadow Pour; the footer is Slab Dark. Burnt Orange is the *only* saturated color and appears in maybe 8% of the visible surface -- always intentional, always meaning "warmth" or "trace" or "measure." ## Imagery and Motifs - **Watercolor lunar plates:** The signature imagery. Each module hosts a small watercolor-style illustration of a lunar feature -- a crater terminator, a mare basin, a crescent, a wedge of limb. These are rendered as layered SVG/CSS: soft-edged radial and conic gradients with `feTurbulence` displacement filters to mimic pigment granulation and the hard "blooming" edge of a wet wash drying on cold-press paper. Colors pulled from Burnt Orange, Ember Orange, Verdigris Wash, and concrete greys -- never blue, never realistic-grey-moon; these are *hand-tinted* plates, deliberately wrong-colored like an old atlas. The hero "window" holds the largest one: a full crescent moon, ~46vh, painted in concentric burnt-orange washes with a granular dark limb. - **Circuit-trace orbits:** Thin SVG paths that read simultaneously as PCB copper traces and as satellite ground-tracks. They run between and behind modules -- 90-degree and 45-degree bends, small via-dot terminations, the occasional component-pad rectangle -- all in Burnt Orange at low opacity, drawn (path-draw-svg) as they scroll into view. Where a trace meets a module corner, it terminates in a small drilled-hole circle that visually rhymes with the concrete tie-holes. - **Formwork board-marking:** The concrete texture itself is a motif -- horizontal bands every ~32px with subtle value shifts and faint vertical "form-tie" seams, built from repeating-linear-gradients. Tie-hole circles (a darker ring with a lighter center) punctuate module corners and the footer. - **Crescent glyphs & tick marks:** Tiny hand-drawn SVG marks used as list bullets, section dividers, and marginalia ornaments -- a thin crescent, a survey tick, a small "+" registration mark like on a printing plate. Always single-stroke, slightly imperfect (path drawn with intentional 1-2px wobble). - **Stamped-concrete text:** The footer's contact details rendered as if pressed into wet concrete -- a CSS inset-text effect (light highlight above, dark shadow below, fill matching the slab) in Space Mono. - **Index numbers:** Each module carries a Playfair small-caps reference like `PLATE XIV` or `LOG 07` in the top-left margin, a brutalist inventory tag. ## Prompts for Implementation Build this as a single-page, full-screen narrative descent into the moon-station -- not a marketing page. The story arc: *arrival at the window → walking the plate wall → reaching the slab floor*. **Opening sequence (0-3s):** Page loads on flat Béton Clair concrete. The 12-column grid hairlines draw themselves outward from center in Burnt Orange (path-draw-svg, ~900ms, staggered). The hero "window" module materializes -- its recessed concrete reveal builds inward step by step via animated inset shadows (a 6-step "drilling through the wall" effect, ~700ms). Then the watercolor crescent moon **blooms** inside: start as a tiny saturated burnt-orange dot at the crater center, expand outward with the wash spreading via an animated radial-gradient + a subtle `feTurbulence` baseFrequency shift, ~1.4s, easing like pigment soaking into paper. Finally the title "lune.dev" arrives in Playfair Display 900, set to overlap the window frame -- each glyph slides up from behind the concrete sill with a short stagger and a firm spring (not bouncy -- a heavy slab settling, `cubic-bezier(0.16, 1, 0.3, 1)`). One word ("dev" or a tagline word) may be the swash italic. **Scrolling the plate wall:** As each concrete module enters the viewport: the module's heavy border draws on (border-animate, clockwise from top-left, ~500ms); the formwork texture fades in; the watercolor plate inside reveals by *un-masking* its painted irregular edge (clip-path animation following the wash's natural boundary, ~700ms, slight scale from 0.97); the Space Mono coordinate string in the margin types itself in (typewriter-effect, monospace, ~40ms/char); the Playfair index tag fades. Circuit-trace orbits between modules draw along their paths (path-draw-svg) timed to the module reveal, terminating in their drilled-hole dots. Keep stagger restrained -- this is brutalism, things land with weight, not playfulness. The grid hairlines parallax 4-6px slower than content; the watercolor plates parallax 2-3px *faster* (so the painted moons feel like they float just off the concrete wall). One module is intentionally rotated -1.2deg; one is shifted down 40px -- honor the broken grid. **Hover / interaction:** Modules don't lift or float (no soft shadows) -- on hover, a module's burnt-orange grid corner-marks brighten to Ember Orange and a thin trace draws from its corner to a neighbor (micro-interaction, path-draw-svg). Links underline via a hand-drawn wobbly SVG stroke that draws left-to-right (underline-draw) in Ember Orange. The cursor near a watercolor plate causes a faint, slow pigment-bleed ripple in the wash (subtle, ~600ms, generous). Section dividers are crescent glyphs that rotate slowly (one full turn per ~40s) like a very patient moon phase. **Footer (the slab floor):** Full-bleed Slab Dark module. A burnt-orange circuit/rebar diagram pattern fades in across it (path-draw-svg, slow, ~2s). Contact coordinates appear as stamped-into-concrete inset text in Space Mono. A final small watercolor crescent in the corner, the moon now nearly full. **Technical notes:** Pure CSS/SVG for all texture and imagery -- no raster images. Use `feTurbulence` + `feDisplacementMap` SVG filters for watercolor granulation; layered `repeating-linear-gradient` for board-marked concrete; `box-shadow` insets for recessed window reveals; `clip-path` for irregular wash edges. Respect `prefers-reduced-motion` by replacing animations with their end-states. Keep the page calm -- long dwell times, restraint over spectacle. **AVOID:** No CTA buttons, no pricing tiers, no stat-grids or animated counters, no testimonial carousels, no soft glassmorphic floating cards, no gradient-mesh hero blobs, no neon glow. No drop shadows on the "cards" (they are concrete, not paper). Burnt orange must never become a full-bleed background -- it is a trace and a lamp, not a wall. ## Uniqueness Notes **Differentiators from other designs in this batch:** 1. **Brutalist-concrete card-grid where cards are load-bearing modules, not floating panels.** Almost every card-grid in the portfolio uses soft-shadowed, rounded, hovering cards. Here the "cards" are poured-concrete slabs with board-marking texture, exposed tie-holes, hard 4px black borders, zero radius, and an intentionally *broken* grid (one module rotated -1.2deg, one dropped 40px). The grid's own setting-out hairlines are visible in burnt orange. 2. **Watercolor lunar atlas plates as the sole imagery -- deliberately wrong-colored, pure SVG.** No other design pairs hand-tinted, granulated watercolor selenography (burnt-orange and verdigris washes with `feTurbulence` pigment-bloom edges) with raw brutalist concrete. The moon is never grey or blue here; it's a 19th-century hand-colored plate pinned to a bunker wall. 3. **Triple-voice typography: Playfair Display as a brass plaque bolted to concrete.** The deliberate collision of an elegant high-contrast didone serif (Playfair Display) with brutalist béton brut -- mediated by Spectral for body and Space Mono for marginalia coordinates -- is unusual. Playfair appears rarely and enormously, like an engraved instrument-plate, not as decorative flourish. 4. **Circuit traces that double as satellite ground-tracks / orbital arithmetic.** The path-draw-svg motif here isn't generic underline animation -- it's PCB copper traces (90°/45° bends, via dots, component pads) that read as orbits and terminate in drilled holes rhyming with the concrete tie-holes. A structural metaphor (the moon-station's "rebar" and "wiring"), not decoration. 5. **Stamped-concrete inset text and a "drilling through the wall" recessed-window hero.** The footer text pressed into wet concrete (inset CSS text effect) and the hero's 6-step animated inset-shadow aperture reveal are specific brutalist devices not seen elsewhere in the portfolio. **Chosen seed / style:** `aesthetic: brutalist, layout: card-grid, typography: playfair-elegant, palette: burnt-orange, patterns: path-draw-svg, imagery: watercolor, motifs: circuit, tone: minimal` **Avoided patterns from frequency analysis:** Steered away from the saturated portfolio defaults -- no `corporate` aesthetic (93%), no `centered`/`full-bleed` reliance as the organizing principle, no `gradient` palette (96%) or generic `warm` washes (91%), no `counter-animate` stat blocks (91%), no `mono`-only typography (94%), no `mysterious-moody` darkness (94%), no `photography`/`minimal` imagery default (66-69%). Instead leaning into genuinely rare territory: `brutalist` (4%), `playfair-elegant` (0%), `burnt-orange` (0%), `watercolor` imagery (5%), `card-grid` as a brutalist construct (15%), `circuit` motifs (8%). Used `path-draw-svg` (28%) but recast it as circuit-trace cartography rather than the usual logo/underline draw.