B
HARDSTOP
★ THICK BORDERSHARD OFFSET SHADOW★ NO GRADIENTSPRESS = COMPRESS★ ACID HIGHLIGHTMONO + GROTESK ★ THICK BORDERSHARD OFFSET SHADOW★ NO GRADIENTSPRESS = COMPRESS★ ACID HIGHLIGHTMONO + GROTESK
Component / Button

BUTTONS
WITH A
SPINE.

A full button system rendered in raw brutalist craft. Thick black borders, a hard offset shadow that compresses on press, no soft gradients, no apologies. Every variant, size and state on one canvas.

live_preview.tsx
← compresses
01 / Anatomy

The shadow is the whole point.

offset 5px / 5px
border 3px solid
lifts -1px
shadow grows to 6px
drops +5px into shadow
shadow → 0 (compressed)
02 / Variants

Five flavors, one backbone.

acid
paper
ink
ghost
flat
03 / Sizes

Small → Medium → Large.

sm · 12px · 2px border
md · 15px · 3px border
lg · 19px · 4px border
04 / With Icon

Labels, Icons & Squares.

leading icon
trailing icon
icon only
icon · acid
05 / States

Every state, on the record.

default
hover
active
disabled
loading
success
focus-ring
danger
06 / Matrix

Variant × Size, Full Sweep.

Variant ↓ / Size → Small Medium Large
Primary
Secondary
Inverse
Icon

Ship this
button system.

Drop the prompt into Superdesign and it generates the whole brutalist set: borders, offset shadows, press-to-compress, every variant and state.

// prompt

Design a brutalist button system: 3px black borders, hard 5px offset shadow that compresses to 0 on active. Variants: primary (acid-yellow), secondary, inverse, ghost, no-shadow. Sizes sm/md/lg. States: default, hover, pressed, disabled, loading.