Colors
Core color palette and variations used throughout the design system.
Primary Colors
Primary 50
--color-primary-50
Primary 100
--color-primary-100
Primary 200
--color-primary-200
Primary 300
--color-primary-300
Primary 400
--color-primary-400
Primary 500
--color-primary-500
Primary 600
--color-primary-600
Primary 700
--color-primary-700
Primary 800
--color-primary-800
Primary 900
--color-primary-900
Secondary Colors
Secondary 50
--color-secondary-50
Secondary 100
--color-secondary-100
Secondary 200
--color-secondary-200
Secondary 300
--color-secondary-300
Secondary 400
--color-secondary-400
Secondary 500
--color-secondary-500
Secondary 600
--color-secondary-600
Secondary 700
--color-secondary-700
Secondary 800
--color-secondary-800
Secondary 900
--color-secondary-900
System Colors
Success 100
--color-success-100
Success
--color-success
Error 100
--color-error-100
Error
--color-error
Warning 100
--color-warning-100
Warning
--color-warning
Info 100
--color-info-100
Info
--color-info
Neutral Colors
White
--color-white
Light
--color-light
Dark
--color-dark
Muted
--color-muted
Black
--color-black
Gray 50
--color-gray-50
Gray 100
--color-gray-100
Gray 200
--color-gray-200
Gray 300
--color-gray-300
Gray 400
--color-gray-400
Gray 500
--color-gray-500
Gray 600
--color-gray-600
Gray 700
--color-gray-700
Gray 800
--color-gray-800
Gray 900
--color-gray-900
Colors Variables Reference
/* Design Tokens */
:root {
/* Colors */
/* Base Colors */
--color-primary: #6e0e50; /* Primary base color */
--color-secondary: #ffe098; /* Secondary base color */
--color-tertiary: #e28ab7; /* Tertiary color */
--color-quaternary: #0ec3ad; /* Quaternary color */
/* Primary Color Shades */
--color-primary-50: #f7e3ed; /* Lightest */
--color-primary-100: #f4d1e0; /* Very light */
--color-primary-200: #e8a3c1; /* Lighter */
--color-primary-300: #dc75a2; /* Light */
--color-primary-400: #983579; /* Medium light */
--color-primary-500: #6e0e50; /* Base color */
--color-primary-600: #5c0c43; /* Medium dark */
--color-primary-700: #4a0a36; /* Dark */
--color-primary-800: #380828; /* Darker */
--color-primary-900: #26061b; /* Darkest */
--color-primary: var(--color-primary-500); /* Default primary color */
/* Secondary Color Shades */
--color-secondary-50: #fff8eb; /* Lightest */
--color-secondary-100: #fff9ed; /* Very light */
--color-secondary-200: #fff3d9; /* Lighter */
--color-secondary-300: #fff0c4; /* Light */
--color-secondary-400: #ffe9b0; /* Medium light */
--color-secondary-500: #ffe098; /* Base color */
--color-secondary-600: #ffd783; /* Medium dark */
--color-secondary-700: #ffd370; /* Dark */
--color-secondary-800: #ffc95c; /* Darker */
--color-secondary-900: #ffc048; /* Darkest */
--color-secondary: var(--color-secondary-500); /* Default secondary color */
/* System Colors */
--color-success: #1e7e34; /* Success color */
--color-success-100: #d4edda; /* Light success */
--color-success-200: #c3e6cb; /* Medium light success */
--color-error: #dc3545; /* Error color */
--color-error-100: #f8d7da; /* Light error */
--color-error-200: #f1c2c6; /* Medium light error */
--color-warning: #ffc647; /* Warning color */
--color-warning-100: #fff3cd; /* Light warning */
--color-warning-200: #ffe8b5; /* Medium light warning */
--color-info: #0266d6; /* Info color */
--color-info-100: #cce5ff; /* Light info */
--color-info-200: #b8daff; /* Medium light info */
/* Neutral Colors */
--color-light: #e9ecef; /* Light color */
--color-muted: #6c757d; /* Muted color */
--color-dark: #343a40; /* Dark color */
--color-white: #fff; /* White color */
--color-black: #000; /* Black color */
--color-transparent: transparent; /* Transparent color */
/* 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 */
}