Design Tokens
Atomic values that define our visual language. Use these in CSS, Figma, or code.
Color Palette
Primary
#a855f7
Copy
Secondary
#f472b6
Copy
Accent
#38bdf8
Copy
Background
#0a0a0f
Copy
Surface
#13131a
Copy
Muted Text
#8888a0
Copy
Spacing Scale
--ds-space-1
4px / 0.25rem
--ds-space-2
8px / 0.5rem
--ds-space-3
12px / 0.75rem
--ds-space-4
16px / 1rem
--ds-space-6
24px / 1.5rem
--ds-space-8
32px / 2rem
Typography
A two-family system optimized for readability and creative expression.
| Usage | Family | Weight | Size / Line Height | Preview |
|---|---|---|---|---|
| Display / H1 | Syne | 800 | 4rem / 1.1 | Creative Scale |
| Section / H2 | Syne | 700 | 2rem / 1.2 | Design Tokens |
| Subheading / H3 | Syne | 600 | 1.25rem / 1.3 | Component Library |
| Body / UI | Space Grotesk | 400 | 1rem / 1.6 | Clear, readable interface text for documentation and app content. |
| Labels / Meta | Space Grotesk | 500 | 0.875rem / 1.5 | Uppercase labels, captions, and system metadata. |
Components
Reusable UI elements built on our token system.
Buttons
<button class="ds-btn ds-btn-primary">
Primary Action
</button>
<button class="ds-btn ds-btn-secondary">
Secondary Action
</button>
Inputs
We'll never share your email.
Please enter a valid 32-character hex string.
<div class="ds-input-group">
<label class="ds-label">Email</label>
<input type="email"
class="ds-input"
placeholder="Enter email"/>
</div>
Cards & Badges
Performance
Optimized for 60fps interactions with hardware-accelerated transforms and minimal reflows.
V2
Stable
<div class="ds-card">
<div class="ds-card-header">
<div class="ds-card-icon">⚡</div>
<div class="ds-card-title">Performance</div>
</div>
<div class="ds-card-body">
Optimized for 60fps...
</div>
</div>
Usage Guidelines
Rules and best practices for implementing the system consistently.
🎯 Purpose-Driven Color Usage
Never use colors for decoration alone. Each hue should communicate state, hierarchy, or brand identity. Reserve
--ds-primary for main actions and interactive elements only.📐 Consistent Spacing Rhythm
Always use the spacing scale (4px base). Avoid arbitrary pixel values. Margins and padding should follow the 4, 8, 12, 16, 24, 32 rhythm to maintain visual harmony.
🔤 Typography Hierarchy
Use Syne exclusively for headings and display text. Space Grotesk is for body, UI, and data. Do not mix fonts within the same content block.
♿ Accessibility First
All interactive elements must meet WCAG 2.1 AA contrast ratios. Provide visible focus states, ARIA labels where needed, and ensure keyboard navigation flows logically.