Theming

All visual properties are controlled through CSS custom properties defined in your globals.css file. Change a variable once and every component updates automatically.

Color Variables

The default theme uses a soft purple accent with a light background.

Changing Colors

Edit the :root block in your CSS file.

:root {
  --white: #ffffff;
  --black: #000000;
  --main: #B6ACE4;
  --bg: #f0eefc;
  --radius: 5px;
}

Shadows

The signature Neobrutalist shadow is a hard offset with no blur.

--shadow-brutal: 4px 4px 0px 0px var(--black);

Adjust the first two values to change the offset distance. The third value (blur) should remain 0 to maintain the hard edge.

Border Radius

All components use the --radius variable for consistent corners.

--radius: 5px;

Set to 0 for sharp corners or increase for softer edges.

Example Themes

:root {
  --main: #000000;
  --bg: #ffffff;
}

:root {
  --main: #ec4899;
  --bg: #fdf2f8;
}

:root {
  --main: #fde047;
  --bg: #fefce8;
}

Design Principles