[ The Design System · v1.0 ]
One system.
Every page.
A meticulous design system — the visual language behind every page in PSDboom. Tokens, type, components, motion, and the principles that hold them together.
[ 01 / Color tokens ]
Six tokens. One acid. Hard contrast.
Bone
#F5F0E6
Primary surface
Paper
#EDE7D8
Tinted surface
Ink
#1F1A15
Foreground
Char
#2A241D
Dark surface
Ash
#6B6960
Muted text
Acid
#D4F86E
Primary accent
[ 02 / Typography ]
Bricolage display + Space body.
Hero · Bricolage Grotesque · 96–152px · -4.5%
Make it boom.
H1 · 64–96px
The quick brown fox.
H2 · 48–64px
The quick brown fox.
H3 · 32–48px
The quick brown fox.
H4 · 24–32px
The quick brown fox.
[ 03 / Components ]
The core kit.
Buttons
Tags
Default Acid Ink Outline
Search bar
[ 04 / Preview variants ]
Eleven CSS-rendered scenes.
device
FORM/
FUNCTION
FUNCTION
poster
card
K●
logo
grid
tshirt
PSD●
can
doc
ig
site
abstract
[ 05 / Principles ]
Six rules. Zero exceptions.
01
Editorial > decorative
Type and grid carry the design. Color is structural, never ornamental.
02
One accent at a time
Acid (#D4FF3E) is the only highlight color. Used sparingly.
03
Hard shadows only
Elevation is mass, not depth. No blur, no soft drop-shadows.
04
Mass over thickness
3px borders. Components feel like printed matter.
05
Magnetic motion
All interactions are short and snap-back. No bounces.
06
Swiss density
Generous vertical rhythm, tight horizontal tracking.