A comprehensive guide to the visual language of this site. Tokens, components, and usage guidelines.
Colors
Surface colors, text colors, borders, and accent colors with dark mode support.
Explore
Typography
Font families, sizes, and weights for Outfit Variable and Open Sans Variable.
Explore
Quick Reference
Color Tokens
--surface-0
--surface-1
--text-primary
--accent-brand
Typography
Outfit Variable
Headings font (100-900)
Open Sans Variable
Body font (300-800)
Token Architecture
1
Primitives
Raw color scales (bright-*, dim-*, legal-*) in global.css @theme block
2
Semantic
Meaningful tokens (surface-*, text-*, border-*) mapped to primitives
3
Contextual
Dark mode overrides in .dark selector
4
Component
Specific component tokens in components.css