Brutalism

Stylegeneral

Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design. Best for Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs.

Raw unpolished stark high contrast plain text default fonts visible borders asymmetric

#FF0000

#0000FF

#FFFF00

#000000

#FFFFFF

#00FF00

#FF00FF

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Brutalism

Keywords: Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design
Primary colours: Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF
Secondary colours: Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary
Effects & animation: No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks
Best for: Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs
Do not use for: Corporate environments, conservative industries, critical accessibility, customer-facing professional

## Prompt keywords
Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.

## CSS / technical
border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF

## Implementation checklist
☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional

## Design system variables
--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source