# Design Language for storiographer.net ## Aesthetics and Tone The name is a neologism: *storiographer* — someone who writes stories, a chronicler of narrative experience. The site lives at the threshold between pixel nostalgia and cosmic reverie. It is a dreaming archive. The aesthetic is **pixel-art rendered inside a celestial dreamscape**: the crisp, deliberate geometry of 8-bit pixel grids suspended in deep burgundy nebulas, as if a Nintendo cartridge fell into a wormhole and emerged as illuminated manuscript. Every texture is simultaneously ancient and digital — stars rendered as pixel clusters, constellations drawn in chunky 2×2 pixel dots, celestial charts that look like sprite sheets from a forgotten RPG. The tone is **dreamy-ethereal with pixel-sharp edges**: soft blur halos behind pixelated objects, slow morphing shapes that dissolve between geometric and organic, the smell of cosmic dust and cathode rays. Nothing moves fast. Everything breathes. The site does not sell anything — it records, it testifies, it narrates. Visitors are not users; they are readers of starlight. Visual inspiration: a cross between an astronomical atlas from 1782 and the title screen of a Super Famicom RPG. Deep burgundy canvas. Gold pixel constellations. Slab-serif chapter headings that feel stamped in iron. Gauzy particle halos around each section break. The whole site feels like parchment that learned to glow. ## Layout Motifs and Structure The layout is **parallax-sections** — a vertical stack of full-viewport chapters, each one its own universe that the reader scrolls through like turning illuminated pages. But the parallax is *layered*, not merely z-indexed: each section has three independent depth planes that scroll at different speeds (background star field at 0.15×, midground pixel illustrations at 0.5×, foreground text at 1×). This creates genuine parallax depth without relying on any single focal point. **Section rhythm:** - Section 0 (Overture): Full-bleed burgundy void. A single pixelated star cluster morphs slowly from a random scatter into the letterform of the wordmark *storiographer*. The morph takes 4 seconds and loops with an 8-second rest. - Section 1 (Chronicle I): Asymmetric text block, 40% width left column, 55% right pixel illustration panel. A hand-pixelated star atlas fills the right panel — rendered as a 48×48 grid of colored squares that resolves into a constellation map on scroll entry. - Section 2 (Chronicle II): Centered single-column, wide measure (680px max). Block-quoted narrative text in slab-serif, 3rem, surrounded by morphing burgundy pixel blobs that slowly shift between hexagonal and circular forms. - Section 3 (Cosmography): Full-bleed horizontal band of 3D-rendered celestial sphere — a burnished brass orrery suspended in deep space, rendered as a pixel-dithered 3D illustration. The sphere rotates slowly via CSS transform. Text overlaid in reversed white slab-serif. - Section 4 (Coda): Minimal footer — centered wordmark, pixel star ornament divider, three navigation nodes arranged as a triangle. **Spatial philosophy:** Every section bleeds to the full viewport height. No section headers are sticky. No navigation bar floats. The reader is fully immersed in each chapter before moving to the next. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Chapter Headings**: [`Roboto Slab`](https://fonts.google.com/specimen/Roboto+Slab), weight 700, set at clamp(3.5rem, 7vw, 8rem). Roboto Slab's square terminals and sturdy serifs make it feel stamped in lead type — heavy, deliberate, the typographic equivalent of a carved stone inscription. Chapter numerals use weight 300 at 12vw, creating ghostly Roman-numeral section markers. - **Body / Narrative Text**: [`Lora`](https://fonts.google.com/specimen/Lora), weight 400 italic for quotations and narrative passages, weight 500 regular for prose. Lora's contemporary brushstroke serifs carry warmth without nostalgia; they read like handwriting that decided to become a typeface. - **Accent / Labels / UI Text**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400, set at 0.75rem, tracked at 0.2em. Used exclusively for metadata: coordinates, timestamps, pixel dimensions, star catalog references. **Color Palette:** - `--void` `#1a0a0e` — Near-black with burgundy undertone; primary background of every section - `--burgundy` `#6b1530` — Deep wine red; primary brand color, used for active pixel clusters and headings - `--burgundy-mid` `#8b1a3c` — Mid-tone burgundy for hover states, section dividers - `--rose-dusk` `#c45070` — Warm rose; highlight color for text emphasis, pixel ornament accents - `--parchment` `#f2e4c4` — Warm ivory; all body text, narrative prose - `--gold-pixel` `#d4a84b` — Saturated antique gold; pixel star highlights, constellation nodes, ornamental rules - `--cosmic-haze` `#3d1525` — Deep maroon mid-tone; section background variation to prevent monotony - `--pixel-white` `#fdf6ec` — Off-white for reversed text on dark backgrounds, wordmark **Gradient system:** Sections transition via a deep radial gradient from `--void` center outward to `--cosmic-haze`, giving each section a sense of depth without gradients that feel digital or flat. No linear gradients. No CSS `conic-gradient`. Only `radial-gradient` with a slight off-center origin to suggest a distant light source. ## Imagery and Motifs **Primary imagery: 3D-render** — The hero section and Section 3 feature a single 3D-rendered object: a burnished brass orrery (celestial mechanical model), pixel-dithered to read as a high-resolution pixel-art illustration. The dithering technique uses a 4×4 Bayer matrix applied to the 3D render's output, creating a hybrid object that is simultaneously photorealistic in form and pixel-art in texture. This is a unique differentiator — no other site in the registry uses 3d-render as the primary imagery type. **Motif system: star-celestial** — Stars are never rendered as generic ✦ glyphs. Every star is hand-pixelated as a 5×5 or 7×7 pixel sprite: a center pixel, four cardinal extension pixels, and optional diagonal pixels for brightness tiers. Three star sizes exist: - *Dwarf star* (5×5): Used as bullet separators, list ornaments - *Subgiant* (9×9): Section break ornaments, inline emphasis markers - *Supergiant* (13×13 with pixel halo): Hero focal point, placed once per section maximum **Constellation map:** An ASCII-grid constellation chart rendered in CSS `grid` (48 columns × 36 rows) is woven into Section 1's background. Each cell is a `
` set to 4px × 4px, colored from the palette. On scroll trigger, a constellation path animates via sequential cell-color transitions, drawing Cygnus (the Swan) as a pixelated line across the grid. **Morph animation:** The planned-seed's `morph` pattern is implemented as SVG `` vertex interpolation — pixel-art polygon blobs in the background of Sections 2 and 4 slowly cycle through 6 predefined shapes (square → hexagon → octagon → circle → back to square) at 8s per keyframe. The shapes stay in the burgundy palette and serve as ambient depth, never as focal objects. **Decorative pixel rules:** Horizontal dividers between narrative sections are drawn as a row of pixel-art floral/stellar ornaments — 12px tall inline SVGs of alternating dwarf stars and pixel diamonds in `--gold-pixel`, spacing 24px apart, full viewport width. ## Prompts for Implementation Build this as a single-page narrative scroll. Five full-viewport sections, no pagination, no hash navigation. The reader scrolls continuously. **Parallax engine:** Implement with `position: sticky` layers inside each section container rather than JavaScript scroll handlers. Assign `z-index` layers 1 (stars), 10 (illustrations), 20 (text). The star background layer uses `transform: translateY()` controlled via a CSS custom property updated by a single `requestAnimationFrame` scroll listener — no library required. **Pixel constellation grid:** Section 1's background grid is `display: grid; grid-template-columns: repeat(48, 4px); grid-template-rows: repeat(36, 4px)`. On `IntersectionObserver` trigger, animate cell colors using `setTimeout` chains (20ms delay between cells) to draw the constellation path. Use `data-star` attributes on cells that belong to a constellation path. **Morph blobs:** Use a single `` element per section with a `` element whose `points` attribute animates via a CSS `@keyframes` rule with 6 steps. Keep the polygon entirely decorative — `pointer-events: none`, `aria-hidden: true`. **3D orrery render:** The pixel-dithered orrery is a single `` or `` element. For MVP, use a pre-dithered PNG created by applying Bayer dithering in CSS via a `mix-blend-mode: multiply` overlay of a repeating Bayer matrix SVG pattern. Implement as `background-blend-mode` on a CSS pseudo-element over the image. **Typography rendering:** Enable `font-feature-settings: "kern" 1, "liga" 1, "onum" 1` on all Roboto Slab headings for old-style numerals and ligatures. Set `text-rendering: optimizeLegibility` on all `

` elements using Lora. **Interaction philosophy:** No click CTAs. No modals. No forms. No navigation bar. The only interactive elements are: (1) scroll-triggered constellation drawing, (2) hover state on dwarf-star ornaments that expands them from 5×5 to 9×9 with a `transition: transform 0.2s steps(3)` stepped easing to keep the pixel snap, (3) the orrery rotates an additional 30° on hover via `transition: transform 2s ease-in-out`. **Animation timing:** All durations are multiples of 80ms (one "frame" at 12.5fps — the frame rate of early pixel-art animations). Parallax layers update at 60fps but visual content changes are quantized to 80ms steps via `animation-timing-function: steps(n)` where appropriate, reinforcing the pixel-art aesthetic. **Avoid:** Fixed headers. Hamburger menus. CTAs. Testimonials. Pricing blocks. Grid cards. Stat counters. Newsletter modals. Scroll-jacking that overrides native scroll. Any font rendering that causes anti-aliasing on pixel text (use `image-rendering: pixelated` on all pixel-art SVG/Canvas elements). ## Uniqueness Notes 1. **pixel-art at 2% frequency combined with parallax-sections at 8%** — the corpus has never combined these two. Pixel-art designs in the registry use flat or editorial layouts; parallax sites use photography or illustration. This is the first registry design that renders pixel-art *inside* a parallax depth system, making the pixel grid itself the parallax content rather than a surface treatment. 2. **3d-render imagery at 0% frequency** — no other design in the registry uses 3d-render as its primary imagery type. The pixel-dithered orrery is a fully unique image strategy: a volumetric 3D object reduced to a pixel-art texture, collapsing two visual traditions (3D CGI and 8-bit pixel-art) into a single image. This combination appears in zero other registry entries. 3. **slab-serif typography at 2% frequency** — slab-serif is among the least-used typographic choices in the corpus. Pairing it with a dreamy-ethereal tone (also at 4%, low) subverts expectations: slab-serifs are typically used for authoritative, industrial, or journalistic contexts. Here they read as carved starstone inscriptions — heavy letterforms floating in deep burgundy space. 4. **deep-burgundy palette with star-celestial motifs** — while deep-burgundy appears at 3% and star-celestial at 5%, no registry design combines these. Other star-celestial designs use midnight blue, dark-neon, or holographic palettes. Burgundy makes the cosmic feel warm, archival, and blood-warm rather than cold and technological. 5. **morph animation on pixel-art polygons** — morph appears at 8% in the corpus but is always applied to organic blob shapes or SVG illustrations. This design applies morph to *pixel-constrained* polygons — shapes whose vertices snap to a 4px grid, making the morph itself look pixelated. This is a previously unexplored animation pattern in the registry. Planned seed: aesthetic: pixel-art, layout: parallax-sections, typography: slab-serif, palette: deep-burgundy, patterns: morph, imagery: 3d-render, motifs: star-celestial, tone: dreamy-ethereal