# Neo-Brutalist

## Overview
Loud, playful neubrutalism. The entire language is built from three moves: a thick solid black border, a hard offset drop shadow with **zero blur**, and saturated primary color filling big blocks. Nothing is soft — no gradients, no glass, no blur. Depth is faked purely by a single crisp shadow that looks like the object was cut out and pasted on. Interactions are physical: things pop up when you hover and press down when you click. If a screen feels timid, the fix is more contrast and a bolder color block — not restraint.

## Colors & Roles
High-saturation primaries on warm paper. `background` is a warm off-white, `foreground` a near-black. The chromatic trio does the shouting: `primary` electric blue (oklch ~0.55/0.24/255), `secondary` yellow (~0.90/0.19/100), `accent` hot pink (~0.70/0.22/350). These fill whole surfaces — buttons, cards, badges — rather than being used as thin accents. `border` and `input` are the same near-black as `foreground`; the border color **is** the shadow color. In dark mode the surfaces go deep blue-black and `border`/`input`/shadow flip to near-**white**, so the "outline + hard shadow = form" grammar survives the theme switch. `muted` stays low-chroma for supporting text only.

## Typography Rules
Big weight contrast. Display and headings use a heavy face (Archivo Black → Space Grotesk fallback) at weight 700–800, oversized and tracking-tight (`display` = `clamp(3rem, 9vw, 7rem)`, line-height 0.92, −0.03em). Body is Space Grotesk 400 at 1.0625rem / 1.55 for comfortable reading. Labels and badges are uppercase with wide tracking (0.04em) and heavy weight — treat them like stickers slapped on the page. Modular scale ratio ≈ 1.25; the drama comes from weight and size jumps, not a delicate ratio.

## Layout Principles
Max content width 1200px on a 12-column / 24px-gutter grid. Compose like a collage of chunky color blocks, each fenced by a thick border and sitting on its hard shadow. Whitespace is medium — elements crowd together confidently rather than floating in air. Give each section its own rhythm with a contrasting primary-color block and an uppercase label badge to announce it.

## Depth & Elevation
One elevation trick, used everywhere: a single hard offset shadow — `box-shadow: 4px 4px 0 var(--foreground)` — full opacity, blur 0, spread 0, always cast to the bottom-right. Emphasis cards or hover states push it to 6px 6px. Never stack multiple soft shadows, never blur one. The shadow always shares its color with the border. `effects.depth` is high (0.9) but achieved entirely without gradients or glow.

## Shapes
Chunky corners: `box`/`selector` radius ~12px, `field` (inputs/buttons) ~8px. Corners are soft enough to feel friendly but the borders are hard and thick (2–3px). Square (0px) is an acceptable variant, but never mix hairline borders with these shapes.

## Component Stylings
- **Button**: 3px solid `border`, radius ~8px, filled with a saturated primary, heavy uppercase-ish label, `box-shadow: 4px 4px 0 var(--foreground)`. **Hover** lifts it: `translate(-2px,-2px)` and shadow grows to 6px 6px. **Active/press** pushes it into the shadow: `translate(4px,4px)` and shadow collapses to 0 — it looks physically pressed. **Focus** = 3px offset ring. **Disabled** = opacity 0.5, shadow removed, no motion.
- **Card**: 3px border, ~12px radius, 4px 4px hard shadow bottom-right, background `card` or a primary block; padding 24–32px.
- **Input**: 3px border, ~8px radius, `card` background, no inset shadow. Focus adds a 3px ring plus a slightly pressed 2px 2px shadow.
- **Nav**: thick 3px bottom border or a solid primary bar; logo in heavy display type, links as uppercase labels, the CTA keeps its hard shadow.
- **Badge**: uppercase label, 2px border, primary background, may be rotated a couple degrees like a sticker.

## Motion
Physical and snappy, not floaty. Durations are short (100–150ms). Hover uses the `pop` keyframe (lift toward top-left, shadow grows); click uses `press` (drop into the shadow, shadow → 0). Standard easing is crisp; emphasis easing has a slight overshoot (`cubic-bezier(0.34, 1.56, 0.64, 1)`) for a springy bounce. Prefer translate/scale over opacity fades. No parallax.

## Do's and Don'ts
**Do:** border every card and button with 2–3px solid black (white in dark); cast one crisp zero-blur shadow bottom-right; fill big blocks with saturated blue/yellow/pink; make buttons pop on hover and press on click; set headings in a heavy face.
**Don't:** use blurred or multi-layer soft shadows; use gradients, glassmorphism, or pastel low-contrast palettes; draw thin 1px gray dividers; dull the palette into calm neutrals.

## Responsive Behavior
The 12-column grid collapses to a single stacked column on mobile; color blocks become full-width bands. Display type scales via `clamp()`. Shadows and border widths stay constant across breakpoints — the chunkiness is the brand and should not thin out on small screens.

## Agent Prompt Guide
> Build this in the 'Neo-Brutalist' style: thick 2-3px solid black borders on every card and button, hard offset drop shadows with zero blur (4px 4px 0, full-opacity black), saturated electric-blue/yellow/pink primaries filling big blocks, chunky ~12px radius, heavy Archivo-Black display type with uppercase sticker labels, and buttons that pop up on hover and press down (shadow collapses to 0) on click — loud, playful, high-contrast, no gradients.

## Known Gaps / Confidence
Authored seed style (not extracted from a live URL), so all tokens are `manual` confidence. The heavy display face assumes Archivo Black; Space Grotesk is the practical Google-Fonts fallback for both display and body. Dark-mode border/shadow inversion (near-white) is a deliberate call to keep the outline-and-shadow grammar legible on dark surfaces.