COLOR SYSTEM: Production color system from Figma
PALETTE: 3 Brand Colors | 4 Utility Colors | Neutral System | Special Colors
SHADES: Tailwind-style numbering (100-950)
This color system uses descriptive naming with common sense semantics (red = critical, green = positive) rather than enforced semantic meaning, making colors suitable for both UI and data visualization. Each color has 10 shades plus semantic aliases for convenient use.
Brand Colors
Brand Colors: Core colors defining the platform's visual identity. Each has a designated base shade (500) and 10 total shades for hierarchical use.
Primary - Dark Blue (Main signature color)
base
Used for main actions across the system. Aliases: --color-primary → --color-primary-500
Secondary - Orange-Red (Branding accent)
base
Branding combo color. Rarely used in UI elements, mainly for graphics and eye-catching anchors.
Blue (Dynamic brand color for links/interactive)
base
Very dynamic and common. Used for links and interactive elements. Aliases: --color-info → --color-blue-500
Utility Colors
Utility Colors: Common sense colors for UI feedback and data visualization. Red = critical, Green = positive, Orange = caution, Magenta = data expansion.
Orange (Caution/Warning)
Aliases: --color-warning → --color-orange-500
Red (Negative/Critical)
Aliases: --color-danger → --color-red-500
Green (Positive/Success)
Aliases: --color-success → --color-green-500
Magenta (Data Visualization)
Additional color for data visualization expansion.
Neutral System
Neutral Colors: Universal colors for backgrounds and text hierarchy. Solid neutrals plus translucent variants for overlays and subtle UI elements.
Neutral (Solid)
Aliases: --color-light → --color-neutral-100, --color-dark → --color-neutral-900
Neutral Translucent (Blue-tinted, for overlays/shadows/borders)
Base: rgba(37, 58, 106, opacity). Used for texts, shadows, lines, borders, and neutral button appearances.
Special Purpose Colors
Special Colors: Specifically tuned for dedicated uses in the platform.
Background
For page backgrounds only. --color-background
Table Header
For table headers only. --color-table-header
Semantic Aliases (Backward Compatibility)
Semantic Names: Convenient aliases for common use cases. All point to shade 500 of their respective colors.
primary
→ primary-500
success
→ green-500
danger
→ red-500
warning
→ orange-500
info
→ blue-500
light
→ neutral-100
dark
→ neutral-900
Note about Secondary:
The --color-secondary alias points to the orange-red brand color (secondary-500). For component variants like .btn-secondary, neutral colors are used instead to maintain usability.
Data Visualization Guidelines
Color Pairing: Recommended color combinations for charts and data visualization. See the full analysis document for detailed guidance.
2-Color Categorical (High contrast, brand-aligned)
3-Color Categorical (Clear distinction)
5-Color Categorical (Full range)
Diverging (Negative ← Neutral → Positive)
Accessibility Notes:
- Always pair color with another indicator (pattern, label, icon)
- Avoid red-green only combinations for colorblind accessibility
- Maintain 3:1 minimum contrast ratio between adjacent colors
- Test palettes with colorblind simulation tools
Quick Reference
Brand: primary (dark blue) | secondary (orange-red) | blue
Utility: orange | red | green | magenta
Neutral: neutral-0 through neutral-950 | neutral-translucent-100 through neutral-translucent-950
Special: background | table-header
Semantic Aliases: primary | success (green) | danger (red) | warning (orange) | info (blue) | light | dark
Utilities: .bg-{color}-{shade} | .text-{color}-{shade} | .border-{color}-{shade}
CSS Variables: var(--color-{name}-{shade}) (e.g., var(--color-primary-500))