Design Tokens
The foundational primitives that define Swell's visual language -- colors, type, spacing, radii, shadows, and motion.
Colors
Semantic color tokens for backgrounds, surfaces, text, borders, and status states.
Base
--bg
#0A0D10
--primary
#18D2B2
--primary-hover
#20E8C6
--primary-muted
rgba(24,210,178,0.15)
Surfaces
--surface
#12161B
--surface-elevated
#1A1F26
--surface-overlay
rgba(18,22,27,0.85)
Borders
--border-subtle
rgba(255,255,255,0.06)
--border-default
rgba(255,255,255,0.10)
Text
--text-primary
#F1F3F5
--text-secondary
#8B939E
--text-tertiary
#565D67
--text-inverse
#0A0D10
Semantic
--success
#34D399
--success-muted
rgba(52,211,153,0.15)
--warning
#FBBF24
--warning-muted
rgba(251,191,36,0.15)
--error
#F87171
--error-muted
rgba(248,113,113,0.15)
--info
#60A5FA
--info-muted
rgba(96,165,250,0.15)
Typography
A dual-font type system pairing Space Grotesk for headings with Sen for body text, and JetBrains Mono for code.
Headings -- Space Grotesk
Design Tokens
Design Tokens
Design Tokens
Design Tokens
Body -- Sen
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.
Mono -- JetBrains Mono
const swell = { primary: '#18D2B2', bg: '#0A0D10' };
Font Weights
400 regular
The quick brown fox
500 medium
The quick brown fox
600 semibold
The quick brown fox
700 bold
The quick brown fox
800 extrabold
The quick brown fox
Spacing
A consistent spatial scale from 4px to 64px, based on a 4px base unit.
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
Border Radius
Five radius tokens from subtle rounding to fully circular elements.
--radius-sm
6px
--radius-md
10px
--radius-lg
16px
--radius-xl
24px
--radius-full
9999px
Shadows
Depth shadows for elevation hierarchy and colored glow effects for interactive emphasis.
Elevation
--shadow-sm
0 1px 2px rgba(0,0,0,0.4)
--shadow-md
0 4px 12px rgba(0,0,0,0.5)
--shadow-lg
0 8px 24px rgba(0,0,0,0.6)
--shadow-xl
0 16px 48px rgba(0,0,0,0.7)
Glow
--shadow-glow-primary
0 0 20px rgba(24,210,178,0.2)
--shadow-glow-success
0 0 16px rgba(52,211,153,0.2)
--shadow-glow-error
0 0 16px rgba(248,113,113,0.2)
Motion
Easing curves and duration tokens for consistent, purposeful animation across the system.
Easing Curves
--ease-out
cubic-bezier(0.16, 1, 0.3, 1)
--ease-in-out
cubic-bezier(0.45, 0, 0.55, 1)
--ease-bounce
cubic-bezier(0.34, 1.56, 0.64, 1)
--ease-spring
cubic-bezier(0.22, 1.2, 0.36, 1)
Duration Scale
--duration-instant
50ms
--duration-fast
100ms
--duration-normal
150ms
--duration-slow
250ms
--duration-slower
400ms