Brutalism demo
Brutalism

A deliberately raw and unpolished web style featuring stark layouts, harsh contrasts, exposed structure, and bold unrefined typography.
Category: Brutalism & Raw
Era: 2020s Modern
Prompt: 10.6 KB · 1489 words
# SYSTEM PROMPT: Brutalist Landing Page — Complete Build Specification

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Brutalist Landing Page** in a single attempt. Follow every rule below exactly. Do not ask clarifying questions — deliver the final code immediately.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling must live in a dedicated `style.css` file. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target every element via class or ID selectors only.
- HTML must remain semantic and clean; all visual changes happen in CSS only.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root` and theme classes:

- **Colors:** `--primary: #000000`, `--secondary: #FFFFFF`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success: #00FF00`, `--text-error: #FF0000`, `--border-default`, `--border-error`, `--border-success`.
- **Accent tokens:** `--accent-neon-green: #00FF00`, `--accent-hot-pink: #FF00M` → correct to `#FF00FF`, `--accent-electric-blue: #0000FF`, `--accent-yellow: #FFFF00`, `--accent-grey: #808080`.
- **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa — enforced in both light and dark themes.
- **Light Mode Background:** Do not use pure `#ffffff` as the page background; use `#fefefe` where near-white is required. Pure white is reserved for blocks/borders per the brutalist palette.
- **Radius & Shadows:** `--radius-sm: 0px`, `--radius-md: 0px`, `--radius-lg: 0px` (brutalism = sharp corners, always). `--shadow-sm`, `--shadow-md` must be **hard offset shadows** (e.g., `8px 8px 0 #000000`) — no blur, no soft shadows.
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: none`, `--transition-normal: none`, `--ease-standard: none`. **All transitions are disabled** — state changes must be instant.
- **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.

### 1.3 Mandatory Dark Mode Support
- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`/`<body>`.
- Dark mode inverts: `--bg-primary: #000000`, `--text-primary: #FFFFFF`, borders flip to white, hard shadows become white/black offset blocks.
- Persist user choice via `localStorage` in `script.js`; fall back to `prefers-color-scheme` on first visit.
- Include a visible theme toggle button with correct `aria-pressed` and `aria-label` states. The toggle itself must be brutalist: bordered block, monospace label (e.g., `MODE: LIGHT` / `MODE: DARK`), instant swap, no animation.

### 1.4 Flexbox Layout & Mobile-First
- Build all layout structures with Flexbox (`display: flex`).
- Every flex container defaults to `align-items: center` unless a documented exception exists (e.g., intentional misalignment for the brutalist "broken" aesthetic — justify each exception in a CSS comment).
- All layouts must be mobile-responsive: rows collapse to columns on small viewports. **No horizontal scrolling at any breakpoint** — the intentional overlap effects must degrade gracefully on mobile.

### 1.5 Framework Default
Use plain, hand-written CSS (no Tailwind required for this theme — the raw aesthetic demands full control). Define reusable classes: `.btn`, `.card`, `.input-group`, `.section`, `.container`. One naming convention (BEM or fixed utility set) throughout — never mix.

### 1.6 Typography & Icons
- **Fonts:** Load **Google Fonts** — use a monospace display font (e.g., `Space Mono` or `IBM Plex Mono`) bound to `--font-base`. Fallback stack: `'Courier New', monospace, system-ui`.
- **Icons:** Google Material Symbols only. **Inline SVGs and local icon files are forbidden.**
- Typography rules: `font-weight: 900`, `text-transform: uppercase` on headings and buttons, oversized hero type via `clamp(2rem, 8vw, 10rem)`, tight/negative letter-spacing on display text.

---

## 2. BRUTALIST VISUAL DIRECTION (MANDATORY)

- **Raw & stark:** No polish, no gradients, no rounded corners, no blur, no soft shadows.
- **Borders:** Thick visible borders, `3px–5px solid`, using `--border-default`.
- **Hard shadows:** `box-shadow: 8px 8px 0 var(--primary)` style only. On hover, shift the shadow offset (e.g., `4px 4px 0`) and translate the element — instant, no transition.
- **Intentional overlap:** At least one section (e.g., hero headline over a marquee strip, or a testimonial card overlapping the section boundary) uses `mix-blend-mode: difference` or negative margins to create the "broken" layout effect. Keep this desktop-scoped or simplified on mobile to avoid overflow.
- **Visible grid:** Sections separated by full-width horizontal rules (4px solid); optional vertical grid lines via borders on a flex column layout.
- **Accent usage:** Neon green, hot pink, electric blue, yellow used as loud, sparing accent blocks — highlight words, hover fills, tag labels. Never as subtle gradients.
- **Anti-design details:** Slightly rotated elements (e.g., `transform: rotate(-1deg)` on a badge), mismatched column widths, oversized raw labels like `[ 01 ]`, `///`, `>>>` as section markers.

---

## 3. SECTIONS TO BUILD (IN ORDER)

1. **Header/Nav:** Sticky top bar, thick bottom border, monospace logo text, nav links, theme toggle. Mobile: collapse to a simple stacked or bordered menu (no smooth animation — instant show/hide).
2. **Hero:** Full-viewport block, `#fefefe` (light) / `#000000` (dark) background, massive `clamp(2rem, 8vw, 10rem)` weight-900 uppercase headline, one accent word in neon green or hot pink, a bordered sub-line, and two CTAs (primary filled black/white, secondary outlined). Include one overlapping element with `mix-blend-mode: difference`.
3. **Features (3 cards):** Flex row → column on mobile. Each card: thick border, hard shadow, large Google Material Symbol icon, `[ 01 ]`-style index label, uppercase heading, body text. Hover: instant shadow-shift + translate.
4. **How It Works (3 steps):** Numbered steps with oversized raw numerals (900 weight), connected by visible border lines; alternating black/white blocks for contrast.
5. **Testimonials:** At least 3 quote blocks; one intentionally rotated or overlapping the section edge. Include names/roles in monospace.
6. **Pricing (3 tiers):** Middle tier visually emphasized (inverted colors, larger border, "MOST RAW" style badge). Each tier: price in oversized type, feature list with Material Symbols check icons, CTA button.
7. **FAQ:** Use native `<details>`/`<summary>` elements styled brutally (thick borders, `+`/`−` indicator via Material Symbol, instant open/close — no animation).
8. **Final CTA:** Full-width inverted block (black on light theme, white-on-black text on dark theme) with massive headline and a single loud button.
9. **Footer:** Thick top border, secondary links in columns, monospace copyright, repeating decorative text strip (e.g., `BRUTAL /// BRUTAL /// BRUTAL`).

---

## 4. COMPONENT STATE REQUIREMENTS

### 4.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, uppercase, weight 900, 3px border, hard shadow.
- **Hover:** Instant — background inverts (black↔white) or fills with an accent color; shadow offset shrinks; `cursor: pointer`. **No transition property.**
- **Focus:** Distinct 4px offset outline using `--accent-electric-blue` for keyboard navigation.
- **Active/Pressed:** `transform: translate(4px, 4px)` with shadow removed — instant.
- **Loading:** Disabled interaction, spinner rendered via a rotating bordered square (CSS-only, `border` + `animation: spin`) or animated Material Symbol; button dimensions must not change.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** Temporary fill using `--text-success` / `--text-error` tokens.
- **Danger:** `.btn-danger` uses `--accent-bright-red` fill/border — visually distinct in both themes.

### 4.2 Cards (`.card`)
- **Default:** Flexbox, `--bg-secondary`, 4px border, hard shadow.
- **Hover:** Instant shadow-shift + `translateY(-2px)` (no transition).
- **Focus-within:** Border color changes to accent when a child link/button has focus.
- **Skeleton:** Shimmer-free brutalist loading — a blinking (steps-timing, instant toggle) grey block; no layout jump.
- **Empty State:** Material Symbol icon + guidance text in a bordered block.

### 4.3 Forms (newsletter signup in footer or CTA)
- Wrap label, input, and error container in a flex `.input-group`.
- **States:** Empty, focused (4px accent outline ring), filled, valid (neon green border + check icon), invalid (`--border-error`, red text, error Material Symbol), disabled, read-only.
- Errors announced via an `aria-live="polite"` region.

### 4.4 Modal (FAQ "contact" or pricing detail — optional but if included)
- Opening/open/closing with **instant** visibility toggles (no fade animations).
- Centered flex overlay, backdrop solid black at 90% opacity, Material Symbol close button, focus trap, `Esc` and overlay-click close, `role="dialog"` + `aria-modal="true"`.

---

## 5. CORE UX & ACCESSIBILITY RULES

- **Responsive by default:** Fluid `clamp()` typography, breakpoints via flex-wrap and media queries, zero horizontal overflow.
- **Instant, not absent, feedback:** `transition: none` everywhere, but every hover/click/submit must produce a visible state change.
- **`prefers-reduced-motion`:** Disable the loading spinner animation and any marquee/blink effects.
- **Accessibility:** WCAG-sufficient contrast in both themes (neon accents on black pass; never put yellow text on white). Never rely on color alone — pair error states with icons and text. Semantic HTML5 (`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`, `<details>`), logical focus order, full keyboard operability, `aria-live` regions for dynamic feedback.
- **Destructive actions:** Visually distinct via `.btn-danger` in both themes.

---

## 6. DELIVERABLES & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — separate files. Only one deferred `<script src="script.js">` reference in the HTML; no inline script blocks.
- **script.js scope:** Theme toggle + `localStorage` persistence, mobile nav toggle, newsletter form validation, FAQ aria enhancements, and button loading-state demo logic only. Nothing more.
- **Naming:** One consistent convention (BEM recommended: `.card__title`, `.card--featured`) throughout.
- **Copy:** Write all user-facing copy in **English**. Loud, blunt, anti-marketing brutalist voice (e.g., "NO GRADIENTS. NO MERCY."). No lorem ipsum — write real copy for every section.
- **Comments:** Brief CSS comments justifying any `align-items` exception and each intentional "broken" layout choice.

Build the complete landing page now, in one attempt, following every rule above.