Cyber Serif Style
A high-end 'Cyber Serif' aesthetic blending classical editorial typography with futuristic tech elements. Features a deep #050505 dark mode palette, neon emerald accents (#10b981), glassmorphism, and sophisticated micro-interactions. Suitable for high-end AI SaaS, creative agencies, fintech portfolios, and developer tools. Includes WebGL-inspired background effects, spotlight hover cards, and staggered scroll-reveal animations.
Summary
The 'Cyber Serif' style creates a premium, avant-garde digital experience by pairing the elegance of serif display fonts with the high-tech utility of monospace labels and emerald-glow accents. It emphasizes depth through blurred background shapes and motion through shimmer borders and spotlight interaction patterns.
Style
Classical-tech hybrid style. Typography: 'Newsreader' (Serif) for headings (stark, tracking-tighter), 'Inter' (Sans) for readability, and 'Space Grotesk' for technical labels (all-caps, high-tracking). Colors: Primary black (#050505), Accent Emerald (#10b981), Text White (#EBEBEB). Effects: Glassmorphism (blur: 12px), Shimmer borders, and radial-gradient spotlights.
Layout & Structure
Modern vertical layout with high breathing room. Uses a max-width 7xl container with consistent 24px padding. Features a fixed top navigation, a split-screen hero section, a 3-column bento-style feature grid, and a data-driven performance table.
Navbar
Hero Section
Feature Grid
Benchmark Table
CTA Section
Components
Shimmer Border Card
A card with a moving light effect on the border edge.
Spotlight Cursor Tracking
Card background that illuminates based on mouse position.
Morphing Background Glows
Organic, moving blurred blobs for atmosphere.
Special Notes
MUST: Use 'Newsreader' for all main headlines to maintain the editorial feel. MUST: Use #10b981 sparingly as a surgical accent color, never as a large block background. MUST: Ensure all scroll reveals use the specified cubic-bezier for a 'weighted' feel. DO NOT: Use standard rounded corners; use large radii (3xl) or full-pill shapes for buttons. DO NOT: Over-saturate the emerald; maintain the deep black (#050505) as the dominant tone.