# Dredo — Brand Pack v1.0

Pack completo de identidad visual de **Dredo** (Elaren Group SL), derivado del
design system original (`Dredo Brand Tile.html` + `dredo-isotipo.svg`).

---

## Lo esencial

| | |
|---|---|
| Color principal | `#9017B7` — *Orchid 600* |
| Color secundario | `#DA9BF2` — *Orchid 300* |
| Degradado | `linear-gradient(135deg, #AC3AD6, #61137A)` |
| Tipografía | **Figtree** (display + UI) · **IBM Plex Mono** (código/IDs) |
| Peso del logotipo | Figtree 700, tracking `-0.028em` |
| Radio de icono | 22.37 % (proporción app-icon) |
| Radio de controles | 8 px |

---

## Estructura

```
01-isotipo/     El símbolo solo
  svg/          Vectores (fuente de verdad)
  png/          128 / 256 / 512 / 1024 px, fondo transparente
02-logo/        Isotipo + wordmark "Dredo"
  svg/          Lockups horizontales, verticales y wordmark suelto
  png/          1200 y 2400 px de ancho
03-social/      Cabeceras, OG images y fotos de perfil
  svg/          Vectores editables
  png/          Tamaños exactos de cada red
04-icons/       Favicons, app icons y manifest
05-brand/       Paleta, tokens y showcase
06-fonts/       Figtree e IBM Plex Mono (OFL) en .ttf y .woff2
```

---

## 01 · Isotipo

Variantes planas (fondo transparente): `color`, `orchid`, `orchid-soft`, `white`,
`white-duo`, `black`, `black-duo`, `blue`, `green`, `amber`, `red`, `teal`,
`rose`, `gradient`.

Con contenedor: `tile-*` (rectángulo redondeado), `circle-*`, `square-*`.

- **Uso por defecto:** `dredo-isotipo-color` sobre fondo claro.
- **Sobre morado o foto:** `dredo-isotipo-white` o `white-duo`.
- **Una sola tinta** (grabado, serigrafía, sello): `orchid`, `black` o `white`.
- Las variantes azul/verde/ámbar/rojo/teal/rosa son para submarcas, entornos
  (`staging`, `dev`), etiquetas de producto o ilustración — **no** para
  comunicación corporativa.

## 02 · Logotipo

- `horizontal` para cabeceras, firmas de email, webs y facturas.
- `vertical` cuando el espacio es cuadrado o estrecho.
- `wordmark` suelto solo cuando el isotipo ya aparece en el mismo lienzo.

**Área de respeto:** el alto de la barra superior del bocadillo por cada lado
(≈ 20 % del alto del isotipo). **Tamaño mínimo:** 24 px de alto para el isotipo,
120 px de ancho para el lockup horizontal.

**Qué no hacer:** recolorear el isotipo con colores fuera de la paleta, aplicar
sombras o biseles, estirar sin proporción, rotarlo, encerrarlo en una caja
adicional cuando ya usas un `tile`, o poner la versión a color sobre fondos
morados (usa la blanca).

## 03 · Social

| Archivo | Tamaño | Dónde |
|---|---|---|
| `x-header-1500x500` | 1500×500 | X / Twitter |
| `linkedin-page-1128x191` (+ `-2x`) | 1128×191 | Página de empresa LinkedIn |
| `linkedin-personal-1584x396` | 1584×396 | Perfil personal LinkedIn |
| `facebook-cover-1640x624` | 1640×624 | Portada Facebook (@2x) |
| `youtube-channel-2560x1440` | 2560×1440 | Canal de YouTube |
| `og-image-1200x630` | 1200×630 | Open Graph / Twitter Card |
| `github-banner-1280x640` | 1280×640 | Organización GitHub |
| `email-header-1200x300` | 1200×300 | Cabecera de emails |
| `web-hero-1920x640` | 1920×640 | Hero de la web |

Cada uno en 4 acabados: `orchid`, `gradient`, `dark`, `light`.

Fotos de perfil: `pfp-{circle|rounded|square}-{orchid|gradient|dark|white|offwhite}`
en 400, 800 y 1000 px. Para redes que recortan en círculo usa cualquiera — el
isotipo ocupa el 52 % del lienzo, siempre dentro del recorte.

## 04 · Iconos

```html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#9017B7">
```

`favicon-16/24/32` usan una versión simplificada (sin las líneas interiores)
porque a ese tamaño el detalle se empasta. `icon-maskable-512x512.png` respeta
la zona segura del 80 % de Android.

## 05 · Marca

- `dredo-colors.json` — paleta en JSON plano, lista para importar.
- `dredo-tokens.css` — custom properties (`--dredo-*`) con tema claro y oscuro.
- `tailwind.dredo.json` — fragmento para `theme.extend`.
- `dredo-brand-showcase.png` / `.svg` — lámina resumen de toda la identidad.

## 06 · Tipografías

Figtree e IBM Plex Mono están bajo **SIL Open Font License 1.1**: se pueden
incrustar, redistribuir y usar comercialmente. Las licencias van dentro de cada
carpeta.

En web:

```css
@font-face{font-family:"Figtree";src:url("/fonts/figtree-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
```

---

## Stripe Checkout

Stripe no ofrece Figtree. Configuración recomendada:

- **Fuente:** Be Vietnam Pro (la más cercana a Figtree del catálogo de Stripe).
- **Forma:** redondeada (~8 px), coherente con `--radius-control`.
- **Color de marca:** `#9017B7` · **acento:** `#761296` · **fondo:** `#F8F8FA`
  · **texto:** `#1A1A21`.