// design-system
Visual Language
All tokens, components, and patterns used across the portfolio and experiment pages.
Portfolio Colors
Background
#0F1115
--color-bg
Background 2
#1A1D24
--color-bg2
UI
#2A2F3A
--color-ui
Violet
#7C5CFF
--color-violet
Mint
#2EE6A6
--color-mint
Foreground
#E8EAF0
--color-foreground
Muted
#6B7280
--color-muted
Tool UI Colors
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
Typography
Space Grotesk — Heading Scale
Full Stack Developer
clamp(48px,7vw,86px)
Display / Hero
Selected Work
clamp(32px,4vw,52px)
Section Title
Design System & Tokens
32px
Card Heading (large)
Headless WordPress
22px
Card Heading (small)
Frontend Frameworks
16px
Label / Group Title
Always cooking something
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;
Buttons & Links
Tech Tags
.tech-tag — adds // prefix via CSS
Cards
// Project Card
Project Title
Brief description of what this project does and what makes it interesting.
// Experiment Card
Experiment Title
An interactive experiment exploring creative coding and WebGL techniques.
Skill Bars
.skill-group + .skill-bar-fill.visible
Section Anatomy
.section-label[data-num] + heading pattern
Section Heading
Supporting paragraph that provides context for the section content.
Indicators
Status Pulse
Cursor Dot
Scroll Reveal