design token generator

:root {
  /* brand scale */
  --brand-50: #f6f4ff;
  --brand-100: #ebe4ff;
  --brand-200: #dac2ff;
  --brand-300: #c58aff;
  --brand-400: #b000ff;
  --brand-500: #5900e8;
  --brand-600: #8a00ff;
  --brand-700: #7200ff;
  --brand-800: #5700ed;
  --brand-900: #3900a3;
  --brand-950: #220069;

  /* brand semantic */
  --brand-background: #f6f4ff;
  --brand-surface: #ebe4ff;
  --brand-border: #dac2ff;
  --brand-muted: #c58aff;
  --brand-default: #5900e8;
  --brand-hover: #8a00ff;
  --brand-active: #7200ff;
  --brand-foreground: #3900a3;
  --brand-on-primary: #ffffff;
}