CSS Variables Manager
Build a design token system with CSS custom properties. Edit values inline, preview the :root block live, and export as CSS, SCSS, or JSON.
28 variables11 color tokens10 colors5 spacing4 typography6 borders3 shadows
Add Variable
Colors10
:
:
:
:
:
:
:
:
:
:
Spacing5
:
:
:
:
:
Typography4
:
:
:
:
Borders6
:
:
:
:
:
:
Shadows3
:
:
:
:root {
--color-primary: #6366f1;
--color-primary-dark: #4f46e5;
--color-secondary: #8b5cf6;
--color-accent: #06b6d4;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #ef4444;
--color-bg: #0f0f11;
--color-surface: #1a1a1f;
--color-text: #f4f4f5;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--font-sans: Inter, system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
--text-sm: 0.875rem;
--text-base: 1rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--border-width: 1px;
--border-color: #2a2a30;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}Color Tokens11 swatches
Quick Export