creatordesign system
GitHub
Cutouts
Shape & Cutout · Creator Design System

Cutouts

The neo-brutal register: sticker, ticket, stamp, tab, tape, punch, speech — named, sized, and rationed to the moments that should feel handmade.

Where Shapes are geometry, cutouts are material: things that look cut, stuck, stamped or punched. This is the system's neo-brutal register — hard borders, hard offset shadows, honest paper. Use them for callouts, price tags, guestbook notes and anything that should feel handmade; never for body UI.

StickerAccent shadow

.cut.cut-sticker (+ -accent) — the neo-brutal core; buttons press into their shadow

ADMIT ONEFolded cornerA tabbed card

.cut-ticket · .cut-corner · .cut-tab[data-tab]

Taped to the pageRing-boundA brutal speech bubble

.cut-tape · .cut-punch · .cut-speech

cut-smdefaultcut-lg

sizes — .cut-sm / default / .cut-lg scale offset, border and padding together

HookDoes
--cut-offthe hard-shadow offset (3/5/8px by size)
--cut-bwthe border weight
.cut-inverse / [data-surface=inverse]paper shapes on a dark desk — shadow flips to accent