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

"The Beam" - the cyan accent on the logo "A"

--sonance-blue

Pantone: 326C / 326U

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

#1a1f24

--background

Background Secondary

#242a31

--background-secondary

Background Tertiary

#2d343c

--background-tertiary

Background Elevated

#333F48

--background-elevated

Foreground

#FFFFFF

--foreground

Foreground Secondary

#D9D9D6

--foreground-secondary

Border

#3a444c

--border

Primary

#FFFFFF

--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 variables (--background, --foreground) for theme-awareness
Maintain high contrast in both light and dark modes
Test all components in both themes
Use charcoal (#333F48) as the primary brand color

Don't

✕Hardcode colors - always use CSS variables
✕Use gradients or colorful backgrounds
✕Mix light and dark mode colors inappropriately
✕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 | CMYK: C65 M43 Y26 K78 | RAL: 7016 */
  
  --sonance-blue: #00D3C8;
  /* "The Beam" - cyan accent | Pantone: 326C / 326U */
  
  --sonance-light-gray: #D9D9D6;
  /* Pantone: Cool Grey 1C / 1U | CMYK: C4 M2 Y4 K0 | RAL: 7037 */
  
  /* Sonance Foundation */
  --foundation-green: #00B2A9;
  /* Pantone: 326C / 326U | CMYK: C81 M0 Y38 K0 | RAL: 6027 */
}

Know Your Vendors

The color space required (Pantone vs. 4-color, etc.) varies by vendor and medium. Always see proofs and consider the context.

Print

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.