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

<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:

@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.