# Design Language for lunatic.dev ## Aesthetics and Tone lunatic.dev is a fever-dream botanical laboratory: a place where a botanist has gone slightly, wonderfully mad and begun pressing moonflowers into code. The aesthetic is **whimsical-botanical-scientific** — imagine a Victorian naturalist's field journal that has been infected by a benevolent lunacy, with inked specimen plates that breathe, handwritten marginalia that drift like pollen, and a pervasive sense that the plants are watching you scroll with quiet amusement. The tone is **not precious**. It is playful-intellectual: a site that takes botany seriously but laughs at itself, where the scientific Latin names are typeset in a monospaced courier-cousin (conveying data precision) but the floral illustrations seem to have escaped from their taxonomic grids. The overall mood is warm, golden-hour amber — a honey-and-oak afternoon light that makes pressed petals glow translucent. **Mood board keywords:** pressed herbarium plate, beeswax, dried chamomile, copper engraving cross-hatch, apiary light, parchment held to candlelight, a magnifying glass over a moth wing, fog-softened garden at dusk. The grain overlay is **structural, not decorative**: a fine 3–5% noise film sits over every surface so the page never looks like a screen, always like a slightly foxed printed page. ## Layout Motifs and Structure **Full-bleed single-narrative scroll.** No sidebar, no card grid, no feature matrix. The page is one continuous herbarium folio — a long sheet of parchment the visitor unrolls from top to bottom. **Layout grammar:** - **Hero plate:** Full viewport, no crop. A single large botanical illustration (SVG, fine ink linework) centered on a warm parchment field. The domain name is typeset in monospace below the specimen's Latin binomial — as if the site itself is a species. - **Section rhythm:** Alternating full-bleed color fields (`--honey-wash` and `--cream-deep`) separated by a 2px rule that mimics a copperplate border. No cards, no boxes — text flows like typeset prose in a natural-history compendium. - **Annotation columns:** At ≥1200px, body text runs at 680px centered; a 220px phantom margin on the right carries floating marginalia — short italic asides that comment on the main text like field notes. On mobile, marginalia collapse inline in a smaller weight. - **Specimen interstitials:** Three times across the scroll, the layout briefly goes edge-to-edge with a full-width SVG plate — a single illustrated specimen pinned to the field, with a Latin label below. These are the visual resting points. - **Colophon footer:** A narrow 80px band of deep amber (`--amber-press`) containing only the monospace domain name and a single floral glyph. **Spatial language:** Generous — 120px section padding, 2rem paragraph spacing. The page never feels cramped; it breathes like a garden in mid-morning. ## Typography and Palette **Typefaces (Google Fonts only):** - **Primary display / specimen labels:** `"Space Mono"` — monospaced, technically precise, carries the "lab notebook" register. Used for the domain name, Latin binomials, section counters (01 / 02 / 03), and all data-adjacent strings. Weight: 400 regular and 700 bold only. - **Body prose / descriptions:** `"IM Fell English"` — a revival of an 18th-century typeface with authentic irregularity, slight ink-trap warmth, and a scholarly personality that fits the naturalist journal tone perfectly. Used at 18–20px / 1.75 line-height. Italic variant for marginalia. - **Accent / pull quotes:** `"Playfair Display"` — used sparingly, only for one-line botanical epigraphs or the hero sub-line. Weight: 400 italic only, never upright in this context. **Color palette:** | Token | Hex | Use | |-------|-----|-----| | `--cream-paper` | `#F5EDD8` | Page base, main background — warm parchment | | `--honey-wash` | `#EDD89A` | Section alternates, specimen field fills | | `--amber-press` | `#C48B2F` | Accent rule, footer, active states, link underlines | | `--bark-ink` | `#2C1A0E` | Primary text, SVG line strokes, borders | | `--sage-veil` | `#8FA98C` | Secondary text, marginalia color, faded specimens | | `--foxing-rust` | `#A0522D` | Tertiary accent, error states, the "lunatic" flourish color | | `--bone-white` | `#FAF6ED` | Card faces (if any), tooltip backgrounds | All color transitions are dissolved via `mix-blend-mode: multiply` on the grain overlay layer, which means every color reads slightly richer and more printed than its raw hex value. ## Imagery and Motifs **All illustrations are SVG, monochrome ink line, no fills, no solid color blocks.** The corpus (85% photography) is entirely absent here — lunatic.dev uses zero photographs. Every visual element is a hand-drawn-style SVG specimen. **The specimen roster (six recurring illustrations, each used 1–2 times):** 1. **Moonflower** (*Ipomoea alba*) — the mascot specimen. A single large bloom open in profile, rendered in fine 0.8px strokes with subtle cross-hatch shading on the corolla. Used in the hero and once as a section break. 2. **Chamomile cluster** (*Matricaria chamomilla*) — three flower heads on branching stems, used in the "about this project" section as a visual anchor. 3. **Henbane** (*Hyoscyamus niger*) — a slightly sinister specimen (appropriate for "lunatic"), rendered with heavier 1.2px strokes and more aggressive cross-hatching. Used at the philosophical pivot section. 4. **Passion vine tendril** (*Passiflora caerulea*) — an intricate climbing tendril with leaf nodes, used as a horizontal rule substitute between the first and second major sections. 5. **Atropa belladonna** (*Atropa belladonna*) — berries on a drooping branch, fine stipple technique for the berries. Used in the footer region. (The "mad botanist" theme embraces plants associated with altered perception.) 6. **Mugwort** (*Artemisia vulgaris*) — feathery pinnate leaves, used in the colophon as a decorative terminal. **Motif language:** - **Pinning dot:** Every specimen on a "plate" section has a single amber circle (`--amber-press`, 6px) at the stem base — mimicking the mounting pin in a real herbarium box. - **Specimen number badges:** Oval copper-border badges in monospace (`SP-001` through `SP-006`) appear in the top-left corner of every specimen plate. - **Cross-hatch texture:** The grain overlay is augmented on specimen backgrounds with an SVG `` filter at 2% opacity — just enough to imply aged paper without obscuring the illustration. - **Pollen drift micro-animation:** On hover of any specimen, 3–5 tiny circles (radius 2px, `--amber-press`) drift upward from the flower in a CSS keyframe animation, fading out at 60px above origin. Duration: 2.4s, ease-out, no-repeat (reset on mouse-leave). This is the **only** animation on the page — everything else is static. ## Prompts for Implementation **The narrative frame:** A developer with a taxonomist's obsession has catalogued their projects as botanical specimens — each one a collected organism with a Latin name, a collection date (the repo's first commit date), and field notes (the project description). The visitor is reading the developer's personal herbarium. There is no "hire me" section. There is no skill matrix. There is only the collection. **Structure (single HTML file, single scroll):** 1. **Hero / Cover plate** — Full viewport, `--cream-paper` background, centered SVG moonflower (400px wide), `"lunatic.dev"` in Space Mono 48px below, subtitle `"a personal herbarium of software specimens"` in IM Fell English italic 20px. The grain overlay is already present at this point via a fixed `::after` pseudo-element on ``. 2. **Introduction folio** — 700px centered prose column in IM Fell English 19px. Three paragraphs in the voice of the mad botanist-developer, explaining what this site is. No bullet points. One Playfair Display italic epigraph above the prose block (a real botanical Latin quotation from Linnaeus). 3. **Specimen plate 01** — Full-bleed `--honey-wash` field. Chamomile SVG at 300px centered, pinning dot, specimen badge `SP-001`. Below: project name in Space Mono 24px, Latin name in IM Fell English italic 16px, three lines of field note prose. The pinning-dot hover animation is active here. 4. **Specimen plate 02** — `--cream-paper` background. Henbane SVG. Same structure as plate 01. The `--foxing-rust` color is used here as the specimen number badge border — signaling the darker species. 5. **Specimen plate 03** — `--honey-wash` background. Passion vine tendril as a horizontal divider, then the full plate below. Third project. 6. **Philosophical interstitial** — Full-bleed `--bark-ink` dark section, reversed text in `--cream-paper`. A single Playfair Display italic line: `"Natura non facit saltus."` Below in Space Mono small: the developer's philosophy in two sentences. This is the only dark section on the page — it anchors the scroll and marks a tonal shift. 7. **Specimen plates 04–06** — Three more project specimens, alternating `--honey-wash` / `--cream-paper`, Atropa and Mugwort illustrations appearing. 8. **Colophon** — `--amber-press` footer. Space Mono `"lunatic.dev"`, year, Mugwort SVG glyph (48px), and a mailto link styled as a specimen label. **CSS architecture:** - CSS custom properties for all palette tokens on `:root` - `body::after { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,..."); opacity:0.035; pointer-events:none; z-index:9999; }` — the grain layer, always on top - `@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IM+Fell+English:ital@0;1&family=Playfair+Display:ital@1&display=swap');` - No JavaScript frameworks. Vanilla JS only for: (a) the pollen drift hover animation trigger, (b) a single `IntersectionObserver` that adds `class="visible"` to specimen plates as they enter the viewport, triggering a `opacity: 0 → 1, translateY(12px) → 0` fade-in (200ms, ease). Nothing else. - Mobile: marginalia collapse to `display:none`; body column expands to `min(680px, 92vw)`; specimen SVGs scale to `min(300px, 80vw)`. **Anti-patterns (do not include):** - No navigation bar (not even a sticky one) - No CTA buttons ("contact me", "see my work", "download CV") - No testimonials, no client logos, no technology icon grids - No dark/light mode toggle - No loading spinner or page transition animation - No parallax scrolling (the grain layer is fixed but that is all) ## Uniqueness Notes **Three or more deliberate differentiators from the existing 241-design corpus:** 1. **"Mad botanist" developer taxonomy as the site's entire conceptual frame.** The corpus has 26% botanical aesthetic usage, but botanical in the corpus is almost always decorative — floral patterns as background texture. lunatic.dev inverts this: the botanical specimens *are* the content. Projects are specimens. The developer is the collector. The site is the herbarium box. No other design in the corpus treats taxonomy as a narrative vehicle for a personal portfolio. 2. **Monospaced typography (`Space Mono`) paired with 18th-century humanist type (`IM Fell English`) as a deliberate collision.** The frequency report shows `mono` typography at the corpus level but almost always in isolation (terminal aesthetic, code-dark-mode). This design pairs monospace with a warm revival serif — the tension between precise machine output and organic scholarly handwriting is the typography's entire argument. This pairing does not appear in any sampled design. 3. **Pollen drift as the sole micro-interaction — single-specimen, no-repeat, botanically motivated.** The frequency data shows `micro-interactions` are broadly used but almost always as hover glows, underline draws, or card lifts. The pollen drift is biologically motivated (flowers release pollen) and tied to a single hover target per section, making it rare and memorable rather than ubiquitous. It is the only JavaScript behavior on the page. 4. **`grain-overlay` implemented as a CSS-data-URI SVG noise filter fixed to the viewport via `body::after`.** The corpus uses grain-overlay at approximately 12% but typically as a background-image on sections. Fixing it to the viewport as a pseudo-element means it does not scroll with the page — the grain is a property of the screen, not the content, which more accurately mimics looking at a printed page through a fixed pane of glass. 5. **`honeyed-neutral` palette anchored by `--honey-wash` (#EDD89A) and `--bark-ink` (#2C1A0E) — warm amber bichrome with sage and rust accents.** The frequency report shows `warm` tones at 97% corpus usage, but the dominant warm implementations are coral-pink and terracotta-orange. Honey-amber (`#C48B2F`, `#EDD89A`) as a primary chromatic identity is distinct and underrepresented. **Chosen seed:** aesthetic: botanical, layout: full-bleed, typography: mono, palette: honeyed-neutral, patterns: micro-interactions, imagery: grain-overlay, motifs: floral-botanical, tone: whimsical-creative **Avoided patterns (overused in corpus):** hand-drawn (60%), editorial (51%), terminal (31%), glassmorphism (21%), photography as primary imagery (85%).