Foundations
Colors
The color system defines semantic colors for consistent use across all products and platforms.
Semantic Colors
Use semantic tokens instead of raw hex values. They adapt across themes.
Token Value Preview
--color-primary #1A8D5F --color-primary-light #E8F5EF --color-primary-dark #146B48 --color-secondary #6366F1 --color-success #22C55E --color-error #EF4444 --color-warning #F59E0B --color-info #3B82F6 Text Colors
Token Value Preview
--color-text-primary #1A1A2E --color-text-secondary #5C5F6E --color-text-muted #9CA3AF --color-text-inverse #FFFFFF --color-text-link #1A8D5F Background Colors
Token Value Preview
--color-bg-primary #FFFFFF --color-bg-secondary #F7F8FA --color-bg-tertiary #F0F1F4 --color-bg-inverse #1A1A2E Gray Scale
50
100
200
300
400
500
600
700
800
900
Accessibility
All text must meet WCAG 2.1 AA: normal text 4.5:1, large text 3:1, UI elements 3:1.
CSS Variables
colors.css css
:root {
--color-primary: #1A8D5F;
--color-primary-light: #E8F5EF;
--color-primary-dark: #146B48;
--color-secondary: #6366F1;
--color-success: #22C55E;
--color-error: #EF4444;
--color-warning: #F59E0B;
--color-info: #3B82F6;
--color-text-primary: #1A1A2E;
--color-text-secondary: #5C5F6E;
--color-text-muted: #9CA3AF;
--color-text-inverse: #FFFFFF;
--color-bg-primary: #FFFFFF;
--color-bg-secondary: #F7F8FA;
--color-bg-tertiary: #F0F1F4;
--color-bg-inverse: #1A1A2E;
}