Design System
A simple preview of the portfolio tokens before components are built.
Use this page to review the palette, type rhythm, spacing, radius, container sizes, and interactive styles in one place.
Preview
Color Tokens
Warm neutrals keep the site calm and editorial, while the accent brings a bit of personality.
Background
--color-bg
#E7E7E7
Background Soft
--color-bg-soft
#F3F5F7
Surface
--color-surface
rgba(249, 250, 251, 0.94)
Surface Strong
--color-surface-strong
#D9DDE2
Text
--color-text
#1D242C
Text Soft
--color-text-soft
#A2A2A2
Border
--color-border
#C5CCD4
Accent
--color-accent
#FB5C00
Accent Strong
--color-accent-strong
#C74800
Accent Soft
--color-accent-soft
#FFD9C2
Focus
--color-focus
#2f6fed
Preview
Dark Mode Colors
This is a matching dark palette preview only. It is not applied to the site yet.
Background
--color-bg-dark
#1A1A1A
Background Soft
--color-bg-soft-dark
#242424
Surface
--color-surface-dark
rgba(34, 34, 34, 0.94)
Surface Strong
--color-surface-strong-dark
#2E2E2E
Text
--color-text-dark
#F2F2F2
Text Soft
--color-text-soft-dark
#A2A2A2
Border
--color-border-dark
#3A3A3A
Accent
--color-accent-dark
#FB5C00
Accent Strong
--color-accent-strong-dark
#FF7A2F
Accent Soft
--color-accent-soft-dark
#4A2A1A
Focus
--color-focus-dark
#6EA8FF
Preview
Typography Scale
Display styles lean editorial, while body styles stay straightforward and easy to maintain.
H1 - Hero
--text-hero
Editorial hero heading for the homepage
Preview using --text-hero
H2 - Section title
--text-h2
Main section headline for page structure
Preview using --text-h2
H3 - Subsection
--text-h3
Subsection title inside cards and content blocks
Preview using --text-h3
Body
--text-body
Default paragraph text for most sections
Preview using --text-body
Small text
--text-small
Navigation, metadata, and supporting details
Preview using --text-small
Caption
--text-caption
Tiny labels, notes, and eyebrow-sized text
Preview using --text-caption
Button text
--text-button
Clear call-to-action text inside buttons
Preview using --text-button
Preview
Spacing Scale
The scale is intentionally short so it is easy to remember and reuse without overthinking.
--space-1
--space-1--space-2
--space-2--space-3
--space-3--space-4
--space-4--space-5
--space-5--space-6
--space-6--space-7
--space-7--space-8
--space-8--space-9
--space-9Preview
Border Radius
Rounded shapes keep the interface warm without becoming overly soft or playful.
--radius-sm
--radius-md
--radius-lg
--radius-round
Preview
Container Widths
These widths give you a few clear layout choices for reading, standard content, and full-page sections.
Preview
Buttons and Links
These examples let you quickly review the default interaction styles before turning them into larger component patterns.