Brand Colors
Core brand colors reserved exclusively for logos, primary CTAs, and brand-specific elements. These colors represent our brand identity and should be used sparingly.
Brand Primary Text
.text-brand-primary#007bff
Primary brand text color for logos and main CTAs
.bg-brand-primary#007bff
Primary brand background
Brand Secondary Text
.text-brand-secondary#1d4ed8
Secondary brand text color for accents
.bg-brand-secondary#1d4ed8
Secondary brand background
Brand Tertiary Text
.text-brand-tertiary#3b82f6
Tertiary brand text color for highlights
.bg-brand-tertiary#3b82f6
Tertiary brand background
Text Colors
Hierarchical text colors designed for optimal readability and content organization. Use these classes to establish clear information hierarchy.
Primary Content Text
.text-content-primary#111827
Primary text color for headings and important content
Secondary Content Text
.text-content-secondaryrgb(23, 29, 39)
Secondary text color for subheadings
Tertiary Content Text
.text-content-tertiary#4b5563
Tertiary text color for body text
Muted Content Text
.text-content-muted#6b7280
Muted text color for less important content
Inverted Content Text
.text-content-inverted#ffffff
Inverted text color for dark backgrounds
Background Colors
Surface background colors for creating depth and visual separation. These colors work together to create layered interfaces.
.bg-surface-primary#f3f1f1
Primary surface background
.bg-surface-secondary#dbdddf
Secondary surface background
.bg-surface-tertiary#999a9b
Tertiary surface background
.bg-surface-muted#f5f5f5
Muted surface background
.bg-surface-inverted#111827
Inverted surface background
Interactive Colors
Colors specifically designed for interactive elements like buttons, links, and form controls. These ensure consistent interaction patterns.
.bg-interactive-primary#007bff
Primary interactive element background
.bg-interactive-secondary#1d4ed8
Secondary interactive element background
.bg-interactive-tertiary#3b82f6
Tertiary interactive element background
.bg-interactive-disabled#99bbf3
Disabled interactive element background
Border Colors
Border colors for creating visual boundaries and emphasis. These colors work with the interactive system to provide consistent borders.
.border-theme-border-primary#007bff
Primary border color
.border-theme-border-secondary#1d4ed8
Secondary border color
.border-theme-border-tertiary#3b82f6
Tertiary border color
Ring Colors
Ring colors specifically for focus states and accessibility. These ensure consistent focus indicators across all interactive elements.
.ring-theme-ring-primary#007bff
Primary ring color for focus states
.ring-theme-ring-secondary#1d4ed8
Secondary ring color for focus states
.ring-theme-ring-tertiary#3b82f6
Tertiary ring color for focus states
Outline Colors
Outline colors for additional visual emphasis and accessibility features. These complement the ring colors for complex UI states.
.outline-theme-outline-primary#007bff
Primary outline color
.outline-theme-outline-secondary#1d4ed8
Secondary outline color
.outline-theme-outline-tertiary#3b82f6
Tertiary outline color
Accent Colors
Accent colors for form controls like checkboxes, radio buttons, and range sliders. These provide consistent theming for native form elements.
.accent-theme-accent-primary#007bff
Primary accent color for form controls
.accent-theme-accent-secondary#1d4ed8
Secondary accent color for form controls
.accent-theme-accent-tertiary#3b82f6
Tertiary accent color for form controls
Placeholder Colors
Placeholder text colors for form inputs and text areas. These ensure readable yet subtle placeholder text across all input types.
.placeholder-theme-placeholder-primary#9ca3af
Primary placeholder text color (Cool gray)
.placeholder-theme-placeholder-secondary#6b7280
Secondary placeholder text color (Medium gray)
Divide Colors
Divider colors for separating content sections and list items. These create subtle visual separation without overwhelming the interface.
.divide-theme-divide-primary#d1d5db
Primary divider color
.divide-theme-divide-secondary#e5e7eb
Secondary divider color
Shadow Colors
Shadow colors for depth and elevation effects. These subtle shadows enhance the visual hierarchy and create layered interfaces.
.shadow-theme-shadow-primaryrgba(0, 123, 255, 0.1)
Primary shadow color
.shadow-theme-shadow-secondaryrgba(52, 211, 153, 0.1)
Secondary shadow color
Caret Colors
Caret colors for text input cursors and selection indicators. These ensure consistent cursor visibility across all text inputs.
.caret-theme-caret-primary#007bff
Primary caret color
.caret-theme-caret-secondary#1d4ed8
Secondary caret color
Usage Rules & Guidelines
Essential rules and constraints for proper color system implementation. Following these ensures consistency and maintainability.
Application Hierarchy
- •Brand colors → ONLY logos/CTAs
- •Content colors → Text hierarchy ONLY
- •Surface colors → backgrounds hierarchy ONLY
- •UI states → Interactive elements ONLY
- •System states → Status indicators ONLY
Usage Constraints
- •Using brand colors for non-brand elements
- •Using UI state colors for backgrounds/text
- •Overriding opacity values
- •Combining multiple color classes
Performance Requirements
- •Zero JS animation logic
- •CSS-only transitions/animations
- •Client components ONLY when interactivity required
- •Lazy-load non-critical assets
- •Tree-shakeable components
- •Inline critical SVGs
- •Dynamic imports for heavy elements
Accessibility Standards
- •Semantic HTML5 structure
- •ARIA roles where appropriate
- •Minimum AA color contrast
- •Focus states for all interactives
- •Reduced motion alternatives
- •Screen reader compatible
Implementation Examples
Practical examples showing correct and incorrect usage patterns. These examples demonstrate best practices.
Usage Example
<button class="bg-interactive-primary text-content-inverted"><div class="bg-brand-primary text-theme-state-error">Interactive elements should use interactive colors, not brand colors. Never mix brand colors with state colors.
Usage Example
<h1 class="text-content-primary">Main Heading</h1><h1 class="text-brand-primary">Main Heading</h1>Headings should use content colors for hierarchy, not brand colors unless they are part of the brand identity.
Usage Example
<div class="bg-surface-secondary border-theme-border-tertiary"><div class="bg-interactive-primary border-theme-state-error">Use surface colors for backgrounds and appropriate border colors. Don't mix interactive and state colors inappropriately.