Brutalist Web Design demo
Brutalist Web Design

A deliberately raw and confrontational web aesthetic featuring monospaced type, stark black-and-white contrast, and exposed, unstyled page structures that reject conventional design polish.
Category: Brutalism & Raw
Era: 2010s Modern
Prompt: 16.3 KB · 2182 words
# SYSTEM PROMPT — BRUTALIST WEB DESIGN LANDING PAGE (FULL BUILD)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt. Generate the final code immediately — no clarifying questions, no partial deliverables.

**Project Definition:**
- **Theme:** Brutalist Web Design — Contemporary Anti-Design Movement. Keywords: brutalist, raw, unpolished, confrontational, monospaced, stark contrast, anti-design, utilitarian, bold typography, exposed structure.
- **Fictional Subject:** Invent one consistent fictional product for the page to sell (e.g., "BRUTAL//KIT — the anti-design website builder"). Every section's copy must serve this product.
- **Sections (in DOM order):** Header (nav + mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (email capture form), Footer with secondary links. Additionally, one Manifesto modal and one toast component.
- **Visual Direction (binding):** Pure black/white base, visible grid structure (exposed 4px borders dividing every region), oversized typography, raw HTML aesthetic, thick harsh borders, zero rounded corners, monospace blocks, stark color blocks, hard offset shadows (no blur), underlined links, deliberate misalignment, yellow highlight blocks.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in `index.html`.
- **Class/ID Selectors Only:** Every design property, layout rule, and state must be targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic. Re-theming the entire page must be achievable by editing `style.css` only — never the markup.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Define all tokens in `:root`; override them in `.dark` and inside `@media (prefers-color-scheme: dark)`.

**Light mode (default) `:root`:**
- **Colors:** `--primary: #000000` (Pure Black); `--secondary: #808080` (Grey); `--accent-red: #FF0000` (Warning Red); `--accent-blue: #0000FF` (System Blue); `--highlight: #FFFF00` (Yellow Highlight).
- **Backgrounds:** `--bg-primary: #FFFFFF`; `--bg-secondary: #FFFF00` (stark highlight-block surface); `--bg-inverted: #000000` paired with `--text-on-inverted: #FFFFFF`. **Exception clause:** the mandatory near-white rule (`#fefefe`) is waived for this build only, because the user's palette explicitly demands Pure White `#FFFFFF` as the light-mode background.
- **Text:** `--text-primary: #000000`; `--text-secondary: #595959` (raw `#808080` fails WCAG AA on white — reserve it for decorative rules and borders only); `--text-success: #0000FF` (System Blue doubles as success, 8.6:1 on white); `--text-error: #CC0000` (darkened Warning Red for body-size text; pure `#FF0000` is reserved for borders, blocks, icons, and large/bold display text).
- **Borders:** `--border-default: #000000`; `--border-error: #FF0000`; `--border-success: #0000FF`; `--border-width: 4px`.
- **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg` all set to `0` — no rounded corners anywhere, per the brutalist mandate.
- **Shadows:** `--shadow-sm: 4px 4px 0 0 #000000`; `--shadow-md: 8px 8px 0 0 #000000` — hard offsets, zero blur.
- **Spacing & Transitions:** `--spacing-gap: clamp(1rem, 3vw, 2rem)`; `--transition-fast: 60ms`; `--transition-normal: 120ms`; `--ease-standard: steps(2, end)` (abrupt, mechanical snaps — no smooth easing).
- **Elevation:** `--z-dropdown: 100`; `--z-modal: 200`; `--z-toast: 300`.
- **Fonts:** `--font-base: 'Space Mono', 'Courier New', monospace`; `--font-display: 'Archivo Black', 'Arial Black', sans-serif`.

**Dark mode overrides (stark inversion):**
- `--primary: #FFFFFF`; `--bg-primary: #000000`; `--bg-inverted: #FFFFFF` (with `--text-on-inverted: #000000`); `--text-primary: #FFFFFF`; `--text-secondary: #ADADAD`; `--text-success: #9999FF` (lightened System Blue for AA on black); `--text-error: #FF0000` (pure red passes on black); `--border-default: #FFFFFF`; `--border-success: #9999FF`; `--border-error: #FF0000`; `--shadow-sm: 4px 4px 0 0 #FFFFFF`; `--shadow-md: 8px 8px 0 0 #FFFFFF`. `--highlight` stays `#FFFF00` with black text in both themes.

- **Contrast Pairing:** every light background token pairs with dark text and every dark background token pairs with light text — white↔black, yellow↔black, red↔black, inverted block↔inverted text. Enforce this pairing in both themes.

### 1.3 Mandatory Dark Mode Support
- **Implementation:** dark tokens defined under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; the explicit user choice always wins over the media query.
- **Theme Switching:** backgrounds, text, borders, and hard shadows flip via variables only — zero HTML restructuring.
- **Persistence:** store the choice in `localStorage`, fall back to `prefers-color-scheme` on first visit; ship a visible toggle in the header with correct `aria-pressed` and `aria-label` ("Toggle dark mode"), swapping Material Symbols `dark_mode`/`light_mode`.
- **Exception clause:** the source spec listed dark mode as unsupported, but dark mode is architecturally mandatory — implement it as the stark black/white inversion defined in 1.2, which is fully on-brand for brutalism.

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an exception is explicitly justified below.
- **Deliberate Misalignment (justified exception):** raw anti-design offsets are permitted only as controlled `transform: translate(...)` / `rotate(-1deg)` values applied via classes to display headings, decorative blocks, and section labels — never to interactive controls, and never altering DOM or focus order.
- **Mobile-Friendly First:** all grids and flex rows collapse to single columns below 768px; no horizontal scrolling at any viewport; oversized type uses `clamp()` so nothing overflows.

### 1.5 Framework Default & Tailwind CSS Integration
- Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives). If Tailwind is used, utilities may only be compiled into the BEM class names defined below — markup must never contain raw utility soup. All styling must resolve to CSS variables or the reusable classes `.btn`, `.card`, `.input-group`, `.highlight`.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** load Google Fonts `Space Mono` (400/700) as `--font-base` and `Archivo Black` as `--font-display` via `<link>` tags in `<head>`. **Exception clause:** the source spec requests system fonts, but Google Fonts are mandatory — the monospace Google Fonts above with `'Courier New'` / `'Arial Black'` fallbacks preserve the raw system aesthetic.
- **Icons:** Google Material Symbols (outlined) only. Raw inline SVGs and local icon files are explicitly forbidden. Style icons starkly: square containers with 4px borders, no rounded corners, `currentColor`.
- **Type Rules:** section headings use `font-size: clamp(1rem, 3vw, 2.5rem)` in `--font-display` with `letter-spacing: -1px`; the hero `<h1>` may scale to `clamp(3rem, 12vw, 9rem)`. Body copy is monospace with `line-height: 1.5`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn--danger`, `.btn--inverted`, `.btn--loading`, `.btn--success`, `.btn--error`, `:disabled`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; uppercase monospace 700; `border: var(--border-width) solid var(--border-default); border-radius: 0; box-shadow: var(--shadow-md); background: var(--primary); color: var(--bg-primary)`.
- **Hover:** the button "presses into" its shadow — `transform: translate(4px, 4px)` with the shadow shrinking to `4px 4px 0`; `cursor: pointer`.
- **Focus:** `:focus-visible` receives a `4px solid var(--accent-blue)` outline with `outline-offset: 4px` — never remove it.
- **Active/Pressed:** `transform: translate(8px, 8px); box-shadow: none`.
- **Loading:** `.btn--loading` disables pointer events, prevents double-clicks, and swaps the label for a square CSS spinner (rotating 4px-bordered block) that preserves the button's exact dimensions.
- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` with no shadow movement.
- **Success/Error:** temporary states tinting border and text with `--text-success` / `--text-error` plus a Material icon (`check` / `error`) — never color alone.
- **Danger:** `.btn--danger` = `background: #FF0000; color: #000000;` with black border and hard black shadow in light mode, white border and shadow in dark mode — visually distinct in both themes.

### 2.2 Card Component (`.card`, `.card--featured`, `.card--skeleton`, `.card--empty`)
- **Default:** flexbox column layout, `background: var(--bg-primary)`, `border: var(--border-width) solid var(--border-default)`, `box-shadow: var(--shadow-md)`, `border-radius: 0`.
- **Hover:** elevation shift via `transform: translate(-2px, -2px)` with a larger offset shadow (or `translateY(-2px)`).
- **Focus-within:** border switches to `var(--accent-blue)` when any child link/button receives focus.
- **Loading (Skeleton):** `.card--skeleton` renders stark placeholder blocks with a stepped `steps()` blink alternating `--bg-primary` / `--secondary` — sized to the final content to prevent layout jumps.
- **Empty State:** centered flex fallback with a Material icon inside a bordered square plus blunt guidance text ("NOTHING HERE. YET.").

### 2.3 Form & Input Requirements (`.input-group`, `.input`, `.input--error`, `.input--success`)
- **Structure:** flex container wrapping a `<label>`, the `<input>`, and a dedicated error `<p>` container (`role="alert"`, wired via `aria-describedby`).
- **States:** empty; focused (4px `var(--accent-blue)` outline ring); filled; valid (blue border + `check` icon); invalid (`--border-error` border, `--text-error` message text, `error` icon, `aria-invalid="true"`); disabled (greyscale, `cursor: not-allowed`); read-only.
- **Styling:** inputs are square monospace blocks with 4px black borders and no shadows; labels are uppercase.

### 2.4 Modal / Popup Requirements (`.modal`, `.modal--open`, `.modal--loading`, `.modal--success`, `.modal--error`, `.modal--closing`)
- **States:** define CSS for opening (abrupt `steps()` snap-in from `translate(0, -16px)`), open, loading (square spinner), success/error, and closing (reverse snap) — all animated via `transition: var(--transition-normal) var(--ease-standard)`.
- **UX Features:** centered flex container (`align-items: center; justify-content: center`), full-screen backdrop (`rgba(0,0,0,0.85)` or a CSS-only diagonal hatch via `repeating-linear-gradient`), `z-index: var(--z-modal)`, Material Symbols `close` button (44×44px, bordered), keyboard focus trapping, close via `Esc` and overlay click, focus returned to the trigger on close.
- **Manifesto Modal:** a "MANIFESTO" link in the header and footer opens this modal containing a short numbered anti-design manifesto. Even if no async data loads, the loading/success/error state classes must exist in the CSS.

### 2.5 Page Section Specifications
- **Header:** sticky, `border-bottom: var(--border-width) solid var(--border-default)`, `background: var(--bg-primary)`. Contains: wordmark in `--font-display`, underlined nav anchor links (hover/focus swaps in a `--highlight` yellow block), the mandatory theme toggle (1.3), and a "SKIP TO CONTENT" skip link as the first focusable element.
- **Hero:** full-viewport flex column; `<h1>` in `--font-display` at `clamp(3rem, 12vw, 9rem)` with `letter-spacing: -1px`, each line in its own `<span>` receiving a different deliberate offset class; one keyword wrapped in `.highlight` (`background: var(--highlight); padding: 2px 6px;`); a monospace meta line; one primary `.btn` plus one underlined secondary link; one stark red accent block.
- **Marquee Divider:** `aria-hidden="true"` full-width strip with `border-block: var(--border-width) solid`, a repeating uppercase slogan scrolling via CSS `@keyframes translateX`; animation halts under `prefers-reduced-motion: reduce`.
- **Features:** 3 `.card`s in `display: grid; grid-template-columns: repeat(3, 1fr)` collapsing to one column under 768px; each card holds a bordered Material icon square, a `--font-display` title, monospace body copy, and a "MORE →" underlined link.
- **How It Works:** semantic `<ol>` of 3 steps; giant `01 / 02 / 03` numerals in `--font-display`, exposed 4px top borders per step, monospace instructions.
- **Testimonials:** 3 `<figure>` + `<blockquote>` + `<figcaption>` quote cards with 4px borders; one card inverted (`--bg-inverted` + `--text-on-inverted`); attributions are underlined links.
- **Pricing:** 3 `.card--pricing` tiers; the middle tier uses `.card--featured` with `background: var(--highlight)` and a "MOST BRUTAL" tag; oversized monospace prices; feature lists with Material `check` icons; one `.btn` per tier (the featured tier uses `.btn--inverted`).
- **FAQ:** native `<details>` / `<summary>` pairs (keyboard-accessible by default); summary styled as a bordered row with the default marker removed and a Material `expand_more` icon rotating 180° on `[open]`; never mouse-only.
- **Final CTA:** inverted block (`--bg-inverted` + `--text-on-inverted`) with an oversized headline and the 2.3 email capture: on submit the button enters `.btn--loading`, validation errors render in the `role="alert"` container, and success flips the button to `.btn--success` and fires the toast.
- **Toast (`.toast`):** fixed bottom-left, 4px border + hard shadow, `z-index: var(--z-toast)`, `role="status"` / `aria-live="polite"`, auto-dismiss, Material `close` button.
- **Footer:** `border-top: var(--border-width)`, grid of secondary link columns (Product / Company / Legal — all underlined), monospace small print, copyright, "BACK TO TOP ↑" link.
- **Exposed Structure:** every section is separated by visible 4px borders and prefixed with a monospace index label (e.g., `[ 02 / FEATURES ]`) to expose the grid.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid `clamp()` sizing, breakpoints at 768px and 480px, zero horizontal overflow at any viewport.
- **Smooth Animations:** every state change uses `transition: var(--transition-normal) var(--ease-standard)` (abrupt steps are intentional and on-theme); `@media (prefers-reduced-motion: reduce)` disables the marquee, all transitions, and decorative transforms.
- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes (the token values in 1.2 are pre-verified). Never rely on color alone — errors pair red with an icon + text + border. Semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`), exactly one `<h1>` with logical heading order, correct ARIA roles/labels on the theme toggle, modal, and toast, logical DOM/focus order, full keyboard operability, and `aria-live` regions for form errors, loading states, and toasts.
- **Mandatory Visual Feedback:** every click, hover, focus, and submission triggers a visible state change (shadow press, yellow link block, border flip, toast).
- **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes (red block + black text, theme-colored border and shadow).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** exactly three files — `index.html`, `style.css`, `script.js`. No inline `<style>` blocks; no inline `<script>` blocks beyond the single `<script src="script.js" defer></script>` entry point. Google Fonts and Material Symbols `<link>` tags in `<head>`.
- **Naming Convention:** BEM only (`block__element--modifier`) plus a closed utility set (`.container`, `.section`, `.highlight`, `.visually-hidden`). Never mix conventions; never invent classes for elements that do not exist in the markup.
- **script.js Scope:** theme toggle with `localStorage` persistence + `aria-pressed` management; modal controller (focus trap, `Esc`, overlay click, focus return); newsletter validation + loading/success states + toast. No other behavioral JavaScript.
- **Copy Rules:** write ALL user-facing copy in English, in a blunt, imperative, confrontational brutalist voice (e.g., "NO ROUNDED CORNERS. NO MERCY."), consistent with the fictional product. Lorem ipsum is forbidden — author real copy for every section, including footer links.
- **No Unrequested Placeholders:** no stub sections, no "coming soon" filler, no lorem-ipsum-only submissions; every requested section ships complete and functional on the first attempt.