Cyber Serif - Premium Digital Experience
Cyber Serif is a premium classical-tech hybrid design system blending high-fidelity editorial typography with futuristic digital infrastructure. Characterized by a deep black palette (#050505) and sharp emerald accents (#10b981), it utilizes glassmorphism, shimmer borders, and spotlight cursor tracking. Features include a bento-style feature grid, technical data tables, and morphing background glows. Suitable for high-end SaaS, fintech, AI infrastructure, cybersecurity, and luxury technology brands that require a balance between authority and innovation.
Summary
A sophisticated dark-mode design system called 'Cyber Serif' that pairs classical Newsreader serif headlines with technical Space Grotesk labels and Inter body text. It features a #050505 background, #10b981 emerald accents, glassmorphic cards with animated shimmer borders, and mouse-tracked spotlight effects, all moving with a signature cubic-bezier(0.16, 1, 0.3, 1) easing.
Style
High-contrast dark mode with a 'Classical Tech' aesthetic. Typography pairings: Newsreader (Serif) for headlines, Space Grotesk for mono-spaced technical labels, and Inter for legibility. Colors: Primary #050505 (Black), Accent #10b981 (Emerald), Text #EBEBEB. Effects: 12px backdrop blur, shimmer border gradients, and radial-gradient spotlight cards.
Layout & Structure
A structured, high-breathability layout using a 7xl (1280px) container, featuring a 100vh split-screen hero and a 3-column bento feature grid.
Navigation Bar
Hero Section
Feature Grid
Technical Benchmark Table
CTA Section
Components
Spotlight Card
Interactive card that follows the user's mouse with a subtle emerald glow.
Shimmer Border
Animated border effect that gives a 'scanning' light feel.
Special Notes
MUST DO: Use large border-radius (rounded-3xl or full pill) exclusively. Use #10b981 only as an accent; never for large backgrounds except for primary buttons. Headlines MUST be in Newsreader. MUST NOT: Use standard easing like 'ease-in-out' (only use the specified cubic-bezier). Avoid grey backgrounds; use #050505 for pure dark depth.