zack bonds / portfolio
A living reference for every token powering this site. Colors, type, spacing, radius, and shadows.
The system is intentionally restrained. Neutral surfaces, tight type, and quiet UI keeps the noise down so the work and imagery can do the heavy lifting.
01 — Color / Surface
Background
--bg
Elevated
--bg-elevated
Hover
--bg-hover
Active
--bg-active
Sidebar
--sidebar-bg
02 — Color / Text
Primary
The quick brown fox jumps over the lazy dog.
--text
Muted
The quick brown fox jumps over the lazy dog.
--text-muted
Faint
The quick brown fox jumps over the lazy dog.
--text-faint
03 — Color / Border
Default
--border
Strong
--border-strong
04 — Typography / Scale
Display
Aa
clamp(48px, 7vw, 96px)
3XL
Aa
clamp(36px, 5vw, 60px)
2XL
Aa
clamp(28px, 3.5vw, 40px)
XL
Aa
clamp(22px, 2.5vw, 28px)
LG
Aa
20px
MD
Aa
16px
Base
Aa
14px
SM
Aa
12px
XS
Aa
10px
05 — Typography / Families
06 — Spacing
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
--space-24
96px
07 — Border Radius
SM
6px
MD
8px
LG
12px
XL
16px
Pill
999px
08 — Shadows
SM
0 1px 3px rgba(0,0,0,0.07)
MD
0 4px 16px rgba(0,0,0,0.07)
LG
0 8px 32px rgba(0,0,0,0.10)
09 — Animation / Scatter
Hover to trigger
Good design is invisible.
Auto — fires every ~5s
Product and visual design.
10 — Iconography
Home
Work
About
Resume
Arcade
ZackGPT
Chevron L
Chevron R
Menu
Close
Dribbble
Arrow ↗
Grid
List
Chat
10b — Iconography / Animated
Trending
Draws in
Target
Radar pulse
Layers
Stack shift
Refresh
Slow spin
Zap
Flicker
Eye
Blink
Heart
Heartbeat
Users
Join sway
11 — Motion / Transitions
Fast
0.15s
ease
Hover — color, opacity, border
Entry
0.55s
ease
FadeUp — scroll entry, opacity + Y
Stagger
+50ms
—
Offset delay per child element
Fast · 0.15s ease
Color
Opacity
Border
12 — Pixel Cat
Sleep
Idle default
Wake Up
On hover/click
Idle
Awake + portfolio
Groom
After walk
Bat
On click
Walk
Sidebar roam