--- id: "2115972090780414152" source: https://x.com/michaelmicasso/status/2115972090780414152 author: "MEK.txt (@michaelmicasso)" media: "video, 3028x2108, 28.6s" model: claude-opus-5-5 generated: 2026-10-31 --- # Pixel Roguelike Game Landing Page ## Summary A one-page site for a browser roguelike, built entirely in a DOS-era pixel aesthetic: deep navy background, dithered gold engravings, a pixel blackletter wordmark and terminal-style numbered menus. A fixed left rail swaps between Home, What is, How to play, About and Play, each panel pairing short mono copy with a live game scene, a leaderboard or a crimson title screen. A great study in committing to one retro vocabulary across every component. ## Style - Theme: dark (deep navy with gold and crimson pixel art) - Mood: retro, moody, mysterious, crafted, nerdy - Tags: pixel-art, dos-aesthetic, blackletter, dithering, roguelike, side-nav, leaderboard, terminal-ui - Category: Landing page, Games ## Palette | Role | Hex | |---|---| | Background navy | #091320 | | Deep panel | #071421 | | Muted ink | #101723 | | Dithered shadow | #37312E | | Engraving brown | #5D5549 | | Gold accent | #C3A868 | | Button yellow | #E8C547 | | Crimson title art | #C23A3A | ## Typography - Wordmark: pixel blackletter with a cross glyph between two words, gold on the hero and crimson on the title screens, about 12% of frame height. Closest free font: Jacquard 24. - Section headings ("A modern take on..."): gold pixel serif, uppercase, 4 short lines, roughly 14px on a 1440 canvas. Pixelify Sans or VT323 in uppercase. - Body and list copy: tiny bitmap mono, sentence case, pale grey-blue (#9AA3B5), 11 to 12px with tight 1.3 line height. VT323 at 16px reads closest. - Nav labels and kicker ("Competitive roguelike"): uppercase bitmap, 10px, wide tracking. Silkscreen. ## Layout - Roughly 3:2 frame (3028x2108) showing a full browser viewport. - Fixed left rail at about 8% from the left edge: five rows, each a 16px pixel icon plus a two-line uppercase label, 28px apart; the active row brightens to white. - Content area splits into a narrow text column (about 18% wide) and a large media stage on the right or centre. - Hero is centred: kicker, wordmark, two-line tagline, then an inline input plus button row. - No rounded corners anywhere except a small yellow pill donation button pinned bottom-right (16px from the edges). No shadows; depth comes from dithering and glow. ## Elements - Hero backdrop: full-bleed gold dithered engraving of robed figures on navy at about 40% opacity, plus a glowing ring and a half-sun disc behind the wordmark. - Newsletter row: a pale yellow input with a dotted placeholder line next to a bright yellow "Play now" button with a play glyph, both square-cornered, 28px tall. - Map panel: top-down pixel forest with tree sprites, a player sprite and a status bar of tiny icons along the bottom. - Leaderboard: three columns of ten rows, rank number, 16px character portrait, name and score in mono, a filter row of class icons with "All" selected. - How-to list: four bracketed steps; a small yellow triangle cursor marks the active one and the step turns white. - Title screen: crimson dithered illustration with a red sun, the wordmark, and a numbered menu. - Campfire scene: pixel forest clearing lit by a warm yellow glow radiating 200px. ## Motion - 0 to 6000ms: hero holds; the engraving stays still while the ring glows softly. - Section changes are hard cuts (under 100ms) triggered from the left rail, matching a DOS screen redraw. - 11000 to 17000ms: the triangle cursor steps down the list every 1200ms and the right stage swaps to match (leaderboard, then title screen). - Game scenes animate sprite-style at about 8fps; the campfire light flickers on a 400ms loop. - The final title screen menu cursor blinks at 500ms intervals. ## Rebuild it 1. React page with a fixed `