# 05 · Color

Ten colors as a system. Foundation, signal, support. Structured, not decorative.

## The complete palette

### Foundation · 70–80% of every layout

| Name | Hex | RGB | CMYK | CSS variable | Role |
|---|---|---|---|---|---|
| Talentix Dark | `#1E1B2E` | 30, 27, 46 | 82, 85, 56, 76 | `--color-dark` | Primary background |
| System Depth | `#2A2640` | 42, 38, 64 | 82, 82, 45, 58 | `--color-depth` | Secondary background |
| Canvas Light | `#FAFAFA` | 250, 250, 250 | 0, 0, 0, 2 | `--color-canvas` | Light page background |
| White | `#FFFFFF` | 255, 255, 255 | 0, 0, 0, 0 | `--color-white` | Pure white surfaces |

### Signal · Module colors

Accents only, never large competing blocks. Each tied to a module.

| Name | Hex | RGB | CMYK | Pantone | CSS variable | Module |
|---|---|---|---|---|---|---|
| Blueprint Blue | `#2E61E1` | 46, 97, 225 | 84, 67, 0, 0 | 2728 C | `--color-blueprint` | 01 · Direction |
| Scout Purple | `#7D3CED` | 125, 60, 237 | 70, 83, 0, 0 | 2685 C | `--color-scout` | 02 · Intelligence |
| Reach Magenta | `#BF27D2` | 191, 39, 210 | 40, 88, 0, 0 | 2592 C | `--color-reach` | 03 · Activity |
| Meet Pink | `#EB77FF` | 235, 119, 255 | 20, 58, 0, 0 | 245 C | `--color-meet` | 04 · Human |

### Support · Hierarchy and density

| Name | Hex | RGB | CSS variable | Role |
|---|---|---|---|---|
| Soft Match | `#E9D5FF` | 233, 213, 255 | `--color-soft` | Gentle accent, hover states |
| Screening Neutral | `#A1A1AA` | 161, 161, 170 | `--color-neutral` | Secondary text on dark |
| Decision Gray | `#6B7280` | 107, 114, 128 | `--color-gray` | Body copy on light, metadata |
| Rule Line | `#E5E5EA` | 229, 229, 234 | `--color-rule` | Card borders, hairlines |

## Usage ratio

| Tier | Share | Use for |
|---|---|---|
| Foundation | 70–80% | Backgrounds, large surfaces |
| Structure | 15–20% | Text hierarchy, dividers, info density |
| Signal | 5–10% | Accents tied to modules |
| Accent | 1–3% | Highlights, focus states |

## Approved pairings

- Dark + Pink
- Dark + Blue
- Dark + Soft Match
- Depth + Magenta
- Purple + Soft Match
- Blue + White
- Magenta + Dark
- White + Dark

## Avoid

- ~~Blue on Purple~~ — insufficient contrast
- ~~Magenta on Pink~~ — visual vibration
- ~~Full-color logo on signal background~~ — use monochrome variant

Maintain WCAG AA contrast for body text (4.5:1 minimum). The logo itself is exempt from body-text contrast rules but should pass UI element contrast (3:1).

## Logo on color · Rules

| Background | Use logo variant |
|---|---|
| Canvas Light / White | `Color-Dark` (color symbol + dark wordmark) |
| Talentix Dark / System Depth | `Color-White` (color symbol + white wordmark) |
| Blueprint Blue / Scout Purple / Reach Magenta | `White` (monochrome) |
| Meet Pink | `Black` (monochrome) |
| Soft Match | `Color-Dark` |

## Print color notes

- Convert RGB to CMYK using your printer's profile, not screen-to-CMYK math
- Maximum ink coverage: Talentix Dark is 251%, just under the 300% commercial print limit
- For premium print, request Pantone match (PMS values listed above)
- For digital screens, sRGB values are authoritative