Generate CSS custom properties for your design system
:root {
/* COLORS */
--color-primary-rgb: 59 130 246;
--color-secondary-rgb: 107 114 128;
--color-success-rgb: 34 197 94;
--color-warning-rgb: 251 191 36;
--color-error-rgb: 239 68 68;
--color-info-rgb: 59 130 246;
--color-primary: rgb(var(--color-primary-rgb));
--color-secondary: rgb(var(--color-secondary-rgb));
--color-success: rgb(var(--color-success-rgb));
--color-warning: rgb(var(--color-warning-rgb));
--color-error: rgb(var(--color-error-rgb));
--color-info: rgb(var(--color-info-rgb));
--color-text-primary: #18181b;
--color-text-secondary: #52525b;
--color-text-tertiary: #a1a1aa;
--color-bg-primary: #ffffff;
--color-bg-secondary: #f4f4f5;
--color-bg-tertiary: #e4e4e7;
--color-border-primary: #e4e4e7;
--color-border-secondary: #d4d4d8;
}
.button {
background-color: var(--color-primary);
color: var(--color-text-primary);
padding: var(--spacing-4);
}Help others discover this tool!
