Color Mode
Color Mode keeps the neutral gray base of Light Mode and adds color selectively — only where it carries semantic meaning. This prevents visual clutter while making critical signals immediately recognizable.Primary red — critical and active states
Red is used for elements that require attention or indicate the active state:- Active navigation tabs and tab underlines
- Selected items in lists and catalogs
- Active focus indicators
- AI suggestion accents (borders and icons)
- Primary call-to-action buttons
- Critical alert and severity badges
- Important action highlights
Secondary blue — informational and metadata
Blue is used for informational and supporting elements that reference other content:- Metadata chips (Domain, Product, Tag labels)
- Linked asset references
- Lineage references and node connections
- Informational pill badges
- Secondary actions
Design constraints
- Backgrounds and most cards remain neutral/light gray — color is not used as a background fill.
- Red remains visually dominant over blue across the interface.
- Blue is for informational or supporting context only — never for critical states.
- Hover, selected, and active states are consistent across all components.
Components affected by Color Mode
- Top navigation
- Tabs and tab underlines
- Status badges (alert severity, asset status)
- AI suggestion cards
- Metadata chips and tags
- Alert state indicators
- Lineage graph nodes
- Primary and secondary buttons
- Hover and selected states