# Color Usage Guidelines

## Color Order Rule

When primary brand colors appear adjacent (color bars, swatches, accent strips), always use: **Magenta → Yellow → Cyan**. Never rearrange this sequence.

---

## Primary Color Meanings

| Color | Pillar | Best for | Avoid |
|-------|--------|----------|-------|
| Magenta `#e6007e` | "We entertain" | Marketing, events, social media, expressive presentations | Highly formal documents, financial reports |
| Yellow `#ffde14` | "We inform" | Highlights, call-outs, informational content, educational | Large background areas (eye strain), body text |
| Cyan `#009fe3` | "We connect" | Technology, digital transformation, professional presentations, data | Print materials with poor cyan reproduction |

**Secondary Colors** (supporting/variety):

| Color | Hex | Character |
|-------|-----|-----------|
| Marine | `#162d46` | Deep, professional, authoritative |
| Lilac | `#bc93c4` | Soft, creative, approachable |
| Sea | `#4e81a3` | Cool, analytical, structured |
| Turquoise | `#31b6b3` | Fresh, digital, dynamic |
| Coral | `#ff6b6b` | Warm, friendly, community |
| Tangerine | `#f29331` | Energetic, enthusiastic |
| Lime | `#d5de5b` | Fresh, growth, sustainability |

---

## Color Combinations

### High-Impact (Expressive)

| Combination | Use | Text |
|-------------|-----|------|
| Magenta + Yellow | Events, social, bold presentations | White on magenta, black on yellow |
| Cyan + Magenta | Technology, digital marketing | White on both |
| Cyan + Yellow | Informational, educational | White on cyan, black on yellow |

### Professional (Calm)

| Combination | Use | Text |
|-------------|-----|------|
| Marine + Light Gray | Annual reports, investor presentations, formal documents | White on marine, black on gray |
| Sea + Cyan tints | Reports with data, technical documents | White on dark tints, black on light tints |
| White + Accent | Most corporate communications | Black on white, accent for highlights |

---

## Tints & Shades

Use tints to create hierarchy and variety without introducing new colors.

**Tint system** (25%, 50%, 75%, 100%):
- **100%** (full color): Primary elements, logos, icons, high-impact accents
- **75%**: Secondary elements, supporting graphics
- **50%**: Tertiary elements, subtle backgrounds
- **25%**: Very subtle backgrounds, disabled states, hover states

**Best practices**:
- Use lighter tints (25%, 50%) for large background areas — prevents overwhelming
- Use full color (100%) for small, high-impact elements
- Maintain consistent tint levels across a document for cohesion

**Tint combinations**:
- Same-family adjacent (Magenta 50% bg + Magenta 100% accent): Creates depth within a color family
- Contrasting tints (Cyan 25% bg + Cyan 100% headline): Clear visual separation between layers

---

## Data Visualization (Multi-Color)

**1–3 series**: Use primary colors — Magenta `#e6007e`, Yellow `#ffde14`, Cyan `#009fe3`.

**4+ series**: Single-color tint approach (100% → 75% → 50% → 25% of one primary). Tint values in `color-system.json`.

**On white backgrounds**: Prefer tints unless 3 or fewer data fields.

**Extended needs**: When a single-color tint scale doesn't provide enough distinction, secondary colors (Marine, Coral, Turquoise, Tangerine, Sea, Lilac, Lime) can supplement.

**Adjacency — keep these separated** (too similar):
- Cyan + Sea (both blue-toned)
- Cyan + Turquoise (both cool blue-green)
- Coral + Magenta (both red-pink)
- Coral + Tangerine (both warm)
- Yellow + Lime (both yellow-green)

**Good adjacent pairs**: Marine + Coral, Marine + Lime, Turquoise + Tangerine, Sea + Coral, Lilac + Marine

**Accessibility**: Never rely on color alone — pair with labels, patterns, or position.

---

## Accessibility & Contrast

### WCAG Contrast Ratios

| Background | Text | Contrast | WCAG AA |
|-----------|------|----------|---------|
| White | Black | 21:1 | ✅ Pass |
| Yellow `#ffde14` | Black | 11.3:1 | ✅ Pass |
| Light Gray `#f6f6f6` | Black | 18.2:1 | ✅ Pass |
| Magenta `#e6007e` | White | 5.2:1 | ✅ Pass |
| Cyan `#009fe3` | White | 3.5:1 | ⚠️ Large text only |
| Marine `#162d46` | White | 12.7:1 | ✅ Pass |

**Secondary and tint combinations**: Always test before use — not all pass AA.

### Color Blindness

**Protanopia/Deuteranopia** (red-green, ~8% of males):
- Avoid relying solely on red vs green to convey information
- Good: Magenta vs Cyan (still distinguishable)
- Good: Yellow + icon/shape for emphasis, not color alone

**Tritanopia** (blue-yellow, rare):
- Cyan and yellow may appear similar — always pair with labels or patterns

**Best practice**: Use color + text labels, color + icons, or color + position — never color alone.

---

## Color by Medium

**Presentations (projection)**: Full primary colors for backgrounds; white text on colored slides; test in the actual room (projectors vary).

**Annual reports / formal documents**: White backgrounds with colored accents; Marine + primaries for charts; Light gray `#f6f6f6` for alternating rows.

**Marketing materials**: Bold colored backgrounds; large graphics; high contrast for impact.

**Web / digital**: White or light gray preferred for long reading; primary colors for buttons, CTAs, links; Cyan or Marine for navigation; 75% tint for hover states.

**Social media**: More creative freedom within the palette; square 1080×1080px (centered, bold); story 1080×1920px (vertical, layered).

---

## Special Use Cases

### Flag Logo Backgrounds

Flag color must always contrast with the page background:
- Magenta page → Cyan or Yellow flag
- Cyan page → Magenta or Yellow flag
- Yellow page → Magenta flag (preferred)
- White page → Any primary color flag (or use standard logo)

**Flag sizing**: Width = 8–20% of format width.

### Colored Periods (Signature Style)

End key statements with a colored period in a contrasting primary color (same font and size as preceding text):
- On white: any primary color
- On magenta: yellow or cyan
- On cyan: yellow or magenta
- On yellow: magenta (preferred)
- On photos: choose color that stands out against the image

---

## Do's and Don'ts

### ✅ Do

- Use primary colors for brand identity and major elements
- Use secondary colors for variety and supporting elements
- Use tints to create hierarchy without introducing new colors
- Test contrast ratios before finalizing any color pairing
- Use light gray (`#f6f6f6`) for subtle backgrounds and alternating rows
- Match flag logo color to contrast with the page background
- Use color + labels/patterns in data visuals (never color alone)
- Limit a single design to 3–5 colors maximum

### ❌ Don't

- Introduce colors outside the defined brand palette
- Use yellow for large text blocks or long passages (causes eye strain)
- Rely solely on color to convey meaning (always add labels, icons, or patterns)
- Place standard logo on colored backgrounds (use flag logo instead)
- Use default RGB → CMYK conversion without proofing for print
- Use neon or overly saturated versions of brand colors
- Place visually similar colors adjacent in charts (e.g., Cyan next to Sea)
- Use more than 5 colors in a single design

---

*For machine-readable color data (hex, RGB, CMYK, Pantone, tint values), see `color-system.json`*
