Design System Generator
Generate comprehensive design system documentation
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.