Typography
Understanding the typography system, text utilities, and design principles used in rsaha.tech.
Font Families
Geist Sans
HUD · Page · Tree
Primary font family for UI elements, headings, and body text. Clean and modern.
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Geist Mono
Monospace font for code, terminal-style text, and technical content.
Regular 400
Medium 500
Semibold 600
Slackside One
Decorative font for special headings and branding elements.
Slackside One Regular
Text Sizes
text-xsThe quick brown fox jumps over the lazy dog
text-smThe quick brown fox jumps over the lazy dog
text-baseThe quick brown fox jumps over the lazy dog
text-lgThe quick brown fox jumps over the lazy dog
text-xlThe quick brown fox jumps over the lazy dog
text-2xlThe quick brown fox jumps over the lazy dog
Text Colors
text-foreground
Primary text color
text-muted-foreground
Secondary text color
text-accent-foreground
Accent text color
text-destructive
Error/destructive text
Special Effects
Shiny Text
Animated gradient text effect that creates a metallic shine.
This text has a shiny metallic effect
Encrypted Text
Dynamic text that appears to be encrypted and decrypts over time.
Encrypted text reveals character by character
Usage Guidelines
Font Hierarchy
- • Use Geist Sans for all UI text and headings
- • Reserve Geist Mono for code, technical content, and terminal-style elements
- • Use Slackside One sparingly for branding and special headings
Color Usage
- • text-foreground for primary content and headings
- • text-muted-foreground for secondary information and labels
- • text-accent-foreground for interactive elements and highlights
- • text-destructive for errors and warnings
Special Effects
- • Use shiny-text for important headings and branding
- • Use encrypted text for dramatic reveals and special content
- • Apply effects sparingly to maintain visual hierarchy
HUD · Page · Tree
All systems operational