Acid Green Fashion Store — Brutalist Grain

# SEASON 04 — HIGH-FASHION BRUTALIST DESIGN SYSTEM

## SUMMARY

BUILD **SEASON 04**, A HIGH-FASHION BRUTALIST E-COMMERCE / DESIGN-SYSTEM STOREFRONT THAT BLENDS LUXURY EDITORIAL SENSIBILITIES WITH HARSH, TECHNICAL-UTILITARIAN INDUSTRIAL DESIGN. IT USES MASSIVE, SCREEN-FILLING TYPOGRAPHY, A RAW NOISE-GRAIN TEXTURE OVER THE ENTIRE INTERFACE, HIGH-CONTRAST GRAYSCALE IMAGERY, AND NEON ACID-GREEN MICRO-INTERACTIONS. THE FINAL RENDER MUST BE SAME-TO-SAME (PIXEL / LAYOUT PARITY) WITH THE REFERENCE DESIGN.

THE PAGE IS A SINGLE, VERTICALLY-SCROLLING STORE LANDING PAGE WITH THESE SECTIONS IN ORDER: STICKY BLEND NAV → FULL-SCREEN SPLIT-INDENTED HERO → MANIFESTO GRID → "OUTERWEAR" CATEGORY DIVIDER → ASYMMETRIC PRODUCT GRID → "OBJECTS" CATEGORY DIVIDER → MULTI-COLUMN DARK-NEWSLETTER FOOTER WITH A GIANT GHOST BRAND TITLE.

## STYLE

A "RAW" AESTHETIC: A NEUTRAL BEIGE BACKGROUND PAIRED WITH DEEP BROWNISH-BLACK AND BURNT-RED ACCENTS, OVERLAID WITH A CONSTANT NOISE TEXTURE. ANIMATIONS ARE SWIFT AND PURPOSEFUL — IMAGE SCALING AND NEON-GREEN HOVER STATES.

### FONTS (VENDOR LOCALLY)

- **CLASH GROTESK** (FONTSHARE) — WEIGHTS 400, 500, 600, 700 — USED FOR ALL MASSIVE DISPLAY HEADINGS, TIGHT-TRACKED.
- **GENERAL SANS** (FONTSHARE) — WEIGHTS 400, 500, 600 — USED FOR BODY, NAV, EDITORIAL TEXT, BUTTONS.
- A MONOSPACE FONT (E.G. **SPACE MONO** / SYSTEM MONO) — USED FOR TECHNICAL METADATA, PRICES, AND DATA POINTS.
- DOWNLOAD THE WOFF2 FILES AND SERVE THEM FROM A LOCAL `assets/fonts` FOLDER.

### COLOR TOKENS (EXACT HEX)

- BASE / BACKGROUND: `#E3E2DE`
- PRIMARY TEXT / DARK: `#1B0E0D`
- PRIMARY ACCENT (BURNT RED / ACTION): `#C72A09`
- NEON GREEN (MICRO-INTERACTIONS / HOVER): `#31EF07`
- DEEP BROWN (HIGHLIGHTS / RIBBON HEADINGS): `#61220F`
- BORDER / GHOST GRAY: `#D9D9D9`

### GLOBAL RULES

- BODY BACKGROUND `#E3E2DE`, BODY TEXT `#1B0E0D`, FONT-FAMILY GENERAL SANS.
- PERSISTENT NOISE TEXTURE OVERLAY: SVG `feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'`, OPACITY `0.08`, `mix-blend-mode: multiply`, FIXED `100vw/100vh`, `pointer-events: none`, `z-index: 50`.
- CLASH GROTESK DISPLAY HEADINGS: `font-weight: 700`, `letter-spacing: -0.04em`, `line-height: 0.85`.
- LINK HOVER ANIMATION: A `2px` NEON-GREEN (`#31EF07`) UNDERLINE THAT SCALES FROM `0` TO `1` USING `cubic-bezier(0.165, 0.84, 0.44, 1)`.
- IMAGES: HIGH-CONTRAST, OFTEN GRAYSCALE, WITH A HOVER `scale(1.05)`.

## LAYOUT & STRUCTURE

A 12-COLUMN ASYMMETRIC GRID. MASSIVE SCREEN-FILLING TYPOGRAPHY DIVIDERS MIXED WITH FULL-WIDTH BLOCKS AND OFFSET PRODUCT COLUMNS FOR A SENSE OF "ORDERED CHAOS".

### NAVIGATION

STICKY TOP NAVIGATION USING `mix-blend-mode: difference` SO IT STAYS LEGIBLE OVER 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) AT `24px`. TEXT COLOR `#E3E2DE` TO WORK WITH THE BLEND MODE.

### HERO SECTION

FULL-SCREEN (`100vh`) HERO WITH A DARK BACKGROUND (`#1B0E0D`). BACKGROUND IMAGE GRAYSCALE AND HIGH-CONTRAST AT `60%` OPACITY. BOTTOM-ALIGNED CONTENT WITH A THIN `#E3E2DE` BORDER, TECHNICAL METADATA IN MONOSPACE `tracking-widest`, AND A LARGE BURNT-ORANGE (`#C72A09`) CTA BUTTON. THE MAIN HEADLINE IS MASSIVE (`16vw` MOBILE, `13.5vw` DESKTOP) IN CLASH GROTESK, WITH PARTS INDENTED (E.G. `20vw`) TO CREATE NEGATIVE SPACE.

### MANIFESTO SECTION

A 12-COLUMN GRID. COLS 1–4: SMALL UPPERCASE LABEL ("MANIFESTO") ABOVE A TOP BORDER. COLS 5–12: LARGE-SCALE EDITORIAL TEXT (`32px`–`48px`) IN UPPERCASE FONT-MEDIUM WITH A SIGNIFICANT PARAGRAPH INDENT (≈`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` IN `#61220F`. TIGHT TRACKING, MINIMAL VERTICAL PADDING TO CREATE A "RIBBON" EFFECT.

### PRODUCT GRID

AN ASYMMETRIC 12-COLUMN GRID. ITEMS VARY IN WIDTH AND VERTICAL OFFSET. EXAMPLE: PRODUCT A (7 COLS, ASPECT 4:5), PRODUCT B (5 COLS, ASPECT 3:4 WITH A `128px` TOP-MARGIN OFFSET). PRODUCT DETAILS BELOW IMAGES: 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 COLS) ON BEIGE BACKGROUND. SECTION HEADERS BOLD UPPERCASE (`20px`). NEWSLETTER SIGNUP USES A DARK BLOCK (`#1B0E0D`) WITH AN INTEGRATED UNDERLINE-STYLE INPUT AND A NEON-GREEN "SEND" BUTTON. THE VERY BOTTOM FEATURES A MASSIVE "GHOST" BRAND TITLE (`8vw`) IN LIGHT GRAY (`#D9D9D9`).

## SPECIAL COMPONENTS

### NEON INTERACTION BADGE

SHARP-EDGED HIGH-VISIBILITY UTILITY BADGE FOR PRODUCT STATUS / QUICK ACTIONS. RECTANGLE WITH ZERO BORDER-RADIUS. BACKGROUND `#31EF07`. TEXT `10px` BOLD UPPERCASE `#1B0E0D`. POSITIONED ABSOLUTELY TOP-RIGHT, APPEARING ONLY ON HOVER WITH A `300ms ease-in-out` TRANSITION.

### TEXTURE OVERLAY

FULL-SCREEN SVG NOISE GRAIN UNIFYING THE BRUTALIST AESTHETIC. FIXED `100vw/100vh` DIV, `pointer-events: none`, SVG FILTER `feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'`, OPACITY `0.08`, `mix-blend-mode: multiply`, `z-index: 50`.

### SPLIT-INDENTED HEADLINE

A TYPOGRAPHY STYLE FOR HERO HEADERS USING 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`.

## REFERENCE

A SUPERDESIGN DRAFT REFERENCE WAS PROVIDED: `http://p.superdesign.dev/draft/10ecb2c3-19d7-405b-926e-3fa74e142661`. THE BUILD MUST BE PIXEL-FAITHFUL TO THAT DESIGN.

## DELIVERY

VENDOR ALL FONTS AND IMAGERY LOCALLY. THE PROJECT MUST RUN FULLY OFFLINE AS A SELF-CONTAINED STATIC SITE.