🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
Token Studio
Free to build · no sign-upLog in to save

Live preview

updates as you edit
User avatar
New

Revenue

$42,840
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;
}