# Design Language for lunatic.dev ## Aesthetics and Tone lunatic.dev is **The Lunar Sanatorium** — a serene, ink-and-paper meditation on the oldest superstition in medicine: that the moon (Latin *luna*) makes people mad. The site takes that premise and inverts it. Instead of frenzy, it offers stillness. It is a quiet asylum for the moonstruck, a hushed archive where the "lunatic" is not a patient to be cured but a contemplative who has simply tuned themselves to the lunar clock. The mood is **zen monochrome confidence** — the calm authority of a 1950s observatory logbook crossed with the empty floor of a Kyoto rock garden lit only by reflected moonlight. Everything is grayscale: bone-white paper, graphite ink, the faint silver of a gibbous moon. The restraint is deliberate and absolute — color is *forbidden*, because color would be a distraction from the single subject: light borrowed from the sun and bent through 384,400 km of vacuum. The tone of the writing is **bold and certain**, never hesitant — declarative almanac entries, terse clinical observations, aphorisms set in large type with the unshakeable poise of someone who has read the sky their whole life. Think wall text in a museum of selenography written by a curator who is also, slightly, a believer. The emotional arc: a visitor arrives mildly amused ("a website about moon-madness, cute") and leaves a little unsettled, a little soothed, having scrolled through eight lunar phases like rooms in a very calm institution. ## Layout Motifs and Structure **Primary layout: sidebar** — a permanent, narrow **left rail** (the "ward corridor"), 220px wide on desktop, that anchors the entire experience. The sidebar is the navigational spine and never scrolls away; the main content column to its right is what moves. **The sidebar contains, top to bottom:** - The wordmark `lunatic.dev` set vertically rotated 90° at the very top, reading bottom-to-top like a spine label on a clinical binder. - A tiny **live moon-phase disc** (24px, CSS-drawn, two overlapping circles with a clip mask) that shows the *current* real phase — the only "live" element on the page. - A vertical list of the eight phase-chapters: New, Waxing Crescent, First Quarter, Waxing Gibbous, Full, Waning Gibbous, Last Quarter, Waning Crescent. Each is a small caps label with a hairline leader rule running to the right edge of the rail. - At the bottom: a thin vertical "tide gauge" — a 1px line with a small filled segment whose height reflects scroll progress through the document. Stillness made measurable. **The main column** is a single, generous **single-column reading width** (max 62ch) but it is *staggered* — this is the signature structural move. Successive content blocks do not align to a single left margin. Instead each block is nudged horizontally by a small, rhythmic offset (0, +32px, +12px, +48px, +20px...) so the eye walks down the page in a gentle zigzag, like footsteps on a moonlit path or the slow oscillation of a pendulum coming to rest. Generous whitespace (*ma*) surrounds everything; pages feel mostly empty, the way the night sky is mostly empty. Section dividers between the eight phases are full-bleed: a single horizontal hairline with the phase name centered on it, and behind it a very large, very faint moon-disc that bleeds off the right edge of the viewport — different illumination fraction for each phase. **No header bar. No footer chrome. No navigation hamburger.** The sidebar is the only persistent UI. Mobile collapses the sidebar to a thin 44px strip with just the moon disc and a dot-list of phases. ## Typography and Palette **Typography:** - **Display / Phase Titles / Wordmark:** "Fredoka" (Google Fonts), weight 600–700. A warm, **playful-rounded** geometric sans with soft, generous bowls and friendly terminals — chosen as a deliberate, slightly subversive contrast to the clinical subject matter. It makes "LUNATIC" look almost gentle, almost kind. Used at huge scale for phase names: `clamp(3rem, 9vw, 8rem)`, letter-spacing -0.01em, always title case, never all-caps (caps would feel aggressive; this site is calmly certain, not shouty). - **Body / Almanac Entries:** "Quicksand" (Google Fonts), weight 400 for prose, 500 for emphasis. Another rounded geometric sans — keeps the whole page in one soft, circular family (everything echoes the disc of the moon). Line-height 1.75, comfortable and unhurried. Size: `clamp(1.05rem, 1.3vw, 1.2rem)`. - **Sidebar labels / Captions / Data:** "Fredoka" at small size, weight 500, letter-spacing 0.18em, "small caps" feel achieved via uppercase + reduced size. Tabular feel for any numbers (phase percentages, dates, distances). - Pull-quotes and aphorisms use Fredoka 600 at `clamp(1.6rem, 4vw, 3rem)`, set ragged-right, with a hanging hairline rule above. **Palette — strict monochrome (grayscale only, zero hue):** - `#f4f2ed` — **Bone Paper**: the primary background. A warm-leaning near-white, the color of an old institutional ledger left in a sunny room. (Achromatic in feel; treat as the "white".) - `#1c1c1c` — **Graphite Ink**: primary text and hairlines. Near-black, never pure #000 — softer, like pencil pressed firm. - `#8c8c8c` — **Lunar Silver**: mid-gray for secondary text, captions, the faint giant moon-discs behind dividers, and the sidebar leader rules. - `#d8d6d0` — **Ash**: ultra-light gray for hover-fills, hairline backgrounds of the tide gauge, and the unlit portion of moon discs. - `#5a5a5a` — **Slate**: a deeper mid-gray used sparingly for the sidebar background block and active-phase highlight, giving the "corridor" a slightly cooler, dimmer cast than the bright reading column. Optional faint film: a 4–6% monochrome **noise/grain overlay** across everything to evoke paper tooth and the static of a long-exposure photographic plate. ## Imagery and Motifs **Core visual motifs — all CSS/SVG, all grayscale, no photography:** 1. **The Disc** — the moon rendered as the union/intersection of two circles with a clip-path, the illuminated fraction varying per phase. It appears at every scale: 24px live indicator in the sidebar, ~120px chapter markers, and a `min(70vw, 900px)` ghost-disc bleeding off-screen behind each section divider at ~8% opacity. The disc is the site's logo, favicon, divider, and bullet point all at once. 2. **Collage of selenographic fragments** — the one place the page gets visually dense: each phase chapter includes a small **collage panel** assembled from layered, semi-transparent grayscale scraps — torn-edge rectangles suggesting old engraving plates of lunar craters (Tycho, Copernicus, Mare Tranquillitatis drawn as simple concentric-ring SVGs), strips of "logbook" ruled paper, a snippet of a 19th-century asylum admission form with the word *lunacy* legible, a tide table, a fragment of a Hokusai-flat wave. These are arranged with slight rotations (±3°) and drop into place staggered on scroll. The collage is the "case file" for that phase — controlled chaos inside an otherwise empty page. 3. **Cultural motifs of moon-madness** — woven as small CSS-drawn glyphs and inline marks: the alchemical symbol for silver (☽, the crescent — silver being the moon's metal), a stylized werewolf paw-print reduced to three soft ovals, a rabbit-on-the-moon silhouette (the East Asian *moon rabbit* pounding mochi), Diana/Artemis's bow as a thin arc, a tarot "Moon" card border. Each phase-chapter is tagged with one such motif as its "ward sigil." 4. **The hairline and the leader rule** — 1px Graphite lines everywhere: connecting sidebar labels to the rail edge, underlining phase titles, separating almanac entries. Lines *draw themselves* (SVG path-draw / width transitions) as sections enter view. Stillness, then a single deliberate stroke. 5. **The pendulum** — a faint vertical line with a small filled circle at the bottom appears in the right margin of long text blocks; on scroll it sways once, gently, and settles. A visual rhyme with both a clock and a hypnotist's watch. ## Prompts for Implementation **Build it as a calm, full-screen reading institution — eight phase-chambers, one document.** - Structure: `