Design Tokens
The foundation of our design system. All visual decisions are defined through tokens, enabling consistent theming and easy customization.
Colors
Primary
Brand color - Indigo shades
50
#eef2ff
100
#e0e7ff
200
#c7d2fe
300
#a5b4fc
400
#818cf8
500
#6366f1
600
#4f46e5
700
#4338ca
800
#3730a3
900
#312e81
950
#1e1b4b
Secondary
Accent color - Teal shades
50
#f0fdfa
100
#ccfbf1
200
#99f6e4
300
#5eead4
400
#2dd4bf
500
#14b8a6
600
#0d9488
700
#0f766e
800
#115e59
900
#134e4a
950
#042f2e
Neutral
Gray scale for backgrounds and text
50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d4d4d4
400
#a3a3a3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
950
#0a0a0a
Semantic Colors
Status and feedback colors
Success
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
Error
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
Warning
300
#fcd34d
400
#fbbf24
500
#f59e0b
600
#d97706
Info
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
Spacing
Spacing Scale
Consistent spacing values for margins, padding, and gaps
xs0.5rem
sm0.75rem
md1rem
lg1.5rem
xl2rem
2xl3rem
3xl4rem
4xl6rem
5xl8rem
Typography
Font Families
Typefaces used across the system
Sans (Default)
The quick brown fox jumps over the lazy dog
Inter, system-ui, sans-serif
Arabic
الحمد لله رب العالمين
IBM Plex Sans Arabic, sans-serif
Mono
const hello = "world";
JetBrains Mono, monospace
Font Sizes
Type scale with line heights
xsThe quick brown fox jumps over the lazy dog
0.75rem / 1rem
smThe quick brown fox jumps over the lazy dog
0.875rem / 1.25rem
baseThe quick brown fox jumps over the lazy dog
1rem / 1.5rem
lgThe quick brown fox jumps over the lazy dog
1.125rem / 1.75rem
xlThe quick brown fox jumps over the lazy dog
1.25rem / 1.75rem
2xlThe quick brown fox jumps over the lazy dog
1.5rem / 2rem
3xlThe quick brown fox jumps over the lazy dog
1.875rem / 2.25rem
4xlThe quick brown fox jumps over the lazy dog
2.25rem / 2.5rem
5xlThe quick brown fox jumps over the lazy dog
3rem / 1
6xlThe quick brown fox jumps over the lazy dog
3.75rem / 1
7xlThe quick brown fox jumps over the lazy dog
4.5rem / 1
8xlThe quick brown fox jumps over the lazy dog
6rem / 1
9xlThe quick brown fox jumps over the lazy dog
8rem / 1
Shadows
Shadow Scale
Elevation levels for depth perception
sm
Elevation
0 1px 2px 0 rgb(0 0 0 / 0.05)
DEFAULT
Elevation
0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
md
Elevation
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
lg
Elevation
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl
Elevation
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl
Elevation
0 25px 50px -12px rgb(0 0 0 / 0.25)
Border Radius
Radius Scale
Corner rounding for components
none
0
sm
0.125rem
DEFAULT
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
3xl
1.5rem
Usage in Code
Tailwind CSS Integration
All tokens are available as Tailwind utilities
Colors
Spacing
Typography