Cinematic Noir Style
A high-end 'Cinematic Noir' design system characterized by dramatic dark-mode aesthetics, high-contrast editorial typography, and immersive scroll-driven parallax effects. Suitable for creative agencies, luxury fashion, fintech, and high-end portfolios. Features include grain overlays, radial gradients with subtle warm tints, and brutalist-scale headings that blur the line between digital interface and cinematic experience.
Summary
The Cinematic Noir design system leverages deep blacks, crisp off-whites, and a sophisticated typographic scale to create an immersive, gallery-like experience. It relies heavily on ZTNature's weight variety—from hair-thin italics to heavy blacks—and uses scroll-linked transforms to provide a sense of physical depth.
Style
The style is built on a high-contrast monochromatic palette with a singular pop of red (#ef4444) for selections. Typography uses the ZTNature font family with extreme weight pairings (Thin Italic next to Black). Layouts use generous white (or black) space. Motion is fluid and scroll-bound, utilizing scale and opacity transforms to simulate lens focal shifts.
Layout & Structure
A vertical narrative structure consisting of a full-screen immersive hero, a high-contrast grid for featured work, a focused minimalist manifesto section, and a heavy-type footer.
Navbar
Immersive Hero
Project Grid
Manifesto Section
Project Contact Footer
Components
Scroll-Linked Zoom Header
A hero text component that creates a 'receding' effect into the screen as the user scrolls down, simulating depth.
Interactive Project Card
A card with a sophisticated reveal animation that shifts metadata and icons simultaneously.
Special Notes
MUST: Use 'ZTNature' or a similar high-contrast serif/sans-serif pair with weights from 100 to 900. MUST: Apply a subtle grain overlay to the entire site to achieve the 'Noir' look. MUST: Maintain 'mix-blend-difference' on the navigation to handle the white/black section transitions. DO NOT: Use vibrant colors except for the #ef4444 selection color. DO NOT: Add rounded corners; all edges should be sharp and architectural.