Generated Skill

YAML
---
name: designing-brand-color-systems
description: Creates structured brand color systems using the COLOR framework with palette architecture, semantic tokens, tint/shade generation, contrast validation, and dark mode mapping. Use when developing brand guidelines or design systems.
---

# Brand Color System Design

Primary Brand Color: #2563EB (Blue 600)
↓
Generate System:
1. Tint/Shade Scale: 50-900 (10 steps)
2. Apply 60/30/10 Rule: Primary(60%), Secondary(30%), Accent(10%)
3. Create Semantic Tokens: Success(#10B981), Warning(#F59E0B), Error(#EF4444)
4. Validate Contrast: AA (4.5:1) for body text, AAA (7:1) for small text
5. Map Dark Mode: Invert lightness, maintain hue relationships

1. Primary Color Selection

• Choose brand-aligned hue (Blue=trust, Green=growth, Purple=innovation)
• Start with 600-weight as base (sufficient contrast, versatile)
• Validate against competitor landscapes

2. Tint/Shade Generation

50:  Lightest tint (backgrounds, hover states)
100-200: Light tints (subtle backgrounds)
300-400: Medium tints (borders, disabled states)
500: True color
600: Primary brand color (buttons, links)  ← Start here
700-800: Dark shades (hover, active states)
900: Darkest shade (high contrast text)

3. Palette Architecture (60/30/10 Rule)

• Primary (60%): Main brand color + neutrals for backgrounds, body text
• Secondary (30%): Supporting color for sections, callouts, secondary actions
• Accent (10%): High-impact color for CTAs, highlights, key interactions

4. Semantic Color Tokens

semantic: {
  success: { 50-900 }, // Green family
  warning: { 50-900 }, // Amber/Orange family  
  error: { 50-900 },   // Red family
  info: { 50-900 }     // Blue/Cyan family
}

5. Contrast Validation Matrix

Test all text-on-background combinations:

• Body text (16px+): 4.5:1 minimum (AA)
• Small text (<16px): 7:1 minimum (AAA)
• Large text (18px+ bold, 24px+ regular): 3:1 minimum

6. Dark Mode Mapping

• Invert lightness values: 900→100, 800→200, etc.
• Keep 500 as anchor point
• Reduce saturation by 10-20% for comfort
• Ensure semantic colors remain recognizable

Progress Checklist:

• Primary color selected and validated
• 10-step tint/shade scale generated
• 60/30/10 palette architecture applied
• Semantic tokens created
• Contrast ratios validated (AA/AAA)
• Dark mode variants mapped
• B2B professionalism validated

Example 1: SaaS Platform Input: Tech startup, trustworthy, innovative Output:

• Primary: Blue 600 (#2563EB) - trust, reliability
• Secondary: Slate 600 (#475569) - sophistication
• Accent: Emerald 500 (#10B981) - growth, success
• Semantic: Success(Green), Warning(Amber), Error(Red), Info(Blue)

Example 2: Financial Services Input: Investment firm, conservative, premium Output:

• Primary: Indigo 700 (#3730A3) - authority, stability
• Secondary: Gray 600 (#4B5563) - neutrality
• Accent: Amber 600 (#D97706) - optimism, wealth
• Dark mode: Reduce saturation 15%, maintain gravitas

• Start with HSL values for easier manipulation
• Test on actual brand content, not Lorem Ipsum
• Generate colors programmatically for consistency
• Create color usage documentation with do's/don'ts
• Include Figma/Sketch color styles export
• Validate accessibility with real screen readers when possible
• Consider colorblind accessibility (8% of men affected)

• Using too many accent colors (breaks 60/30/10 rule)
• Generating scales mathematically without visual adjustment
• Ignoring color temperature shifts in tints/shades
• Making dark mode too dark (90% users prefer gray, not black)
• Copying consumer brand colors for B2B contexts
• Skipping mid-range contrast validation (200-on-50 scenarios)
• Creating semantic colors that clash with brand personality