Color Palette

Brand Color Philosophy

The CHORUS color palette draws inspiration from premium natural materials in the Australian Landscape, and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.

Core Brand Colors

Carbon Black

#000000

Usage: Primary backgrounds, high-contrast text, logo applications. Psychology: Authority, sophistication, premium quality.

bg-carbon-950
bg-carbon-900
bg-carbon-800
bg-carbon-700
bg-carbon-600
bg-carbon-500
bg-carbon-400
bg-carbon-300
bg-carbon-200

Dark Mulberry

#0b0213

Usage: Hero backgrounds, dark accents, secondary elements. Psychology: Richness, mystery, luxury, power, and depth.

bg-mulberry-950
bg-mulberry-900
bg-mulberry-800
bg-mulberry-700
bg-mulberry-600
bg-mulberry-500
bg-mulberry-400
bg-mulberry-300
bg-mulberry-200

Walnut Brown

#403730

Usage: Warm accents, secondary elements, natural touches. Psychology: Reliability, craftsmanship, approachable intelligence.

bg-walnut-950
bg-walnut-900
bg-walnut-800
bg-walnut-700
bg-walnut-600
bg-walnut-500
bg-walnut-400
bg-walnut-300
bg-walnut-200

Brushed Nickel

#c1bfb1

Usage: UI elements, borders, technical precision. Psychology: Modern sophistication, precision, technology.

bg-nickel-950
bg-nickel-900
bg-nickel-800
bg-nickel-700
bg-nickel-600
bg-nickel-500
bg-nickel-400
bg-nickel-300
bg-nickel-200

System Colors

Ocean

#5a6c80

Usage: Primary actions, interactive elements, system feedback. Psychology: Trust, reliability, technological precision.

bg-ocean-950
bg-ocean-900
bg-ocean-800
bg-ocean-700
bg-ocean-600
bg-ocean-500
bg-ocean-400
bg-ocean-300
bg-ocean-200

Eucalyptus

#515d54

Usage: Success states, positive feedback, growth indicators. Applications: Success messages, positive data visualization.

bg-eucalyptus-950
bg-eucalyptus-900
bg-eucalyptus-800
bg-eucalyptus-700
bg-eucalyptus-600
bg-eucalyptus-500
bg-eucalyptus-400
bg-eucalyptus-300
bg-eucalyptus-200

Sand

#8e7b5e

Usage: Warning states, attention indicators, energy elements. Applications: Warnings, attention callouts, active processes.

bg-sand-950
bg-sand-900
bg-sand-800
bg-sand-700
bg-sand-600
bg-sand-500
bg-sand-400
bg-sand-300
bg-sand-200

Coral

#593735

Usage: Error states, critical alerts, problem indicators. Applications: Error messages, critical warnings, urgent notifications.

bg-coral-950
bg-coral-900
bg-coral-800
bg-coral-700
bg-coral-600
bg-coral-500
bg-coral-400
bg-coral-300
bg-coral-200

Theme Implementation

Dark Mode

(Default/Preferred)

Dark mode is the preferred default for all CHORUS Services applications

  • Background Hierarchy: Carbon Black → Mulberry Variants → Cool Gray → Border Gray
  • Text Hierarchy: Clean White → Light Gray → Purple Accents → Brand Colors
  • Aesthetic: Ultra-minimalist with sophisticated mulberry accents
  • Contrast: All combinations tested for WCAG 2.1 AA compliance

Light Mode

(Alternative)

Available as alternative but dark mode is strongly preferred

  • Background Hierarchy: Pure White → Natural Paper → Light Gray → Border Light
  • Text Hierarchy: Carbon Black → Medium Gray → Light Gray → Orchestration Blue
  • Usage: Available as alternative but dark mode is strongly preferred
  • Contrast: Optimized for readability on warm, natural backgrounds

Iconography System

Icon Philosophy

The CHORUS iconography system uses the Coolicons v4.1 library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.

Clarity & Recognition

Icons communicate instantly without language barriers

Theme Adaptive

Black and white variants ensure perfect contrast in all modes

Consistent Scale

Standardized sizing maintains visual harmony

Icon Categories

The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.

Interface & Navigation

Core UI elements for user interaction and navigation

Search Search
Settings Settings
Filter Filter
Check Check
External Link Link
Lock Security
Star Favorite
Delete Delete

File & Data Management

Document, folder, and cloud storage representations

Document Document
Folder Folder
Cloud Cloud
Download Download
Upload Upload
Archive Archive
Code Code
Search Files Search

Communication & Notifications

Message, alert, and social interaction indicators

Mail Mail
Chat Chat
Notifications Alerts
Phone Call
Share Share
Send Send
Notification Notice
Chat Dots Typing

Navigation & Direction

Directional indicators and navigation controls

Arrow Left Back
Arrow Right Forward
Arrow Up Up
Arrow Down Down
Chevron Down Expand
Chevron Right Next
Reload Refresh
Expand Fullscreen

Icon Sizing & Usage

Standard Sizes

Small Icon 16px (w-4 h-4): Inline text, small buttons
Medium Icon 20px (w-5 h-5): Standard UI elements
Large Icon 24px (w-6 h-6): Primary actions, headers
XL Icon 32px (w-8 h-8): Feature highlights, cards

Usage Guidelines

  • Consistency: Use same size for similar functions
  • Alignment: Center icons within their containers
  • Spacing: Minimum 8px padding around clickable icons
  • Context: Choose appropriate semantic meaning
  • Contrast: Black icons for light themes, white for dark
  • Accessibility: Always include alt text descriptions

Implementation Examples

HTML Implementation


<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" 
     alt="Search" 
     class="w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" 
     alt="Search" 
     class="w-5 h-5 hidden dark:block">


<button class="flex items-center gap-2 px-4 py-2">
  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Download.png" 
       alt="Download" 
       class="w-4 h-4 dark:hidden">
  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Download.png" 
       alt="Download" 
       class="w-4 h-4 hidden dark:block">
  Download File
</button>

SVG Implementation (Preferred)


<svg class="w-5 h-5 text-carbon-950 dark:text-white">
  <use href="icons/coolicons.v4.1/coolicons SVG/Interface/Search_Magnifying_Glass.svg#icon"></use>
</svg>


<svg class="w-5 h-5 fill-current text-carbon-950 dark:text-white" viewBox="0 0 24 24">
  <path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z"/>
</svg>

Tailwind Utility Classes

/* Icon sizing utilities */
.icon-xs { @apply w-3 h-3; }     /* 12px - minimal inline */
.icon-sm { @apply w-4 h-4; }     /* 16px - small buttons */
.icon-md { @apply w-5 h-5; }     /* 20px - standard UI */
.icon-lg { @apply w-6 h-6; }     /* 24px - primary actions */
.icon-xl { @apply w-8 h-8; }     /* 32px - feature highlights */

/* Theme-adaptive coloring */
.icon-adaptive { @apply text-carbon-950 dark:text-white; }
.icon-accent { @apply text-mulberry-950 dark:text-paper-200; }
.icon-muted { @apply text-carbon-600 dark:text-purple-300; }

Icon Library Access

The complete Coolicons v4.1 library is available in the brand assets directory with both PNG and SVG formats.

Accessibility & Vision Inclusivity

Inclusive Design Philosophy

The CHORUS brand system extends beyond standard accessibility to provide vision-inclusive design that supports users with different forms of color blindness while maintaining our sophisticated metallic aesthetic. Our approach prioritizes contrast, brightness, and texture cues over exact hue fidelity.

Universal Access

8%+ of male users with color blindness experience equal legibility and brand resonance

Brand Integrity

Metallic identity remains intact and aesthetically pleasing across all vision modes

Redundant Cues

Critical distinctions use shapes, icons, and labels - not just color

CHORUS 8-Color Accessibility System

Our advanced accessibility system remaps the core CHORUS 8-color palette (carbon, mulberry, walnut, nickel, ocean, eucalyptus, sand, coral) to vision-deficiency appropriate alternatives while preserving the light/dark theme toggle functionality.

Protanopia (Red-blind)

• Danger: Ocean → Coral
• Success: Sand → Eucalyptus
• Warning: Nickel → Sand
• Preserves: Carbon, Mulberry, Walnut

Deuteranopia (Green-blind)

• Success: Ocean → Eucalyptus
• Info: Sand → Ocean
• Accent: Coral → Walnut
• Enhances: Blue/yellow contrast

Tritanopia (Blue-blind)

• Info: Coral → Ocean
• Warning: Eucalyptus → Sand
• Primary: Mulberry → Carbon
• Maintains: Red/green clarity

Achromatopsia (Monochrome)

• Pure grayscale system
• Brightness hierarchy preserved
• Contrast ratios maintained
• Texture-based differentiation

Technical Implementation

The system uses CSS semantic tokens with compound selectors that combine light/dark themes with accessibility modes:

.dark[data-accessibility="protanopia"] { --chorus-danger: var(--chorus-info); }

This preserves your existing theme toggle while providing vision-inclusive alternatives.

Supported Vision Conditions

Common Color Blindness

  • Protanopia: Red-blind (1% of males) - Custom red/green differentiation
  • Deuteranopia: Green-blind (1% of males) - Enhanced contrast patterns
  • Tritanopia: Blue-blind (0.1% of population) - Yellow/blue alternatives

Complete Color Blindness

  • Achromatopsia: Complete color blindness - High-contrast monochrome
  • Enhanced Patterns: Texture and shape differentiation
  • Brightness Coding: Luminance-based visual hierarchy

Accessible Color Palettes

Protanopia (Red-Blind) Palette

Enhanced blue/yellow contrast with metallic neutrals

Primary
Accent
Neutral
Light
Dark
data-theme="protanopia"

Deuteranopia (Green-Blind) Palette

Blue/purple dominance with high-contrast patterns

Primary
Accent
Neutral
Light
Dark
data-theme="deuteranopia"

Tritanopia (Blue-Blind) Palette

Red/green clarity with warm metallic tones

Primary
Accent
Warm
Light
Dark
data-theme="tritanopia"

Achromatopsia (Complete Color Blindness) Palette

High-contrast monochrome with texture patterns

Darkest
Dark
Medium
Light
Lightest
data-theme="achromatopsia"

Logo Accessibility Implementation

The Three.js Möbius ring logo automatically adapts its metallic materials for different vision conditions while preserving the sophisticated aesthetic.

/* Logo Material Accessibility CSS */
[data-theme="protanopia"] {
  --color-ring-primary: #1e40af; /* Blue-800 for logo materials */
}

[data-theme="deuteranopia"] {
  --color-ring-primary: #6b21a8; /* Purple-800 for logo materials */
}

[data-theme="tritanopia"] {
  --color-ring-primary: #991b1b; /* Red-800 for logo materials */
}

[data-theme="achromatopsia"] {
  --color-ring-primary: #374151; /* Gray-700 for logo materials */
}

Implementation Guide

Theme Switching

// Set accessibility theme document.documentElement.setAttribute('data-theme', 'protanopia'); // Theme preference storage localStorage.setItem('chorus-accessibility-theme', 'deuteranopia'); // Logo material updates if (window.updateAllLogoMaterials) { window.updateAllLogoMaterials(isDark); }

Logo Integration

// Logo materials automatically adapt <canvas class="chorus-logo"></canvas> // JavaScript theme switching setAccessibilityTheme('protanopia');

Testing & Validation

Browser Testing

Use Chrome DevTools "Emulate vision deficiencies" to validate all palettes

Contrast Ratios

Maintain minimum 4.5:1 contrast ratios for WCAG AA compliance

User Testing

Validate with actual users who have different vision conditions

Visual Aid Interface

Accessibility themes are accessible through the "Visual Aid" button in the bottom toolbar alongside the theme toggle. This keeps the main interface clean while providing discoverable accessibility options.

Click "Visual Aid" in the bottom toolbar to access vision-inclusive settings

Component System

UI Component Library

The CHORUS component system provides a comprehensive set of accessible, ultra-minimalist UI elements built with the 8-color accessibility system and three-font typography hierarchy.

Buttons & Actions

Primary, secondary, and ghost button variants with accessibility-compliant focus states

Forms & Inputs

Clean form elements with validation states and accessibility features

Navigation & Layout

Header, sidebar, and breadcrumb components with responsive behavior

Implementation Principles

Ultra-Minimalist Design

  • • No border radius - pure geometric forms
  • • Generous spacing with 8px grid system
  • • Sophisticated restraint over decoration
  • • Dark mode as default preference

Accessibility Excellence

  • • WCAG 2.1 AA compliance standards
  • • 8-color vision inclusivity system
  • • Focus states and keyboard navigation
  • • Screen reader compatibility

Implementation

Technical Specifications

Complete implementation guide for the CHORUS brand system including Tailwind CSS configuration, Three.js logo integration, and accessibility features.

Tailwind CSS Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        carbon: { 950: '#000000', 900: '#0a0a0a', /* ... */ },
        mulberry: { 950: '#0b0213', 900: '#1a1426', /* ... */ },
        walnut: { 950: '#1E1815', 900: '#403730', /* ... */ },
        nickel: { 950: '#171717', 500: '#c1bfb1', /* ... */ },
        ocean: { 950: '#2a3441', 600: '#3a4654', /* ... */ },
        eucalyptus: { 950: '#2a3330', 600: '#3a4540', /* ... */ },
        sand: { 950: '#473e2f', 600: '#6a5c46', /* ... */ },
        coral: { 950: '#2e1d1c', 600: '#3e2d2c', /* ... */ }
      },
      fontFamily: {
        sans: ["Inter Tight", "Inter", "system-ui", "sans-serif"],
        mono: ["Inconsolata", "ui-monospace", "monospace"],
        logo: ["Exo", "Inter Tight", "sans-serif"]
      }
    }
  }
}

Three.js Logo Integration

// HTML Integration
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>

// JavaScript Module
import './logo.js';

// Accessibility Integration
window.updateAllLogoMaterials(isDark);
window.updateLogoAccessibilityTheme(themeName);

Development Environment

# Local Development Server
python3 -m http.server 3000

# Access brand guide
http://localhost:3000/chorus_brand_style_guide.html

# Test accessibility features
# Use Visual Aid button for color-blindness testing

Color Palette

Brand Color Philosophy

The CHORUS color palette draws inspiration from premium natural materials in the Australian Landscape, and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.

Core Brand Colors

Carbon Black

#000000

Usage: Primary backgrounds, high-contrast text, logo applications. Psychology: Authority, sophistication, premium quality.

bg-carbon-950
bg-carbon-900
bg-carbon-800
bg-carbon-700
bg-carbon-600
bg-carbon-500
bg-carbon-400
bg-carbon-300
bg-carbon-200

Dark Mulberry

#0b0213

Usage: Hero backgrounds, dark accents, secondary elements. Psychology: Richness, mystery, luxury, power, and depth.

bg-mulberry-950
bg-mulberry-900
bg-mulberry-800
bg-mulberry-700
bg-mulberry-600
bg-mulberry-500
bg-mulberry-400
bg-mulberry-300
bg-mulberry-200

Walnut Brown

#403730

Usage: Warm accents, secondary elements, natural touches. Psychology: Reliability, craftsmanship, approachable intelligence.

bg-walnut-950
bg-walnut-900
bg-walnut-800
bg-walnut-700
bg-walnut-600
bg-walnut-500
bg-walnut-400
bg-walnut-300
bg-walnut-200

Brushed Nickel

#c1bfb1

Usage: UI elements, borders, technical precision. Psychology: Modern sophistication, precision, technology.

bg-nickel-950
bg-nickel-900
bg-nickel-800
bg-nickel-700
bg-nickel-600
bg-nickel-500
bg-nickel-400
bg-nickel-300
bg-nickel-200

System Colors

Ocean

#5a6c80

Usage: Primary actions, interactive elements, system feedback. Psychology: Trust, reliability, technological precision.

bg-ocean-950
bg-ocean-900
bg-ocean-800
bg-ocean-700
bg-ocean-600
bg-ocean-500
bg-ocean-400
bg-ocean-300
bg-ocean-200

Eucalyptus

#515d54

Usage: Success states, positive feedback, growth indicators. Applications: Success messages, positive data visualization.

bg-eucalyptus-950
bg-eucalyptus-900
bg-eucalyptus-800
bg-eucalyptus-700
bg-eucalyptus-600
bg-eucalyptus-500
bg-eucalyptus-400
bg-eucalyptus-300
bg-eucalyptus-200

Sand

#8e7b5e

Usage: Warning states, attention indicators, energy elements. Applications: Warnings, attention callouts, active processes.

bg-sand-950
bg-sand-900
bg-sand-800
bg-sand-700
bg-sand-600
bg-sand-500
bg-sand-400
bg-sand-300
bg-sand-200

Coral

#593735

Usage: Error states, critical alerts, problem indicators. Applications: Error messages, critical warnings, urgent notifications.

bg-coral-950
bg-coral-900
bg-coral-800
bg-coral-700
bg-coral-600
bg-coral-500
bg-coral-400
bg-coral-300
bg-coral-200

Theme Implementation

Dark Mode

(Default/Preferred)

Dark mode is the preferred default for all CHORUS Services applications

  • Background Hierarchy: Carbon Black → Mulberry Variants → Cool Gray → Border Gray
  • Text Hierarchy: Clean White → Light Gray → Purple Accents → Brand Colors
  • Aesthetic: Ultra-minimalist with sophisticated mulberry accents
  • Contrast: All combinations tested for WCAG 2.1 AA compliance

Light Mode

(Alternative)

Available as alternative but dark mode is strongly preferred

  • Background Hierarchy: Pure White → Natural Paper → Light Gray → Border Light
  • Text Hierarchy: Carbon Black → Medium Gray → Light Gray → Orchestration Blue
  • Usage: Available as alternative but dark mode is strongly preferred
  • Contrast: Optimized for readability on warm, natural backgrounds

Iconography System

Icon Philosophy

The CHORUS iconography system uses the Coolicons v4.1 library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.

Clarity & Recognition

Icons communicate instantly without language barriers

Theme Adaptive

Black and white variants ensure perfect contrast in all modes

Consistent Scale

Standardized sizing maintains visual harmony

Icon Categories

The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.

Interface & Navigation

Core UI elements for user interaction and navigation

Search Search
Settings Settings
Filter Filter
Check Check
External Link Link
Lock Security
Star Favorite
Delete Delete

File & Data Management

Document, folder, and cloud storage representations

Document Document
Folder Folder
Cloud Cloud
Download Download
Upload Upload
Archive Archive
Code Code
Search Files Search

Communication & Notifications

Message, alert, and social interaction indicators

Mail Mail
Chat Chat
Notifications Alerts
Phone Call
Share Share
Send Send
Notification Notice
Chat Dots Typing

Navigation & Direction

Directional indicators and navigation controls

Arrow Left Back
Arrow Right Forward
Arrow Up Up
Arrow Down Down
Chevron Down Expand
Chevron Right Next
Reload Refresh
Expand Fullscreen

Icon Sizing & Usage

Standard Sizes

Small Icon 16px (w-4 h-4): Inline text, small buttons
Medium Icon 20px (w-5 h-5): Standard UI elements
Large Icon 24px (w-6 h-6): Primary actions, headers
XL Icon 32px (w-8 h-8): Feature highlights, cards

Usage Guidelines

  • Consistency: Use same size for similar functions
  • Alignment: Center icons within their containers
  • Spacing: Minimum 8px padding around clickable icons
  • Context: Choose appropriate semantic meaning
  • Contrast: Black icons for light themes, white for dark
  • Accessibility: Always include alt text descriptions

Implementation Examples

HTML Implementation


<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" 
     alt="Search" 
     class="w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" 
     alt="Search" 
     class="w-5 h-5 hidden dark:block">


<button class="flex items-center gap-2 px-4 py-2">
  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Download.png" 
       alt="Download" 
       class="w-4 h-4 dark:hidden">
  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Download.png" 
       alt="Download" 
       class="w-4 h-4 hidden dark:block">
  Download File
</button>

SVG Implementation (Preferred)


<svg class="w-5 h-5 text-carbon-950 dark:text-white">
  <use href="icons/coolicons.v4.1/coolicons SVG/Interface/Search_Magnifying_Glass.svg#icon"></use>
</svg>


<svg class="w-5 h-5 fill-current text-carbon-950 dark:text-white" viewBox="0 0 24 24">
  <path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z"/>
</svg>

Tailwind Utility Classes

/* Icon sizing utilities */
.icon-xs { @apply w-3 h-3; }     /* 12px - minimal inline */
.icon-sm { @apply w-4 h-4; }     /* 16px - small buttons */
.icon-md { @apply w-5 h-5; }     /* 20px - standard UI */
.icon-lg { @apply w-6 h-6; }     /* 24px - primary actions */
.icon-xl { @apply w-8 h-8; }     /* 32px - feature highlights */

/* Theme-adaptive coloring */
.icon-adaptive { @apply text-carbon-950 dark:text-white; }
.icon-accent { @apply text-mulberry-950 dark:text-paper-200; }
.icon-muted { @apply text-carbon-600 dark:text-purple-300; }

Icon Library Access

The complete Coolicons v4.1 library is available in the brand assets directory with both PNG and SVG formats.

Accessibility & Vision Inclusivity

Inclusive Design Philosophy

The CHORUS brand system extends beyond standard accessibility to provide vision-inclusive design that supports users with different forms of color blindness while maintaining our sophisticated metallic aesthetic. Our approach prioritizes contrast, brightness, and texture cues over exact hue fidelity.

Universal Access

8%+ of male users with color blindness experience equal legibility and brand resonance

Brand Integrity

Metallic identity remains intact and aesthetically pleasing across all vision modes

Redundant Cues

Critical distinctions use shapes, icons, and labels - not just color

CHORUS 8-Color Accessibility System

Our advanced accessibility system remaps the core CHORUS 8-color palette (carbon, mulberry, walnut, nickel, ocean, eucalyptus, sand, coral) to vision-deficiency appropriate alternatives while preserving the light/dark theme toggle functionality.

Protanopia (Red-blind)

• Danger: Ocean → Coral
• Success: Sand → Eucalyptus
• Warning: Nickel → Sand
• Preserves: Carbon, Mulberry, Walnut

Deuteranopia (Green-blind)

• Success: Ocean → Eucalyptus
• Info: Sand → Ocean
• Accent: Coral → Walnut
• Enhances: Blue/yellow contrast

Tritanopia (Blue-blind)

• Info: Coral → Ocean
• Warning: Eucalyptus → Sand
• Primary: Mulberry → Carbon
• Maintains: Red/green clarity

Achromatopsia (Monochrome)

• Pure grayscale system
• Brightness hierarchy preserved
• Contrast ratios maintained
• Texture-based differentiation

Technical Implementation

The system uses CSS semantic tokens with compound selectors that combine light/dark themes with accessibility modes:

.dark[data-accessibility="protanopia"] { --chorus-danger: var(--chorus-info); }

This preserves your existing theme toggle while providing vision-inclusive alternatives.

Supported Vision Conditions

Common Color Blindness

  • Protanopia: Red-blind (1% of males) - Custom red/green differentiation
  • Deuteranopia: Green-blind (1% of males) - Enhanced contrast patterns
  • Tritanopia: Blue-blind (0.1% of population) - Yellow/blue alternatives

Complete Color Blindness

  • Achromatopsia: Complete color blindness - High-contrast monochrome
  • Enhanced Patterns: Texture and shape differentiation
  • Brightness Coding: Luminance-based visual hierarchy

Accessible Color Palettes

Protanopia (Red-Blind) Palette

Enhanced blue/yellow contrast with metallic neutrals

Primary
Accent
Neutral
Light
Dark
data-theme="protanopia"

Deuteranopia (Green-Blind) Palette

Blue/purple dominance with high-contrast patterns

Primary
Accent
Neutral
Light
Dark
data-theme="deuteranopia"

Tritanopia (Blue-Blind) Palette

Red/green clarity with warm metallic tones

Primary
Accent
Warm
Light
Dark
data-theme="tritanopia"

Achromatopsia (Complete Color Blindness) Palette

High-contrast monochrome with texture patterns

Darkest
Dark
Medium
Light
Lightest
data-theme="achromatopsia"

Logo Accessibility Implementation

The Three.js Möbius ring logo automatically adapts its metallic materials for different vision conditions while preserving the sophisticated aesthetic.

/* Logo Material Accessibility CSS */
[data-theme="protanopia"] {
  --color-ring-primary: #1e40af; /* Blue-800 for logo materials */
}

[data-theme="deuteranopia"] {
  --color-ring-primary: #6b21a8; /* Purple-800 for logo materials */
}

[data-theme="tritanopia"] {
  --color-ring-primary: #991b1b; /* Red-800 for logo materials */
}

[data-theme="achromatopsia"] {
  --color-ring-primary: #374151; /* Gray-700 for logo materials */
}

Implementation Guide

Theme Switching

// Set accessibility theme document.documentElement.setAttribute('data-theme', 'protanopia'); // Theme preference storage localStorage.setItem('chorus-accessibility-theme', 'deuteranopia'); // Logo material updates if (window.updateAllLogoMaterials) { window.updateAllLogoMaterials(isDark); }

Logo Integration

// Logo materials automatically adapt <canvas class="chorus-logo"></canvas> // JavaScript theme switching setAccessibilityTheme('protanopia');

Testing & Validation

Browser Testing

Use Chrome DevTools "Emulate vision deficiencies" to validate all palettes

Contrast Ratios

Maintain minimum 4.5:1 contrast ratios for WCAG AA compliance

User Testing

Validate with actual users who have different vision conditions

Visual Aid Interface

Accessibility themes are accessible through the "Visual Aid" button in the bottom toolbar alongside the theme toggle. This keeps the main interface clean while providing discoverable accessibility options.

Click "Visual Aid" in the bottom toolbar to access vision-inclusive settings

Component System

UI Component Library

The CHORUS component system provides a comprehensive set of accessible, ultra-minimalist UI elements built with the 8-color accessibility system and three-font typography hierarchy.

Buttons & Actions

Primary, secondary, and ghost button variants with accessibility-compliant focus states

Forms & Inputs

Clean form elements with validation states and accessibility features

Navigation & Layout

Header, sidebar, and breadcrumb components with responsive behavior

Implementation Principles

Ultra-Minimalist Design

  • • No border radius - pure geometric forms
  • • Generous spacing with 8px grid system
  • • Sophisticated restraint over decoration
  • • Dark mode as default preference

Accessibility Excellence

  • • WCAG 2.1 AA compliance standards
  • • 8-color vision inclusivity system
  • • Focus states and keyboard navigation
  • • Screen reader compatibility

Implementation

Technical Specifications

Complete implementation guide for the CHORUS brand system including Tailwind CSS configuration, Three.js logo integration, and accessibility features.

Tailwind CSS Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        carbon: { 950: '#000000', 900: '#0a0a0a', /* ... */ },
        mulberry: { 950: '#0b0213', 900: '#1a1426', /* ... */ },
        walnut: { 950: '#1E1815', 900: '#403730', /* ... */ },
        nickel: { 950: '#171717', 500: '#c1bfb1', /* ... */ },
        ocean: { 950: '#2a3441', 600: '#3a4654', /* ... */ },
        eucalyptus: { 950: '#2a3330', 600: '#3a4540', /* ... */ },
        sand: { 950: '#473e2f', 600: '#6a5c46', /* ... */ },
        coral: { 950: '#2e1d1c', 600: '#3e2d2c', /* ... */ }
      },
      fontFamily: {
        sans: ["Inter Tight", "Inter", "system-ui", "sans-serif"],
        mono: ["Inconsolata", "ui-monospace", "monospace"],
        logo: ["Exo", "Inter Tight", "sans-serif"]
      }
    }
  }
}

Three.js Logo Integration

// HTML Integration
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>

// JavaScript Module
import './logo.js';

// Accessibility Integration
window.updateAllLogoMaterials(isDark);
window.updateLogoAccessibilityTheme(themeName);

Development Environment

# Local Development Server
python3 -m http.server 3000

# Access brand guide
http://localhost:3000/chorus_brand_style_guide.html

# Test accessibility features
# Use Visual Aid button for color-blindness testing

How to use these Brand Guidelines

Navigating the Guide

This comprehensive brand guide is organized with logical navigation flow. Use the sidebar menu to jump between sections, each with semantic icons for easy identification.

Navigation Features

  • • Theme Toggle: Switch between dark/light modes (dark is default)
  • • Visual Aid: Access color-blindness accommodations via bottom toolbar
  • • Semantic Icons: Each section has corresponding Coolicons for visual clarity
  • • Accessibility First: All navigation supports keyboard and screen readers