Token Studio
Free to build · no sign-upLog in to save
Live preview
updates as you editRevenue
$42,840
Something needs your attention.
Confirm action
Are you sure you want to continue?
Generated CSS — updates live
:root {
--ds-color-primary: #7C3AED;
--ds-color-primary-foreground: #FFFFFF;
--ds-color-secondary: #F4F4F5;
--ds-color-secondary-foreground: #18181B;
--ds-color-background: #FFFFFF;
--ds-color-foreground: #09090B;
--ds-color-muted: #F4F4F5;
--ds-color-muted-foreground: #71717A;
--ds-color-accent: #F4F4F5;
--ds-color-accent-foreground: #18181B;
--ds-color-destructive: #DC2626;
--ds-color-destructive-foreground: #FFFFFF;
--ds-color-border: #E4E4E7;
--ds-radius-none: 0px;
--ds-radius-sm: 0.125rem;
--ds-radius-md: 0.375rem;
--ds-radius-lg: 0.5rem;
--ds-radius-xl: 0.75rem;
--ds-radius-full: 9999px;
--ds-spacing-xs: 0.25rem;
--ds-spacing-sm: 0.5rem;
--ds-spacing-md: 1rem;
--ds-spacing-lg: 1.5rem;
--ds-spacing-xl: 2rem;
--ds-spacing-2xl: 3rem;
--ds-shadow-none: none;
--ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
--ds-font-sans: Inter;
--ds-font-heading: Inter;
--ds-font-mono: JetBrains Mono;
--ds-button-padding-x: 1rem;
--ds-button-padding-y: 0.5rem;
--ds-button-font-weight: 700;
--ds-button-background: #7C3AED;
--ds-button-text-color: #FFFFFF;
--ds-button-radius: 0.375rem;
--ds-button-use-gradient: false;
--ds-button-gradient-from: #7C3AED;
--ds-button-gradient-to: #8B5CF6;
--ds-button-gradient-angle: 135;
--ds-button-gradient: none;
--ds-badge-padding-x: 0.5rem;
--ds-badge-padding-y: 0.125rem;
--ds-badge-font-weight: 700;
--ds-badge-background: #F4F4F5;
--ds-badge-text-color: #18181B;
--ds-badge-radius: 9999px;
--ds-badge-use-gradient: false;
--ds-badge-gradient-from: #F4F4F5;
--ds-badge-gradient-to: #E4E4E7;
--ds-badge-gradient-angle: 135;
--ds-badge-gradient: none;
--ds-card-padding-x: 1rem;
--ds-card-padding-y: 1rem;
--ds-card-background: #FFFFFF;
--ds-card-text-color: #09090B;
--ds-card-radius: 0.5rem;
--ds-card-use-gradient: false;
--ds-card-gradient-from: #FFFFFF;
--ds-card-gradient-to: #F4F4F5;
--ds-card-gradient-angle: 135;
--ds-card-gradient: none;
--ds-input-padding-x: 0.75rem;
--ds-input-padding-y: 0.5rem;
--ds-input-background: #FFFFFF;
--ds-input-text-color: #09090B;
--ds-input-radius: 0.375rem;
--ds-input-use-gradient: false;
--ds-input-gradient-from: #FFFFFF;
--ds-input-gradient-to: #F4F4F5;
--ds-input-gradient-angle: 135;
--ds-input-gradient: none;
--ds-alert-padding-x: 0.75rem;
--ds-alert-padding-y: 0.75rem;
--ds-alert-background: #FFFFFF;
--ds-alert-text-color: #DC2626;
--ds-alert-radius: 0.375rem;
--ds-alert-use-gradient: false;
--ds-alert-gradient-from: #FFFFFF;
--ds-alert-gradient-to: #FEE2E2;
--ds-alert-gradient-angle: 135;
--ds-alert-gradient: none;
--ds-select-padding-x: 0.75rem;
--ds-select-padding-y: 0.5rem;
--ds-select-background: #FFFFFF;
--ds-select-text-color: #09090B;
--ds-select-radius: 0.375rem;
--ds-select-use-gradient: false;
--ds-select-gradient-from: #FFFFFF;
--ds-select-gradient-to: #F4F4F5;
--ds-select-gradient-angle: 135;
--ds-select-gradient: none;
--ds-tabs-padding-x: 0.75rem;
--ds-tabs-padding-y: 0.5rem;
--ds-tabs-background: transparent;
--ds-tabs-text-color: #09090B;
--ds-tabs-radius: 0.375rem;
--ds-tabs-use-gradient: false;
--ds-tabs-gradient-from: #FFFFFF;
--ds-tabs-gradient-to: #F4F4F5;
--ds-tabs-gradient-angle: 135;
--ds-tabs-gradient: none;
--ds-modal-padding-x: 1rem;
--ds-modal-padding-y: 1rem;
--ds-modal-background: #FFFFFF;
--ds-modal-text-color: #71717A;
--ds-modal-radius: 0.5rem;
--ds-modal-use-gradient: false;
--ds-modal-gradient-from: #FFFFFF;
--ds-modal-gradient-to: #F4F4F5;
--ds-modal-gradient-angle: 135;
--ds-modal-gradient: none;
--ds-avatar-size: 2.5rem;
--ds-avatar-background: #F4F4F5;
--ds-avatar-text-color: #09090B;
--ds-avatar-radius: 9999px;
--ds-avatar-use-gradient: false;
--ds-avatar-gradient-from: #F4F4F5;
--ds-avatar-gradient-to: #E4E4E7;
--ds-avatar-gradient-angle: 135;
--ds-avatar-gradient: none;
--ds-checkbox-size: 1rem;
--ds-checkbox-background: #FFFFFF;
--ds-checkbox-text-color: #09090B;
--ds-checkbox-radius: 0.125rem;
--ds-checkbox-use-gradient: false;
--ds-checkbox-gradient-from: #FFFFFF;
--ds-checkbox-gradient-to: #F4F4F5;
--ds-checkbox-gradient-angle: 135;
--ds-checkbox-gradient: none;
--ds-texture-image: none;
--ds-texture-size: 24px;
}
.dark {
--ds-color-primary: #8B5CF6;
--ds-color-primary-foreground: #FFFFFF;
--ds-color-secondary: #27272A;
--ds-color-secondary-foreground: #FAFAFA;
--ds-color-background: #09090B;
--ds-color-foreground: #FAFAFA;
--ds-color-muted: #27272A;
--ds-color-muted-foreground: #A1A1AA;
--ds-color-accent: #27272A;
--ds-color-accent-foreground: #FAFAFA;
--ds-color-destructive: #EF4444;
--ds-color-destructive-foreground: #FFFFFF;
--ds-color-border: #27272A;
}