Foundation
Spacing & Layout
A 4px base grid that scales consistently across every component, page, and screen size. Plus grid, breakpoints, elevation, and motion tokens.
Spacing
Space Scale
Every spacing value is a multiple of 4px. Use the scale tokens — never raw px values.
Component Spacing
How spacing tokens map to real component anatomy — from Figma measurements.
Button (MD)
Button
Height44px (--space-11)
Horizontal padding20px (--space-5)
Border radius8px (--radius-md)
Icon gap8px (--space-2)
Input (MD)
Placeholder...
Height44px (--space-11)
Horizontal padding14px (--space-3.5)
Border radius8px (--radius-md)
Label gap6px (--space-1.5)
Card
Card Title
Card body with some description text here.
Padding16px (--space-4)
Border radius17px (Figma)
Gap between items12px (--space-3)
Section spacing24px (--space-6)
Header (from Figma)
Page Title
Height64px (Figma)
Horizontal padding24px (--space-6)
Background#111111 (Figma)
Border#454545 (Figma)
Border Radius
Six radius tokens from sharp (sm) to fully round (full). Consistent application prevents visual noise.
None
0px
--radius-none
Tables, full-bleed images
SM
4px
--radius-sm
Badges, small chips
MD
8px
--radius-md
Buttons, inputs, dropdowns
LG
12px
--radius-lg
Alerts, tooltips, modals
XL
16px
--radius-xl
Cards, panels, surfaces
2XL
24px
--radius-2xl
Modals, large sheets
Full
9999px
--radius-full
Avatars, tags, pills, chat input
Card (Figma)
17px
--radius-card
Exact Figma measurement
Layout
Grid System
A 12-column grid with 24px gutters and responsive column counts per breakpoint.
12-column grid
12 columns · 24px gutter
1
2
3
4
5
6
7
8
9
10
11
12
Common spans
span 12 · Full width
span 8 · Main content
span 4 · Sidebar
span 6
span 6
span 4
span 4
span 4
3
3
3
3
Breakpoints
Six breakpoints follow industry-standard device widths. Mobile-first: design for xs, enhance upward.
| Name | Min Width | Columns | Gutter | Container | Target |
|---|---|---|---|---|---|
| xs | 0px | 4 | 16px | 100% | Small phones |
| sm | 640px | 6 | 20px | 620px | Large phones, portrait tablet |
| md | 768px | 8 | 24px | 740px | Tablets, landscape phone |
| lg | 1024px | 12 | 24px | 960px | Small desktops, large tablets |
| xl | 1280px | 12 | 32px | 1200px | Desktop, most common target |
| 2xl | 1536px | 12 | 40px | 1440px | Wide screens, ultrawide |
breakpoints.css
/* Mobile-first breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }
/* Tailwind-style container */
.container {
width: 100%;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 640px) { .container { max-width: 620px; padding: 0 20px; } }
@media (min-width: 1024px) { .container { max-width: 960px; padding: 0 24px; } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }Container Widths
Use max-width containers to keep content readable. Never let text lines exceed ~80 characters.
xs · 100% · Prose / Reading
sm · 620px · Forms, auth screens
md · 740px · Documentation
lg · 960px · Dashboard, content
xl · 1200px · Full app layouts
Visual Depth
Elevation
Six elevation levels create depth through shadows. Higher elevation = more prominent. Hover a card to feel its shadow.
Flat
box-shadow: none
Page background, subtle sections
SM
0 1px 3px rgba(0,0,0,.3)
Badges, inline elements
MD
0 4px 12px rgba(0,0,0,.3)
Cards, dropdowns, tooltips
LG
0 8px 24px rgba(0,0,0,.4)
Modals, side sheets
XL
0 16px 48px rgba(0,0,0,.5)
Full-screen overlays
Purple
0 4px 20px rgba(122,90,248,.35)
Primary buttons, CTA hover
Motion
Motion Tokens
Duration and easing tokens for consistent, purposeful animation. Click the demo boxes to see each easing in action.
Fast · 100ms
ease-out · --duration-fast
Hover states, micro-interactions
Base · 200ms
ease-out · --duration-base
Dropdowns, color transitions
Slow · 300ms
ease-out · --duration-slow
Modals, sidebars, page transitions
Spring
cubic-bezier(0.34,1.56,0.64,1)
Toggles, confirmations, delight moments
Ease In
cubic-bezier(0.4,0,1,1)
Elements exiting the screen
Slower · 500ms
linear · --duration-slower
Skeleton loaders, progress bars
Usage Guidelines
✓ Do
Always use multiples of 4px — never arbitrary px values
Use --space-6 (24px) as the default section padding on mobile
Increase spacing as viewport grows (responsive spacers)
Use --radius-full for avatars and pill badges only
Keep animations under 300ms for UI interactions
Use Spring easing for any scale/bounce interaction
✕ Don't
Don't use spacing values outside the defined scale
Don't apply XL/2XL radius to small components like badges
Don't animate more than 2 properties simultaneously
Don't use motion for purely decorative elements
Don't mix border-radius across components in the same context
Don't use raw px values — always reference a CSS variable
All Tokens
tokens/spacing.css
:root {
/* Spacing scale (4px base grid) */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Border radius */
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-card: 17px; /* Figma exact */
--radius-full: 9999px;
/* Elevation / Shadows */
--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow-md: 0 4px 12px rgba(0,0,0,.3);
--shadow-lg: 0 8px 24px rgba(0,0,0,.4);
--shadow-xl: 0 16px 48px rgba(0,0,0,.5);
--shadow-purple: 0 4px 20px rgba(122,90,248,.35);
/* Z-index scale */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
/* Motion */
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--duration-slower: 500ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}