# 04 · Logo

The mark: four capsules in a 2×2 grid, plus the lowercase wordmark "talentix". Each capsule is a module.

## Anatomy

The mark represents a network of digital colleagues working in sync. Four distinct elements come together to form a unified structure, reflecting parallel processes across the hiring system.

| Position | Capsule | Module | Role |
|---|---|---|---|
| Top-left | Blue (#2E61E1) | Blueprint | Direction |
| Top-right | Purple (#7D3CED) | Scout | Intelligence |
| Bottom-left | Magenta (#BF27D2) | Reach | Activity |
| Bottom-right | Pink (#EB77FF) | Meet | Human |

Reading the mark top-left to bottom-right traces the recruitment process: direction → intelligence → activity → human contact.

## Variations · 4 lockups

| Variant | File | Use on |
|---|---|---|
| **Horizontal** (primary) | `assets/logos/Horizontal - *.svg` | Default everywhere: web, decks, business cards, signage |
| **Vertical** | `assets/logos/Vertical - *.svg` | Square frames, social avatars |
| **Wordmark only** | `assets/logos/Wordmark - *.svg` | When the symbol already appears nearby |
| **Symbol only** | `assets/logos/Symbol Only - *.svg` | App icon, favicon, watermark, < 60px |

Each variant has color and monochrome versions (see Color variants below).

## Color variants

| Suffix | Description | Use on background |
|---|---|---|
| `Color-Dark` | Color symbol + DARK wordmark | Light: Canvas Light, White |
| `Color-White` | Color symbol + WHITE wordmark | Dark: Talentix Dark, System Depth |
| `White` | Monochrome white | Signal colors: Blueprint Blue, Scout Purple, Reach Magenta |
| `Black` | Monochrome black | Meet Pink, single-color print |

**The suffix refers to the wordmark color, not the background.** This is the most-confused convention — get it right.

## Clearspace

Minimum clearspace = the height of the lowercase **"e"** in the wordmark.

Maintain this on all four sides, every layout. The "e" is your unit.

Recommended: 1× the e-height as minimum. 2× for premium contexts. 3× for hero placements.

## Sizing scale

| Context | Width | Equivalent |
|---|---|---|
| A2 cover (large print) | 70 mm | ≈ 264 px @ 96 dpi |
| A3 print | 45 mm | ≈ 170 px @ 96 dpi |
| A4 / A5 | 30 mm | ≈ 113 px @ 96 dpi |
| Minimum | 20 mm or 60 px | Below this, drop the wordmark — use Symbol Only |
| App icon / favicon | 32 × 32 px | Symbol Only on Talentix Dark, 22 radius |

## Logo on backgrounds

| Background | Hex | Logo variant |
|---|---|---|
| Canvas Light | #FAFAFA | `Color-Dark` |
| White | #FFFFFF | `Color-Dark` |
| Talentix Dark | #1E1B2E | `Color-White` |
| System Depth | #2A2640 | `Color-White` |
| Blueprint Blue | #2E61E1 | `White` |
| Scout Purple | #7D3CED | `White` |
| Reach Magenta | #BF27D2 | `White` |
| Meet Pink | #EB77FF | `Black` |
| Soft Match | #E9D5FF | `Color-Dark` |

## Misuse · Eight things never to do

1. Don't stretch or skew — preserve proportions always
2. Don't rotate
3. Don't recolor the capsules
4. Don't add drop shadows
5. Don't fade or lower opacity
6. Don't outline the mark
7. Don't place on busy backgrounds — use a solid color from the palette
8. Don't put full-color on signal-color backgrounds — use monochrome variant

## Favicon variants

In `assets/favicons/`:

| File | Use for |
|---|---|
| `Favicon - Color-Dark.svg` | Light browser tab themes |
| `Favicon - Color-White.svg` | Dark browser tab themes |
| `Favicon - Black-White.svg` | Mono variants, signal backgrounds |
| `Favicon - White-Black.svg` | Mono variants, signal-on-light |

Recommended dimensions: 32×32 (standard), 16×16 (fallback), 192×192 (PWA install), 512×512 (Apple touch icon).