Frame System · Vol. 01
Loud,
bordered,
a little crooked.
A maximalist neobrutalist frame system — 4px ink borders, 8px hard shadows, five candy pastels, and tilted decorations that puncture the grid.
01 / 06
Palette
Five Candy Pastels
Pink
#FE90E8
Blue
#C0F7FE
Green
#99E885
Yellow
#F7CB46 · CTA
Cream
#FFDC8B
Off-White
#FFFDF5 · canvas
White
#FFFFFF · cards
Black
#000000 · all borders
Type
Inter × Space Grotesk
heading-xl
Inter 900 · uppercase · −0.03em
Maximal.
heading-lg
Inter 800 · uppercase · −0.02em
Bordered & Bold
stat-number
Inter 900 · line 1
240
body
Inter 500 · sentence case · line 1.6
Body runs Inter at weight 500, sentence case — the calm against the heavy uppercase display.
label
Space Grotesk 600 · uppercase · 0.08em
Section Eyebrow
Components
Borders & Hard Shadows
Feature card + notch + icon
A
Bordered Block
4px ink border + 8px hard offset shadow, square corners.
Stat cards (tilted) + deco dot
240
Output
3.4×
Faster
CTA · list number · stripe
Click Here →
01
Numbered list bullet
Label pills — pastel variants
Pink
Blue
Green
Yellow
Cream
Icon squares + star burst
B
C
Frames
Frame Compositions
Cover
· identity · cream · decorations · left
Frame System
Loud, bordered, crooked.
Feature Cards
· catalog · blue ground · 3-up
Three Laws
Cards on Grounds
A
Border
4px ink on all.
B
Shadow
8px hard offset.
C
Tilt
A little crooked.
Stat Grid
· data · green ground · tilted · the dense frame
By The Numbers
The Tally
240
Output
3.4×
Faster
12K
Shipped
Closing Plate
· closer · black ground · yellow shadow
The End
Stay loud.
Rules
Frame Rules
Do
4px borders + 8px shadows on primary cards; 3px + 4px on chrome.
Cycle pastel grounds across frames; keep the rhythm.
Inter 800–900 uppercase, negative tracking, for all display.
Open every region with a label-pill eyebrow.
Tilt decorations ±2°–12°; add one to every frame.
Don't
No rounded corners (save the stat-deco dot); no blurred shadows.
No colored borders (black only, save the close-frame white).
No sentence-case Inter display; no sixth pastel.
No label rendered as plain text — pill or nothing.
Don't blow a headline edge-to-edge — fit to measure.
BlockFrame
Frame Showcase · Atoms Sacred · Composition Free