Theming System

Themes & Design Tokens

BrutxUI features a highly parameterizable styling system built entirely on CSS Custom Properties (variables). Instead of hardcoding colors, borders, and shadows into tailwind classes, you can fully control the visual aggression of the framework in a single CSS layer.

1. What are the Brutx Tokens?

BrutxUI exposes a complete set of design tokens within `:root` (for light mode) and `.dark` (for dark mode). These tokens map directly to Tailwind CSS utilities such as `bg-brutal-primary`, `border-brutal`, `shadow-brutal-lg`, and `rounded-brutal`.

Token Name	Default Value	Description
--brutal-border-width	3px	Thick border outlines across buttons, inputs, and components.
--brutal-border-color	#000000 / #ffffff	The color applied to all brutal borders.
--brutal-shadow-offset-x	4px	Horizontal offset distance for hard shadows.
--brutal-shadow-offset-y	4px	Vertical offset distance for hard shadows.
--brutal-shadow-color	#000000 / #ffffff	The solid shadow overlay color.
--brutal-radius	0px	Controls rounded corner radius globally.
--brutal-pressed-offset	2px	The translation depth when a button is clicked or pressed.
--brutal-primary	#FF6B6B	Core variant background color (primary).
--brutal-secondary	#4ECDC4	Secondary variant background color.
--brutal-accent	#FFE66D	Accent variant background color (usually yellow).
--brutal-destructive	#EF476F	Color for dangerous alerts, delete triggers, etc.
--brutal-success	#7FB069	Color for success badges and alerts.
--brutal-ring	#000000	Focus outline ring color for keyboard navigation.

2. Customizing Sizing and Outlines

By overriding these variable settings in your global stylesheet, components instantly adjust. You can achieve completely different visual styles with tiny tweaks.

Adjusting Shadows

Decrease or increase the shadow offset length by writing:

:root {
  --brutal-shadow-offset-x: 6px;
  --brutal-shadow-offset-y: 6px;
}

Altering Border Width

Create dynamic borders that apply evenly across forms, cards, and dropdown triggers:

:root {
  --brutal-border-width: 2px;
}

3. Soft vs. Aggressive Brutalism

Neo-brutalism sits on a scale. You can dial it down for a softer SaaS interface or turn it up for a bold game or indie product feel.

Softer Modern Feel

Reduce visual friction with slightly rounded corners, thinner borders, and soft shadows. Perfect for conventional SaaS dashboard panels.

:root {
  --brutal-border-width: 2px;
  --brutal-radius: 8px;
  --brutal-shadow-offset-x: 3px;
  --brutal-shadow-offset-y: 3px;
}

Max Aggression

Make components extremely bold and heavy using 4px black outlines and sharp, unyielding 0px rectangular edges.

:root {
  --brutal-border-width: 4px;
  --brutal-radius: 0px;
  --brutal-shadow-offset-x: 6px;
  --brutal-shadow-offset-y: 6px;
}

4. Built-in Theme Presets

BrutxUI ships out of the box with three pre-coded aesthetic presets. To activate a preset, simply wrap your page or container in the corresponding class.

Preset

Classic Preset (`.theme-classic`)

The definitive high-contrast brutalist profile. Sharp 0px radius, vibrant saturated colors (coral red, mint teal, yellow), and dark black shadows.

<div className="theme-classic">
  <Button variant="primary">Classic Coral</Button>
  <Button variant="secondary">Mint Teal</Button>
</div>

Preset

Pastel Preset (`.theme-pastel`)

A charming, cozy pastel variation. Features soft lavender, mint sage, rounder corners (`8px`), and gentle `2px` slate-gray borders for a playful but clean UI.

<div className="theme-pastel">
  <Button variant="primary">Lavender</Button>
  <Button variant="accent">Peach Accent</Button>
</div>

Preset

Mono Preset (`.theme-mono`)

A high-contrast stark layout consisting entirely of grayscale values, heavy `4px` black outlines, and thick `5px` shadows.

<div className="theme-mono">
  <Button variant="primary">Black Mono</Button>
  <Button variant="secondary">White Mono</Button>
</div>