Bold Editorial Design Style
A premium, bold editorial design system characterized by high-contrast brutalist typography and a sophisticated dark navy and sage color palette. Optimized for creative agencies, design portfolios, luxury architecture, and high-end digital studios. Features include 'Anton' display headers, a custom crosshair cursor, floating ambient gradients, asymmetric masonry layouts, and smooth scroll-triggered reveal animations. The aesthetic balances minimalist white space with massive, impactful type and subtle micro-interactions like mix-blend-mode navigation and grayscale-to-color image transitions.
Summary
Create a high-end, premium portfolio system using a dark navy base (#171e19), massive Anton display typography, and an asymmetric layout. The design should feel editorial and cinematic, utilizing generous negative space, smooth CSS transitions, and high-contrast sections.
Style
The style is a mix of Brutalist typography and luxury minimalism. It uses Anton (uppercase, heavy) for all primary headings and Plus Jakarta Sans for clean, legible body text. The primary colors are Navy (#171e19) and Sage (#b7c6c2), supported by Cyan (#d5f4f9) and Taupe (#9f8d8b). Interactions focus on fluid motion (cubic-bezier(0.16, 1, 0.3, 1)) and depth through blurred floating shapes and hover-reveal masks.
Layout & Structure
The layout uses a multi-section structure alternating between dark and light backgrounds. It features a full-screen hero, an asymmetric masonry portfolio grid, a featured project section with offset imagery, and a massive footer.
Navigation
Hero Section
Portfolio Grid
Featured Asymmetric Section
Capabilities Section
Testimonial Carousel
Footer
Components
Hover Reveal Viewport
A circular 'View' badge that appears on image hover.
Ambient Background Orbs
Slow-moving, blurred decorative background elements.
Mix-Blend Navigation
Navigation that changes color based on the background it passes over.