Design Tokens
Synapse UI uses a greenfield design token system — a neutral, professional palette suitable for enterprise AI applications. Tokens are defined as TypeScript objects and emitted as CSS custom properties at runtime.
Token Naming Convention
All CSS custom properties use the --synapse- prefix:
--synapse-{category}-{name}[-{variant}]
Categories: color, surface, text, border, focus, spacing, radius, font, elevation, motion.
Color Palette (Greenfield Starter)
Brand Accent
| Token | Light | Dark | High-Contrast |
|---|---|---|---|
--synapse-color-accent | #4F46E5 (Indigo 600) | #818CF8 (Indigo 400) | #FFFF00 |
--synapse-color-accent-hover | #4338CA | #A5B4FC | #FFFFFF |
--synapse-color-accent-subtle | #EEF2FF | #1E1B4B | #000000 |
Surfaces
| Token | Light | Dark | High-Contrast |
|---|---|---|---|
--synapse-surface-primary | #FFFFFF | #0F172A | #000000 |
--synapse-surface-secondary | #F8FAFC | #1E293B | #000000 |
--synapse-surface-elevated | #FFFFFF | #334155 | #000000 |
--synapse-surface-overlay | rgba(15,23,42,0.5) | rgba(0,0,0,0.6) | rgba(0,0,0,0.8) |
Text
| Token | Light | Dark | High-Contrast |
|---|---|---|---|
--synapse-text-primary | #0F172A | #F1F5F9 | #FFFFFF |
--synapse-text-secondary | #64748B | #94A3B8 | #FFFFFF |
--synapse-text-muted | #94A3B8 | #64748B | #CCCCCC |
--synapse-text-on-accent | #FFFFFF | #0F172A | #000000 |
Semantic
| Token | Light | Dark | High-Contrast |
|---|---|---|---|
--synapse-color-success | #16A34A | #4ADE80 | #00FF00 |
--synapse-color-warning | #D97706 | #FBBF24 | #FFFF00 |
--synapse-color-error | #DC2626 | #F87171 | #FF0000 |
--synapse-color-info | #2563EB | #60A5FA | #00FFFF |
Borders & Focus
| Token | Value (Light) |
|---|---|
--synapse-border-default | #E2E8F0 |
--synapse-border-strong | #CBD5E1 |
--synapse-focus-ring | 0 0 0 2px var(--synapse-surface-primary), 0 0 0 4px var(--synapse-color-accent) |
Typography
| Token | Value |
|---|---|
--synapse-font-family-sans | 'Inter', system-ui, -apple-system, sans-serif |
--synapse-font-family-mono | 'JetBrains Mono', 'Fira Code', monospace |
--synapse-font-size-xs | 0.75rem |
--synapse-font-size-sm | 0.875rem |
--synapse-font-size-md | 1rem |
--synapse-font-size-lg | 1.125rem |
--synapse-font-size-xl | 1.25rem |
--synapse-font-weight-normal | 400 |
--synapse-font-weight-medium | 500 |
--synapse-font-weight-semibold | 600 |
--synapse-line-height-tight | 1.25 |
--synapse-line-height-normal | 1.5 |
--synapse-line-height-relaxed | 1.75 |
Spacing Scale
Based on a 4px grid:
| Token | Value |
|---|---|
--synapse-spacing-1 | 0.25rem (4px) |
--synapse-spacing-2 | 0.5rem (8px) |
--synapse-spacing-3 | 0.75rem (12px) |
--synapse-spacing-4 | 1rem (16px) |
--synapse-spacing-6 | 1.5rem (24px) |
--synapse-spacing-8 | 2rem (32px) |
--synapse-spacing-12 | 3rem (48px) |
Radius & Elevation
| Token | Value |
|---|---|
--synapse-radius-sm | 0.25rem |
--synapse-radius-md | 0.5rem |
--synapse-radius-lg | 0.75rem |
--synapse-radius-full | 9999px |
--synapse-elevation-sm | 0 1px 2px rgba(0,0,0,0.05) |
--synapse-elevation-md | 0 4px 6px rgba(0,0,0,0.07) |
--synapse-elevation-lg | 0 10px 15px rgba(0,0,0,0.1) |
Motion
| Token | Value |
|---|---|
--synapse-motion-fast | 150ms ease |
--synapse-motion-normal | 250ms ease |
--synapse-motion-slow | 400ms ease |
AI-Specific Tokens
| Token | Purpose |
|---|---|
--synapse-ai-stream-cursor | Blinking cursor color during active stream |
--synapse-ai-skeleton-base | Generative skeleton shimmer base |
--synapse-ai-skeleton-highlight | Generative skeleton shimmer peak |
--synapse-ai-code-bg | Code block background in stream container |
--synapse-ai-feedback-positive | Thumbs-up active state |
--synapse-ai-feedback-negative | Thumbs-down active state |
Usage in Components
:host {
background: var(--synapse-surface-primary);
color: var(--synapse-text-primary);
border: 1px solid var(--synapse-border-default);
border-radius: var(--synapse-radius-md);
padding: var(--synapse-spacing-4);
font-family: var(--synapse-font-family-sans);
font-size: var(--synapse-font-size-md);
}
Customizing Tokens
Consumers can override tokens after importing the theme:
:root {
--synapse-color-accent: #7C3AED; /* Custom brand purple */
}
Or programmatically via ThemeService.setCustomTokens(). See ThemeService.