# Design Language for lrx.wiki
## Aesthetics and Tone
`lrx.wiki` is a **celestial field guide written by someone who finds the night sky deeply comforting**. The aesthetic is muji-clean — spare, functional, unhurried — but set against a midnight canvas that breathes with soft starlight. Imagine a beautifully typeset field notebook left open on a blanket under Cygnus on a warm July night: cream paper, rounded handwriting, a small torch casting warm light on the page, and the Milky Way blurring into the margins.
This is not a "dark mode" site. Dark mode is a toggle, a preference. This site *is* night. The darkness is the content, not the container. Against deep midnight blue, every element — a heading, a horizontal rule, a small star-dot — is deliberate, like a constellation that only becomes meaningful once you accept the surrounding dark.
The tone is **friendly and curious**: a knowledgeable friend who gets genuinely excited explaining something they love, who uses em-dashes and parentheses freely, who never condescends, who draws little diagrams in the margins. Not a tutorial, not a textbook — a letter. The muji restraint keeps the friendliness from becoming cloying; the celestial motifs keep it from becoming bland.
**Mood board in words:** the inside cover of a Hobonichi Techo, a Hayao Miyazaki sky at dusk, a physical Muji pen writing on dot-grid paper, a constellation atlas from 1835, warm lamplight on an indigo cloth, the sound of distant wind chimes.
## Layout Motifs and Structure
The layout is **full-bleed immersive** — the midnight-blue ground extends to every edge of the viewport with no borders, no cards, no containing boxes. But "full-bleed" here does not mean "hero image with a nav bar floating on top." It means the *sky is the page*, and content emerges from it like stars emerging at twilight: gradually, purposefully, one element at a time.
**Structural logic:**
- A single generous reading column — **680px max-width, centered** — floats inside the full-bleed night sky. On mobile it expands to 92vw. This column is not boxed; it has no border, no card treatment. It simply *is* where the text lives.
- **Horizontal rhythm** is enforced with a 24px baseline grid. Every paragraph, heading, and decorative element snaps to this grid so the page reads with the even cadence of sheet music.
- **Section breaks** are not `
` lines — they are **sparse star-clusters**: three to five small SVG dot-stars (3px, 4px, 2px, varied) arranged in a loose hand-placed cluster, centered, with 48px vertical breathing room above and below.
- **Margin annotations**: on desktop (>1100px), a 220px right gutter is available for marginal notes — small, de-emphasized asides in a lighter weight and smaller size, set in the right margin at the y-position of the paragraph they annotate. These are decorative-functional: they add depth without requiring navigation.
- **No sticky navigation.** The page is meant to be scrolled without interruption. If navigation exists, it lives at the top and bottom only — a single-line constellation of text links, each separated by a centered dot glyph `·`.
- **Constellation connector lines**: between major sections, a thin SVG path (0.5px stroke, 15% opacity) traces a straight line connecting two star-cluster dividers, evoking the lines drawn between stars in a printed atlas. This line is purely decorative and fades in on scroll.
## Typography and Palette
**Type system (all verified on Google Fonts):**
- **Display headings — `Nunito`** (variable, wght 200–900). Set H1 at wght 700, letter-spacing −0.02em, size 56px (desktop) / 36px (mobile). The rounded terminals of Nunito are the typographic embodiment of the playful-rounded seed: they are warm without being childish, friendly without being bubbly. H2 at wght 600, size 32px. H3 at wght 500, size 22px, with a 2px underline-draw animation (see Patterns).
- **Body — `Nunito`** as well, wght 400, size 17px, line-height 1.75. Using a single family for the entire site is a muji principle: sufficiency over accumulation. The weight range does all the work that a second family would need a second typeface to accomplish.
- **Annotations and captions — `Nunito`**, wght 300, size 13px, opacity 0.65, letter-spacing +0.03em. This is the "field-note handwriting" voice — lighter, slightly airy, clearly subordinate.
- **Code/inline technical — `JetBrains Mono`** (Google Fonts), wght 400, size 15px, background `rgba(255,255,255,0.06)` with 4px border-radius. Used sparingly; this is a wiki, not a code repo.
**Palette — midnight-blue with warm star-glow accents:**
| Role | Name | Hex |
|------|------|-----|
| Background / sky | Midnight | `#0d1117` |
| Deep surface | Void | `#111827` |
| Soft surface | Dusk Layer | `#1c2a3a` |
| Primary text | Cream | `#f0ece2` |
| Secondary text | Starlight | `#a8b8c8` |
| Accent — warm | Warm Star | `#f5c842` |
| Accent — cool | Periwinkle | `#7eb8f7` |
| Accent — glow | Aurora Soft | `#9ecbff` |
| Underline draw | Comet Trail | `#f5c842` |
| Noise overlay | Film Grain | `rgba(255,255,255,0.03)` |
The palette is **not gradients** — it is discrete tonal planes, like lithographic layers. The warm star `#f5c842` is used only for underline-draw strokes, star-dot glyphs, and the hover state of links. Everything else is blues-to-cream.
## Imagery and Motifs
**The site uses zero photographs.** The frequency report shows photography at 85% and lens-flare at 3% — this design exits the photography category entirely.
**Star-celestial motif system:**
1. **Star-cluster dividers** — hand-composed SVG clusters of 3–6 circles, varying radii (1.5px–4px), colors cycling between `#f5c842`, `#9ecbff`, and `#f0ece2`, each with a distinct `opacity` (0.4–1.0) to create a sense of distance/proximity. These are the only recurring decorative element. Each cluster is unique (not a repeated stamp).
2. **Noise texture layer** — a full-bleed SVG `` filter applied to the body background: `baseFrequency="0.65"`, `numOctaves="3"`, `type="fractalNoise"`. Blended with `mix-blend-mode: overlay` at 3% opacity. This adds the film-grain quality that makes the midnight-blue feel physical rather than digital — like indigo textile rather than a flat hex fill. Critical: the noise is subtle. A visitor should feel it without being able to name it.
3. **Constellation connector lines** — thin `` SVGs (stroke `#7eb8f7`, 0.5px, `stroke-dasharray="3 6"`) connecting paired section-break star clusters. On scroll entry, the path animates from `stroke-dashoffset: 1` to `0` over 800ms, evoking a pen drawing the constellation line.
4. **Single hero star** — at the very top of the page, a single 6px circle in `#f5c842` with a radial glow (`box-shadow: 0 0 18px 4px rgba(245,200,66,0.35)`) serves as the visual anchor. It does not pulse or animate. It simply *is*: a fixed point, a north star.
5. **No iconography** — no icon libraries, no emoji, no heroicons. The only "icons" are the star-dot glyphs and the `·` separator.
**Noise texture as design material:** the grain-overlay unifies the page — headings, body text, and background all share the same film-grain surface, so the page reads as a single unified object rather than layered elements on a screen.
## Prompts for Implementation
Build `lrx.wiki` as **a single vertical scroll through a clear night sky**, where the reader is the observer and the content is the sky. The metaphor is not decorative — it is structural. Every implementation decision should ask: *does this feel like reading a field guide under the stars, or does it feel like using a website?*
**Section 1 — The Opening Sky**
The viewport opens on pure midnight (`#0d1117`) with the single north-star dot centered at 25% from the top. The site title appears below it: `lrx.wiki` in Nunito wght 200, 72px, cream, letter-spacing +0.08em — sparse, wide, quiet. A single line of descriptor text fades in 600ms later at wght 300. No buttons. No CTA. The hero earns its space through restraint.
**Section 2 — Content scroll**
Each content section is separated by a unique star-cluster SVG. As each cluster scrolls into the viewport intersection observer threshold (0.3), the dots fade in with a staggered delay — first the largest, then cascading to the smallest — over a total of 400ms. This is the `stagger` pattern applied to celestial objects.
**The underline-draw interaction**
All `