Dev01Versiones del logo
Usa la horizontal siempre que haya espacio. La vertical para formatos cuadrados o angostos. El ícono solo cuando la marca ya está presente o el espacio es muy chico. Todos son SVG con el texto convertido a curvas: no necesitan la fuente instalada.
02Color
Violeta manda, la estrella acompaña. Haz clic en un color para copiar su HEX.
RGB 122 · 63 · 228
Principal · ~60 %
255 · 197 · 61
Acento · ~5 %
26 · 21 · 48
Texto · ~15 %
247 · 246 · 242
Fondos · ~20 %
Combinaciones de texto que sí
- Blanco sobre violeta · 5.7:1
- Tinta sobre amarillo · 11:1
- Violeta sobre papel · 5.3:1
- Blanco sobre tinta · 17:1
Evita
- Amarillo como texto sobre fondos claros (1.5:1). Es solo para la estrella y acentos chicos.
- Tinta sobre violeta en texto (3.1:1); usa blanco.
- Degradados o versiones "más claritas" del violeta en el logo.
03Tipografía
Una sola familia: Fredoka, gratis en Google Fonts con licencia abierta (OFL), para uso comercial, web e impreso.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 ¡! ¿?
Siempre en minúsculas, sin acento.
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400..700&display=swap" rel="stylesheet">
04Reglas de uso
Área de protección y tamaños mínimos
- x = la altura de un ojo del personaje. Deja ese espacio libre alrededor del logo: nada de texto, bordes ni imágenes dentro.
- Horizontal: 120 px de ancho en pantalla · 30 mm impreso.
- Vertical: 64 px de alto · 18 mm.
- Ícono: 16 px · 6 mm. Por debajo de 24 px usa la versión sin estrella (favicon).
Usos incorrectos
- No estirar ni deformar.
- No cambiar los colores.
- No rotar ni inclinar.
- No agregar sombras ni contornos.
- No cambiar la letra, ni usar mayúsculas o acento (
Tadán). - No usar sobre fondos sin contraste.
05Personaje
Los estados viven solo dentro de la app y la academia (cargas, notificaciones). En marca externa usa siempre el personaje en espera.
En espera
Pensando
¡Tadan, listo!
06Cómo usarlo en un proyecto
Enlaza directo a estas URLs; son estables. Si el proyecto debe funcionar sin depender de este servidor, copia el SVG a tu proyecto (sin modificarlo).
<!-- Logo en una página -->
<img src="https://dev.tadan.mx/marca/tadan-logo-horizontal.svg" alt="Tadan" height="40">
<!-- Favicon -->
<link rel="icon" href="https://dev.tadan.mx/marca/tadan-favicon.svg" type="image/svg+xml">
/* Colores en CSS */
:root{ --tadan-violeta:#7A3FE4; --tadan-estrella:#FFC53D; --tadan-tinta:#1A1530; --tadan-papel:#F7F6F2; }
07Documentación
Decisiones de producto y técnicas del proyecto.