Design System Token Generator

:root {
  /* Colors */
  --ds-color-primary-50: #ebf3fe;
  --ds-color-primary-100: #d8e6fd;
  --ds-color-primary-200: #b1cdfb;
  --ds-color-primary-300: #89b4fa;
  --ds-color-primary-400: #629bf8;
  --ds-color-primary-500: #3b82f6;
  --ds-color-primary-600: #3575dd;
  --ds-color-primary-700: #2c62b9;
  --ds-color-primary-800: #234e94;
  --ds-color-primary-900: #183462;

  /* Spacing */
  --ds-spacing-0: 0px;
  --ds-spacing-1: 4px;
  --ds-spacing-2: 8px;
  --ds-spacing-3: 12px;
  --ds-spacing-4: 16px;
  --ds-spacing-5: 20px;
  --ds-spacing-6: 24px;
  --ds-spacing-8: 32px;
  --ds-spacing-10: 40px;
  --ds-spacing-12: 48px;
  --ds-spacing-16: 64px;
  --ds-spacing-20: 80px;
  --ds-spacing-24: 96px;

  /* Font Sizes */
  --ds-font-family: Inter, sans-serif;
  --ds-font-size-xs: 12px;
  --ds-font-size-sm: 14px;
  --ds-font-size-base: 16px;
  --ds-font-size-lg: 18px;
  --ds-font-size-xl: 20px;
  --ds-font-size-2xl: 24px;
  --ds-font-size-3xl: 30px;
  --ds-font-size-4xl: 36px;
  --ds-font-size-5xl: 48px;

  /* Border Radius */
  --ds-radius-none: 0px;
  --ds-radius-sm: 2px;
  --ds-radius-md: 4px;
  --ds-radius-default: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;
  --ds-radius-full: 9999px;
}