Quick Start Presets

primary
50
100
200
300
400
500
600
700
800
900
secondary
50
100
200
300
400
500
600
700
800
900
success
50
100
200
300
400
500
600
700
800
900
warning
50
100
200
300
400
500
600
700
800
900
danger
50
100
200
300
400
500
600
700
800
900
info
50
100
200
300
400
500
600
700
800
900
light
50
100
200
300
400
500
600
700
800
900
dark
50
100
200
300
400
500
600
700
800
900

Export Design System

/* My Design System v1.0.0 */
/* A comprehensive design system for consistent UI development. */

:root {
  /* Colors */
  --color-primary: #2563EB;
  --color-primary-50: #ffffff;
  --color-primary-100: #d3e0fb;
  --color-primary-200: #a8c1f7;
  --color-primary-300: #7ca1f3;
  --color-primary-400: #5182ef;
  --color-primary-500: #2563eb;
  --color-primary-600: #1f54c8;
  --color-primary-700: #1a45a5;
  --color-primary-800: #143681;
  --color-primary-900: #0f285e;
  --color-secondary: #7C3AED;
  --color-secondary-50: #ffffff;
  --color-secondary-100: #e5d8fb;
  --color-secondary-200: #cbb0f8;
  --color-secondary-300: #b089f4;
  --color-secondary-400: #9661f1;
  --color-secondary-500: #7c3aed;
  --color-secondary-600: #6931c9;
  --color-secondary-700: #5729a6;
  --color-secondary-800: #442082;
  --color-secondary-900: #32175f;
  --color-success: #10B981;
  --color-success-50: #ffffff;
  --color-success-100: #cff1e6;
  --color-success-200: #9fe3cd;
  --color-success-300: #70d5b3;
  --color-success-400: #40c79a;
  --color-success-500: #10b981;
  --color-success-600: #0e9d6e;
  --color-success-700: #0b825a;
  --color-success-800: #096647;
  --color-success-900: #064a34;
  --color-warning: #F59E0B;
  --color-warning-50: #ffffff;
  --color-warning-100: #fdecce;
  --color-warning-200: #fbd89d;
  --color-warning-300: #f9c56d;
  --color-warning-400: #f7b13c;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d08609;
  --color-warning-700: #ac6f08;
  --color-warning-800: #875706;
  --color-warning-900: #623f04;
  --color-danger: #EF4444;
  --color-danger-50: #ffffff;
  --color-danger-100: #fcdada;
  --color-danger-200: #f9b4b4;
  --color-danger-300: #f58f8f;
  --color-danger-400: #f26969;
  --color-danger-500: #ef4444;
  --color-danger-600: #cb3a3a;
  --color-danger-700: #a73030;
  --color-danger-800: #832525;
  --color-danger-900: #601b1b;
  --color-info: #3B82F6;
  --color-info-50: #ffffff;
  --color-info-100: #d8e6fd;
  --color-info-200: #b1cdfb;
  --color-info-300: #89b4fa;
  --color-info-400: #629bf8;
  --color-info-500: #3b82f6;
  --color-info-600: #326fd1;
  --color-info-700: #295bac;
  --color-info-800: #204887;
  --color-info-900: #183462;
  --color-light: #F3F4F6;
  --color-light-50: #ffffff;
  --color-light-100: #fdfdfd;
  --color-light-200: #fafbfb;
  --color-light-300: #f8f8fa;
  --color-light-400: #f5f6f8;
  --color-light-500: #f3f4f6;
  --color-light-600: #cfcfd1;
  --color-light-700: #aaabac;
  --color-light-800: #868687;
  --color-light-900: #616262;
  --color-dark: #1F2937;
  --color-dark-50: #ffffff;
  --color-dark-100: #d2d4d7;
  --color-dark-200: #a5a9af;
  --color-dark-300: #797f87;
  --color-dark-400: #4c545f;
  --color-dark-500: #1f2937;
  --color-dark-600: #1a232f;
  --color-dark-700: #161d27;
  --color-dark-800: #11171e;
  --color-dark-900: #0c1016;

  /* Typography */
  --font-family: Inter, system-ui, sans-serif;
  --font-heading: Inter, system-ui, sans-serif;
  --line-height: 1.5;
  --font-size-xs: 10px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 25px;
  --font-size-2xl: 31px;
  --font-size-3xl: 39px;
  --font-size-4xl: 49px;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* Spacing */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;
  --space-15: 192px;
  --space-16: 256px;

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

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

Design System Best Practices

Start with Colors

Define your primary brand color first, then build a harmonious palette around it.

Use a Type Scale

A consistent type scale (like 1.25 or 1.333) creates visual harmony across all text sizes.

Base Unit for Spacing

Using a base unit (4px or 8px) ensures consistent spacing throughout your design.

Document Everything

Include descriptions and usage guidelines with your design tokens for team consistency.