# Grupo EIC — Colour

Institutional intelligence brief. A deep-navy canvas lit by a single
celeste → indigo → violet signature gradient, with four signal accents used
sparingly for status.

![Palette](palette.png)

## Signature gradient

The one gradient that carries the brand — the radar mark, headlines, key edges.

`linear-gradient(135deg, #A9D4FF 0%, #5C7CE6 55%, #2F2A8C 100%)`

Full stop ramp (for finer control / multi-stop fills):

| Token       | Hex        | RGB              |
|-------------|------------|------------------|
| Sky         | `#D0E4FF`  | 208, 228, 255    |
| Azure       | `#A9D4FF`  | 169, 212, 255    |
| Periwinkle  | `#7B97EA`  | 123, 151, 234    |
| Indigo      | `#5C7CE6`  | 92, 124, 230     |
| Royal       | `#3D3FA9`  | 61, 63, 169      |
| Deep        | `#2F2A8C`  | 47, 42, 140      |

On **light** backgrounds use the darker stops (`#5C7CE6 → #2F2A8C`) so the mark
keeps contrast — see `logo/eic-mark-on-light.svg`.

## Logo gradients & layers (canonical)

The logo system uses **exactly two** gradient ramps — the same ramp fills the
radar **and** the "EIC" letters within a given context, on one 135° axis
(`x1=0 y1=0 x2=1 y2=1`). Nothing else.

| Ramp        | Stops (0 % → 55 % → 100 %)          | Used on                                   |
|-------------|-------------------------------------|-------------------------------------------|
| **On-dark** | `#A9D4FF` → `#5C7CE6` → `#2F2A8C`    | radar + "EIC" on navy (mark, lockups, tiles) |
| **On-light**| `#5C7CE6` → `#3D3FA9` → `#2F2A8C`    | radar + "EIC" on paper (`*-on-light`)     |

> `#CADCFF` was an undocumented off-palette light-stop that had crept into nine
> files; it is **removed** — the on-dark light-stop is `#A9D4FF` (Azure)
> everywhere. The on-light ramp starts at `#5C7CE6` (Indigo), never `#7B97EA`.

**Sweep (structural — present in every variant).** The forward wedge is part of
the mark, not an optional flourish: it is the element that makes the symbol read
as a *radar* and not a target/reticle, so it ships in **all** variants. On
colour it is a translucent cyan/indigo wedge; in mono and on-light it is the same
wedge as a **flat low-opacity fill** (mono ≈ 0.14, on-light ≈ 0.20). The canonical
symbol is a **forward sweep + opening arcs + scan needle + detection blip**, with
**no central crosshair** (the old crosshair read as a gunsight). Do **not** add a
pass-through cross or full concentric rings back.

**Blip (status).** The live-detection blip is the only status colour on the mark:
`#7FE5FF` (Cyan) on dark, `#3D3FA9` (Royal) on light.

## Signals (status only — use sparingly)

| Token     | Hex        | Use                                   |
|-----------|------------|---------------------------------------|
| Token     | Hex        | Use                                   |
|-----------|------------|---------------------------------------|
| Cyan      | `#7FE5FF`  | Live / detection blip, link, emphasis |
| Hostile   | `#FF7A4D`  | Threat / negative                     |
| Friendly  | `#9AFFC7`  | Aligned / positive                    |
| Alert     | `#FFC76B`  | Watch / caution                       |

> **Colour-blind safety:** Hostile (orange) → Alert (amber) → Friendly (mint) sit
> on the orange–yellow–green axis and converge under deuteranopia/protanopia —
> they are separated mainly by luminance. **Never encode status by colour alone:**
> pair every signal with an icon, label, or shape so the meaning survives without
> hue. (Luminance order, light→dark: Friendly > Alert > Hostile.)

## Surfaces (navy — never pure black)

| Token     | Hex        | Use                              |
|-----------|------------|----------------------------------|
| Void      | `#04060C`  | Deepest backdrop                 |
| Ink 0     | `#05070D`  | Page background                  |
| Ink 1     | `#0A0E1A`  | Elevated background              |
| Ink 2     | `#11162A`  | Cards, panels                    |
| Ink 3     | `#1A2140`  | Hairline / raised surface        |
| Ink 4     | `#273058`  | Subtle border                    |

## Light surfaces

| Token     | Hex        | Use                              |
|-----------|------------|----------------------------------|
| Bone      | `#F6F4ED`  | Warm light surface (documents)   |
| Paper     | `#F5F6F8`  | Cool light surface               |
| Paper 2   | `#D9DCE1`  | Muted light                      |

### Ink on paper (documents & templates)

For text/rules on light surfaces (letterhead, signature, deck-on-light):

| Token       | Hex        | Use                                   |
|-------------|------------|---------------------------------------|
| Ink         | `#0A0E1A`  | Primary text on paper                 |
| Ink muted   | `#5B5B6B`  | Secondary text (≈5.6:1, AA)           |
| Ink faint   | `#9A9AAB`  | Legal / footnote (decorative, < AA)   |
| Hairline    | `#E3E5EA`  | Rules, table borders                  |
| Accent ink  | `#3D3FA9`  | Royal — links/emphasis on paper (AA)  |

## Text

| Token         | Hex        | Use                          |
|---------------|------------|------------------------------|
| FG on dark    | `#EEF1FA`  | Primary text on navy         |
| FG on dark ·  | `rgba(238,241,250,0.62)` | Secondary on navy |
| FG on light   | `#0A0E1A`  | Primary text on paper        |

---

## Usage rules

- **Dark by default.** Light/paper layouts (formal documents, invoices) are
  allowed — dark ink on paper, gradient reserved for the mark and small accents.
- **The gradient is a signature, not a fill.** Large flat areas of azure/indigo
  read cheap; use it on the logo, edges, headlines, and small emphasis.
- **Contrast (verified ratios):** for body text on **white/paper**, use
  **Royal `#3D3FA9` (7.82:1, AA/AAA)** — *not* Indigo `#5C7CE6`, which is only
  **3.54:1 and FAILS AA for body** (OK for ≥24px/bold large text only). The
  signal colours and the light gradient stops are **never** text on light
  (all < 2.5:1); on paper, status is carried by ink + weight, not colour.

### Contrast matrix (WCAG 2.1, ratio vs background)

| Foreground            | on Ink 0 `#05070D` | on Paper `#F5F6F8` |
|-----------------------|--------------------|--------------------|
| FG on dark `#EEF1FA`  | 18.3:1 ✅ AAA      | —                  |
| FG on light `#0A0E1A` | —                  | 18.7:1 ✅ AAA      |
| Royal `#3D3FA9`       | 2.4:1 ✗            | 7.8:1 ✅ body      |
| Indigo `#5C7CE6`      | 4.6:1 ✅ large     | 3.5:1 ✗ body / ✅ large |
| Azure `#A9D4FF`       | 10.6:1 ✅ (on dark)| 1.4:1 ✗            |
| Cyan signal `#7FE5FF` | 13.8:1 ✅ (on dark)| 1.2:1 ✗            |

Rule of thumb: **light stops & signals are dark-surface only**; on paper, text =
ink, accent = Royal or darker.

These mirror the website tokens in `src/styles/tokens.css` (`--grad-*`,
`--ink-*`, `--signal-*`). Keep them in sync.
