Synapse
A high-performance 'neural' dark mode design system characterized by deep black backgrounds (#030303), vibrant neon accents in violet (#8B5CF6) and cyan (#06B6D4), and a sophisticated blend of editorial serif typography (Instrument Serif) with functional sans-serif (Inter). The style utilizes glassmorphism, animated mesh gradients, and 'shimmer' text effects to evoke a sense of advanced intelligence, encryption, and institutional-grade technology. Ideal for Fintech, AI, Cybersecurity, and Web3 verticals where speed, security, and technical sophistication are core values.
Summary
The Synapse design system is a futuristic, dark-themed interface that combines large-scale editorial typography with intricate micro-interactions, floating ambient orbs, and high-contrast color accents to create a premium, high-tech user experience.
Style
The style essence relies on a 'Vantablack' foundation with layers of transparency and glowing blurs. Typography pairings utilize 'Instrument Serif' for high-impact headings and 'Inter' for crisp readability. Motion is central, featuring infinite tickers, floating orbs, and subtle bounce animations.
Layout & Structure
The layout follows a modular vertical stack with a centered fixed-navigation pill. It transitions from a massive centered hero to a high-density horizontal ticker, then into a grid of feature cards, followed by a dark code integration block.
Fixed Navigation Pill
Hero Section
Metrics Ticker
Feature Grid
Code Integration Block
Footer
Components
Shiny Border Button
A button with a continuously spinning conic gradient border that creates a thin neon line effect.
Interactive Feature Card
Reveal-on-scroll card with floating iconography.
Special Notes
MUST: Maintain extreme contrast between the black background and white/neon elements. MUST: Use 'Instrument Serif' only for large headings (32px+) or brand elements. MUST: Ensure the 'glass' effects have high blur values (at least 16px) to maintain readability over background orbs. DO NOT: Use standard 0.5s transitions for everything; use `cubic-bezier(0.23, 1, 0.32, 1)` for a more technical, 'snappy' feel. DO NOT: Use pure greys for borders; always use low-opacity white (e.g., `white/5` or `white/10`).