Colors
Core color palette and variations used throughout the design system.
Primary Colors
Primary 100
--color-primary-100
Primary 300
--color-primary-300
Primary 500
--color-primary-500
Primary 700
--color-primary-700
Primary 900
--color-primary-900
Secondary Colors
Secondary 100
--color-secondary-100
Secondary 300
--color-secondary-300
Secondary 500
--color-secondary-500
Secondary 700
--color-secondary-700
Secondary 900
--color-secondary-900
System Colors
Success
--color-success
Danger
--color-danger
Warning
--color-warning
Info
--color-info
Neutral Colors
Light
--color-light
Dark
--color-dark
Muted
--color-muted
Typography
Font families, sizes, weights, and line heights used in the system. More on typography classes on the typography page.
Font Family
System Font Stack
--font-family-base
Font Sizes
Small Text (--text-sm)
Base Text (--text-base)
Large Text (--text-lg)
Font Weights
Light Weight (--text-light)
Base Weight (--text-base)
Bold Weight (--text-bold)
Spacing
Consistent spacing units used throughout the system.
--spacing-1 (4px)
--spacing-2 (8px)
--spacing-3 (16px)
--spacing-4 (24px)
--spacing-5 (32px)
Borders
Border properties used in the system.
Default Border
--border-width: 1px
--border-color: var(--color-gray-400);
--border-radius: 0.25rem
Shadows
Box shadow variations used in the system.
Small Shadow
--shadow-sm
Medium Shadow
--shadow-md
Large Shadow
--shadow-lg
Breakpoints
Responsive breakpoints used in the system.
--breakpoint-sm: 576px--breakpoint-md: 768px--breakpoint-lg: 992px--breakpoint-xl: 1200px
Complete Variables Reference
/* variables.css - Design Tokens */
:root {
/* Colors */
/* Base Colors */
--color-primary: #6e0e50;
--color-secondary: #ffe098;
--color-tertiary: #e28ab7;
--color-quaternary: #0ec3ad;
/* Primary Color Shades */
--color-primary-100: #f2e6ee;
/* Lightest */
--color-primary-200: #d5b0c7;
/* Lighter */
--color-primary-300: var(--color-primary-default);
/* Base color */
--color-primary-400: #5c0c43;
/* Darker shade */
--color-primary-500: #4a0a36;
/* Darkest */
/* Secondary Color Shades */
--color-secondary-100: #fff9ed;
/* Lightest */
--color-secondary-200: #fff0c4;
/* Lighter */
--color-secondary-300: var(--color-secondary-default);
/* Base color */
--color-secondary-400: #ffd370;
/* Darker shade */
--color-secondary-500: #ffc647;
/* Darkest */
--color-success: #1e7e34;
--color-danger: #dc3545;
--color-warning: #ffc107;
--color-info: #0266d6;
--color-light: #e9ecef;
--color-muted: #6c757d;
--color-dark: #343a40;
--color-white: #fff;
--color-black: #000;
--color-transparent: transparent;
--color-success-100: #d4edda;
--color-success-200: #c3e6cb;
--color-danger-100: #f8d7da;
--color-danger-200: #f5c6cb;
--color-warning-100: #fff3cd;
--color-warning-200: #ffeeba;
--color-info-100: #cce5ff;
--color-info-200: #b8daff;
/* Expanded gray scale */
--color-gray-50: #f9fafb; /* Lightest gray */
--color-gray-100: #f8f9fa; /* Slightly darker than 50 */
--color-gray-200: #e9ecef; /* Matches --color-light */
--color-gray-300: #dee2e6; /* Slightly darker */
--color-gray-400: #ced4da; /* Medium light gray */
--color-gray-500: #adb5bd; /* Mid gray */
--color-gray-600: #6c757d; /* Matches --color-muted */
--color-gray-700: #495057; /* Darker muted gray */
--color-gray-800: #343a40; /* Matches --color-dark */
--color-gray-900: #212529; /* Almost black */
/* Typography */
--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
/* You probably want to replace this font family with your own in `custom.css` */
--text-base: 1rem;
--text-sm: 0.875rem;
--text-lg: 1.25rem;
--text-light: 200;
--text-base: 400;
--text-bold: 700;
--line-height-base: 1.5;
/* Spacing */
--spacing-unit: 0.25rem;
--spacing-1: calc(var(--spacing-unit) * 1);
/* 4px */
--spacing-2: calc(var(--spacing-unit) * 2);
/* 8px */
--spacing-3: calc(var(--spacing-unit) * 4);
/* 16px */
--spacing-4: calc(var(--spacing-unit) * 6);
/* 24px */
--spacing-5: calc(var(--spacing-unit) * 8);
/* 32px */
/* Border */
--border-radius: 0.25rem;
--border-width: 1px;
--border-color: var(--color-gray-400);
/* Transitions */
--transition-base: all 0.2s ease-in-out;
/* 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);
/* Breakpoints */
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
}