CSS Design Token Generator
NewExport clean design tokens formatted as CSS variables (`:root`) for design systems, including modular typography scales, spacing units, and radius tokens.
Tags:#css#tokens#design-system#variables#typography
#6366f1
Standardized CSS Custom Properties (:root)
CSS
:root {
/* Color Tokens */
--app-color-primary: #6366f1;
--app-color-primary-hover: color-mix(in srgb, #6366f1 85%, black);
--app-color-primary-light: color-mix(in srgb, #6366f1 15%, transparent);
/* Spacing Scale (8pt baseline) */
--app-spacing-xs: 0.25rem; /* 4px */
--app-spacing-sm: 0.5rem; /* 8px */
--app-spacing-md: 1rem; /* 16px */
--app-spacing-lg: 1.5rem; /* 24px */
--app-spacing-xl: 2rem; /* 32px */
/* Radius Tokens */
--app-radius-sm: 0.375rem; /* 6px */
--app-radius-md: 0.5rem; /* 8px */
--app-radius-lg: 0.75rem; /* 12px */
--app-radius-full: 9999px;
}