@root-axis/design-tokens/css/tokens.css

A minimalistic set of design tokens for consistent UI elements in CSS, SCSS, JavaScript, TypeScript, and JSON

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --size-0: 0px;
  --size-1: 1px;
  --size-2: 4px;
  --size-3: 8px;
  --size-4: 12px;
  --size-5: 16px;
  --size-6: 20px;
  --size-7: 24px;
  --size-8: 32px;
  --size-9: 40px;
  --size-10: 48px;
  --size-11: 64px;
  --size-12: 80px;
  --size-13: 96px;
}