Cinematic Style
A high-end 'Cinematic' design system characterized by deep-space dark backgrounds, sophisticated 3D CSS transforms, and bold editorial typography. Optimized for premium portfolios, creative agencies, fintech, and high-tech SaaS. It features a signature 3D rolodex/cube hero section, glassmorphism elements, and smooth GSAP-driven scroll parallax. Key aesthetics include 'mix-blend-difference' navigation, vibrant neon gradients (cyan to pink), and a monochromatic 'Aspekta' font foundation with heavy weights and tight tracking.
Summary
The 'Cinematic Style' is an immersive, dark-mode design system using 3D spatial depth and high-contrast typography to create a theatrical user experience. It blends brutalist layout structures (heavy borders, massive text) with fluid, high-tech motion.
Style
The style utilizes a base of #050505 for depth. Typography is centered around 'Aspekta' (weights 300, 500, 700, 900), prioritizing font-weight: 900 for hero headings and font-weight: 700 with wide tracking (0.2em) for secondary labels. Color accents are minimal but punchy: a gradient from cyan (#06B6D4) to pink (#EC4899) for primary buttons, and a purple glow (#7C3AED) for functional sections. Interactive elements use backdrop-filter: blur(8px) and border: 1px solid rgba(255, 255, 255, 0.1).
Layout & Structure
The layout follows a modular vertical stack with a fixed, blend-mode-enabled navigation. It transitions from a 3D immersive hero to a bento-style project grid, then into a high-contrast pricing section with deep glow effects, concluding with a massive-scale editorial footer.
Sticky Navigation
3D Rolodex Hero
Case Studies Grid
Pricing Section
Components
3D Transform Cube
A rotating 4-sided prism used for feature displays.
Glass-morphism Price Calculator
A custom range input for interactive price estimation.
Special Notes
MUST maintain the perspective: 2000px on the hero container for 3D depth. DO NOT use standard shadows; use border-white/10 and backdrop-blur for depth. MUST use 'mix-blend-difference' on the header to ensure visibility over shifting background colors. Typography must be uppercase for all headings to maintain the cinematic editorial feel.