00 / WHAT IS THIS?
WEB
BRUTALISM.
HONEST. LOUD. ANTI-TEMPLATE.
Born from 1950s architecture — raw concrete, structure exposed, no ornament. On the web it means thick black borders, saturated colors, harsh contrast, chunky type, hover states that thunk. Anti-elegance. Anti-glassmorphism. Anti-AI-template. The components below are everything framr is built from.
01 / PALETTE
COLORS.
PAPER
#FFFFFF
BG · CANVAS
INK
#000000
TEXT · BORDERS
YELLOW
#FFF200
PRIMARY ACTION
MAGENTA
#FF0066
WARNINGS · UPSCALE
CYAN
#00E0FF
SECONDARY ACTION · ZIP ALL
RED
#FF2200
YOUTUBE BRAND
LIME
#C4FF00
RESERVE
02 / TYPE
TYPESETTING.
SPACE GROTESK · 700 · DISPLAY
FRAMR.
SPACE GROTESK · 700 · H2
INSTAGRAM. →→→
SPACE GROTESK · 400 · BODY
The quick brown fox jumps over the lazy dog. 0123456789
JETBRAINS MONO · 700 · TAG
IG_FEED_PORTRAIT 1080×1350
JETBRAINS MONO · 500 · META
WEBP · Q92 · NO UPLOAD. STAYS IN YOUR BROWSER.
03 / BUTTONS
BUTTONS.
PRIMARY · YELLOW
SECONDARY · CYAN
SOLID · INK
WARNING · MAGENTA
BAND · INK
GHOST · TEXT-ONLY
04 / CONTROLS
SLIDER.
05 / FRAME STATES
FRAMES.
01 · SKELETON (400MS)
02 · LOADED
⚠ +28%
03 · UPSCALE WARN
06 / PLATFORM BANDS
BANDS.
INSTAGRAM.→→→5 FORMATS↓ DOWNLOAD SET
GRADIENT · #F58529 → #DD2A7B → #8134AF → #515BD4
TIKTOK.→→→2 FORMATS↓ DOWNLOAD SET
#000000 · NAME #25F4EE · ARROWS #FE2C55
YOUTUBE.→→→4 FORMATS↓ DOWNLOAD SET
#FF0000
X (TWITTER).→→→3 FORMATS↓ DOWNLOAD SET
#000000 · TEXT #FFFFFF
LINKEDIN.→→→5 FORMATS↓ DOWNLOAD SET
#0A66C2
FACEBOOK.→→→5 FORMATS↓ DOWNLOAD SET
#1877F2
07 / RULES
PRINCIPLES.
- SHARP CORNERS ONLY. NO BORDER-RADIUS.
- 3PX BLACK BORDERS EVERYWHERE.
- HOVER STATES THUNK. 4PX SOLID SHADOW, NO BLUR.
- COPY IS CONFRONTATIONAL AND MOSTLY UPPERCASE.
- SATURATED PALETTE OVER SUBTLETY.
- BRAND COLORS MATCH OFFICIAL OR INVERT FOR CONTRAST.
- WARNING ≠ BLOCKER. SHOW THE COST, LET THE USER CHOOSE.