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.

Primary

Primary --color-primary Dark: #10B981 · Light: #059669
Primary Hover --color-primary-hover Dark: #34D399 · Light: #047857
Primary Dim --color-primary-dim Dark: rgba(16,185,129,0.12) · Light: rgba(5,150,105,0.08)

Backgrounds

Background --color-bg Dark: #0F1117 · Light: #FAFAF9
Background Raised --color-bg-raised Dark: #161921 · Light: #FFFFFF
Background Subtle --color-bg-subtle Dark: #1C1F2B · Light: #F5F5F4
Background Code --color-bg-code Dark: #1E1E2E · Light: #F4F5F7
Nav Background --color-nav-bg Dark: rgba(15,17,23,0.85) · Light: rgba(250,250,249,0.85)

Text

Text --color-text Dark: #E8E6E3 · Light: #1C1917
Text Secondary --color-text-secondary Dark: #A8A29E · Light: #57534E
Text Muted --color-text-muted Dark: #78716C · Light: #A8A29E
Code Text --color-code-text Dark: #CDD6F4 · Light: #1C1917

Borders

Border --color-border Dark: rgba(255,255,255,0.08) · Light: #E7E5E4
Border Light --color-border-light Dark: rgba(255,255,255,0.04) · Light: #F5F5F4

Status

Status Live --color-status-live Dark: #10B981 · Light: #059669
Status Building --color-status-building Dark: #F59E0B · Light: #D97706
Status Planned --color-status-planned Dark: #78716C · Light: #A8A29E

Font Families

Heading / Body Space Grotesk — ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Monospace JetBrains Mono — ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

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 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)

Badges

Live Building Planned

Tag Pills

TypeScript React Native SwiftUI Supabase Expo

Buttons

Section Labels

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.