# Design Language for lrx.st ## Aesthetics and Tone lrx.st is a **pixel-art desktop that someone left running overnight in a greenhouse** — imagine a 1996 personal computer whose CRT phosphor has slowly been overtaken by moss, condensation, and a single houseplant growing through the floppy drive. The aesthetic is **"90s pixel art playful" rerouted through a damp, low-light, almost-melancholy quiet** — not the loud candy-neon pixel art of arcade flyers, but the muted, dithered, 16-color world of early ambient screensavers and grayscale Game Boy meadows. Everything is rendered on a strict pixel grid: hard-edged 1px borders, no anti-aliasing on UI chrome, chunky bitmap shadows offset by exactly 4 device-pixels. But the *mood* is the opposite of energetic — it is **a slow, contemplative tour of an abandoned but well-loved machine**, the kind of tone you'd call "nostalgic-retro meeting zen-contemplative." Sounds, if implied, would be soft modem-handshake hums and the drip of water on plastic. Nothing flashes. Nothing demands a click. The visitor is a quiet trespasser stepping through a series of pixelated rooms — a boot screen, a desktop, a file browser, a paint program left open mid-stroke — each one slightly overgrown, slightly luminous, like bioluminescent fungus has colonized the cursor. The emotional throughline: **obsolete technology as a place of rest, not loss.** lrx.st never apologizes for being a fake old computer. It treats every dithered gradient and 8×8 tile as deliberate craft. The tone is warm toward the machine and toward the visitor, but it speaks softly, in lowercase, with the patience of something that has been idling for twenty-five years and is in no hurry. ## Layout Motifs and Structure The site is composed as a **single simulated desktop environment, scrolled vertically** — not a literal draggable-window OS, but a *guided descent through six "screens"* of that imaginary machine, each screen snapping to the viewport like a fresh CRT mode. - **The 8px master grid.** Every element — margins, gaps, type leading, icon sizes — is a multiple of 8 CSS pixels. This is non-negotiable; it produces the unmistakable rigidity of bitmap UI. Borders are always 2px, hard, never rounded except by a deliberate 2px stair-step "pixel corner." - **Window-chrome framing.** Each of the six screens is wrapped in a faux title-bar: a 24px-tall strip with a chunky text label on the left, three pixel-art "gadget" squares on the right (a leaf, a water drop, a power glyph — never standard minimize/close icons). The title-bar text uses the simulated "active window" pattern (a 1px diagonal hatch behind the label). - **The vertical "boot-to-shutdown" arc.** Screen 1 is a boot/POST screen; screens 2–5 are the "running" desktop, file browser, paint canvas, and a read-me text editor; screen 6 is a gentle shutdown ("it is now safe to turn off your computer") that fades the moss back to black. The page literally has a beginning, middle, and a goodnight. - **Asymmetric icon scatter.** On the "desktop" screen, pixel-art icons are placed on an invisible 96px grid but deliberately *not* aligned into neat columns — they cluster toward the lower-left like icons no one ever tidied, with one icon half-hidden behind a frond. - **No card-grid, no bento-box, no stat row.** Information lives inside simulated file windows and text-editor panes, revealed by scroll, never tiled into a marketing grid. Negative space is the dark desktop wallpaper itself — vast, dim, restful. - **Inline scanline & dither overlay.** A fixed, pointer-events-none layer adds a faint 1px horizontal scanline every 3px and a 2×2 ordered-dither texture over the whole viewport, so even flat color areas shimmer slightly like a real CRT. ## Typography and Palette **Fonts — Google Fonts only, three voices, each doing one job:** - **UI chrome & headings — `Silkscreen`** (the bitmap pixel typeface by Jason Kottke, available on Google Fonts). Used at 8px, 16px, 24px *only* — never odd sizes — for window titles, icon labels, menu bars. Letter-spacing 1px. It must look stamped, not typeset. - **Body & long text — `VT323`** (monospaced terminal bitmap face on Google Fonts). Used at 20px / 28px line-height for read-me text, file contents, captions. Its slightly soft phosphor curves contrast nicely against Silkscreen's hard pixels and read as "the text inside the machine." - **One human whisper — `Cutive Mono`** (a typewriter-style monospace on Google Fonts) used *sparingly and italic-faked-by-skew* for the single hand-left-behind note in the text editor screen, as if a person typed it decades ago. This is the only non-bitmap typeface; it appears exactly once. **Palette — muted "mossy CRT," 16-color discipline:** - `#0B0E0A` — **deep terminal black-green** (the desktop wallpaper, the void; not pure black, faintly chlorophyll-tinted) - `#1B241A` — **damp panel green** (window backgrounds, slightly lighter than the void) - `#3E5C3A` — **moss mid** (borders, dithered fills, the "active" hatch) - `#7FA86B` — **lichen highlight** (primary text on dark, the brightest UI green) - `#C8D9B0` — **pale phosphor cream** (headings, the brightest highlight, like sun through dirty glass) - `#D9B45B` — **dim amber CRT glow** (single accent: blinking cursor, the power glyph, link underlines — used on less than 5% of pixels) - `#5A7FA8` — **cold water blue** (the water-drop gadget, condensation pixels, hover states) - `#2A1C2E` — **deep aubergine shadow** (the 4px hard drop-shadow under every window — a colored shadow, never gray) Gradients, when used, are *only* ordered-dither gradients (alternating two of the above colors in a 2×2 or 4×4 Bayer pattern), never smooth CSS gradients. Everything else is flat fill. ## Imagery and Motifs **Every visual is pixel art — SVG with `shape-rendering="crispEdges"` or CSS box-shadow pixel sprites. No photography, no 3D renders, no smooth vector illustration, no stock anything.** - **The overgrown OS.** Recurring 16×16 and 32×32 sprites: a moss-furred CD-ROM, a floppy disk with a sprout, a CRT monitor with a fern growing out the top vent, a mouse (the rodent) sitting on a mouse (the device), a watering can, a sleeping moth on the menu bar. - **The cursor as firefly.** The custom cursor is a 12×12 amber arrow that leaves a 600ms-decaying trail of single dim-amber pixels — like a slow firefly drifting across the dark desktop. On the paint screen it becomes a pixel-brush that actually deposits color. - **Condensation & drip.** Along the top inner edge of each window, a few `#5A7FA8` pixels gather and, on a long random interval, one falls — a single blue pixel animating down the screen and pooling at the bottom, then evaporating. - **Dither weather.** The "desktop wallpaper" void slowly cycles its Bayer-dither density between two greens over ~40 seconds, so the dark looks like it's breathing or like fog rolling past behind the icons. - **Pixel foliage.** Hand-built fronds, ivy tendrils, and clover sprites creep in from screen corners — each is a small SVG path-grown sprite that "draws" itself pixel-row by pixel-row on scroll-in (path-draw-svg, but stair-stepped to the grid so it looks like a plant rendering on a slow machine). - **The blinking block cursor.** A single `#D9B45B` 8×16 block that blinks at exactly 1.2s in the text-editor and POST screens — the heartbeat of the page. - **No icons from icon fonts. No emoji.** Every glyph is bespoke pixel art. ## Prompts for Implementation Build lrx.st as **one HTML file, one CSS file, one JS module** — a single vertically-scrolled route presented as a slow walk through a moss-grown imaginary computer. Roughly an 80-second amble. There is **no call-to-action, no pricing block, no stat grid, no testimonial row, no feature cards, no signup form.** There is only the six-screen boot-to-shutdown sequence. **Storytelling structure (six full-viewport screens, snap-scroll, each a "CRT mode"):** 1. **POST / Boot screen.** Black-green void. White-cream `VT323` text types itself line by line — "lrx.st memory check… ok", "loading /home…", a fake hardware list, then a pause, then a single line of `Cutive Mono`: *"good morning. it's been a while."* A `#D9B45B` block cursor blinks. Faint scanlines already present. 2. **The Desktop.** The void fills with the breathing dither-fog. Pixel icons fade in (stagger, 80ms apart) clustered lower-left, one half-behind a frond that draws itself in. A menu bar in `Silkscreen` reads `lrx · file · view · garden`. Hovering an icon: it inverts to `#C8D9B0` on `#3E5C3A` and a 1px tooltip appears. A moth sprite sleeps on the menu bar and twitches once. 3. **File Browser window.** A faux window slides up (spring, slight overshoot, then settles to the 8px grid). Inside: a list of "files" — these are the actual content sections of the site (about, work, notes, contact), styled as filename rows with pixel file-type icons and fake byte-sizes and timestamps frozen in 1999. Selecting a row expands it inline like a Finder quick-look, text in `VT323`. A drip falls during this screen. 4. **Paint canvas.** A window labeled `dapple.pix`. A pixel-art scene half-finished — a window with a plant on a sill, the bottom third still blank checkerboard. As the user scrolls, the rest of the scene "paints" itself in, one 8px block at a time, following the cursor's last path. The toolbar shows pixel-art tools (pencil, fill, the watering can). If the visitor moves the mouse here, the brush deposits faint amber pixels that fade after a few seconds — they can doodle, but the canvas heals itself. 5. **Read-me text editor.** A window labeled `readme.txt`. Long-form text in `VT323` — the closest thing to a "manifesto," written all lowercase, gentle, about slowness and old machines and keeping things alive. Embedded in it, one paragraph in skewed `Cutive Mono` — the human note. The block cursor follows the end of the visible text as it scroll-reveals (typewriter-effect, but only on the editor). 6. **Shutdown.** Windows close one by one (each shrinks to a 2px line and vanishes with a pixel "poof" — 4 scattered pixels). The dither-fog thins. `Silkscreen` text centers: *"it is now safe to turn off your computer."* Then the screen dims to `#0B0E0A`, the scanlines fade, the amber cursor blinks three times and goes dark. A tiny `lrx.st` watermark remains in the corner in dim moss green. **Motion rules:** Everything animates in *steps*, not smooth easing — use `steps()` timing functions and integer-pixel transforms so motion feels like a frame-limited machine (target ~12fps look for sprite animation, even though the page runs at 60). Exception: the cursor firefly trail and the dither-fog breathing are smooth. Parallax is allowed but quantized — background sprites move in 4px jumps as you scroll, never sub-pixel. Respect `prefers-reduced-motion`: drop the typing, drips, and fog; keep the static scenes. **Build notes:** No canvas-heavy WebGL — pixel art is cheap, do it with CSS box-shadow sprites, SVG `crispEdges`, and `image-rendering: pixelated`. Custom cursor via a tiny PNG/SVG data-URI. Keep it one self-contained experience; the "files" in screen 3 are how the visitor actually reads the site's real content. ## Uniqueness Notes Differentiators, each a deliberate departure from the corpus frequency analysis: 1. **Pixel-art as muted moss, not arcade neon.** `pixel-art` aesthetic sits at only 3% in the corpus, and that sliver leans loud-and-bright (dopamine, candy). lrx.st renders pixel art in a damp 16-color *forest* palette — the dithered-greenhouse-CRT concept appears nowhere else in the corpus. 2. **Strict bitmap typography stack.** `Silkscreen` + `VT323` + `Cutive Mono` — pixel typography is rare and "mono" is overused as a *style label*, but this site commits to genuine bitmap faces at fixed pixel sizes on an 8px grid, refusing the humanist/grotesk pairings that 53%+ of designs use. 3. **Boot-to-shutdown narrative arc.** A literal six-screen "the computer turns on, you wander, the computer turns off" story — `immersive-scroll` is only 8% and almost none frame the scroll as a device's power cycle. No CTA, no pricing, no stat grid anywhere. 4. **Stepped, frame-limited motion.** While 95% of the corpus uses smooth parallax and 86% uses spring physics, lrx.st quantizes nearly all motion to `steps()` and integer pixels for a deliberately frame-dropped feel — spring is used exactly once (screen 3's window), as a knowing exception. 5. **Content disguised as files.** The site's real information (about/work/notes/contact) lives inside a simulated file browser rather than in any marketing layout — sidestepping the 89% `card-grid` / 13% `bento-box` conventions entirely. **Avoided patterns from frequency analysis:** glassmorphism (72%), hand-drawn (97%), photography (98%), warm gradient palette (96%/98%), card-grid (89%), centered hero-dominant marketing (86%/11%), smooth parallax (95%), spring everywhere (86%), cursor-follow-as-glow (88% — repurposed here as a stepped firefly trail instead), humanist/grotesk type (53%). **Chosen seed/style:** `90s pixel art playful` — *aesthetic: pixel-art, layout: immersive-scroll + ma-negative-space, typography: pixel-art bitmap (Silkscreen / VT323 / Cutive Mono), palette: muted near-monochrome mossy green with single dim-amber accent, patterns: path-draw-svg (stair-stepped) + typewriter-effect + stagger + cursor-follow (re-imagined as stepped firefly trail), imagery: custom-illustration (pixel-art SVG/sprite only) + grain-overlay (scanline + ordered dither), motifs: nature (overgrown OS, pixel foliage) + tech (CRT, floppies, faux-OS chrome), tone: nostalgic-retro + zen-contemplative.*