Component Library
Colour Palette
primary
Violet 400
Primary actions, links
#a78bfa
Violet 500
Hover states
#8b5cf6
Violet 600
Active states
#7c3aed
secondary
Indigo 400
Secondary elements
#818cf8
Indigo 500
Accents
#6366f1
accent
Cyan 400
Highlights, success
#22d3ee
Fuchsia 400
Decorative
#e879f9
semantic
Success
Positive feedback
#10b981
Warning
Caution messages
#f59e0b
Error
Error states
#ef4444
Info
Informational
#3b82f6
Typography
Display
3.5rem / 700
The quick brown fox jumps
H1
2.75rem / 700
The quick brown fox jumps
H2
2rem / 600
The quick brown fox jumps
H3
1.5rem / 600
The quick brown fox jumps
H4
1.25rem / 600
The quick brown fox jumps
Body Large
1.125rem / 400
The quick brown fox jumps
Body
1rem / 400
The quick brown fox jumps
Small
0.875rem / 400
The quick brown fox jumps
Code
0.875rem / 400
The quick brown fox jumps
Spacing Scale
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px