Brand Color System — Primary, Secondary, and Accent

Structuring a Brand Color System

A well-structured brand color system typically consists of three color families: primary (the main brand identity), secondary (supporting contrast), and accent (call-to-action highlights). Each family has a full shade scale.

Defining the Families

:root {
  /* Primary — brand blue */
  --primary-50:  #eff6ff;
  --primary-500: #3b82f6;
  --primary-900: #1e3a5f;

  /* Secondary — warm gray */
  --secondary-50:  #fafaf9;
  --secondary-500: #78716c;
  --secondary-900: #1c1917;

  /* Accent — vibrant orange */
  --accent-50:  #fff7ed;
  --accent-500: #f97316;
  --accent-900: #7c2d12;
}

Usage Guidelines

Color family	Usage
Primary	Navigation, headers, links, primary buttons
Secondary	Body text, backgrounds, borders, neutral surfaces
Accent	CTAs, notifications, badges, highlights

The 60-30-10 Rule

Interior designers use this ratio for color balance: 60% dominant (secondary/neutral), 30% secondary (primary brand), 10% accent. In web design this translates to:

• 60% — page backgrounds, card surfaces, body text (secondary palette)
• 30% — navigation, headers, section highlights (primary palette)
• 10% — buttons, links, badges (accent palette)

Extending for Status Colors

Beyond brand colors, add functional status colors:

:root {
  --success: #22c55e;
  --warning: #eab308;
  --error:   #ef4444;
  --info:    #3b82f6;
}

These should not be part of your brand identity — keep them standard and recognizable across products.

Ensuring Harmony

Pick primary and accent colors that sit approximately 30 degrees apart on the color wheel (analogous) for harmony, or 150-180 degrees apart (complementary) for contrast. Neutral secondaries should share the primary's undertone.