01 — carpeta 01-isotipo
El isotipo
Una D que es a la vez bocadillo de conversación, con dos líneas de mensaje dentro. Es el activo más reutilizable de la marca: funciona solo, dentro de un contenedor y como textura de fondo.
Variantes de color
02 — carpeta 01-isotipo
Contenedores
Cuando el isotipo necesita un fondo propio: iconos de app, avatares y favicons. El radio del tile es 22,37 % del lado, la proporción de icono de aplicación; el símbolo ocupa el 54 % del lienzo.
03 — carpeta 02-logo
Logotipo
Isotipo + wordmark en Figtree Bold con tracking -0.028em. La altura de mayúscula se alinea con el centro óptico del símbolo.
Área de respeto y tamaño mínimo
Marco discontinuo = área de respeto mínima
| Regla | Valor |
|---|---|
| Área de respeto | ≥ 20 % del alto del isotipo |
| Isotipo mínimo | 24 px / 8 mm |
| Lockup horizontal mínimo | 120 px / 30 mm |
| Favicon ≤ 32 px | versión simplificada |
Usos incorrectos
04 — carpeta 05-brand
Paleta
Orquídea es el color de la marca; el neutro es un grafito ligeramente frío para que el morado no se caliente al lado. Pulsa cualquier muestra para copiar el hex.
Orchid — color principal
Neutral
Semánticos
Data-viz
05 — carpeta 06-fonts
Tipografía
Figtree para todo lo que se lee; IBM Plex Mono para lo que se identifica: IDs de ticket, hex, referencias, timestamps. Ambas con licencia SIL OFL, incluidas en el pack en .ttf y .woff2.
| Rol | Tamaño | Peso | Tracking |
|---|---|---|---|
| Display | 48px | 700 | -0.022em |
| H1 | 30px | 700 | -0.022em |
| H2 | 24px | 600 | -0.014em |
| Body | 14px | 400 | -0.006em |
| Overline | 11px | 600 | 0.06em |
06 — carpeta 04-icons
Iconos y favicons
Todo el juego generado desde el mismo vector: favicon multi-tamaño, apple-touch, Android y versión maskable con la zona segura del 80 %.
<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">
| Archivo | Tamaño | Uso |
|---|---|---|
| favicon.ico | 16–64 | Navegador clásico |
| icon.svg | vector | Favicon moderno |
| apple-touch-icon.png | 180 | iOS home screen |
| android-chrome-512x512.png | 512 | PWA |
| icon-maskable-512x512.png | 512 | Android adaptativo |
| icon-monochrome.svg | vector | Notificaciones, una tinta |
07 — carpeta 03-social
Redes sociales
Cada cabecera existe en cuatro acabados — orchid, gradient, dark y light — en SVG y en PNG al tamaño exacto de cada plataforma.
Fotos de perfil
Cabeceras
| Archivo | Píxeles | Dónde |
|---|---|---|
| x-header | 1500 × 500 | X / Twitter |
| linkedin-page | 1128 × 191 | Página de empresa (logo a la derecha del avatar) |
| linkedin-personal | 1584 × 396 | Perfil personal |
| facebook-cover | 1640 × 624 | Portada @2x |
| youtube-channel | 2560 × 1440 | Logo dentro del área segura |
| og-image | 1200 × 630 | Open Graph · Twitter Card |
| github-banner | 1280 × 640 | Organización GitHub |
| email-header | 1200 × 300 | Cabecera de emails |
| web-hero | 1920 × 640 | Hero de la web |
08 — aplicación
Stripe Checkout
Stripe no ofrece Figtree en su catálogo de marca. Esta es la configuración que mantiene la identidad con lo que sí hay disponible.
| Ajuste | Valor | Por qué |
|---|---|---|
| Fuente | Be Vietnam Pro | Geométrica-humanista, la más cercana a Figtree del catálogo |
| Forma | Redondeada ≈ 8px | Coincide con --radius-control del sistema |
| Color de marca | #9017B7 | Orchid 600 |
| Acento / enlaces | #761296 | Orchid 700, contraste sobre blanco |
| Fondo | #F8F8FA | Neutral 50 |
| Texto | #1A1A21 | Neutral 900 |
| Logo | icon-512 · logo horizontal | Cuadrado para el icono, horizontal para la cabecera |
09 — el pack
Qué hay en el pack
├── 01-isotipo/ svg + png · 14 variantes planas, 13 con contenedor
├── 02-logo/ lockups horizontal y vertical en 8 acabados + wordmark
├── 03-social/ 10 cabeceras × 4 acabados + 15 fotos de perfil
├── 04-icons/ favicon.ico, apple-touch, android, maskable, manifest
├── 05-brand/ dredo-colors.json · tokens.css · tailwind · showcase
├── 06-fonts/ Figtree + IBM Plex Mono (.ttf y .woff2, OFL)
└── README.md