Colors
The color palette for the Archimede Design System.
Color Philosophy
Our color system is designed to create a cohesive visual language that is both accessible and aesthetically pleasing. The palette is organized into primary, secondary, neutral, and semantic colors to provide flexibility and consistency across interfaces.
Primary Colors
Primary
#1F2937
Primary Light
#374151
Primary Dark
#111827
Secondary Colors
Secondary
#6366F1
Secondary Light
#818CF8
Secondary Dark
#4F46E5
Neutral Colors
White
#FFFFFF
Gray 50
#F9FAFB
Gray 100
#F3F4F6
Gray 200
#E5E7EB
Gray 300
#D1D5DB
Gray 400
#9CA3AF
Gray 500
#6B7280
Gray 600
#4B5563
Gray 700
#374151
Gray 800
#1F2937
Gray 900
#111827
Black
#000000
Semantic Colors
Success
#10B981
Warning
#F59E0B
Error
#EF4444
Info
#3B82F6
Usage
Colors are implemented as CSS variables and can be accessed in your code. Here's how to use them:
This element uses the primary color for background and white for text.
Example
Accessibility Guidelines
When using colors, ensure that:
- Text has sufficient contrast against its background (WCAG AA requires 4.5:1 for normal text)
- Color is not the only means of conveying information
- Interactive elements have clear focus and hover states