BUILD
- Build a complete Neo-brutalism marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs.
- Domain from Use on: memorable landing pages and campaign sites first; consumer apps reuse the border language on fewer cells.
STYLE
- Neo-brutalism: 3px pure-black borders, hard offset shadows with zero blur, saturated flat color
- Page #FFFDF5. Type #0F0F0F. Accent yellow #FFE44D, accent red #FF5C5C, accent mint #7BF1A8 on badges only
- border-radius: 0 everywhere. Hard shadows 6px 6px 0 #0F0F0F on cards, 3px 3px 0 on buttons
- Display: Archivo Black, uppercase, tight tracking. Labels and prices: IBM Plex Mono. No Inter, no pills
LAYOUT
- Container max-width 1120px. 12-column grid with visible 3px rules between bands, not floating gutters
- Top bar is page chrome: wordmark left, three links, search field, primary CTA — with a 3px black rule under it
- Nothing floats free. Every block sits on the paper inside its own border
SECTIONS
1. Hero band: oversized headline "Hard borders. Zero blur.", kicker NEW ISSUE, one dek line, primary CTA Start free plus ghost CTA See the kit
2. Three value cards on #FFE44D / #FF5C5C / #7BF1A8: Ship, Measure, Price — kicker, one line, Read more link each
3. Feature band: two columns, left a yellow cover block, right a numbered list of four claims
4. Pricing strip: three bordered columns, the middle one filled #FFE44D with a 6px hard shadow
5. Closing CTA band on #FF5C5C with white type and one white ghost button
6. Three-column footer: Product / Company / Colophon
INTERACTION
- Hover presses translate(2px, 2px) and shortens hard shadows to 3px 3px 0. Never a 2px lift, never a soft shadow
- Focus is a 3px solid #0F0F0F offset outline, never a glow
- Buttons press into the page on :active — the shadow goes to 0 0 0
MOTION
- Motion is deliberate and short: 80ms steps for presses, 120ms for panel reveals
- Use steps() or a hard cubic-bezier with no bounce. Nothing eases softly
- Entrance is a 6px slide with the shadow arriving last, staggered 40ms per card
- prefers-reduced-motion: no animation, no stagger, states change instantly
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — strip default radius and shadows. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji as icons
- No blur, no backdrop-filter, no glass, no gradient mesh, no soft drop-shadow
- No border-radius above 0 anywhere, including inputs, avatars, and badges
- Do not output only a headline plus two empty cells. Do not clone one yellow card as the whole page
- Do not confuse this with raw Brutalism: this keeps color and legibility, raw Brutalism keeps the skeleton