BUILD
- Build a complete Brutalism zine / portfolio homepage. Not a card, not an isolated navbar, not a SaaS landing, not tabs.
- Domain from Use on: Portfolios first; Campaigns is a manifesto band, not a second product site.
STYLE
- Brutalism: hard edges, raw type, thick rules
- Page #FFFFFF with 4px #0A0A0A inset on the frame. Type #0A0A0A. Accent yellow #EFFF38. Hire CTA #FF2A00
- border-radius: 0 everywhere. Hard offset shadows 3px 3px 0 #0A0A0A
- Display: Archivo Black, uppercase. Issue numbers: IBM Plex Mono. No Inter. No pills
LAYOUT
- Top bar as page chrome: NORTH, separate Work / About / Index, search, Hire — 4px black rule, yellow field
- Container max-width 1080px. Icarus-like zine home: three work cards with yellow cover bars, sidebar studio profile + index, three-column footer
- Structure is visible: rules, not gutters pretending to be cards
SECTIONS
1. Masthead hero: "Show the structure." Kicker Issue 04. CTA View work / Hire
2. Three work cards with #EFFF38 covers: Poster 12, Type lockup, Show the joins — each with excerpt and Read more
3. Sidebar: North Studio profile, Print/Web/Type counts, Recents
4. Three-column footer: Work / About / Colophon
INTERACTION
- Hover presses translate(2px, 2px); hard shadows shorten to 1px. Never a 2px lift. Never a soft shadow
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 icons
- 0 radius everywhere. No capsules, no blur, no glass
- Do not output only a headline plus two empty cells. Do not clone a yellow card as the whole page
MOTION
- Keep it harsh on purpose: 0ms or 80ms cuts, no easing curve to speak of.
- Where motion is stepped, use steps() rather than a smooth tween.
- No soft fades, no gentle lifts. Softness is the wrong register here.
- prefers-reduced-motion: no animation at all.