Style · 11
Brutalism Brutalism = hard edges, raw oversized type, and visible structure; the layout shows its own skeleton.
Hard edges, raw type, visible structure.
Preview North Work About Index Search work Hire Issue 04
Show the structure. A zine for structure. Campaigns in hard rules.
View work
Poster 12
Yellow field. Black rule. If it looks finished, push it harder.
Issue 04 · Print · Read more
Type
Lockup with zero radius Hire red on a hard offset shadow.
Issue 04 · Type · Read more
Campaign
Show the joins Structure stays visible. No capsules.
Issue 03 · Web · Read more Page Overall Page Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
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.
Preview Specimen
Brutalism Hard edges, raw type, visible structure.
Continue Card Card Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a single Brutalism card. Not a page, not a dashboard.
STYLE
- Brutalism: hard edges, raw type, thick rules
- Card fill #EFFF38, 4px solid #0A0A0A rule, hard offset shadow 3px 3px 0 #0A0A0A
- Radius 0 everywhere. Title and kicker #0A0A0A. Continue button #FF2A00, white type, 0 radius, 3px hard shadow #0A0A0A
LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one primary button
- Do not add a navbar or extra tiles
INTERACTION
- Hover presses the card: translate 2px 2px and shorten the hard shadow to 4px 4px. Not a soft lift
CONSTRAINTS
- 0 radius. No pill buttons, no soft drop-shadow, no purple
- No Inter
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to this brutal look — not default shadcn
Buttons Buttons Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Brutalism button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.
STYLE
- 0 radius on all three. Thick rules. White stage with 4px black inset on the specimen well
- Continue: fill #FF2A00, white type, 3px 3px 0 #0A0A0A hard shadow
- Save: fill #FFFFFF, type #0A0A0A, 3px hard shadow #0A0A0A
- Skip: no fill, type #0A0A0A, 2px bottom rule #0A0A0A
LAYOUT
- One horizontal row, tight gap. No card chrome
INTERACTION
- Hover presses each button translate 2px 2px and shortens the hard shadow. Not a float
CONSTRAINTS
- 0 radius. No pill capsules, no soft shadows, no purple
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button — do not keep default shadcn look
Preview North Overview Billing Open
Navbar Navbar Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Brutalism site navbar only. Not tabs, not a page.
STYLE
- Hard bar: fill #EFFF38, 4px solid #0A0A0A, 0 radius
- Wordmark North in #0A0A0A; links Overview and Billing in #0A0A0A; Open is #FF2A00 with 0 radius and 3px hard shadow
LAYOUT
- Single horizontal chrome: wordmark, two links, Open. No panel below
INTERACTION
- Open presses translate 2px 2px on hover. Bar does not lift
CONSTRAINTS
- 0 radius, thick rules, no soft shadow, no purple
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation — not default shadcn
Preview Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
Tabs Tabs Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Brutalism Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- 0 radius. Selected tab: 4px black box, fill #EFFF38, type #0A0A0A weight 600
- Unselected: raw type #0A0A0A on white, no pills
- Panel: #EFFF38 fill, 4px solid #0A0A0A, 16px padding, type #0A0A0A
LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open button
INTERACTION
- Hover on an unselected tab presses translate 2px 2px. Selected stays locked in the 4px box
CONSTRAINTS
- 0 radius + press translate. No rounded capsules, no soft shadows, no purple
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs — do not keep default shadcn look
What is Brutalism? Brutalism shows the structure. Name thick rules, raw type, and zero decoration.
Elements Hard edges Raw type Thick rules Put this word in the prompt.
Copy Prompt 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.