Design System
Style Guide
A living reference for the colors, typography and components that make up the site. Everything here is wired to the project’s shared tokens and text styles.
Color Tokens
Background
Light #F5F5F5 · Dark #0D0D0D
Surface
White · Dark #303030
Heading
#303030 · White
Text & Icons
#505050 · #EDEDED
Accent
Purple #5E67E6 · Green #D0FF71
Muted Gray
#8B8B8B
Border
#DADADA · #0F0F0F
Black
#000000
Typography
The site uses Inter across all text. Sizes shown are desktop / mobile.
Heading 1 — Inter Medium · 128 / 40px
Heading 1
Heading 2 — Inter Medium · 96 / 48px
Heading 2
Heading 3 — Inter Medium · 72 / 40px
Heading 3
Heading 4 — Inter Medium · 64 / 36px
Heading 4
Heading 5 — Inter Medium · 44 / 32px
Heading 5
Heading 6 — Inter Medium · 36 / 24px
Heading 6
Project Title — Inter Medium · 32 / 22px
Project Title
Paragraph Large — Inter Regular · 28 / 18px
Large paragraph — the quick brown fox jumps over the lazy dog.
Paragraph Standard (Regular) — Inter Regular · 22 / 16px
Standard paragraph — the quick brown fox jumps over the lazy dog.
Paragraph Small — Inter Regular · 20 / 14px
Small paragraph — the quick brown fox jumps over the lazy dog.
Small Heading — Inter Medium · Uppercase · 18 / 16px
Small Heading
Buttons
Shared Button component shown across its states — default, disabled, loading, success and error.