Skip to content

Brand Color System

Overview

Our brand color system is built on Material Design 3 principles, featuring deep purple and amber as the foundation for a sophisticated, professional, and accessible color palette. The system ensures WCAG 2.1 AA compliance while maintaining visual excellence across all touchpoints.

Core Brand Colors

Primary Palette - Deep Purple

The deep purple palette conveys authority, creativity, and technical sophistication - perfect for a premium documentation platform.

Primary 500
Primary 100
Primary 300
Primary 700
Primary 900

Secondary Palette - Amber

The amber palette adds energy, warmth, and optimism - ideal for calls-to-action and highlighting important content.

Secondary 500
Secondary 100
Secondary 300
Secondary 700
Secondary 900

Semantic Colors

Status Colors

Professional semantic colors that work harmoniously with our brand palette:

Success
Warning
Error
Info

Material Design 3 Integration

Our color system seamlessly integrates with Material Design 3 tokens:

System Tokens

/* Primary colors */
--md-sys-color-primary: var(--brand-primary-500);
--md-sys-color-on-primary: var(--brand-on-primary-500);
--md-sys-color-primary-container: var(--brand-primary-100);
--md-sys-color-on-primary-container: var(--brand-primary-800);

/* Secondary colors */
--md-sys-color-secondary: var(--brand-secondary-600);
--md-sys-color-on-secondary: var(--brand-on-secondary-600);
--md-sys-color-secondary-container: var(--brand-secondary-100);
--md-sys-color-on-secondary-container: var(--brand-secondary-800);

Component Examples

Button Components

Dark Theme Support

Our color system automatically adapts to dark themes:

Surface
Primary
Secondary

Colors automatically adjust for optimal contrast and readability in dark mode. The system uses lighter shades of purple and amber while maintaining brand recognition.

[data-md-color-scheme="slate"] {
  --md-sys-color-primary: var(--brand-primary-300);
  --md-sys-color-secondary: var(--brand-secondary-400);
  /* ... additional dark theme adjustments */
}

Brand Gradients

Professional Gradients

Primary Gradient
Deep Purple Sophistication
Secondary Gradient
Amber Energy
Brand Gradient
Purple to Amber
Hero Gradient
Dynamic Brand Expression

Accessibility Compliance

WCAG 2.1 AA Standards

All color combinations meet or exceed WCAG 2.1 AA contrast requirements:

Contrast Ratios

  • Normal text: Minimum 4.5:1 contrast ratio ✓
  • Large text: Minimum 3:1 contrast ratio ✓
  • UI components: Minimum 3:1 contrast ratio ✓
  • Graphical elements: Minimum 3:1 contrast ratio ✓

High Contrast Support

The color system automatically adapts for users who prefer high contrast:

@media (prefers-contrast: high) {
  :root {
    --md-sys-color-primary: var(--brand-primary-700);
    --md-sys-color-secondary: var(--brand-secondary-700);
    --md-sys-color-outline: var(--brand-neutral-90);
  }
}

Reduced Motion Support

Respects user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Usage Guidelines

Do's and Don'ts

Do

  • Use primary purple for main navigation, headers, and primary actions
  • Use amber for call-to-action buttons, highlights, and success states
  • Maintain sufficient contrast ratios for all text
  • Test colors in both light and dark themes
  • Use semantic colors (success, warning, error) consistently
  • Apply gradients sparingly for premium touches

Don't

  • Mix our brand colors with other brand palettes
  • Use color alone to convey important information
  • Create color combinations below WCAG AA standards
  • Override semantic color meanings (don't use red for success)
  • Use too many colors in a single interface
  • Apply gradients to body text or small elements

Color Application

Element Type Recommended Colors Usage
Headers Primary 500-700 Main headings, navigation
Body Text Neutral 95 (light), Neutral 10 (dark) Readable body content
Links Primary 600, Secondary 600 Clickable elements
Buttons (Primary) Primary 500 background Main call-to-action
Buttons (Secondary) Secondary 500 background Secondary actions
Success States Success green Confirmations, completed states
Error States Error red Warnings, error messages
Backgrounds Neutral 0-30 (light), Neutral 70-100 (dark) Page and component backgrounds

Technical Implementation

CSS Custom Properties

/* Use system tokens for components */
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);

/* Use brand tokens for custom elements */
background: var(--brand-gradient-primary);
border-color: var(--brand-primary-300);

Utility Classes

<!-- Background utilities -->
<div class="bg-primary">Primary background</div>
<div class="bg-secondary">Secondary background</div>
<div class="bg-success">Success background</div>

<!-- Text utilities -->
<span class="text-primary">Primary text</span>
<span class="text-secondary">Secondary text</span>

<!-- Gradient utilities -->
<div class="bg-gradient-brand">Brand gradient</div>
<div class="bg-gradient-hero">Hero gradient</div>

Color Validation Tools

For development and testing:

  1. WebAIM Contrast Checker: webaim.org/resources/contrastchecker
  2. Chrome DevTools: Accessibility panel for contrast auditing
  3. WAVE Browser Extension: Automated accessibility checking

This color system provides the foundation for our brand identity while ensuring excellent accessibility and user experience across all devices and preferences.