Brand System
Colors
Color palettes for the Sonance family of brands. Using colors consistently will strengthen brand recognition, create impact and help differentiate information across all visual communications.
Primary Palette
The primary Sonance palette consists of charcoal and blue. Charcoal is the foundation of our brand and blue ("The Beam") is the primary accent. Light gray and white should be used as accents only—for backgrounds and reverse elements on dark backgrounds.
Sonance Charcoal
--sonance-charcoal
Pantone: 432C / 433U
Sonance Blue
--sonance-blue
Pantone: 2191C / 2191U
Light Gray
--sonance-light-gray
Pantone: Cool Grey 1C / 1U
White
--sonance-white
Sonance Foundation Palette
The Sonance Foundation maintains a consistent appearance with green as the primary accent color. These colors are used specifically for Foundation communications and materials.
Foundation Green
--foundation-green
Pantone: 326C / 326U
Sonance Charcoal
--sonance-charcoal
Pantone: 432C / 433U
Light Gray
--sonance-light-gray
Pantone: Cool Grey 1C / 1U
White
--sonance-white
Gray Scale
A comprehensive gray scale derived from the charcoal brand color, providing flexibility for UI elements.
Gray 50
--sonance-gray-50
Gray 100
--sonance-gray-100
Gray 200
--sonance-gray-200
Gray 300
--sonance-gray-300
Gray 400
--sonance-gray-400
Gray 500
--sonance-gray-500
Gray 600
--sonance-gray-600
Gray 700
--sonance-gray-700
Gray 800
--sonance-gray-800
Gray 900
--sonance-gray-900
Theme Variables
Semantic color variables that automatically adapt to the current theme. Toggle between light and dark mode to see the differences.
Light Mode
Background
--background
Background Secondary
--background-secondary
Background Tertiary
--background-tertiary
Foreground
--foreground
Foreground Secondary
--foreground-secondary
Foreground Muted
--foreground-muted
Border
--border
Primary
--primary
Dark Mode
Background
--background
Background Secondary
--background-secondary
Background Tertiary
--background-tertiary
Background Elevated
--background-elevated
Foreground
--foreground
Foreground Secondary
--foreground-secondary
Border
--border
Primary
--primary
Feedback Colors
Semantic colors for communicating system states and user feedback.
Success
--success
Error
--error
Warning
--warning
Info
--info
Usage Guidelines
Do
- Use semantic CSS variables for theme-awareness
- Maintain high contrast in both themes
- Test all components in both themes
- Use charcoal (#333F48) as primary
Don't
- ✕Hardcode colors - use CSS variables
- ✕Use gradients or colorful backgrounds
- ✕Mix light/dark mode colors
- ✕Modify core brand colors
Color Recipes
100% color fidelity across all mediums is unrealistic. Users should take great measure to ensure the correct recipe is used for the item or material needed.
:root {
/* Sonance Core Brand Colors */
--sonance-charcoal: #333F48;
/* Pantone: 432C / 433U */
--sonance-blue: #00A3E1;
/* "The Beam" - cyan accent */
--sonance-light-gray: #D9D9D6;
/* Pantone: Cool Grey 1C / 1U */
/* Sonance Foundation */
--foundation-green: #00B2A9;
/* Pantone: 326C / 326U */
}Know Your Vendors
The color space required (Pantone vs. 4-color, etc.) varies by vendor and medium. Always see proofs and consider the context.
Use Pantone or CMYK values. Request proofs before final production.
Digital
Use HEX or RGB values. Test on multiple displays.
Materials
Use RAL codes for paint, fabric, and physical materials.