Design System

A small working design system for my portfolio – starting from foundations (tokens), through utilities, and eventually into components.

Typography

Usage-agnostic type scale

Font size

TokenValue
font-size.xxxs12px
font-size.xxs13px
font-size.xs14px
font-size.sm16px
font-size.md20px
font-size.lg24px
font-size.xl32px
font-size.2xl40px
font-size.3xl48px

Line height

TokenValue
line-height.none1
line-height.compact1.1
line-height.tight1.2
line-height.snug1.4
line-height.relaxed1.5
line-height.loose1.7

Tracking

TokenValue
tracking.tight-0.03em
tracking.normal0em
tracking.expanded0.02em

Font weight

TokenValue
font-weight.regular400
font-weight.medium500

Color & Radius

Foundational visuals

Color

TokenWarmCool
color-0
#100F0C
#0a0a0a
color-10
#191813
#141414
color-20
#23221B
#1f1f1f
color-30
#23251E
#262626
color-40
#2E3027
#333333
color-50
#424539
#484848
color-60
#555A4B
#5c5c5c
color-80
#C5BFAB
#a3a3a3
color-90
#F3F0E9
#e5e5e5
color-100
#FFFFFF
#ffffff

Radius

TokenValuePreview
radius.sm8px
radius.md12px
radius.lg20px
radius.full9999px

Theming

Dynamic tokens for color scheme switching

Theme-aware tokens

TokenWarmCoolRole
color-0-rgb16, 15, 1210, 10, 10RGB for gradient opacity
color-20-rgb35, 34, 2731, 31, 31RGB for gradient opacity
color-60-rgb85, 90, 7592, 92, 92RGB for hover opacity
color-blend
#43402C
#3a3a3a
Illustration color overlay
color-accent
#84873d
#6b6b6b
Button fill (e.g. Water button)
image-filternonegrayscale(100%)Theme-based image filter

Spacing & Layout

Structure + rhythm

Spacing

TokenValuePreview
space.xs4px
space.sm8px
space.md12px
space.lg20px
space.xl24px
space.2xl32px
space.3xl40px

Layout

TokenValue
size.container1352px
space.gutter20px
grid.columns12
grid.gutter20px
grid.margin40px
container.max-width1352px
container.padding.x40px