Style Guide
Live framework tokens — colors, type, spacing, radius
Brand Colors
Token: --{family}-{shade} — e.g. var(--primary-medium)
primary
ultra-light
--primary-ultra-light light
--primary-light semi-light
--primary-semi-light medium
--primary-medium semi-dark
--primary-semi-dark dark
--primary-dark ultra-dark
--primary-ultra-dark hover
--primary-hover secondary
ultra-light
--secondary-ultra-light light
--secondary-light semi-light
--secondary-semi-light medium
--secondary-medium semi-dark
--secondary-semi-dark dark
--secondary-dark ultra-dark
--secondary-ultra-dark hover
--secondary-hover tertiary
ultra-light
--tertiary-ultra-light light
--tertiary-light semi-light
--tertiary-semi-light medium
--tertiary-medium semi-dark
--tertiary-semi-dark dark
--tertiary-dark ultra-dark
--tertiary-ultra-dark hover
--tertiary-hover accent
ultra-light
--accent-ultra-light light
--accent-light semi-light
--accent-semi-light medium
--accent-medium semi-dark
--accent-semi-dark dark
--accent-dark ultra-dark
--accent-ultra-dark hover
--accent-hover base
ultra-light
--base-ultra-light light
--base-light semi-light
--base-semi-light medium
--base-medium semi-dark
--base-semi-dark dark
--base-dark ultra-dark
--base-ultra-dark hover
--base-hover Semantic Colors
Token: --{family}-{shade} — e.g. var(--success-medium)
success
ultra-light
--success-ultra-light light
--success-light semi-light
--success-semi-light medium
--success-medium semi-dark
--success-semi-dark dark
--success-dark ultra-dark
--success-ultra-dark hover
--success-hover warning
ultra-light
--warning-ultra-light light
--warning-light semi-light
--warning-semi-light medium
--warning-medium semi-dark
--warning-semi-dark dark
--warning-dark ultra-dark
--warning-ultra-dark hover
--warning-hover info
ultra-light
--info-ultra-light light
--info-light semi-light
--info-semi-light medium
--info-medium semi-dark
--info-semi-dark dark
--info-dark ultra-dark
--info-ultra-dark hover
--info-hover danger
ultra-light
--danger-ultra-light light
--danger-light semi-light
--danger-semi-light medium
--danger-medium semi-dark
--danger-semi-dark dark
--danger-dark ultra-dark
--danger-ultra-dark hover
--danger-hover neutral
ultra-light
--neutral-ultra-light light
--neutral-light semi-light
--neutral-semi-light medium
--neutral-medium semi-dark
--neutral-semi-dark dark
--neutral-dark ultra-dark
--neutral-ultra-dark hover
--neutral-hover Text Scale
Token: --text-{size} — fluid clamp() values
--text-2xs The quick brown fox — 2xs --text-xs The quick brown fox — xs --text-sm The quick brown fox — sm --text-md The quick brown fox — md --text-lg The quick brown fox — lg --text-xl The quick brown fox — xl --text-2xl The quick brown fox — 2xl Heading Scale
Token: --h1 through --h6 — separate heading scale
--h1 Heading H1 --h2 Heading H2 --h3 Heading H3 --h4 Heading H4 --h5 Heading H5 --h6 Heading H6 Font Weights
300 Geist Variable — weight 300 400 Geist Variable — weight 400 500 Geist Variable — weight 500 600 Geist Variable — weight 600 700 Geist Variable — weight 700 Spacing Scale
Token: --space-{size} — fluid, mobile → desktop
--space-3xs --space-2xs --space-xs --space-sm --space-md --space-lg --space-xl --space-2xl Section Spacing Scale
Token: --section-space-{size} — larger scale for page sections
--section-space-2xs --section-space-xs --section-space-sm --section-space-md --section-space-lg --section-space-xl --section-space-2xl Border Radius
Token: --radius-{size}
--radius-sm 8px --radius-md 12px --radius-lg 16px --radius-xl 24px --radius-2xl 32px --radius-full 999px Width Tokens
Layout container widths — used with min(var(--site-width), 100% - var(--section-gutter) * 2)
--site-width 1600px max page width --content-width 1440px wide content --content-width-md 1280px standard content --content-width-sm 960px narrow content --content-width-xs 720px prose / single column Buttons
Class: .btn .btn--{variant} + optional size .btn--{size}
Tagline Pills
Class: .tagline + optional modifier
.tagline New Feature
.tagline--accent New Feature
.tagline--light New Feature
Transitions
Token: --transition-*
--transition-duration 0.3s --transition-timing ease-in-out --transition-delay 0s --transition-global background, color, border Common Shadow Patterns
Not tokenized — reference patterns used in codebase
0 2px 8px rgba(0,0,0,0.08) subtle 0 4px 16px rgba(0,0,0,0.10) card 0 8px 32px rgba(0,0,0,0.12) elevated primary-dark / 0.2 primary glow