Design Tokens
The foundation of our design system. All visual decisions are defined through tokens, enabling consistent theming and easy customization.
These values reflect the currently selected theme and update in real-time when you switch themes or toggle dark mode.
Colors
Brand Colors
Primary and secondary brand colors
primary
#6366f1
primary-foreground
#ffffff
secondary
#14b8a6
secondary-foreground
#000000
UI Colors
Interface background and text colors
background
#ffffff
foreground
#000000
card
#ffffff
card-foreground
#000000
popover
#ffffff
popover-foreground
#000000
Accent Colors
Muted and accent colors for subtle UI elements
muted
#f5f5f5
muted-foreground
#737373
accent
#f5f5f5
accent-foreground
#000000
State & Border Colors
Destructive state, borders, and focus rings
destructive
#ef4444
destructive-foreground
#ffffff
border
#e5e5e5
input
#e5e5e5
ring
#6366f1
CSS Setup
Copy and paste this CSS into your globals.css file to use this theme
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
Current Theme Radius
The border radius for the currently selected theme
--radius
0.5rem
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