Type System
Typography
Typography reinforces precision and technical authority. Inter provides clean, tight headings while JetBrains Mono signals developer-centric data.
Primary Typeface
Headings and UI elements
Inter
Weights: Bold (700), Extra Bold (800)
Tracking: -2% (tight) to emphasize precision
Usage: All headings, button labels, navigation items
The quick brown fox jumps over the lazy dog
Secondary Typeface
Data, labels, and code
JetBrains Mono
Weights: Regular (400), Medium (500)
Purpose: Technical details, code snippets, data labels
Reinforces the “developer-centric” vibe
--color-violet: #7F5AF0;
Heading Scale
All headings use Inter with -2% letter-spacing for a tight, precise feel.
Display
Aavya
3.75rem / 60px800 (Extra Bold)tracking: -0.02em
H1
Brand Guidelines
2.25rem / 36px700 (Bold)tracking: -0.02em
H2
Color System
1.875rem / 30px700 (Bold)tracking: -0.02em
H3
Electric Violet
1.5rem / 24px600 (Semibold)tracking: -0.02em
H4
Design Tokens
1.25rem / 20px600 (Semibold)tracking: -0.02em
Body Text Scale
Body text uses Inter at regular weight with comfortable line heights for readability.
Body Large
Used for prominent paragraphs and introductions.
1.125rem / 18px400 (Regular)leading: 1.75
Body
The default body text size for readable content.
1rem / 16px400 (Regular)leading: 1.625
Body Small
Used for supporting text and descriptions.
0.875rem / 14px400 (Regular)leading: 1.5
Caption
Labels, timestamps, and metadata.
0.75rem / 12px500 (Medium)leading: 1.5
Monospace Usage
JetBrains Mono is reserved for technical contexts.
Code Blocks
const brand = {
primary: '#7F5AF0',
success: '#2CB67D',
}Data Labels
Token--color-violet
Value#7F5AF0
Categoryaccent