Glassmorphism Style
A high-tech glassmorphism design system featuring neon lime accents, deep obsidian surfaces, and a sophisticated blend of architectural grid patterns and organic glowing gradients. Optimized for high-end SaaS, AI product studios, and fintech platforms, this style uses JetBrains Mono for a developer-centric feel and Space Grotesk for bold, editorial headings. Key elements include backdrop-blur effects (glassmorphism), grain/noise overlays, and a 'floating shell' layout that gives the web interface a premium, app-like quality.
Summary
A futuristic 'Obsidian & Lime' glassmorphism design system characterized by high contrast, blurred transparency, and tech-industrial typography. It utilizes a bento-grid structure and floating layouts to create a multi-layered, interactive experience.
Style
The style is defined by its 'dark-mode-first' approach using an obsidian base (#0a0a0a) and high-vibrancy lime accents (#ccff00). Typography pairings involve 'Space Grotesk' for high-impact, tight-tracked headings and 'JetBrains Mono' for technical metadata. Glassmorphism is executed with subtle white overlays (3% opacity) combined with intense 16px background blurs. Visual depth is added through grainy noise textures and 60px grid backgrounds.
Layout & Structure
A 'floating shell' architecture where the entire site content resides in a rounded container (2.5rem radius) nested within a black viewport. The internal layout follows a bento-grid methodology for features and a high-contrast split-section for the hero.
Floating Shell Container
Navigation
Hero Section
Bento Grid Features
Contrast Section (Methodology)
Footer
Components
Glass Floating Card
A multi-layered glass element that appears to float over the background.
Neon Pulse Button
High-visibility primary action button with a glowing shadow.
System Status Tag
Monospaced utility tag for technical labels.
Special Notes
MUST use #ccff00 as the primary accent. MUST NOT use standard system fonts; stick to Space Grotesk and JetBrains Mono. MUST maintain at least 16px blur on all glass elements to ensure legibility. MUST use grid patterns and noise overlays to prevent 'flat' dark mode looks. Ensure all container corners have a high radius (at least 2rem) for a modern, hardware-like feel.