Design Tokens
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
Spacing System
Spacing scale based on a 4px (0.25rem) grid. Use these values for padding, margin, and gap.
4px
1 (0.25rem)
8px
2 (0.5rem)
16px
4 (1rem)
24px
6 (1.5rem)
32px
8 (2rem)
48px
12 (3rem)
64px
16 (4rem)
96px
24 (6rem)
8
Radius
Defines the shape characteristics of UI elements. From sharp corners to fully rounded capsules.
No Radius
Small
Default
Large
Extra Large
Full
Shadows & Glows
Create depth with shadows or emphasize brand elements with neon glows.
Elevation
shadow-sm
shadow-md
shadow-lg
shadow-xl
Neon Glow
shadow-neon
Breakpoints
Breakpoint definitions for adapting to different device screen sizes.
| Token | Width | Device |
|---|---|---|
| sm | 640px | Mobile |
| md | 768px | Tablet |
| lg | 1024px | Desktop |
| xl | 1280px | Widescreen |
| 2xl | 1536px | Widescreen (Large) |