Design System
Typography, colors, and reusable components used across the site.
Colors
Background
#fafafa
Text
#1a1a1a
Muted
#777777
Border
#e0e0e0
Card
#ffffff
Dark Mode
Background
#111111
Text
#f0f0f0
Muted
#999999
Border
#2a2a2a
Card
#1a1a1a
Typography
Font family: DM Sans — weights 400 (regular), 500 (medium), 600 (semibold) — line-height 120%
60px / 600
The quick brown fox
48px / 600 — H1
The quick brown fox
40px / 600
The quick brown fox
32px / 600 — H2
The quick brown fox
24px / 500
The quick brown fox jumps over the lazy dog
20px / 500 — H3
The quick brown fox jumps over the lazy dog
18px / 400 — Subtitle
The quick brown fox jumps over the lazy dog
16px / 400 — Body
The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type.
14px / 400
The quick brown fox jumps over the lazy dog. Used for secondary body text and descriptions.
12px / 400 — Caption
The quick brown fox jumps over the lazy dog. Used for tags, labels, and metadata.
10px / 400 — Micro
The quick brown fox jumps over the lazy dog. Used sparingly for fine print.
Spacing
8px
16px
24px
32px
48px
64px
80px
Components
Project Card
Image
Project Title
Category — Year
Archive Item
Image
Project Title
Category — Year
CV Entry
2023 — Present
Role Title
Company — Description text.