Camaleo
EN · PTGitHub
// preview in
saved for every page

Neubrutalism

Thick ink lines, hard shadows and loud color. Proudly unpolished.

Neubrutalism

Thick ink lines, hard shadows and loud color. Proudly unpolished.

Space Grotesk

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Bold
Fonts
Space Grotesk
Radius
6px controls · 8px surfaces
Edges & depth
2px ink borders · hard offset shadow
Motion
120 / 200ms

Use it

import "@camaleo/styles/base.css";
import "@camaleo/styles/neubrutalism.css";

<StyleProvider styleName="neubrutalism">…</StyleProvider>

Fonts are not bundled. The skin asks for Space Grotesk by name, so any loader that registers that family works: next/font (below), a <link> to a font service or your own @font-face.

// app/layout.tsx
import { Space_Grotesk } from "next/font/google";

const spacegrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-spacegrotesk" });

<html className={`${spacegrotesk.variable}`}>

When to use it

Good fit

  • Indie products, creative tools and launches
  • Landing pages that must be remembered
  • Bright brand colors: fills stay flat and loud

Think twice

  • Conservative enterprise audiences
  • Long, dense admin screens: every outline adds weight

Light and dark

Both modes are designed, not inverted, and pass the same contrast checks. The brand comes from the preview bar.

Weekly report

Sent every Monday at 9:00.

Monthly quota
x
Draft
light

Weekly report

Sent every Monday at 9:00.

Monthly quota
x
Draft
dark

Components in Neubrutalism

Real components from the library, in Neubrutalism, with the mode and brand from the preview bar.

Button

As it appears on your ID. We print it on invoices.

Field
Select
Checkbox
Plan
Radio group
Switch
Slider
Number field
Toggle
In reviewNewArchived
Badge
Revenue$48,250+14.2%vs. September
Stat
Uploading invoice-march.pdf
x
Progress
Storage64.2 of 100 GB
x
Meter
CPERLFMS+3
Avatar
How was your stay?
Rating
Chip
Spinner
Tooltip
Copy
Ctrl+C
Paste
Ctrl+V
Find in all files
Ctrl+Shift+F
Kbd

Scheduled maintenance on Sunday

Sign-in will be unavailable from 2:00 to 2:15 AM UTC on November 2. Your data is not affected.

Alert

Trip dates, October 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Range calendar

Acme Store

Online store · created on 03/02/2025

Shown on invoices and in emails to customers.

Tabs
Checkout3 items · $54.80
  1. Cart, done
  2. Shipping
  3. Payment
  4. Review
Stepper
InvoiceStatusAmount
INV-4029Paid$340.00
INV-4028Pending$1,280.50
INV-4027Overdue$75.00
Table

Accordion
Pagination

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Payment approved

    Visa ending in 4242.

  3. Delivered

    Signed for by the front desk.

Timeline

Preview every component page in Neubrutalism →

Tokens

The values this skin sets, read from neubrutalism.css. Override any of them on a parent element to adjust it locally.

Typography
--cml-font-body"Space Grotesk", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-sizeinherits0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display700600
Color
--cml-surfacelight-dark(#fbf5e6, #14130f)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #1f1d18)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#111111, #f5efe0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5c574f, #aaa395)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-fg) = light-dark(#111111, #f5efe0)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#111111, #f5efe0)light-dark(#8e8e98, #71717a)
--cml-accentvar(--cml-brand-500)light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgvar(--cml-brand-500-fg)light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringinheritsvar(--cml-accent-text)
--cml-dangerinheritslight-dark(#b42318, #f97066)
Shape & depth
--cml-border-width2px1px
--cml-radius-control6px8px
--cml-radius-surface8px12px
--cml-radius-popover6px10px
--cml-shadow-control3px 3px 0 var(--cml-ink)none
--cml-shadow-surface6px 6px 0 var(--cml-ink)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width3px2px
Density
--cml-control-height2.5rem2.25rem
--cml-field-height2.5rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast120ms180ms
--cml-duration-base200ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate4px0px
All 308 custom properties this skin sets
--cml-font-body
"Space Grotesk", system-ui, sans-serif
--cml-font-size-control
0.9375rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1rem
--cml-font-size-field
0.9375rem
--cml-font-size-label
0.875rem
--cml-font-weight-control
600
--cml-font-weight-label
600
--cml-font-weight-display
700
--cml-font-weight-error
600
--cml-surface
light-dark(#fbf5e6, #14130f)
--cml-surface-raised
light-dark(#ffffff, #1f1d18)
--cml-fg
light-dark(#111111, #f5efe0)
--cml-fg-secondary
light-dark(#3b3833, #d3ccbd)
--cml-fg-muted
light-dark(#5c574f, #aaa395)
--cml-border
var(--cml-fg)
--cml-border-control
var(--cml-fg)
--cml-accent
var(--cml-brand-500)
--cml-accent-fg
var(--cml-brand-500-fg)
--cml-accent-hover
var(--cml-brand-500-hover)
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-backdrop
light-dark(rgb(17 17 17 / 0.5), rgb(0 0 0 / 0.7))
--cml-item-highlight
var(--cml-highlight)
--cml-item-highlight-fg
var(--cml-highlight-fg)
--cml-disabled-opacity
1
--cml-ink
var(--cml-fg)
--cml-prose
light-dark(#2b2823, #e4ddce)
--cml-soft
light-dark(#ece4d0, #2b2822)
--cml-highlight
#ffd23f
--cml-highlight-fg
#111111
--cml-danger-fill
#ff5c5c
--cml-disabled-border
light-dark(#8a8478, #77715f)
--cml-disabled-fg
light-dark(#6b665c, #9c9688)
--cml-press-translate
4px
--cml-lift
calc(var(--cml-press-translate) / 4)
--cml-border-width
2px
--cml-radius-control
6px
--cml-radius-control-sm
6px
--cml-radius-control-lg
6px
--cml-radius-surface
8px
--cml-radius-popover
6px
--cml-radius-check
4px
--cml-shadow-control
3px 3px 0 var(--cml-ink)
--cml-shadow-control-active
none
--cml-shadow-surface
6px 6px 0 var(--cml-ink)
--cml-shadow-popover
4px 4px 0 var(--cml-ink)
--cml-focus-width
3px
--cml-focus-offset
2px
--cml-control-height
2.5rem
--cml-control-height-sm
2rem
--cml-control-height-lg
3rem
--cml-control-padding
1rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.375rem
--cml-surface-padding
1.25rem
--cml-button-outline-border
var(--cml-ink)
--cml-button-ghost-decoration
underline 2px
--cml-toggle-pressed-fg
var(--cml-surface-raised)
--cml-field-height
2.5rem
--cml-field-padding
0.75rem
--cml-field-border-width
2px
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
0 0 0 0 transparent
--cml-radius-field
6px
--cml-check-size
1.25rem
--cml-check-border-width
2px
--cml-check-shadow
2px 2px 0 var(--cml-ink)
--cml-check-on-border
var(--cml-ink)
--cml-check-on-shadow
2px 2px 0 var(--cml-ink)
--cml-radio-dot-shadow
0 0 0 1.5px var(--cml-ink)
--cml-switch-width
2.75rem
--cml-switch-height
1.5rem
--cml-switch-border
2px
--cml-switch-pad
2px
--cml-switch-knob
16px
--cml-switch-knob-on
16px
--cml-switch-track
var(--cml-soft)
--cml-switch-knob-bg
var(--cml-surface-raised)
--cml-switch-knob-on-bg
var(--cml-surface-raised)
--cml-switch-on-shadow
2px 2px 0 var(--cml-ink)
--cml-slider-track-h
14px
--cml-slider-track
var(--cml-surface-raised)
--cml-slider-track-border
2px
--cml-slider-thumb-w
1.375rem
--cml-slider-thumb-h
1.375rem
--cml-slider-thumb-bg
var(--cml-surface-raised)
--cml-slider-thumb-border
2px solid var(--cml-ink)
--cml-slider-thumb-shadow
2px 2px 0 var(--cml-ink)
--cml-number-weight
600
--cml-number-btn-size
2.5rem
--cml-number-btn-bg
var(--cml-soft)
--cml-number-divider
2px solid var(--cml-ink)
--cml-select-trigger-shadow
var(--cml-shadow-control)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
var(--cml-ink)
--cml-popover-border-width
2px
--cml-popover-padding
4px
--cml-radius-item
4px
--cml-dialog-border
var(--cml-ink)
--cml-tabs-list-border
var(--cml-ink)
--cml-tab-radius
6px 6px 0 0
--cml-tab-active-bg
var(--cml-ink)
--cml-tab-active-fg
var(--cml-surface-raised)
--cml-tab-active-shadow
none
--cml-duration-fast
120ms
--cml-duration-base
200ms
--cml-ease-standard
cubic-bezier(0.2, 0, 0, 1)
--cml-motion-distance
6px
--cml-motion-scale
1
--cml-card-border
var(--cml-ink)
--cml-card-shadow
4px 4px 0 var(--cml-ink)
--cml-avatar-bg
var(--cml-soft)
--cml-avatar-fg
var(--cml-fg)
--cml-skeleton
light-dark(#e6ddc7, #2f2c25)
--cml-scrollbar-size
14px
--cml-scrollbar-track
var(--cml-surface-raised)
--cml-scrollbar-track-shadow
inset 0 0 0 2px var(--cml-ink)
--cml-scrollbar-thumb
var(--cml-ink)
--cml-scrollbar-idle-opacity
1
--cml-input-addon-bg
var(--cml-soft)
--cml-input-addon-fg
var(--cml-fg)
--cml-input-addon-divider
2px solid var(--cml-ink)
--cml-input-button-on-bg
var(--cml-ink)
--cml-otp-gap
0.625rem
--cml-otp-cell-width
2.75rem
--cml-otp-cell-height
3rem
--cml-otp-cell-radius
6px
--cml-otp-font-size
1.25rem
--cml-otp-font-weight
700
--cml-otp-separator
var(--cml-ink)
--cml-tag-height
1.75rem
--cml-tag-bg
var(--cml-soft)
--cml-tag-fg
var(--cml-fg)
--cml-tag-border
2px solid var(--cml-ink)
--cml-tag-radius
4px
--cml-tag-font-size
0.875rem
--cml-tag-font-weight
600
--cml-dropzone-bg
var(--cml-surface-raised)
--cml-dropzone-border
2px dashed var(--cml-ink)
--cml-dropzone-radius
8px
--cml-dropzone-active-bg
light-dark(#fff4cc, #2e2914)
--cml-dropzone-icon-bg
var(--cml-highlight)
--cml-dropzone-icon-fg
var(--cml-highlight-fg)
--cml-dropzone-icon-border
2px solid var(--cml-ink)
--cml-dropzone-icon-shadow
2px 2px 0 var(--cml-ink)
--cml-file-item-bg
var(--cml-surface-raised)
--cml-file-item-border
2px solid var(--cml-ink)
--cml-file-item-radius
8px
--cml-file-item-shadow
3px 3px 0 var(--cml-ink)
--cml-file-icon-bg
var(--cml-soft)
--cml-file-icon-fg
var(--cml-fg)
--cml-file-icon-radius
6px
--cml-star-size
1.625rem
--cml-star-color
var(--cml-ink)
--cml-star-empty
var(--cml-ink)
--cml-star-fill
var(--cml-highlight)
--cml-chip-height
2rem
--cml-chip-bg
var(--cml-surface-raised)
--cml-chip-fg
var(--cml-fg)
--cml-chip-border
2px solid var(--cml-ink)
--cml-chip-shadow
2px 2px 0 var(--cml-ink)
--cml-chip-font-size
0.875rem
--cml-chip-on-bg
var(--cml-ink)
--cml-chip-on-fg
var(--cml-surface-raised)
--cml-chip-on-border
2px solid var(--cml-ink)
--cml-chip-on-shadow
none
--cml-chip-on-translate
min(2px, var(--cml-press-translate)) min(2px, var(--cml-press-translate))
--cml-calendar-border
2px solid var(--cml-ink)
--cml-calendar-radius
8px
--cml-calendar-shadow
4px 4px 0 var(--cml-ink)
--cml-calendar-title-weight
700
--cml-calendar-nav-size
2rem
--cml-calendar-nav-radius
6px
--cml-calendar-nav-bg
var(--cml-surface-raised)
--cml-calendar-nav-border
2px solid var(--cml-ink)
--cml-calendar-nav-shadow
2px 2px 0 var(--cml-ink)
--cml-calendar-header-fg
var(--cml-fg)
--cml-calendar-header-weight
700
--cml-calendar-header-transform
uppercase
--cml-calendar-header-tracking
0.04em
--cml-calendar-cell-radius
6px
--cml-calendar-cell-weight
600
--cml-calendar-today-border
2px solid var(--cml-ink)
--cml-calendar-today-bg
var(--cml-highlight)
--cml-calendar-today-fg
var(--cml-highlight-fg)
--cml-calendar-selected-bg
var(--cml-accent)
--cml-calendar-selected-fg
var(--cml-accent-fg)
--cml-calendar-selected-border
2px solid var(--cml-ink)
--cml-calendar-selected-shadow
2px 2px 0 var(--cml-ink)
--cml-calendar-range-bg
var(--cml-soft)
--cml-calendar-range-fg
var(--cml-fg)
--cml-calendar-range-border
1px solid var(--cml-ink)
--cml-segment-radius
4px
--cml-segment-focus-bg
var(--cml-highlight)
--cml-segment-focus-fg
var(--cml-highlight-fg)
--cml-segment-focus-border
1.5px solid var(--cml-ink)
--cml-stat-border
var(--cml-ink)
--cml-stat-radius
8px
--cml-stat-shadow
4px 4px 0 var(--cml-ink)
--cml-stat-label-weight
700
--cml-stat-label-transform
uppercase
--cml-stat-label-tracking
0.04em
--cml-stat-value-weight
700
--cml-table-head-bg
var(--cml-soft)
--cml-table-head-fg
var(--cml-fg)
--cml-table-head-transform
uppercase
--cml-table-head-tracking
0.04em
--cml-table-row-selected-bg
var(--cml-highlight)
--cml-table-row-selected-fg
var(--cml-highlight-fg)
--cml-table-footer-bg
var(--cml-soft)
--cml-data-list-term-bg
var(--cml-soft)
--cml-data-list-term-fg
var(--cml-fg)
--cml-data-list-term-transform
uppercase
--cml-data-list-term-tracking
0.04em
--cml-ring-linecap
butt
--cml-ring-track
var(--cml-soft)
--cml-meter-height
0.75rem
--cml-meter-bg
var(--cml-soft)
--cml-meter-border
var(--cml-ink)
--cml-meter-radius
4px
--cml-timeline-dot-radius
4px
--cml-timeline-line
var(--cml-ink)
--cml-tree-row-radius
4px
--cml-tree-selected-bg
var(--cml-highlight)
--cml-tree-selected-fg
var(--cml-highlight-fg)
--cml-tree-selected-border
2px solid var(--cml-ink)
--cml-tree-selected-shadow
2px 2px 0 var(--cml-ink)
--cml-code-bg
#171717
--cml-code-fg
#f5f5f5
--cml-code-header-bg
#262626
--cml-code-header-fg
#fafafa
--cml-code-header-border
var(--cml-ink)
--cml-code-border
var(--cml-ink)
--cml-code-radius
8px
--cml-code-shadow
4px 4px 0 var(--cml-ink)
--cml-carousel-slide-bg
var(--cml-soft)
--cml-carousel-slide-border
var(--cml-ink)
--cml-carousel-slide-radius
6px
--cml-carousel-dot-radius
2px
--cml-app-shell-bg
var(--cml-surface)
--cml-app-shell-header-bg
var(--cml-surface)
--cml-app-shell-header-border
2px solid var(--cml-ink)
--cml-sidebar-bg
var(--cml-soft)
--cml-sidebar-border
2px solid var(--cml-ink)
--cml-sidebar-brand-border
2px solid var(--cml-ink)
--cml-sidebar-footer-border
2px solid var(--cml-ink)
--cml-sidebar-item-radius
4px
--cml-sidebar-item-active-bg
var(--cml-highlight)
--cml-sidebar-item-active-fg
var(--cml-highlight-fg)
--cml-sidebar-indicator-bg
var(--cml-ink)
--cml-sidebar-indicator-width
4px
--cml-sidebar-group-label-size
0.6875rem
--cml-sidebar-group-label-weight
700
--cml-sidebar-group-label-transform
uppercase
--cml-sidebar-group-label-tracking
0.04em
--cml-nav-popup-bg
var(--cml-surface)
--cml-nav-popup-border
2px solid var(--cml-ink)
--cml-nav-popup-radius
8px
--cml-nav-item-radius
4px
--cml-nav-trigger-open-bg
var(--cml-highlight)
--cml-menubar-bg
var(--cml-surface)
--cml-menubar-border
2px solid var(--cml-ink)
--cml-menubar-radius
6px
--cml-menubar-shadow
2px 2px 0 var(--cml-ink)
--cml-menubar-active-bg
var(--cml-ink)
--cml-menubar-active-fg
var(--cml-surface)
--cml-menubar-trigger-radius
4px
--cml-toolbar-bg
var(--cml-surface)
--cml-toolbar-border
2px solid var(--cml-ink)
--cml-toolbar-radius
6px
--cml-toolbar-shadow
3px 3px 0 var(--cml-ink)
--cml-toolbar-btn-radius
4px
--cml-toolbar-toggle-active-bg
var(--cml-highlight)
--cml-toolbar-toggle-active-border
2px solid var(--cml-ink)
--cml-toolbar-toggle-active-fg
var(--cml-highlight-fg)
--cml-stepper-line
2px solid var(--cml-ink)
--cml-stepper-completed-line
2px solid var(--cml-ink)
--cml-stepper-completed-bg
var(--cml-highlight)
--cml-stepper-completed-fg
var(--cml-highlight-fg)
--cml-stepper-completed-border
2px solid var(--cml-ink)
--cml-stepper-current-bg
var(--cml-surface)
--cml-stepper-current-fg
var(--cml-fg)
--cml-stepper-current-border
2px solid var(--cml-ink)
--cml-stepper-error-bg
var(--cml-danger-fill)
--cml-stepper-error-fg
var(--cml-highlight-fg)
--cml-stepper-error-border
2px solid var(--cml-ink)
--cml-step-indicator-radius
6px
--cml-step-indicator-bg
var(--cml-soft)
--cml-step-indicator-fg
var(--cml-fg)
--cml-step-indicator-border
2px solid var(--cml-ink)
--cml-cmd-bg
var(--cml-surface)
--cml-cmd-border
2px solid var(--cml-ink)
--cml-cmd-radius
8px
--cml-cmd-header-border
2px solid var(--cml-ink)
--cml-cmd-footer-border
2px solid var(--cml-ink)
--cml-cmd-active-bg
var(--cml-highlight)
--cml-cmd-active-fg
var(--cml-highlight-fg)
--cml-hover-card-bg
var(--cml-surface)
--cml-hover-card-border
2px solid var(--cml-ink)
--cml-hover-card-radius
8px
--cml-toggletip-bg
var(--cml-surface)
--cml-toggletip-border
2px solid var(--cml-ink)
--cml-toggletip-radius
6px
--cml-splitter-border
2px solid var(--cml-ink)
--cml-splitter-handle-bg
var(--cml-soft)
--cml-splitter-radius
4px
--cml-splitter-active-bg
var(--cml-highlight)
--cml-splitter-grip
var(--cml-ink)

Same family

Other skins in the Bold family. Compare side by side →

RetroThe classic desktop, rebuilt with real contrast and keyboard support.Retro pixel8-bit edges: 4px pixel borders, stepped corners, chunky type.Y2KMillennium plastic and chrome: glossy jelly buttons and Aqua pinstripes.
Was this page helpful? · Edit this page on GitHub