# Design Language for namu.biz ## Aesthetics and Tone namu.biz carries the weight of archival knowledge made luminous — a monastic observatory crossed with a 1970s astronomical journal. The aesthetic is rigorous minimalism dressed in sepia warmth, as though the entire experience has been developing in a darkroom for decades and is finally coming into focus. The mood is unhurried and authoritative. Nothing shouts. Everything is measured. Every element earns its place through precision and restraint. Negative space is not absence — it is atmosphere, the velvet darkness between stars that makes individual points of light legible. Sepia tonality is not nostalgia for nostalgia's sake; it is the patina of expertise. Old photographs of telescopes, star charts hand-drawn in India ink on drafting vellum, spectroscopic readings printed on yellowed graph paper — these are the visual ancestors of this site. The authority comes from depth of field, from a sense that this knowledge was accumulated over generations and is now being shared with quiet confidence. Lens flare moments punctuate the experience: a horizontal scroll reveals a distant star cluster dissolving into warm prismatic light, a soft chromatic aberration at scroll endpoints signals a new chapter of content. These are not distractions but orientation cues — the feeling of adjusting a telescope's focus ring and suddenly resolving a clear image. ## Layout Motifs and Structure The primary structure is a full-viewport horizontal scroll — a timeline of constellations, each "chapter" occupying exactly 100vw. The visitor moves through space laterally, mimicking the sweep of an observatory dome tracking across the night sky. Within each horizontal chapter: - Content is anchored to a precise typographic baseline grid (24px unit) - Text blocks occupy narrow vertical columns (max 480px), never filling the full width - Large negative space to the right or left of text columns hosts star-field diagrams, lens-flare composites, or celestial coordinate overlays - A persistent horizontal rule at 72% viewport height acts as the "horizon line" — text above it is primary, ephemera below it (coordinates, footnotes, catalogue numbers) Navigation is a minimal fixed constellation map in the upper-right corner: five small dot nodes connected by hairline rules, each representing a horizontal chapter. The active dot glows amber, inactive dots are the sepia of aged paper. Scroll snap is applied per chapter so each lateral movement resolves cleanly. Between snapped positions a subtle parallax offset makes the star-field layer drift slower than the text layer, reinforcing depth. Vertical rhythm within chapters: heading → ruled separator (1px, 40% opacity) → body → catalogue annotation. Spacing uses powers of the 24px unit: 24, 48, 96. ## Typography and Palette **Primary Typeface:** Space Mono (Google Fonts) — used for headings, navigation labels, and all display text. The monospaced rhythm evokes teletype transmissions from radio telescopes, spectral readouts, and the precise notation of celestial catalogues. Set loosely tracked at +0.06em for headings. **Secondary Typeface:** IBM Plex Mono (Google Fonts) — used for body text, annotations, and coordinate data. Slightly warmer than Space Mono; the optical difference creates a two-voice hierarchy without introducing a non-monospaced font. This reinforces the "everything is data" authoritarianism of the design. **Micro Typeface:** Courier Prime (Google Fonts) — for footnotes, catalogue numbers, and ephemeral metadata. Connects the design to physical typewritten annotation, as though a researcher has added margin notes. **Palette:** - `#2B2118` — Deep Amber Black: primary background, the near-dark of a warm eclipse - `#1A1208` — Void Sepia: deepest background, used for chapter separators and the star-field layer - `#C8A96E` — Parchment Gold: primary text color, the yellowed ivory of aged star charts - `#8C6D3F` — Tarnished Brass: secondary text, ruled separators, inactive navigation dots - `#E8D5A3` — Washed Vellum: high-emphasis headings and active navigation state - `#F5EDD4` — Exposed Paper: rare accent for the most critical words — a near-white that reads as incandescent against the dark ground - `#6B4F2A` — Dark Umber: decorative star-field dots, coordinate grid lines Lens flare accent (used sparingly, only in imagery layer): - `#FFF3D4` — Flare Corona: the outermost ring of a prismatic lens flare - `#E8C870` — Flare Core: the saturated center point ## Imagery and Motifs **Star-Celestial Motifs:** The primary decorative system is a procedurally-placed field of dots at two scales — 1px radius "distant stars" scattered at low density across the full viewport, and 3–4px radius "foreground stars" placed at key compositional anchor points. Stars are positioned using golden-angle distribution to feel natural rather than grid-based. Some carry a soft radial glow (box-shadow with the parchment-gold color, 0 spread, 8px blur). **Constellation Lines:** Hairline SVG paths connect select foreground stars in each chapter, tracing constellations specific to the chapter's content theme. Line weight is 0.5px, color `#8C6D3F` at 50% opacity. These lines animate in on scroll-snap arrival using a stroke-dasharray reveal. **Lens Flare Imagery:** At the transition between horizontal chapters, a CSS-rendered lens flare composite appears: a central bright disc (`radial-gradient` in flare-core color), surrounded by concentric elliptical rings at diminishing opacity (8%, 5%, 3%), with two hexagonal anamorphic streaks extending horizontally. This is pure CSS, no bitmap images required. **Coordinate Overlay:** Behind the text columns, faint celestial coordinate lines (RA/Dec grid) render as 0.3px hairlines in dark-umber at 25% opacity. These form a subtle graticule that reinforces the observatory-chart aesthetic without cluttering the reading experience. **Hover Lift:** Interactive elements (navigation dots, text links, section headers) respond with a hover-lift — a 2px upward translateY plus a subtle drop-shadow deepening from 4px to 12px blur radius. The shadow color is `#1A1208` at 60% opacity. Transition is 180ms ease-out. This creates a tactile sense of pressing against the page's surface from below. **Chapter Ornament:** Each chapter header is preceded by a small astrological glyph-like mark — a custom SVG combining a circle with four radiating hairlines (a simplified lens-star). Rendered at 20×20px, positioned inline before the chapter title. ## Prompts for Implementation **HTML Structure:** Build a single `
` with `display: flex; flex-direction: row; width: calc(100vw * N)` where N is the chapter count. Each `
` is exactly `100vw` wide. Apply `scroll-snap-type: x mandatory` to `
` and `scroll-snap-align: start` to each section. **Star Field Generation (JavaScript):** On DOMContentLoaded, generate two canvas layers (distant-stars, foreground-stars) using golden-angle placement. For distant stars: 400 points, radius 0.5–1px, opacity 0.3–0.7. For foreground stars: 40 points, radius 2–4px, opacity 0.6–1.0 with box-shadow glow. Both canvases are `position: fixed` with `pointer-events: none`, z-index 0. **Horizontal Navigation:** A fixed `