# Design Language for lune.dev ## Aesthetics and Tone `lune.dev` is a developer tooling or personal dev site where the moon is not a decoration — it is the operating metaphor. The aesthetic fuses **cyberpunk precision** with an unusual **grounded-earthy undertow**: the site feels like a command centre built into the bedrock of a coastal cliff at night, where the navy sky meets wet stone and the only artificial light comes from cool metallic interface panels. This is not the neon-saturated, acid-green cyberpunk of the corpus. It is **restrained cyberpunk** — the kind where every surface is functional, every color decision earns its place, and the glow comes from materials (metal, glass, phosphor) rather than decoration. The mood is: **calibrated confidence**. Not loud. Not fragile. The palette is dark navy and gunmetal, accented with pale silver-blue and a single warm-earthy note — a soft ochre or dry-clay tone that functions as the one "alive" color in a mostly cold environment. That ochre is the moon itself: not neon, not gold, but the color of the moon seen through a thin marine-layer haze at 2am. The storytelling arc is: *you are looking at a dashboard on the wall of a place you built yourself*. It is precise, personal, and has been running for years. **Tone keywords:** calibrated, nocturnal, grounded, precise, earthy-cold, quiet-confidence, marine-layer. --- ## Layout Motifs and Structure The page is a **card-grid** — but not the generic SaaS 3-up feature card. The grid is an **instrument panel**: each card is a discrete monitoring unit or capability panel, sized by data density, not by marketing copy length. Cards are rectangular, with beveled-metal edge treatment (1px border, inner shadow, no rounded corners — sharp 90° edges throughout). The grid is 12-column under the hood but cards snap to 4-column (narrow), 6-column (standard), or 12-column (banner/hero) slots. **Spatial logic:** - No parallax, no scrolljack, no full-screen hero takeover - The page begins immediately with a tight masthead (domain + tagline, 80px tall) and drops straight into the instrument grid - Cards are grouped into **zones**: a top zone of 3 large cards (the moon-phase trio: current state, recent work, live status), a mid zone of 6 standard cards (capabilities, tools, writing, experiments, contact, open-source), a bottom zone of 1 banner card (a long, wide manifesto strip in dark-earthy tones) - Gutter between cards: 12px — tight, like rack-mounted gear with no slack - Cards never have drop shadows — depth comes from the border and a 2px inset highlight on the top edge only - On mobile: cards stack to single-column, but the grid order is preserved (top zone → mid → bottom). The instrument-panel metaphor survives at mobile scale because card borders stay sharp and the font remains monospace-influenced. **Scrolling behavior:** The page scrolls normally. No horizontal scroll, no snap-scroll. The one animation is a very slow (8-second) phase-shift on the moon motif in the masthead — it rotates from crescent to gibbous and back, continuously, in CSS. --- ## Typography and Palette ### Typography The type system is **geometric-sans dominant**, chosen because geometric-sans reads as both technically precise and quietly humanist — a combination that matches the grounded-earthy/cyberpunk hybrid. - **Primary display — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** (Google Fonts): Used for card titles, the site logotype, and all headings. Weights 500 and 700. Space Grotesk has the geometric regularity of Futura with ink-trap details that give it a mechanical quality without coldness. Used at 18–48px. Tracking: -0.02em on display, 0 on body headings. - **Body / metadata — [DM Mono](https://fonts.google.com/specimen/DM+Mono)** (Google Fonts): Used for all secondary text, card body copy, timestamps, status indicators, and code snippets. Weight 400. The monospace anchor reinforces the instrument-panel reading without going full terminal aesthetic (which is already at 31% in the corpus — deliberately avoided here). Used at 13–15px. - **Accent / tagline — [Syne](https://fonts.google.com/specimen/Syne)** (Google Fonts): Used exclusively for the site tagline below the logotype and for the manifesto strip. Weight 300 italic. Syne has an intentional optical irregularity that gives it a hand-considered feel against the precision of Space Grotesk. Used at 14–20px. No serif. No script. Three fonts, three non-overlapping roles. ### Palette | Token | Hex | Role | |---|---|---| | `--navy-deep` | `#0a0f1e` | Page background, card backgrounds | | `--navy-mid` | `#131929` | Card surface (slightly lighter than bg) | | `--steel-border` | `#1e2d4a` | Card borders, dividers | | `--metal-highlight` | `#2a3f63` | Top-edge card highlight, active states | | `--silver-cool` | `#8faec4` | Primary text on dark backgrounds | | `--white-dim` | `#c8d8e8` | Card titles, high-emphasis text | | `--moon-ochre` | `#c8a96e` | The one warm accent: moon motif, links on hover, the manifesto strip background | | `--clay-earthy` | `#7a5c3a` | Manifesto strip body text background tint, earth-tone cards in bottom zone | | `--phosphor-cyan` | `#4a9ead` | Status indicators (active/online), code syntax highlighting in card snippets | | `--dim-red` | `#7a3040` | Error/warning states only — sparingly used | The palette is **cool-dark dominant with a single warm accent lane**. The `--moon-ochre` appears in fewer than 15% of elements but reads as the emotional center of the page. The `--phosphor-cyan` functions as the one traditional "cyberpunk" signal color, but at a desaturated hue that keeps it in the earthy-cold spectrum rather than neon. --- ## Imagery and Motifs **Imagery is minimal by design.** The frequency report shows photography at 90% of the corpus — `lune.dev` has zero photographs. The visual weight comes entirely from: 1. **The Moon Motif (the cardinal element).** A single SVG moon glyph in the masthead — not illustrative, not decorative, but a precision-drawn phase indicator using a CSS clip-path mask over a circle, showing the actual current lunar phase. The moon is `--moon-ochre` on `--navy-deep`. It rotates slowly (8-second CSS animation). It is the only moving element on the page that runs continuously. On click it opens a tooltip showing the exact lunar phase percentage. This is the "alive" element — everything else is static. 2. **Flowing-curve motifs as card background texture.** Every card background carries an extremely subtle SVG pattern: a set of flowing sine-wave curves at 4% opacity, rendered in `--steel-border` color, tiling seamlessly. These are not decorative flourishes — they read as signal-noise, like oscilloscope traces or topographic lines. The curves are `flowing-curves` in the seed vocabulary. They appear at 4% opacity — visible only when the user looks for them, invisible in motion. 3. **Spring seasonal context (patterns: spring seed).** The `spring` seed is interpreted not as flowers but as the **spring/coil mechanical metaphor**: grid spacing uses a mild spring-easing CSS variable applied to card hover transitions (cards compress 1px toward the click point on mousedown and release back). The one explicit spring visual is in the bottom manifesto strip — a thin SVG helix drawn in `--phosphor-cyan` at 20% opacity, running the full width of the strip beneath the text. 4. **No photographs. No icons from icon libraries.** Status indicators use inline SVG circles (5px radius) with CSS animation for pulse. Navigation uses text only. 5. **Card border treatment.** The 1px border at `--steel-border` combined with the 1px top-edge highlight at `--metal-highlight` creates a subtle relief that makes each card read as a physical panel. This is the only skeuomorphic element — and it is purely structural, not decorative. --- ## Prompts for Implementation Build `lune.dev` as a single HTML file with one linked CSS file and one small JS module (moon phase calculator + card spring interactions). No framework, no build tool, no router. **Narrative arc the reader experiences:** 1. **First 300ms — orientation.** The masthead appears: `lune.dev` in Space Grotesk 700, the moon SVG to its left, cycling slowly. The tagline in Syne italic: *"tools for the long night."* Background is `--navy-deep`. The card grid is already visible below the fold — no hero image, no splash, no animation gate. 2. **First scroll (300–1000ms on screen).** The instrument grid resolves. Three large cards occupy the top zone: **"Current Phase"** (live moon phase, shows waning/waxing, illumination %, next full moon date — all computed in JS), **"Recent Work"** (3 linked project names in DM Mono, with timestamps), **"System Status"** (a list of 4–6 services or projects with green/amber pulse dots). The cards have the subtle flowing-curve background. The `--moon-ochre` accent appears in card title underlines. 3. **Mid grid.** Six standard cards cover: Capabilities (4-point list in DM Mono), Tools Used (a short tag-cloud of tech names in small Space Grotesk), Writing (3 essay titles with DM Mono dates), Experiments (3 items), Contact (2 lines: email + GitHub handle), Open Source (project name + star count). No padding inflation — every card is content-dense, like a rack unit. 4. **Manifesto strip (bottom).** Full-width, `--clay-earthy` background tinted with `--moon-ochre` at 15% overlay. Body text in Syne 300, 16px, line-height 1.8, `--white-dim` color. The SVG helix runs beneath. Text is 2–3 short paragraphs: a compressed statement of what `lune.dev` is, what it is not, and why the moon. No CTA. No sign-up. The strip ends the page — there is no footer nav, just a single DM Mono line: `© lune.dev — built in the dark`. **Animation rules:** - Moon phase rotation: CSS `animation: moonPhase 8s linear infinite` on the SVG mask offset — slow, continuous, meditative - Card hover: `transform: translateY(-1px)` + `box-shadow: 0 2px 12px rgba(74,158,173,0.08)` — the only moment `--phosphor-cyan` shows in glow form - Card mousedown spring: `transform: scale(0.995) translateY(1px)` for 80ms, then spring back via `transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1)` - No entrance animations, no scroll-triggered reveals, no intersection observer theatrics - The page is fully rendered and readable before any JS runs **Bias toward:** - Dense, information-rich cards (like a real instrument panel) - Monospace secondary type that reads as data, not design - The moon-ochre accent used sparingly — it should surprise the eye each time it appears - The manifesto strip as the emotional destination of the page, not a CTA appendage **Avoid:** - Any rounding on card corners (0px border-radius throughout) - Drop shadows larger than 12px blur radius - Typography larger than 48px anywhere on the page - Any full-screen modal, overlay, or takeover - CTA buttons (there are no calls to action on this page) - Photography or image embeds --- ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: **cyberpunk** - layout: **card-grid** - typography: **geometric-sans** - palette: **navy-metallic** - patterns: **spring** - imagery: **minimal** - motifs: **flowing-curves** - tone: **grounded-earthy** **Differentiators against the 241-design corpus, with frequency-report context:** 1. **geometric-sans typography at 2% of corpus, here used as the primary system type for a cyberpunk aesthetic.** The frequency report shows geometric-sans is the least-used typography category. The corpus has 14% cyberpunk designs but they overwhelmingly pair cyberpunk aesthetics with terminal (31%) or display-bold (4%) typography. `lune.dev` uses geometric-sans (Space Grotesk) as the primary display font against a cyberpunk backdrop — a combination that has not appeared in the corpus. The result reads as cyberpunk that has been running long enough to become tasteful. 2. **navy-metallic palette at 2% of corpus, used without any warm gradient overlay.** The palette report shows warm (90%) and gradient (78%) dominate. `lune.dev` uses a cold navy-metallic spectrum where the only warm note (`--moon-ochre`) is a single accent, not a gradient, not a background. This is the rarest palette treatment in the corpus. The cold-dominant palette reinforces the nocturnal, instrument-panel reading. 3. **Card-grid at 7% of corpus, but here de-genericized into an instrument-panel metaphor.** Card-grid is rarely used (7%), and when it appears in the corpus it typically takes the form of feature-marketing grids (headline + body + CTA). `lune.dev` uses card-grid as a literal monitoring dashboard — cards contain live-computed data (moon phase, timestamps, status pulses), not marketing copy. The grid is content-dense rather than content-sparse. 4. **Flowing-curves as oscilloscope/topographic texture, not decorative illustration.** The frequency report shows flowing-curves motifs are absent from the catalog. `lune.dev` deploys them as 4%-opacity background textures inside cards — functional noise, not decoration. The spring motif (also absent from the catalog) is translated into mechanical spring physics (hover interaction) and a helix SVG — not floral spring imagery. 5. **Grounded-earthy tone applied to a cyberpunk aesthetic — an intentional collision.** The corpus has 14% cyberpunk designs, all of which lean into neon-saturated, high-contrast, or dark-mode-neon palettes. `lune.dev` takes the one cyberpunk design at `lune` (a moon metaphor that is intrinsically natural and cyclical) and grounds it in ochre, clay, and dry-stone tones. The result is cyberpunk that has been weathered — like a console left running through many winters on a cliff-side.