Internal · Not Published
Style Guide
Living reference for the design tokens powering this portfolio. Numbers shown reflect the current values in globals.css; rendered samples use the live CSS custom properties.
Colors
Two-token accent system: --color-accent for light surfaces, --color-accent-on-dark for dark sections (cascaded via .darkSection, .hero, and .footer).
--color-accentPrimary brand accent (light bg)
- Light
- #DB3914
- Dark
- #F26B47
--color-accent-on-darkBrighter accent for dark surfaces
- Light
- #F26B47
- Dark
- #F26B47
--color-surfacePage background
- Light
- #FDFBF7
- Dark
- #15123A
--color-surface-invertInverted surface (dark sections)
- Light
- #0B0921
- Dark
- #FDFBF7
--color-textPrimary text
- Light
- #0B0921
- Dark
- #FDFBF7
--color-text-secondaryBody / secondary text
- Light
- #130F38
- Dark
- #B9B4D6
--color-text-invertText on dark surfaces
- Light
- #EFE9DB
- Dark
- #15123A
--color-bg-cardCard / panel surface
- Light
- rgba(239, 233, 219, 0.5)
- Dark
- rgba(255, 255, 255, 0.05)
--color-borderSubtle dividers
- Light
- #E3DBCA
- Dark
- rgba(239, 233, 219, 0.18)
Typography
Two families: Bricolage Grotesque for display (H1 only), Poppins for everything else. Sizes scale down at 960px (tablet) and 480px (mobile).
Display / H1
--font-h1 / --line-h1Bricolage Grotesque · 700 · 56px / 68px
The quick brown fox
Heading 2
--font-h2 / --line-h2Poppins · 600 · 32px / 40px
The quick brown fox
Heading 3
--font-h3 / --line-h3Poppins · 600 · 24px / 32px
The quick brown fox
Heading 4
--font-h4 / --line-h4Poppins · 600 · 20px / 28px
The quick brown fox
Body 1
--font-body1 / --line-body1Poppins · 400 · 18px / 32px
The quick brown fox jumps over the lazy dog, while good type makes dense information feel calm and easy to read.
Body 2
--font-body2 / --line-body2Poppins · 400 · 16px / 24px
The quick brown fox jumps over the lazy dog, while good type makes dense information feel calm and easy to read.
Spacing
7-step scale. Values shrink at the tablet (960px) and mobile (480px) breakpoints — bars below show the live (current viewport) value.
--space-xs4px2px2px--space-sm8px4px4px--space-md16px8px8px--space-lg24px16px12px--space-xl32px24px16px--space-xxl40px40px24px--space-xxxl64px64px40pxRadius
Soft corners across the system; --radius-full is reserved for pills (toggle, status chips).
--radius-sm4px
--radius-md4px
--radius-lg8px
--radius-xl16px
--radius-full60px (pill)
Buttons
Pill-shaped (--radius-full), 700 weight, --font-body2. One <Button> component with two variants and two sizes — renders as a link when given href, otherwise a <button>.
Icons
Icons stroke with currentColor, so they inherit text color and adapt to theme automatically. Custom marks are inline SVG; the rest come from lucide-react.
Custom (inline SVG)
Sun
Theme toggle (light → dark)
Moon
Theme toggle (dark → light)
Plus
Expand experience entry
Minus
Collapse experience entry
Fullscreen
Expand video to fullscreen
Slider Handle
Before/after drag handle
lucide-react
ArrowLeft
Prev — case study nav, testimonials, carousel
ArrowRight
Next — case study nav, testimonials, carousel
Play
Video facade play button
VolumeX
Muted indicator on usability videos
ChevronDown
Observation accordion expand
MousePointerClick
Observation — click
BarChart3
Observation — chart
Bold
Observation — bold
ListTree
Observation — outline
Flame
Observation — engagement
Timer
Observation — speed
ShieldCheck
Observation — trust
GraduationCap
Observation — teaching
LayoutGrid
Idea Canvas — section heading
Compass
Idea Canvas — section heading
Sparkles
Idea Canvas — section heading
Gauge
Idea Canvas — section heading
Zap
Idea Canvas — pillar
Layers
Idea Canvas — pillar
Workflow
Idea Canvas — pillar