// design-system
All tokens, components, and patterns used across the portfolio and experiment pages.
Default palette · data-theme="dark"
Background
--color-bg
Background 2
--color-bg2
UI
--color-ui
Violet
--color-violet
Mint
--color-mint
Foreground
--color-foreground
Muted
--color-muted
Light palette · data-theme="light"
Background
--color-bg
Background 2
--color-bg2
UI
--color-ui
Violet
--color-violet
Mint
--color-mint
Foreground
--color-foreground
Muted
--color-muted
Tool BG 0
#0d0d0f
Tool BG 1
#141416
Tool BG 2
#1c1c1f
Tool BG 3
#242428
Tool BG 4
#2e2e33
Tool Border
#2e2e33
Tool Border 2
#3a3a40
Tool Text
#e8e8ec
Tool Text 2
#9090a0
Tool Text 3
#5a5a6a
Space Grotesk / Heading Scale
clamp(48px,7vw,86px)
Display / Hero
clamp(32px,4vw,52px)
Section Title
32px
Card Heading (large)
22px
Card Heading (small)
16px
Label / Group Title
13px
Micro Label
Body / Space Grotesk
Regular body text. Readable and clean, used for descriptions and paragraphs across the portfolio.
Secondary body, slightly smaller, used for card descriptions and supporting copy.
Mono / DM Mono
// tech-tag prefix
SECTION LABEL
--color-violet: #7C5CFF;
.tech-tag · adds // prefix via CSS
// Project Card
Brief description of what this project does and what makes it interesting.
// Experiment Card
An interactive experiment exploring creative coding and WebGL techniques.
.skill-group + .skill-bar-fill.visible
.section-label[data-num] + heading pattern
Supporting paragraph that provides context for the section content.
Status Pulse
Cursor Dot
Scroll Reveal
