Header & Hero Layout Refinement
A brutalist streetwear design system characterized by heavy editorial typography, a high-contrast neutral palette (concrete and ink), and asymmetric layouts. Features include a fixed mix-blend header, a grainy texture overlay, and a 'broken' grid for product displays. Ideal for high-end fashion, streetwear boutiques, architectural studios, and edgy SaaS brands looking for a raw, industrial aesthetic. Includes horizontal scrolling components, masonry-style social proof, and grayscale-to-color hover effects.
Summary
HEAVYWEIGHT is a minimalist yet high-impact design system built on brutalist principles. It utilizes massive uppercase display type, a monospace aesthetic for utility text, and an intentional use of negative space. The UI feels industrial and structural, mimicking the 'heavy' nature of the products it showcases.
Style
The style is defined by a 'Concrete' (#f2f2f2) and 'Ink' (#0a0a0a) palette with high-contrast interactions. Typography pairs 'Anton' for massive, aggressive headlines with 'Space Grotesk' for technical, monospace-style metadata. Key characteristics include a persistent 4% opacity grain overlay, grayscale imagery that reveals color on hover, and the use of 'mix-blend-difference' to ensure text legibility across varying backgrounds.
Layout & Structure
The layout is asymmetrical and intentionally 'unbalanced' to create visual interest. It utilizes a fixed header with elements pushed to extreme corners and a main content area that mixes large-scale hero imagery with dense, technical information blocks.
Non-Standard Header
Asymmetric Hero Section
Horizontal Product Strip
Technical Info Grid
Live Inventory Grid
Masonry Social Proof
Utility Footer
Components
Floating Action Cart
An isolated, high-z-index cart button.
Detail Badge
Technical specs overlay on images.