Design System
Design Tokens & Components
A living reference of every color, type scale, spacing unit, and component used across this site. All values are pulled from CSS custom properties so swatches update automatically with the theme toggle.
Colors
Primary
--color-primary
Dark: #10B981 · Light: #059669
--color-primary-hover
Dark: #34D399 · Light: #047857
--color-primary-dim
Dark: rgba(16,185,129,0.12) · Light: rgba(5,150,105,0.08)
Backgrounds
--color-bg
Dark: #0F1117 · Light: #FAFAF9
--color-bg-raised
Dark: #161921 · Light: #FFFFFF
--color-bg-subtle
Dark: #1C1F2B · Light: #F5F5F4
--color-bg-code
Dark: #1E1E2E · Light: #F4F5F7
--color-nav-bg
Dark: rgba(15,17,23,0.85) · Light: rgba(250,250,249,0.85)
Text
--color-text
Dark: #E8E6E3 · Light: #1C1917
--color-text-secondary
Dark: #A8A29E · Light: #57534E
--color-text-muted
Dark: #78716C · Light: #A8A29E
--color-code-text
Dark: #CDD6F4 · Light: #1C1917
Borders
--color-border
Dark: rgba(255,255,255,0.08) · Light: #E7E5E4
--color-border-light
Dark: rgba(255,255,255,0.04) · Light: #F5F5F4
Status
--color-status-live
Dark: #10B981 · Light: #059669
--color-status-building
Dark: #F59E0B · Light: #D97706
--color-status-planned
Dark: #78716C · Light: #A8A29E
Typography
Font Families
Heading Scale
h1 — The quick brown fox (2rem / text-3xl)
h2 — The quick brown fox (1.5rem / text-2xl)
h3 — The quick brown fox (1.25rem / text-xl)
h4 — The quick brown fox (1.125rem / text-lg)
Body & Sizes
text-xl (1.25rem) — Body text for large intros and callouts.
text-lg (1.125rem) — Slightly larger body text for emphasis.
text-base (1rem) — Default body text. The quick brown fox jumps over the lazy dog.
text-sm (0.875rem) — Secondary text for metadata and captions.
text-xs (0.75rem) — Small labels, badges, and fine print.
Code
Inline code: const greeting = "Hello, world!";
// Code block example
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
Spacing
Spacing Scale
--space-1
0.25rem (4px)
--space-2
0.5rem (8px)
--space-3
0.75rem (12px)
--space-4
1rem (16px)
--space-5
1.25rem (20px)
--space-6
1.5rem (24px)
--space-8
2rem (32px)
--space-10
2.5rem (40px)
--space-12
3rem (48px)
--space-16
4rem (64px)
--space-20
5rem (80px)
--space-24
6rem (96px)
Components
Badges
Tag Pills
Buttons
Section Labels
Section Label
Inline Code
Run npm install to get started, then npx expo start for the dev server.
Blockquote
Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects.