Loading…
Create and manage CSS custom properties (variables). Review the result before reusing it in another workflow.
:root {
--primary: #3b82f6;
--primary-foreground: #ffffff;
--secondary: #64748b;
--background: #0f172a;
--foreground: #f8fafc;
--muted: #1e293b;
--border: #334155;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--border-radius: 0.5rem;
--spacing-unit: 8px;
}This is how your design system colors will look. Customize the variables to see changes in real-time.