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)

100
200
300
400
500
base
600
700
800
900
950

Used for main actions across the system. Aliases: --color-primary → --color-primary-500

Secondary - Orange-Red (Branding accent)

100
200
300
400
500
base
600
700
800
900
950

Branding combo color. Rarely used in UI elements, mainly for graphics and eye-catching anchors.

Blue (Dynamic brand color for links/interactive)

100
200
300
400
500
base
600
700
800
900
950

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)

100
200
300
400
500
600
700
800
900
950

Aliases: --color-warning → --color-orange-500

Red (Negative/Critical)

100
200
300
400
500
600
700
800
900
950

Aliases: --color-danger → --color-red-500

Green (Positive/Success)

100
200
300
400
500
600
700
800
900
950

Aliases: --color-success → --color-green-500

Magenta (Data Visualization)

100
200
300
400
500
600
700
800
900
950

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)

0
100
200
300
400
500
600
700
800
900
950

Aliases: --color-light → --color-neutral-100, --color-dark → --color-neutral-900

Neutral Translucent (Blue-tinted, for overlays/shadows/borders)

100
200
300
400
500
600
700
800
900
950

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

.bg-background

For page backgrounds only. --color-background

Table Header

.bg-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 .tw-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)

Primary
Secondary

3-Color Categorical (Clear distinction)

Blue
Green
Orange

5-Color Categorical (Full range)

Primary
Blue
Green
Orange
Magenta

Diverging (Negative ← Neutral → Positive)

Red
Neutral
Green

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))