Logomark
El logomark es el símbolo de Tiendana: la d con su sonrisa (símbolo del playbook, p17) y sus cuatro expresiones oficiales (p18). Además de ser una marca estática, tiene un carácter: parpadea, se sorprende y se equivoca, siempre dentro de un vocabulario plano y exacto. Esta página fija las reglas de la marca. La implementación (elemento, clips, exportación de archivos) está en Logomark en @tiendana/utils.
Características
✅ Un símbolo, cuatro expresiones - la d y la sonrisa son idénticas; solo cambian los ojos
✅ Plano y exacto - dos tonos, trazos con extremos redondeados, sin sombras ni degradados
✅ Con carácter - expresiones con anticipación, rebote y asentamiento, sin salirse del lenguaje plano
✅ Diez colourways - primary, reverse, neon y mono según el fondo, y las caras de las submarcas (lavender, sun, sky) en claro y en forrest
✅ Accesible - decorativo por defecto, imagen con label y sin movimiento si el usuario lo pide
Las cuatro expresiones (p18)
En las cuatro, la d y la sonrisa son las mismas. Solo cambian los ojos.
| Expresión | Ojos | Cuándo usarla |
|---|---|---|
| SMILE | Dos puntos | Estado neutro; todo movimiento empieza y termina aquí |
| CONGRAT | Dos arcos ^^ abiertos hacia abajo | Éxito, celebración |
| PLAY | Un punto a la izquierda y un chevrón < en el ojo derecho | Guiño, gesto amistoso o interactivo |
| ERROR | Una X en lugar de los dos ojos | Algo falló |
- El chevrón de PLAY nunca se espeja: va siempre en el ojo derecho de quien mira y apunta al otro ojo.
- CONGRAT, PLAY y ERROR son cambios, no transformaciones: un ojo sale, el siguiente entra y se asienta. Nunca se dibuja un ojo intermedio entre dos expresiones oficiales.
- Los ojos no tienen "pista" (la versión tenue de lo aún no dibujado): mientras el logo se dibuja, los ojos se entintan sobre el fondo limpio.
Reglas del personaje
La sonrisa es rígida
Nada la dobla, la alarga ni la acorta. La expresión vive en los ojos, los párpados, el giro plano de la cabeza, el squash and stretch y el tiempo.
Un color por parte
La d usa solo el tono del cuerpo; la sonrisa y los ojos, solo el tono de la cara. ERROR pinta la sonrisa y la X con el rojo de error, y solo mientras la X está visible. Desde 0.6.0 hay dos excepciones más, y nada más recolorea la marca: warning hace parpadear la cara en el tono sol, como una luz de emergencia, y los disfraces de halloween y christmas rellenan el anillo de la d con el sol (la calabaza) y el sol claro (la esfera). En mono, un solo tono es el punto: ERROR se queda en forrest. En sun y sun-reverse, cuya cara ya es sol, warning parpadea en el rojo de error.
Plano y exacto
Dos tonos y extremos redondeados: sin contorno, sombra, bisel, extrusión, degradado ni transparencia (p23). Las imágenes fijas son el logo mismo, de frente y sin distorsión.
Squash and stretch con límite
La deformación se mantiene dentro de ±6 %, anclada al punto más bajo de la sonrisa. Solo los pops con nombre superan ese límite: el pop de finalización, el "¡ah!" y el WOW.
Vivo dentro del vocabulario plano
Cada movimiento tiene anticipación, rebote y asentamiento. Un glifo nunca se transforma en otro: sale y el siguiente entra pasándose de tamaño antes de asentarse. El giro de PLAY empieza antes de que llegue el chevrón, y un rechazo retrocede y aprieta los ojos una fracción de segundo antes de que los puntos se vayan. Las poses sostenidas respiran: los arcos de CONGRAT, la X de ERROR y el chevrón de PLAY laten levemente.
Las ventanas de error de crash son una cita literal de los diálogos de Windows 98 y la única excepción documentada a la regla de color plano: llevan biseles.
Vocabulario de acentos
Los acentos acompañan a la expresión con el mismo lenguaje plano de la marca: los destellos son formas rellenas, y los arcos y las líneas de impacto son trazos con extremos redondeados, más finos que los de la marca (0,42 de su grosor).
| Acento | Qué es | Color |
|---|---|---|
sparkle | Destellos (p24) | Tono de la cara |
arcs | Arcos de movimiento | Tono de la cara |
impact | Líneas de impacto | Tono del cuerpo |
signal | Ondas de señal que salen del palo de la d | Tono de la cara |
question | Un ? (doubt, confused) | Tono del cuerpo |
sync | La flecha de sincronizar que gira (updating) | Tono del cuerpo |
exclaim | Un ! | Rojo de error, como el botón de una acción destructiva |
caution | El signo de precaución ⚠ (warning) | Tono sol, con el ! en el tono del cuerpo |
snore | La z de quien duerme (doze) | Tono del cuerpo |
window | El diálogo de Windows 98 (crash) | Los grises del diálogo original |
Los glifos (?, !, la flecha y la z) son trazos con extremos redondeados, como los arcos. Los acentos desde signal llegan con @tiendana/utils 0.5.0.
Los acentos se mueven con la marca: el balanceo, el squash o el pop de finalización los arrastran. En cada paso, los acentos guardan al menos el grosor de un trazo de distancia con la d y la sonrisa, y el recorte (die-cut) de un sticker nunca llega a un trazo de la marca.
Colourways y fondos
| Colourway | Cuerpo (la d) | Cara | Fondo |
|---|---|---|---|
primary | forrest | natura | Blanco y fondos claros (p5, p17) |
reverse | blanco | natura | Fondos forrest y oscuros (p4, app tile de p17) |
neon | blanco | green neon | Fotos y redes sociales (p5, p31) |
mono | forrest | forrest | Impresión de un solo color |
lavender, sun, sky | forrest | lavender, sun, sky | Blanco y fondos claros: las submarcas beauty, gastro y agro (p14) |
lavender-reverse, sun-reverse, sky-reverse | blanco | lavender, sun, sky | Fondos forrest y oscuros (p14) |
Cada tono es una propiedad CSS (--logomark-face, --logomark-body, --logomark-track, --logomark-error, --logomark-keyline y, desde 0.6.0, --logomark-sun y --logomark-sun-light) que la página puede fijar en el elemento o en un ancestro; lo que no fija sale del colourway. Dentro de nuestras apps, el mixin SCSS las toma de los tokens --color-natura, --color-forrest, --color-green-neon, --color-lavender, --color-sky, --color-error, --color-white, --color-sun y --color-light-sun. Consulta Colores para los tokens y Colourways para el mixin SCSS.
Elemento o SVG estático
| Necesitas | Usa |
|---|---|
| Archivos listos, sin código: stickers, GIFs, PNG o SVG, y videos para CapCut | Descargas del logomark |
| Marca viva en una página: parpadeo, éxito, error, carga | El elemento tdn-logomark (guía; en Angular, TdnLogomarkComponent) |
| Una de las cuatro expresiones como archivo vectorial (impresión, documentos, correos) | SVG estático con expressionSvg (exportación) |
| Sticker o fragmento de video animado, generado desde código | APNG, WebP, GIF o secuencia PNG (exportación) |
| Un canvas propio | mountLogomark o ClipPlayer con paintMark (canvas propio) |
| Stickers de WhatsApp o GIFs para GIPHY y TikTok | npm run stickers en el repositorio JSUtils (stickers) |
El elemento pesa unos 20 kB gzip con todos los clips, a cualquier tamaño y nítido en cualquier densidad de píxeles. Para un icono que no se mueve en un contexto sin JavaScript, un SVG estático es suficiente.
Accesibilidad
- Sin
label, el logomark es decorativo: no se anuncia a tecnologías de apoyo. - Con
label, se anuncia como imagen con ese texto. - Con
prefers-reduced-motion: reduceno se reproduce ningún clip: se mantiene la pose que representa cada clip. - La animación se pausa fuera de pantalla y con la pestaña oculta.