Minimalist Beta Capture
A high-end 'Editorial Brutalist' style guide optimized for SaaS waitlists, fintech, or premium developer tools. It features a dark-mode palette (#080808), high-contrast monochromatic typography (DM Serif Display + Geist Mono), and sophisticated glassmorphism. The layout utilizes a bento-grid structure and fluid width (92vw) with oversized hero typography. Key features include scroll-triggered slide-up animations, a silver-metallic gradient system, and a persistent floating mobile navigation bar.
Summary
A minimalist, dark-themed design system characterized by editorial typography, technical monospace labels, and frosted-glass UI elements for a premium 'elite' digital experience.
Style
The style essence is 'Modern Obsidian'. It pairs high-impact serif italics with technical monospace and functional sans-serif. The palette is strictly monochromatic (#080808 to #FFFFFF) with silver gradients. Layouts use extreme spacing (fluid 92vw) and a noise-textured background to create depth without color. Animation is purposeful, using cubic-bezier curves for slide-up entry and smooth transitions.
Layout & Structure
The page follows a vertical narrative flow: Navigation -> Explosive Hero -> Data Metadata -> Capture Form -> Urgency/Social Proof -> Feature Bento -> Value Proposition -> Testimonials -> Final CTA -> Footer.
Header / Navigation
Hero Section
Beta Capture Form
Bento Feature Grid
Testimonials
Components
Countdown Timer
Editorial style countdown with serif numerals and slash separators.
Floating Mobile Bottom Nav
A pill-shaped navigation bar that appears only after the hero section is passed.
Member Registry Card
A bento card showing small user badges with hover interactions.
Special Notes
MUST maintain the strict monochrome/silver palette; any standard colors (blue, red, green) will break the premium aesthetic. MUST use 'Geist Mono' for all technical labels to maintain the 'engineered' feel. MUST use fluid width (92vw) instead of standard Tailwind containers to maximize editorial impact. MUST NOT use standard box-shadows; use borders or backdrop-blurs for depth. MUST NOT use non-italicized serif for headlines.