Export Design Tokens

Export your design tokens in various formats for use in your projects.

:root {
  /* Brand Colors */
  --color-primary-fill: rgba(59, 130, 246, 0.05);
  --color-primary-stroke-strong: rgba(59, 130, 246, 0.80);
  --color-primary-stroke-weak: rgba(59, 130, 246, 0.20);
  --color-primary-text: rgba(59, 130, 246, 1.00);

  /* Status Colors */
  --color-error-fill: rgba(220, 38, 38, 0.05);
  --color-error-stroke-strong: rgba(220, 38, 38, 0.80);
  --color-error-stroke-weak: rgba(220, 38, 38, 0.20);
  --color-error-text: rgba(220, 38, 38, 1.00);
  --color-warning-fill: rgba(245, 158, 11, 0.05);
  --color-warning-stroke-strong: rgba(245, 158, 11, 0.80);
  --color-warning-stroke-weak: rgba(245, 158, 11, 0.20);
  --color-warning-text: rgba(245, 158, 11, 1.00);
  --color-success-fill: rgba(22, 163, 74, 0.05);
  --color-success-stroke-strong: rgba(22, 163, 74, 0.80);
  --color-success-stroke-weak: rgba(22, 163, 74, 0.20);
  --color-success-text: rgba(22, 163, 74, 1.00);

  /* Monochromatic Scale */
  --color-mono-text-strong: rgba(0, 6, 38, 0.9);
  --color-mono-text-weak: rgba(0, 9, 51, 0.65);
  --color-mono-stroke-strong: rgba(0, 13, 77, 0.45);
  --color-mono-stroke-weak: rgba(0, 17, 102, 0.1);
  --color-mono-fill-weak: rgba(0, 21, 128, 0.04);
  --color-mono-fill-weaker: rgba(0, 21, 128, 0.02);

  /* Semantic Tokens */
  --bg-active: rgba(0, 0, 0, 0.04);
  --bg-base: rgba(255, 255, 255, 1);
  --bg-brand: rgba(59, 130, 246, 0.05);
  --bg-brand-strong: rgba(59, 130, 246, 1);
  --bg-error: rgba(220, 38, 38, 0.05);
  --bg-hover: rgba(0, 0, 0, 0.02);
  --bg-subtle: rgba(250, 250, 250, 1);
  --bg-success: rgba(22, 163, 74, 0.05);
  --bg-warning: rgba(245, 158, 11, 0.05);
  --border-base: rgba(0, 17, 102, 0.1);
  --border-brand: rgba(59, 130, 246, 0.2);
  --border-error: rgba(220, 38, 38, 0.2);
  --border-focus: rgba(59, 130, 246, 0.5);
  --border-strong: rgba(0, 13, 77, 0.45);
  --border-success: rgba(22, 163, 74, 0.2);
  --border-warning: rgba(245, 158, 11, 0.2);
  --stroke-brand-medium: rgba(59, 130, 246, 0.5);
  --stroke-brand-strong: rgba(59, 130, 246, 0.8);
  --stroke-brand-weak: rgba(59, 130, 246, 0.2);
  --stroke-disabled: rgba(200, 200, 200, 0.3);
  --stroke-error-medium: rgba(220, 38, 38, 0.5);
  --stroke-error-strong: rgba(220, 38, 38, 0.8);
  --stroke-error-weak: rgba(220, 38, 38, 0.2);
  --stroke-focus: rgba(59, 130, 246, 0.5);
  --stroke-selected: rgba(59, 130, 246, 0.8);
  --stroke-strong: rgba(0, 13, 77, 0.45);
  --stroke-success-medium: rgba(22, 163, 74, 0.5);
  --stroke-success-strong: rgba(22, 163, 74, 0.8);
  --stroke-success-weak: rgba(22, 163, 74, 0.2);
  --stroke-warning-medium: rgba(245, 158, 11, 0.5);
  --stroke-warning-strong: rgba(245, 158, 11, 0.8);
  --stroke-warning-weak: rgba(245, 158, 11, 0.2);
  --stroke-weak: rgba(0, 17, 102, 0.1);
  --text-brand: rgba(59, 130, 246, 1);
  --text-brand-hover: rgba(29, 100, 216, 1);
  --text-disabled: rgba(150, 150, 150, 0.5);
  --text-error: rgba(220, 38, 38, 1);
  --text-strong: rgba(0, 6, 38, 0.9);
  --text-success: rgba(22, 163, 74, 1);
  --text-warning: rgba(245, 158, 11, 1);
  --text-weak: rgba(0, 9, 51, 0.65);

  /* Typography */
  --font-heading: Inter, sans-serif;
  --font-body: Inter, sans-serif;
  --line-height-base: 1.5;
  --font-size-base: 16px;
  --font-size-display: 62px;
  --font-size-h1: 49px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --font-size-h4: 25px;
  --font-size-lg: 20px;
  --font-size-sm: 16px;
  --font-size-xs: 13px;

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

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