Random Bot — Refined Header Navigation
A high-tech, premium dark-mode design system tailored for Discord bots, SaaS platforms, or developer tools. It features a sophisticated palette of neon accents (#f04444, #14b8a6, #fbbf24) against a deep navy background (#0f172a). The aesthetic combines glassmorphism, editorial typography with 'Cabinet Grotesk' and 'Satoshi', and scroll-triggered spring animations. Key features include animated mesh backgrounds, bento-style feature grids, and interactive simulation components like terminal logs and UI previews.
Summary
A futuristic dark-theme design system featuring glassmorphic navigation, high-contrast accent colors, and editorial-scale typography. It uses smooth spring-based entrance animations and floating decorative elements to create a sense of 'elite' software quality.
Style
The style is 'Cyber-Professional' utilizing deep backgrounds and vibrant status-colored accents. It pairs the bold, industrial 'Cabinet Grotesk' for headers with the clean, legible 'Satoshi' for body text. Micro-interactions include spring-based transforms (cubic-bezier(0.175, 0.885, 0.32, 1.275)), mesh gradients, and glow-on-hover effects.
Layout & Structure
A modular layout with a fixed glassmorphic header, followed by a split-column hero and alternating feature grids. Content is contained within a max-width of 1280px (7xl) with generous vertical padding (32-40 units) and section-specific gradients.
Navigation Header
Hero Section
Feature Sections
Interactive Pricing
Global Footer
Components
Live Log Feed Terminal
A scrollable activity feed mimicking a terminal environment.
Interactive Embed Builder
A real-time visual UI editor preview.
Glass Login Button
A refined, subtle glassmorphic action button.
Special Notes
Must use 'Cabinet Grotesk' for all large headings. Must maintain a strict gap of at least 80px between sections. Never use pure black #000; use #0f172a or #0b1222. Interactive elements must have a springy scale transition on hover (scale-105 or scale-110). Glass effects must include both backdrop-blur and border-white/10 to be visible against the dark background.