Lumengrid — Ship the Startup Site Before the Demo Ends (Neon-Grid Retro-Future)

Summary

A neon-grid retro-futuristic startup landing page. Near-black ink background (#0a0c14) lit by an electric cyan (#22d3ee) + hot magenta (#e83e8c) duotone, a synthwave perspective grid floor, scanline texture and glowing neon UI. Space Grotesk display type with JetBrains Mono mono labels/chips. Top-down: sticky blurred nav, centered hero over a perspective wireframe grid with a glowing 'canvas console' mock and a floating prompt bar, a logo strip, a 6-up feature grid of glassy neon cards, a split canvas-preview section with a node-stack mock, a 4-node horizontal roadmap timeline, a proof band of stat figures + a pull-quote, a full-bleed glowing CTA over the grid, and a multi-column footer. Everything sits on a faint flat grid texture with cyan/magenta radial ambient glows.

Style

Neon-grid retro-future / synthwave dev-tool aesthetic. Dark near-black ink base (#0a0c14, panel ink2 #0c0f1a) with a strict cyan + magenta duotone accent system, paper-white text (#eef2f8) and a muted slate (#8a93ab) for secondary copy. Hairline borders are translucent cyan (rgba(34,211,238,0.16)). Heavy use of glow: box-shadow rings + colored blur on buttons/cards/badges, neon text-shadow on accent headline words, radial ambient color glows, a perspective grid floor (synthwave horizon), a faint flat grid texture across the page, and a subtle CRT scanline overlay. Space Grotesk for all display/headings (700 tight tracking), JetBrains Mono for chips, eyebrows, code-ish labels and microcopy. Glassy cards with backdrop blur and gradient fills. Confident, high-energy, 'we ship fast' technical mood, never soft or pastel.

Layout & Structure

Single-column long-form dark landing page; content centered in a max-w-[1180px] container with px-6 gutters. Top-down order: fixed blurred sticky nav (64px), hero over the perspective grid with a glowing wireframe canvas console + floating prompt bar, a synthwave horizon line, a 'shipped by teams at' logo strip, a 6-up feature card grid, a split (2-col) canvas-preview section with a node-stack mock, a 4-node horizontal roadmap timeline, a proof section (4 stat figures + centered pull-quote), a full-bleed glowing CTA over the grid, and a 5-column footer with a status bottom-bar. Sections alternate flat-grid texture and bordered bands; radial glows and the perspective grid floor reappear on hero + CTA. Responsive: nav links hide below md, the 6-up features collapse 3->1, the preview/footer grids collapse to 1-2 cols, stats go 4->2, headline clamps scale down, and overflow-x is hidden so the grid/glows never cause horizontal scroll.

Sticky nav

Hero

Logo strip

Feature grid

Canvas preview (split)

Roadmap timeline

Proof / stats

Bold CTA

Footer

Special Notes

Fonts loaded from Google Fonts: Space Grotesk (400/500/600/700, display + UI) and JetBrains Mono (400/500/600, mono chips/labels/microcopy/stats). Styled with Tailwind via CDN using a custom theme palette (ink #0a0c14, ink2 #0c0f1a, cyan #22d3ee, magenta #e83e8c, paper #eef2f8, mute #8a93ab, line rgba(34,211,238,0.16)). Iconify icons via the iconify-icon web component (ph:* / Phosphor set). body has overflow-x:hidden and html scroll-behavior:smooth so the perspective grid floor and large blurred glows never cause horizontal scroll. The mood must stay dark, electric and retro-future: cyan is the primary workhorse accent and magenta is used sparingly as the spark (one feature card, one roadmap node, headline/stat accents); never go soft, pastel or light-mode.