themx
← Back to themes

Neo-Brutalism

bold Visual style

Raw, bold, unapologetically loud

Reference year: 2025

Compare this theme

Best for

Portfolio, Developer tools, Brand & events

Less suitable for

  • Long forms and dense dashboards with thick borders around every item.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Neo-Brutalism preview

Examples

Neo-Brutalism — Hero Section
Hero Section
Neo-Brutalism — Card Grid
Card Grid
Neo-Brutalism — Form
Form
Neo-Brutalism — Dashboard Layout
Dashboard Layout

Color Palette

Primary #FF6B6B
Secondary #4ECDC4
Accent #FFE66D
Background #FFFFFF
Text #2D2D2D

Typography

Heading: Space Grotesk
Body: Inter

Key Characteristics

  • Thick black borders (2-4px) on all interactive elements
  • Bold, saturated color palette with high contrast
  • Visible box shadows offset 4px to bottom-right using black
  • Chunky buttons with scale transforms on hover
  • Raw, unpolished aesthetic — embrace asymmetry
  • Flat design with no gradients, just solid colors
  • Large, bold typography for headings

Tags

high-contrast thick-borders raw chunky

Neo-brutalism takes inspiration from brutalist architecture and the raw aesthetic of early web design, but reinterprets it with modern sensibilities and vibrant colors.

When to Use

Neo-brutalism works well for creative portfolios, indie projects, developer tools, and any brand that wants to stand out with a bold, unconventional look. It signals confidence and a willingness to break conventions.

Key Visual Elements

The style is defined by its thick black borders, offset shadows, and saturated color blocks. Unlike traditional brutalism which favors monochrome, neo-brutalism embraces bright, playful colors while maintaining the raw, structural honesty of its predecessor.

Typography

Use bold, geometric sans-serif fonts for headings (Space Grotesk, Archivo Black) paired with clean body text (Inter, IBM Plex Sans). Headlines should be large and impactful.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Space Grotesk", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #000000;
  --tx-card-border-width: 3px;
  --tx-card-radius: 0;
  --tx-card-shadow: 4px 4px 0 #000;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #000000;
  --tx-card-shadow-hover: 6px 6px 0 #000;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(45,45,45,0.7);
  --tx-text-subtle: rgba(45,45,45,0.5);
  --tx-link-color: #FF6B6B;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #000000;
  --tx-text: #2D2D2D;
  --tx-primary: #FF6B6B;
  --tx-secondary: #4ECDC4;
  --tx-accent: #FFE66D;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Neo-Brutalism

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Portfolio
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Neo-Brutalism (visual-style)
- Thick black borders (2-4px) on all interactive elements
- Bold, saturated color palette with high contrast
- Visible box shadows offset 4px to bottom-right using black
- Chunky buttons with scale transforms on hover
- Raw, unpolished aesthetic — embrace asymmetry
- Flat design with no gradients, just solid colors
- Large, bold typography for headings

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #FF6B6B, secondary #4ECDC4, accent #FFE66D, background #FFFFFF, text #2D2D2D
Typography: Space Grotesk for headings, Inter for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Space Grotesk", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #000000;
  --tx-card-border-width: 3px;
  --tx-card-radius: 0;
  --tx-card-shadow: 4px 4px 0 #000;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #000000;
  --tx-card-shadow-hover: 6px 6px 0 #000;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(45,45,45,0.7);
  --tx-text-subtle: rgba(45,45,45,0.5);
  --tx-link-color: #FF6B6B;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #000000;
  --tx-text: #2D2D2D;
  --tx-primary: #FF6B6B;
  --tx-secondary: #4ECDC4;
  --tx-accent: #FFE66D;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use bold blocks, strong alignment, and a clear hierarchy with limited accent colors.

## Interaction
- Use offset shadows and a small button translation on hover or press.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Neo-Brutalism: Long forms and dense dashboards with thick borders around every item.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.