Mono · 0rem radius

BrutalNew

A ready-made palette for every nextui component and block, in light and dark, with hard shadows. Paste the CSS into globals.css.

Customize in generator

light

background

#ffffff

foreground

#0a0a0a

primary

#fde047

secondary

#f5f5f5

muted

#f5f5f5

accent

#f5f5f5

border

#e5e5e5

destructive

#e7000b

dark

background

#0a0a0a

foreground

#fafafa

primary

#fde047

secondary

#262626

muted

#262626

accent

#262626

border

#2e2e2e

destructive

#ff6467

Preview

Real blocks from the library, rendered in Brutal.

CSS

Tailwind v4 / shadcn variables in OKLCH. Replace the matching block in globals.css.

1/* Brutal · generated by nextui */
2:root {
3  --radius: 0rem;
4  --shadow-xs: 2px 2px 0 0 rgb(0 0 0 / 0.9);
5  --shadow-sm: 3px 3px 0 0 rgb(0 0 0 / 0.9);
6  --shadow-md: 4px 4px 0 0 rgb(0 0 0 / 0.9);
7  --shadow-lg: 6px 6px 0 0 rgb(0 0 0 / 0.9);
8  --background: oklch(1 0 0);
9  --foreground: oklch(0.145 0 0);
10  --card: oklch(1 0 0);
11  --card-foreground: oklch(0.145 0 0);
12  --popover: oklch(1 0 0);
13  --popover-foreground: oklch(0.145 0 0);
14  --primary: oklch(0.905 0.166 98.1);
15  --primary-foreground: oklch(0.145 0 0);
16  --secondary: oklch(0.97 0 0);
17  --secondary-foreground: oklch(0.205 0 0);
18  --muted: oklch(0.97 0 0);
19  --muted-foreground: oklch(0.556 0 0);
20  --accent: oklch(0.97 0 0);
21  --accent-foreground: oklch(0.205 0 0);
22  --destructive: oklch(0.583 0.239 28.5);
23  --border: oklch(0.922 0 0);
24  --input: oklch(0.922 0 0);
25  --ring: oklch(0.905 0.166 98.1);
26}
27
28.dark {
29  --background: oklch(0.145 0 0);
30  --foreground: oklch(0.985 0 0);
31  --card: oklch(0.205 0 0);
32  --card-foreground: oklch(0.985 0 0);
33  --popover: oklch(0.205 0 0);
34  --popover-foreground: oklch(0.985 0 0);
35  --primary: oklch(0.905 0.166 98.1);
36  --primary-foreground: oklch(0.145 0 0);
37  --secondary: oklch(0.269 0 0);
38  --secondary-foreground: oklch(0.985 0 0);
39  --muted: oklch(0.269 0 0);
40  --muted-foreground: oklch(0.709 0 0);
41  --accent: oklch(0.269 0 0);
42  --accent-foreground: oklch(0.985 0 0);
43  --destructive: oklch(0.702 0.189 22.2);
44  --border: oklch(0.301 0 0);
45  --input: oklch(0.348 0 0);
46  --ring: oklch(0.905 0.166 98.1);
47}
48
49/* font-family: ui-monospace, monospace */

Other themes

All themes

Default Ember Ocean Forest Grape Rose Amber Clay

CSS

Tailwind v4 / shadcn variables in OKLCH. Replace the matching block in globals.css.

1/* Brutal · generated by nextui */
2:root {
3  --radius: 0rem;
4  --shadow-xs: 2px 2px 0 0 rgb(0 0 0 / 0.9);
5  --shadow-sm: 3px 3px 0 0 rgb(0 0 0 / 0.9);
6  --shadow-md: 4px 4px 0 0 rgb(0 0 0 / 0.9);
7  --shadow-lg: 6px 6px 0 0 rgb(0 0 0 / 0.9);
8  --background: oklch(1 0 0);
9  --foreground: oklch(0.145 0 0);
10  --card: oklch(1 0 0);
11  --card-foreground: oklch(0.145 0 0);
12  --popover: oklch(1 0 0);
13  --popover-foreground: oklch(0.145 0 0);
14  --primary: oklch(0.905 0.166 98.1);
15  --primary-foreground: oklch(0.145 0 0);
16  --secondary: oklch(0.97 0 0);
17  --secondary-foreground: oklch(0.205 0 0);
18  --muted: oklch(0.97 0 0);
19  --muted-foreground: oklch(0.556 0 0);
20  --accent: oklch(0.97 0 0);
21  --accent-foreground: oklch(0.205 0 0);
22  --destructive: oklch(0.583 0.239 28.5);
23  --border: oklch(0.922 0 0);
24  --input: oklch(0.922 0 0);
25  --ring: oklch(0.905 0.166 98.1);
26}
27
28.dark {
29  --background: oklch(0.145 0 0);
30  --foreground: oklch(0.985 0 0);
31  --card: oklch(0.205 0 0);
32  --card-foreground: oklch(0.985 0 0);
33  --popover: oklch(0.205 0 0);
34  --popover-foreground: oklch(0.985 0 0);
35  --primary: oklch(0.905 0.166 98.1);
36  --primary-foreground: oklch(0.145 0 0);
37  --secondary: oklch(0.269 0 0);
38  --secondary-foreground: oklch(0.985 0 0);
39  --muted: oklch(0.269 0 0);
40  --muted-foreground: oklch(0.709 0 0);
41  --accent: oklch(0.269 0 0);
42  --accent-foreground: oklch(0.985 0 0);
43  --destructive: oklch(0.702 0.189 22.2);
44  --border: oklch(0.301 0 0);
45  --input: oklch(0.348 0 0);
46  --ring: oklch(0.905 0.166 98.1);
47}
48
49/* font-family: ui-monospace, monospace */