Expressive Urban Brutalism demo
Expressive Urban Brutalism

A raw, edgy brutalist style with oversized bold typography, harsh contrasts, and unpolished layouts that channel urban street culture and streetwear energy.
Category: Brutalism & Raw
Era: 2020s Neo-Brutalism
Prompt: 16.3 KB · 2225 words
# CODING PROMPT — "EXPRESSIVE URBAN BRUTALISM" LANDING PAGE (Urban Art & Streetwear Store)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single pass — no stubs, no TODOs, no placeholder copy.

**Product & Voice:** A landing page for an urban art & streetwear store. Theme: **Expressive Urban Brutalism** (source spec: "Brutalismo Urbano Expressivo"). Keywords: streetwear, urban art, graffiti, edgy, expressive, raw, bold, authentic, disruptive, unique. Era: 2026+ street culture. **All user-facing copy must be written in English** (the source spec was Portuguese — translate every heading, label, and microcopy into English). Invent a fitting brand name (e.g., "RAW DISTRICT", "CONCRETE CULT") and write authentic streetwear copy throughout. Lorem ipsum is forbidden.

**Required sections, in order:** sticky header (nav + theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (with newsletter form), Footer with secondary link columns.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** Every design property, layout rule, and state must live in `style.css`, targeted via class or ID selectors.
* **Minimal HTML Modifications:** HTML must remain semantic and style-agnostic — reskinning the page must only require editing `style.css`.
* **No Local Assets:** Do not reference local files (e.g., `concrete-texture.jpg`). Recreate the concrete texture purely in CSS (see §3). Photographic street-art imagery must use seeded picsum placeholders (e.g., `https://picsum.photos/seed/<seed>/1200/800`).

### 1.2 CSS Variables & Theme Tokens
Store all tokens in `:root` (light "Concrete Day" theme — the default):

```css
:root {
  --primary: #CC5500;        /* burnt orange — main CTA accent */
  --secondary: #00BFFF;      /* electric blue — focus rings, borders, accents */
  --accent-green: #39FF14;   /* neon green — ONLY on black surfaces */
  --accent-purple: #6A0DAD;  /* graphite purple — tertiary accent */
  --accent-yellow: #FFD700;   /* mustard — tape labels, highlights */
  --bg-primary: #A9A9A9;     /* concrete gray (CSS texture applied) */
  --bg-secondary: #000000;   /* black panels */
  --bg-surface: #fefefe;     /* near-white cards/posters — never #ffffff */
  --text-primary: #000000;   /* on concrete & white surfaces */
  --text-secondary: #2E2E2E; /* muted body copy on light surfaces */
  --text-on-dark: #F5F5F5;   /* on black panels */
  --text-success: #39FF14;   /* ONLY inside black chips/badges */
  --success-ink: #0B6B0B;    /* accessible inline success text on light surfaces */
  --text-error: #C40000;
  --border-default: #000000;
  --border-error: #C40000;
  --border-success: #0B6B0B;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; /* brutalist: sharp edges only */
  --shadow-sm: 4px 4px 0 0 #000000;
  --shadow-md: 10px 10px 0 0 var(--primary);
  --spacing-gap: 1.5rem;
  --transition-fast: 60ms;
  --transition-normal: 120ms;
  --ease-standard: steps(3, jump-none); /* abrupt, non-smooth motion */
  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;
  --font-display: "Permanent Marker", cursive;
  --font-stencil: "Saira Stencil One", "Archivo", sans-serif;
  --font-base: "Archivo", sans-serif;
  --font-mono: "Space Mono", monospace;
}
```

* **Contrast Pairing (mandatory, every theme):** `--bg-primary`/`--bg-surface` pair ONLY with `--text-primary`/`--text-secondary`; `--bg-secondary` pairs ONLY with `--text-on-dark`/`--accent-green`. `--secondary` (#00BFFF) and `--accent-green` (#39FF14) must never be used as text on concrete/white surfaces — on light surfaces they are restricted to borders, focus rings, and black-chip contents.
* **White Surfaces:** Use `#fefefe`, never `#ffffff`.
* **Shadows:** Hard offset shadows only (no blur, no soft elevation) — this replaces conventional elevation.
* **Radius:** All radius tokens are `0px`; torn-edge `clip-path` shapes (§3) are the only permitted "shaping."

### 1.3 Mandatory Dark Mode — "Night Concrete"
* **Exception clause:** The source style spec marked dark mode as not required; dark mode is a mandatory architectural rule regardless — implement it fully, with the light concrete theme as default.
* Define a `.dark` class token block AND mirror tokens under `@media (prefers-color-scheme: dark)`: `--bg-primary: #111111; --bg-secondary: #000000; --bg-surface: #1E1E1E; --text-primary: #F5F5F5; --text-secondary: #B5B5B5; --text-on-dark: #F5F5F5; --text-success: #39FF14; --success-ink: #39FF14; --text-error: #FF5C5C; --border-default: #F5F5F5; --border-error: #FF5C5C; --border-success: #39FF14; --shadow-sm: 4px 4px 0 0 #F5F5F5; --shadow-md: 10px 10px 0 0 var(--primary);` Accent colors stay unchanged (they pop on black).
* **Theme Switching:** Backgrounds/text/borders must flip via variables only — zero HTML restructuring.
* **Persistence:** Store choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Header must contain a visible toggle button with `aria-pressed` and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode"), swapping Material Symbols `dark_mode`/`light_mode`.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with Flexbox (`display: flex`).
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly documented in a CSS comment. Sanctioned exceptions: card content stacks and `.input-group` use `align-items: stretch` (equalize heights / align fields); nav bars use `align-items: center`.
* **Mobile-First:** Rows convert to columns at ~768px (and refine at ~480px). No horizontal scrolling at any viewport (guard the marquee with `overflow: hidden`).

### 1.5 CSS Organization
* Use clean custom CSS organized in Tailwind-style cascade layers: `@layer tokens, base, layout, components, utilities`. No framework CDNs.
* All utilities must map back to CSS variables or generic reusable classes: `.btn`, `.card`, `.input-group`.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Fonts (Google Fonts `<link>` in head):** `Permanent Marker` (graffiti/marker accents), `Saira Stencil One` (stencil display headings), `Archivo` wght 400–900 (body; use 900 for sub-headlines), `Space Mono` (labels, prices, tags, nav). Bind via `--font-*` tokens. Correct syntax: `"Permanent Marker", cursive`.
* **Icons:** Google Material Symbols (Outlined variable font) only. Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT & SECTION SPECIFICATIONS

### 2.1 Button — `.btn` (+ `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`, `.distressed-button`)
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; `font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;` 3–4px solid `var(--border-default)`; zero radius; hard `--shadow-sm`. Primary variant: `--primary` background with black text (both themes). `.distressed-button` adds a jagged single-corner `clip-path` notch.
* **Hover:** `translate(-2px, -2px)`, shadow grows to `--shadow-md`, `cursor: pointer`, spray splatter via `.spray-hover` (§3).
* **Focus-visible:** `outline: 3px dashed var(--secondary); outline-offset: 3px;` — distinct in both themes.
* **Active/Pressed:** `transform: scale(0.97) translate(2px, 2px);` shadow collapses (button pressed "into the wall").
* **Loading (`[aria-busy="true"]`):** Disable pointer events, prevent double-clicks, swap label to a rotating Material Symbol (`progress_activity`) or CSS square spinner; button dimensions must not change.
* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` no shadow/hover shift.
* **Success/Error:** Temporary state classes flip border to `--border-success`/`--border-error` with a status icon; feedback also announced via an `aria-live` region.
* **Danger:** `.btn--danger` must be visually distinct in both themes (error-red border + error text on light; brighter `--text-error` on dark).

### 2.2 Card — `.card`
* **Default:** Flexbox layout, `--bg-surface` background, 4px solid `var(--border-default)`, `--shadow-sm` (alternate shadow accent colors via modifiers: orange/blue/purple), zero radius. This theme's borders are intentionally heavy 4–5px — explicit exception to "subtle borders" per the brutalist spec.
* **Hover:** `transform: translateY(-2px)` plus shadow offset growth.
* **Focus-within:** Border color shifts to `--secondary` when a child link/button is focused.
* **Loading (Skeleton):** Define `.card--skeleton` with a CSS shimmer sweep (linear-gradient animation) that preserves layout dimensions.
* **Empty State:** Define `.card--empty` — a Material Symbol in a black square plus short guidance text.

### 2.3 Form & Input — `.input-group` (newsletter in Final CTA)
* **Structure:** Flex container wrapping `<label>`, `<input type="email">`, and a dedicated error/feedback container (`aria-live="polite"`).
* **States (all via CSS):** Empty; Focused (dashed `--secondary` ring); Filled; Valid (`--border-success`, check icon, inline message in `--success-ink` on light / `--text-success` in a black chip); Invalid (`--border-error`, error icon, error text — never color-only: icon + message required); Disabled; Read-only.
* **Input style:** `--bg-surface`, 3px border, `--font-mono`, zero radius, min-height 44px.

### 2.4 Modal / Overlay — mobile nav menu (and any future popup)
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated with abrupt stepped transitions (`var(--transition-normal) var(--ease-standard)`).
* **UX:** Backdrop `rgba(0,0,0,0.7)`; panel centered in a flex container (`align-items: center`); `--bg-surface` panel with 5px border and `--shadow-md`; close button = Material Symbol `close` with `aria-label`; `role="dialog"` + `aria-modal="true"`; keyboard focus trapped; closes on `Esc` and backdrop click; focus returns to the trigger.

### 2.5 Page Section Specs
* **Header (sticky):** Black bar, flex `align-items: center`: brand logotype (stencil), anchor links (FEATURES / HOW IT WORKS / PRICING / FAQ), theme toggle, mobile menu button (Material Symbol `menu`). Include a skip-to-content link.
* **Hero:** Two-column flex (stacks on mobile). Left: mustard "tape" label (`NEW DROP — FW26`, rotated -2deg, mono), giant stencil H1 (e.g., "WEAR THE WALLS." with one word marker-circled via `.graffiti-text`), short raw subcopy, two CTAs (`.btn--primary` "SHOP THE DROP", `.btn--secondary` "SEE THE ART"), mono stat line. Right: large picsum street-art image with torn-edge `clip-path`, 5px border, `--shadow-md`, duotone tint via `mix-blend-mode`, rotated -1deg, tape caption. CSS spray splatters behind the headline. Below: full-width marquee ticker (black bar, mono uppercase text loop, e.g., "RAW // BOLD // AUTHENTIC // LIMITED DROPS // NO RESTOCKS //", duplicate content `aria-hidden`).
* **Features:** Section header pattern: mono index ("01 / WHAT WE'RE ABOUT"), stencil H2, marker scribble annotation. Three `.card`s in a flex-wrap row (single column on mobile): "Limited Drops" (icon `local_fire_department`), "Artist-Made" (icon `brush`), "Built Raw" (icon `shield`) — real copy, alternating shadow accents, full card states per §2.2.
* **How It Works:** Three steps in a flex row with a dashed connector (pseudo-element), stacked on mobile. Each step: oversized stencil numeral (01/02/03) in a black chip with neon-green text, Material Symbol, title, copy. Steps: "Catch the Drop" → "Claim Your Size" → "Rep It Everywhere".
* **Testimonials:** Three "wheatpaste poster" cards: `--bg-surface`, torn-edge `clip-path`, tape corner strips, slight alternating rotation (-1.5deg / 1deg / -0.5deg; straighten + lift on hover). Quote text, 5 filled Material Symbol `star` icons with `aria-label` ("Rated 5 out of 5"), mono attribution with name/role/city.
* **Pricing:** Three membership tiers in a flex row → column: "LOCAL" (free), "CREW" ($19/mo, featured), "KING" ($49/mo). Featured tier: `--bg-secondary` background, `--text-on-dark` copy, neon-green price in mono, mustard "MOST WANTED" tape label, slightly larger, `--shadow-md`. Feature lists use Material Symbol `check` items. Each tier gets a full-state `.btn` CTA. Mono footnote.
* **FAQ:** 5–6 real Q&As (drops, returns, sizing, international shipping, artist collabs) as native `<details>`/`<summary>` accordions: 3px dividers, flex summary with Material Symbol `add` rotating 45° to an × on `[open]`, open state = 6px accent left border + background shift to `--bg-surface`, abrupt (stepped or instant) content reveal, fully keyboard operable.
* **Final CTA:** Full-bleed black panel with torn top/bottom edges, corner spray splatters, huge stencil line ("STOP SCROLLING. START WEARING."), and the newsletter `.input-group` + `.btn--primary` "JOIN THE CREW". Simulated async submit: Loading → Success ("YOU'RE ON THE LIST.") / Error ("THAT EMAIL LOOKS WRONG — TRY AGAIN."), all announced via `aria-live`.
* **Footer:** Black background, `--text-on-dark`. Flex columns of secondary links: SHOP (New Drops, Memberships, Gift Cards, Archive), SUPPORT (Shipping, Returns, Size Guide, Contact), COMPANY (About, Artist Collabs, Careers, Press), FOLLOW (Instagram, TikTok, YouTube as text links). Brand logotype + one-liner, mono legal/copyright line. Link hover: abrupt color flip to `--accent-yellow`. Link to in-page anchors where applicable; `href="#"` is acceptable for external nav items.

---

## 3. CORE UX & MICRO-INTERACTION RULES (BRUTALIST SIGNATURES)

* **Concrete Texture (CSS-only):** On `--bg-primary` surfaces, layer pure-CSS texture: base color + multiple low-opacity `radial-gradient` speckles (varied sizes/positions, black and white dots) + a fine `repeating-linear-gradient` grain + one or two large soft radial "stains". Dark mode re-tints the same layers. No image files.
* **Spray Hover (`.spray-hover`):** A `::before` pseudo-element containing CSS radial-gradient splatter dots + one blurred blob, `opacity: 0; transform: scale(0.7);` that snaps to full on hover/focus within `var(--transition-fast)`. Splatter color driven by a `--spray-color` custom property per component. Animate only `transform`/`opacity`.
* **Torn / Distressed Edges:** Jagged `clip-path: polygon(...)` (e.g., `polygon(0 4%, 6% 0, 24% 3%, 45% 0, 68% 4%, 88% 1%, 100% 5%, 98% 40%, 100% 70%, 96% 100%, 70% 97%, 45% 100%, 22% 96%, 4% 100%, 2% 60%, 0 30%)`) on the hero artwork, testimonial posters, CTA panel, and `.distressed-button`.
* **Abrupt Transitions:** All state changes use `transition: var(--transition-fast|normal) var(--ease-standard)` with `steps()` easing — hard snaps, no soft fades.
* **Reduced Motion:** Under `prefers-reduced-motion: disable the marquee, spray animations, and all keyframes; states must still change visibly (instantly).
* **Accessibility:** Sufficient contrast in both themes per §1.2 pairing rules; semantic HTML5 landmarks and heading order (h1 → h2 → h3); ARIA roles/labels on all custom widgets; logical focus order; full keyboard operability; `aria-live` for form feedback; never color-only state communication; `alt` text on all artwork images; 44px minimum touch targets.
* **Mandatory Visual Feedback:** Every click, hover, and submission must produce a visible state change.
* **Responsive by Default:** Fluid type/spacing, no horizontal overflow at any width.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer></script>` — no other script tags. Google Fonts + Material Symbols `<link>` tags in `<head>`.
* **Script scope:** theme toggle + `localStorage` persistence, mobile menu overlay (focus trap, Esc, backdrop close), newsletter validation + simulated async submit with `aria-live` feedback. No other JS — FAQ uses native `<details>`.
* **Naming Convention (single, fixed):** BEM (`block__element--modifier`) for all components, plus exactly three sanctioned global effect utilities: `.graffiti-text`, `.distressed-button`, `.spray-hover`. Never mix in any other convention.
* **Copy:** Real English streetwear copy everywhere — no lorem ipsum, no unrequested placeholders. Picsum placeholders are permitted only for photographic street-art imagery (with descriptive alt text and fixed seeds).
* **Quality bar:** The page must be complete and correct on the first attempt — every component state in §2 implemented, both themes verified for contrast and toggle behavior, and full keyboard navigation passing.