# Grupo EIC — Brand Resources

The single source of truth for the **Grupo EIC** identity: logo, colour, and
typography. _"Inteligencia que anticipa. Estrategia que define."_

Use these assets for **anything brand-facing** — proposals, briefings, email,
documents, decks, social, web. The corporate site (`grupo-eic-web`) uses the
same design tokens; this folder is the canonical set everything else should
match.

> **Aesthetic:** institutional intelligence brief. Deep navy canvas, a single
> celeste → indigo → violet signature gradient, a radar motif, and serif
> authority (Fraunces). Restrained, classified, premium — never neon-cheap.

---

## Folder map

```
brand/
├─ logo/
│  ├─ eic-mark.svg                        ← the radar symbol (full colour)
│  ├─ eic-mark-mono-white.svg             ← single-ink, for dark/photo bg
│  ├─ eic-mark-mono-black.svg             ← single-ink, for light/print bg
│  ├─ eic-mark-on-light.svg               ← darker gradient, for white/paper bg
│  ├─ eic-mark-micro-*.svg                ← simplified symbol for ≤32px (4 variants)
│  ├─ eic-lettermark.svg                  ← "EIC" monogram (gradient, on dark)
│  ├─ eic-lettermark-on-light.svg         ← "EIC" monogram, dark ramp for paper
│  ├─ eic-wordmark-on-dark.svg            ← "Grupo EIC" wordmark, light ink
│  ├─ eic-wordmark-on-light.svg           ← "Grupo EIC" wordmark, dark ink
│  ├─ eic-lockup-horizontal-on-dark.svg   ← radar + "Grupo EIC", side by side
│  ├─ eic-lockup-horizontal-on-light.svg
│  ├─ eic-lockup-stacked-on-dark.svg      ← radar over "Grupo EIC"
│  ├─ eic-lockup-stacked-on-light.svg
│  ├─ eic-icon.svg                        ← rounded app-icon tile — "EIC" monogram (large)
│  ├─ eic-icon-radar.svg                  ← rounded tile — radar symbol (social avatar)
│  ├─ favicon.svg                         ← browser favicon — bold "E" glyph (legible at 16px)
│  └─ png/                                ← raster exports (transparent / tiles)
├─ color/
│  ├─ palette.svg / palette.png           ← swatch sheet
│  └─ palette.md                          ← tokens + usage
├─ type/
│  └─ typography.md                       ← fonts + scale
├─ templates/                             ← brand-applied docs (HTML master → PDF; see build.sh)
│  ├─ eic-tokens.css                      ← CANONICAL tokens — every template links this, none redefine it
│  ├─ eic-radar.svg                       ← canonical radar symbol (geometry == logo/eic-mark.svg)
│  ├─ email-signature.html                ← paste-ready email signature (inline; the one standalone file)
│  ├─ letterhead.html                     ← letterhead / letter / invoice (A4)
│  ├─ deck.html                           ← 16:9 presentation master — full slide library (→ PDF)
│  ├─ build_pptx.py → eic-deck-template.pptx ← native, editable PowerPoint / Google Slides deck
│  ├─ dossier.html                        ← full multi-page A4 dossier / proposal (→ PDF)
│  ├─ dossier-cover.html                  ← stand-alone dossier cover A4 (→ PDF)
│  ├─ one-pager.html                      ← A4 capabilities sheet / sell sheet (→ PDF)
│  ├─ business-card.html                  ← business card 90×55mm + 3mm bleed (front/back)
│  ├─ envelope.html                       ← DL envelope 220×110mm
│  ├─ brand-book.html                     ← brand guidelines manual, A4 landscape, 10pp (→ PDF)
│  └─ build.sh                            ← render all → pdf/ + build the .pptx + drift lint
└─ social/
   ├─ eic-avatar.svg + png/               ← radar avatar tile (WhatsApp / X / LinkedIn)
   ├─ eic-og.svg + png/                   ← 1200×630 link-preview / OG banner
   └─ eic-banner-{x,linkedin,facebook}-*  ← profile cover / banner (3 ratios)
```

**SVG is the master.** Infinitely scalable; works in Illustrator, Figma, web,
email, and print. All wordmarks ship **outlined to vector paths**, so they
render identically everywhere with no font installed. Reach for the PNGs
(`logo/png/`) only when a tool can't take SVG. Need a size that isn't there?
Open the SVG and re-export.

**Templates derive from one source.** Every doc in `templates/` links
`templates/eic-tokens.css` (colour, type, the two gradient ramps) and inlines the
canonical radar from `templates/eic-radar.svg` — nothing redefines a token or
redraws the mark. Change a value once, then run `templates/build.sh`: it renders
every template to `templates/pdf/`, regenerates the editable
`eic-deck-template.pptx`, and lints for radar / token drift.
`email-signature.html` is the one exception (mail clients strip `<link>`, so it
stays fully inline).

---

## The marks

**Radar mark** — a **forward sweep + opening arcs + scan needle + detection
blip**: a beam pushing *ahead* (anticipation), not a 360° surveillance ring.
There is **no central crosshair** — that read as a gunsight. The forward **sweep
wedge is structural and present in every variant** (translucent on colour, a flat
low-opacity fill in mono / on-light); it is the element that makes the symbol read
as a radar rather than a target. A simplified `eic-mark-micro-*` ships for use at
**≤ 32 px** (favicon-scale), where the full arcs would muddy.

> Cold-read tested: at every size the mark reads "radar / scan", not "mira /
> diana". **Don't** add a pass-through cross or full concentric rings back, and
> don't drop the sweep — those are what regress it to a gunsight.

**EIC lettermark / wordmark** — "EIC" set in **Archivo Expanded 700** (caps),
filled with the signature gradient, with **"GRUPO"** demoted to a small tracked
**JetBrains Mono** label above it. The grotesque gives signage/agency authority
and holds at any size. It ships in both `eic-lettermark.svg` (on dark) and
`eic-lettermark-on-light.svg` (paper). The **monogram** is the compact mark
(favicon, app icon, stamp); the **radar** is the social avatar (it centres under
the circular crops platforms apply). See `type/typography.md`.

## Clear space & minimum size

- **Clear space:** keep padding of at least the radar's outer-ring radius around
  the whole logo. The SVGs already include a comfortable margin in their viewBox.
- **Minimum size:** radar mark ≥ 24 px; horizontal lockup ≥ 132 px wide. Below
  that, prefer the mark alone or the favicon/icon.

## Don'ts

- Don't recolour the gradient outside the palette, or flatten the radar to a
  single colour by hand — use the provided mono / on-light files.
- Don't stretch, rotate, add drop shadows/outer glows, or place the colour logo
  on a low-contrast background.
- Don't rebuild the wordmark in another font — "EIC" is **Archivo Expanded 700**
  and "GRUPO" is **JetBrains Mono 500**, already outlined to curves in these files.
- Don't put the light-end gradient (`#A9D4FF`) as text on white — it fails
  contrast. Use ink or `eic-…-on-light` assets there.
- Don't drop the forward **sweep**, add a central crosshair, or close the arcs
  into full rings — any of those regress the symbol to a gunsight/target.
- Don't introduce a new gradient stop — the system has exactly **two** ramps
  (on-dark `#A9D4FF→#5C7CE6→#2F2A8C`, on-light `#5C7CE6→#3D3FA9→#2F2A8C`); the
  radar and the "EIC" letters share the same ramp within a context.

---

## Motion

The brand moves like its symbol: a calm, continuous **scan**, never bouncy. Tokens
live in `src/styles/tokens.css`.

- **Easings:** `--ease-out` `cubic-bezier(.16,1,.3,1)` (entrances), `--ease-inout`
  (moves), `--ease-spring` (rare emphasis). **Durations:** `--dur-fast` 180ms ·
  `--dur-base` 360ms · `--dur-slow` 680ms · `--dur-slower` 1200ms.
- **The radar sweep is the signature motion:** one slow clockwise rotation every
  **5.5 s**; detection blips light up as the beam passes (same 5.5 s cadence). Use
  it for hero/loading moments, not as constant chrome.
- **Accessibility:** honour `prefers-reduced-motion` — all durations collapse to
  ~1ms and the sweep holds static (the silhouette still reads as a radar).

---

## Quick pick

| I need…                                  | Use                                            |
|------------------------------------------|------------------------------------------------|
| Favicon (16px) / app icon                | `logo/favicon.svg` ("E") / `logo/eic-icon.svg` |
| Social avatar (circular crop)            | `social/eic-avatar.svg` (radar)                |
| Symbol at ≤32px (favicon-scale)          | `logo/eic-mark-micro-*.svg`                     |
| Email signature                          | `templates/email-signature.html`               |
| Letterhead / letter / invoice (A4)       | `templates/letterhead.html`                    |
| Presentation (deck 16:9 → PDF)           | `templates/deck.html`                          |
| Editable PowerPoint / Slides deck        | `templates/eic-deck-template.pptx`             |
| Full dossier / proposal (A4 → PDF)       | `templates/dossier.html`                       |
| Dossier cover only (A4)                  | `templates/dossier-cover.html`                 |
| Capabilities one-pager (A4)              | `templates/one-pager.html`                     |
| Business card / envelope (print)         | `templates/business-card.html` · `envelope.html` |
| Brand guidelines manual                  | `templates/brand-book.html`                    |
| Profile banner (X / LinkedIn / FB)       | `social/eic-banner-*.svg`                       |
| Logo on a dark slide                     | `…-lockup-horizontal-on-dark.svg`              |
| Logo on a white document                 | `…-lockup-horizontal-on-light.svg`             |
| Stamp / single-colour print              | `logo/eic-mark-mono-black.svg`                 |
| Social link preview                      | `social/eic-og.svg`                            |
| Colours for a designer                   | `color/palette.md` + `color/palette.svg`       |

See [`color/palette.md`](color/palette.md) and [`type/typography.md`](type/typography.md)
for the full design tokens (kept in sync with `src/styles/tokens.css`).
