Theming

Customize colors, shadows, and border radius with CSS variables.

Edit the CSS variables in your globals.css to customize colors, shadows, and border radius.

:root {
  --main: #B6ACE4;      /* accent color */
  --bg: #f0eefc;        /* page background */
  --white: #ffffff;     /* component backgrounds */
  --black: #000000;     /* text and borders */
  --radius: 5px;        /* border radius */
  --shadow-brutal: 4px 4px 0px 0px var(--black);
}

Typography

Neobrutal UI looks best with geometric sans-serif fonts that have clear letterforms and strong medium-to-bold weights.

Recommended options:

Public Sans: clean and readable for body text and UI labels
Space Grotesk: expressive headings with a sharper neobrutalist feel
IBM Plex Sans: technical tone with excellent legibility

Use one primary font across components and docs, then optionally layer a second font for headings only.

Next.js setup example

import { Space_Grotesk } from 'next/font/google'

const spaceGrotesk = Space_Grotesk({
  subsets: ['latin'],
  variable: '--font-neobrutal',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body className={`${spaceGrotesk.variable} font-sans`}>{children}</body>
    </html>
  )
}

Then point your theme token to the injected font variable:

@theme inline {
  --font-sans: var(--font-neobrutal);
}

Example Themes

Mint

--main: #97ee88;
--bg: #eefbec;

Lemon

--main: #fed170;
--bg: #fffbf0;

Edit this page on GitHub