Colors

The color system uses a muted, professional base palette with strong semantic states for clear communication.

Primitive Palette

Each color has shades from 50 (lightest) to 950 (darkest):

Color	50	500	900	Purpose
Primary	`#f0f9ff`	`#0ea5e9`	`#0c4a6e`	Brand, interactive elements
Success	`#f0fdf4`	`#22c55e`	`#14532d`	Positive actions, verified states
Warning	`#fffbeb`	`#f59e0b`	`#78350f`	Caution, pending states
Error	`#fef2f2`	`#ef4444`	`#7f1d1d`	Destructive actions, errors
Info	`#eff6ff`	`#3b82f6`	`#1e3a5f`	Informational, neutral actions
Neutral	`#fafafa`	`#737373`	`#171717`	Text, borders, backgrounds

Semantic Colors

Use semantic tokens in application code:

import { semanticColors } from '@gtcx/tokens';
 
// Text
semanticColors.text           // Primary text (neutral-900)
semanticColors.textSecondary  // Secondary text (neutral-600)
semanticColors.textMuted      // Muted text (neutral-400)
 
// Surfaces
semanticColors.background     // Page background (neutral-50)
semanticColors.surface        // Card surface (white)
semanticColors.surfaceHover   // Hover state (neutral-100)
 
// Borders
semanticColors.border         // Default border (neutral-200)
semanticColors.borderSubtle   // Subtle border (neutral-100)
 
// States
semanticColors.success        // Success green
semanticColors.warning        // Warning amber
semanticColors.error          // Error red
semanticColors.info           // Info blue

Usage Guidelines

Use semantic tokens in application code, never primitive values
Reserve red for errors and destructive actions only
Use muted colors for secondary information
Ensure sufficient contrast (WCAG AA: 4.5:1 for text, 3:1 for large text)
See Dark Mode for dark theme color mappings

Overview Typography