Color System
Three-tier architecture: primitives, semantic tokens, and component tokens. Click any swatch to copy its hex value.
Semantic Colors
Role-based colors used across the entire interface.
Neutral Scale
Used for backgrounds, borders, and text. Uses the neutral palette (not gray) for consistency.
Blue Scale (Primary)
The full primary brand blue range.
Module Accent Colors
Each module has an accent color used at 100% for icons and 20% opacity for backgrounds.
Audit logging with before/after diffs
Config management and versioning
Infrastructure cost tracking
Deploy monitoring with rollback
Log aggregation and analysis
Runtime process metrics
Code analysis and metadata
Secret management with 1Password
Automated browser video recording
Domain brainstorming & workspaces
Accessibility Matrix
WCAG contrast ratios for common text/background combinations.
| Text Color | Background | Preview | Ratio | AA | AA Large | AAA |
|---|---|---|---|---|---|---|
White | Primary (blue-600) | Sample | 4.68:1 | |||
Primary (blue-600) | White | Sample | 4.68:1 | |||
Neutral-900 | White | Sample | 15.39:1 | |||
White | Neutral-900 | Sample | 15.39:1 | |||
Neutral-900 | Neutral-100 | Sample | 12.82:1 | |||
White | Success (green-600) | Sample | 3.56:1 | |||
White | Danger (red-600) | Sample | 4.63:1 | |||
White | Warning (amber-600) | Sample | 3.19:1 | |||
Neutral-50 | Neutral-950 | Sample | 19.42:1 | |||
Neutral-400 | Neutral-950 | Sample | 7.81:1 | |||
Blue-500 | Neutral-950 | Sample | 5.09:1 | |||
Green-500 | Neutral-950 | Sample | 7.69:1 |