5.2 KiB
Summary
A brutalist editorial design system for high-fashion, streetwear, or luxury brands. Featuring a raw, industrial aesthetic with massive typography, high-contrast photography, and utilitarian components. Key elements include a noise-grain texture overlay, a monochromatic palette with burnt orange and neon green accents, and asymmetrical layout grids. The style uses 'Clash Grotesk' for aggressive impact and 'General Sans' for technical clarity. Ideal for product launches, lookbooks, and fashion portfolios looking for a 'Raw Campaign' or 'Modern Brutalist' feel with scroll-triggered visual impact.
Style
The style is defined by a 'Raw' aesthetic: a neutral beige background (#E3E2DE) paired with deep brownish-black (#1B0E0D) and burnt red (#C72A09) accents. A constant noise texture (0.08 opacity) is applied over the entire interface. Typography features heavy use of 'Clash Grotesk' for massive, tight-tracked headings and 'General Sans' or Mono fonts for technical metadata. Animations are swift and purposeful, including image scaling and neon-green hover states (#31EF07).
Spec
Create a design with a 'Modern Brutalist' aesthetic. Use a background color of #E3E2DE and primary text in #1B0E0D. Apply a persistent noise texture overlay (SVG fractalNoise at 0.08 opacity, mix-blend-mode: multiply). Typography: Use 'Clash Grotesk' for display headings with font-weight: 700, letter-spacing: -0.04em, and leading: 0.85. For body and technical info, use 'General Sans' or a monospace font for price/data points. Accent colors: #C72A09 (Primary accent/Action) and #31EF07 (Neon Green for micro-interactions/hovers). Links should feature a custom hover animation using a 2px neon green underline that scales from 0 to 1 with cubic-bezier(0.165, 0.84, 0.44, 1). Images must be high-contrast, often grayscale, with a hover scale effect of 1.05.
Layout & Structure
The layout uses a 12-column asymmetric grid. It features massive, screen-filling typography dividers and a mix of full-width blocks and offset product columns to create a sense of 'ordered chaos'.
Navigation
Sticky top navigation using mix-blend-mode: difference to ensure legibility against any background. Left-aligned branding in uppercase bold (24px), centered text links (Shop, Editorial) with neon-green hover-underline animations, and right-aligned icons (Search, Cart) in 24px size. Text color should be #E3E2DE to work with the blend mode.
Hero Section
Full-screen (100vh) hero section with a dark background (#1B0E0D). Background image should be grayscale and high-contrast at 60% opacity. Bottom-aligned content containing a thin #E3E2DE border, technical metadata in monospace tracking-widest, and a large burnt-orange (#C72A09) CTA button. The main headline must be massive (16vw on mobile, 13.5vw on desktop) using Clash Grotesk, with parts of the text indented (e.g., 20vw) to create negative space.
Manifesto Section
A 12-column grid section. Columns 1-4 contain a small uppercase label (Manifesto) above a top border. Columns 5-12 contain large-scale editorial text (32px-48px) in uppercase font-medium with a significant paragraph indent (approx 3rem). Highlight key phrases in deep brown (#61220F).
Category Divider
A full-width section bounded by top and bottom borders (#D9D9D9). Contains a single, massive heading 'OUTERWEAR' at 12vw size in #61220F. The text should have tight tracking and minimal vertical padding to create a 'ribbon' effect.
Product Grid
An asymmetrical 12-column grid. Items should vary in width and vertical offset. Example: Product A (7 columns, aspect 4:5), Product B (5 columns, aspect 3:4 with a 128px top margin offset). Product details below images include a bold uppercase title and a monospace price tag separated by a border-bottom that changes to burnt orange (#C72A09) on hover. Include a 'Quick View' badge in neon green (#31EF07) that appears on hover.
Footer
Multi-column layout (4 columns) on beige background. Section headers in bold uppercase (20px). Newsletter signup uses a dark block (#1B0E0D) with an integrated underline-style input and neon-green 'Send' button. The very bottom features a massive 'ghost' title of the brand (8vw) in light gray (#D9D9D9) for brand reinforcement.
Special Components
Neon Interaction Badge
A sharp-edged, high-visibility utility badge for product status or quick actions.
Rectangle component with zero border-radius. Background color: #31EF07. Text: 10px bold uppercase #1B0E0D. Positioned absolutely in the top-right of containers, appearing only on hover with a 300ms ease-in-out transition.
Texture Overlay
Full-screen SVG noise grain that unifies the brutalist aesthetic.
Fixed 100vw/100vh div with pointer-events: none. Apply an SVG filter: feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'. Set opacity to 0.08 and mix-blend-mode to multiply. Ensure it sits at z-index: 50.
Split-Indented Headline
A typography style for hero headers that utilizes large-scale indentation for visual tension.
Font: Clash Grotesk, 13.5vw. Line 1: Left-aligned. Line 2: Indented by 20vw. Color: Mix of burnt-red (#C72A09) and beige (#E3E2DE). Line-height: 0.75. Tracking: -0.05em.
Preview
https://p.superdesign.dev/draft/10ecb2c3-19d7-405b-926e-3fa74e142661
Preview source code
./brutalist-01.html