Guía de marca · Lo esencial
Versión 1.0 · Septiembre 2026
Guía de marcaLo esencial
Logotipo, color y tipografía. Todo lo que necesitas para usar correctamente la marca vignetim.
Logotipo
Versiones y variantes de color
Cuatro versiones aprobadas
Horizontal · símbolo
Predeterminada. Web, documentos, presentaciones, firmas de correo.
Vertical · símbolo
Formatos cuadrados y verticales, redes sociales, roll-ups.
Horizontal · insignia
Cabeceras dentro de la app, imágenes para tiendas de apps.
Vertical · insignia
Pantallas de inicio, creatividades publicitarias.
Tres versiones de color
Teal / fondo claro
Blanco, Neutral 50, Teal 50.
Blanco / fondo teal
Teal 500 a 800.
Blanco / fondo oscuro
Neutral 800 a 900, sobre fotografía.
También disponible
Para impresión a una tinta existe una versión oscura a una tinta. Usa este archivo en lugar de convertir a escala de grises.
Oscura a una tinta
- El logotipo tipográfico va siempre en minúsculas, con el punto: vignetim. Nunca pongas la primera letra en mayúscula ni añadas espaciado entre letras.
- Nunca coloques la insignia teal sobre un fondo teal. Desaparece. Sobre teal, usa el símbolo blanco solo.
- Usa el símbolo o la insignia solos únicamente cuando el nombre de la marca aparezca en otro lugar del mismo soporte: icono de la app, favicon, foto de perfil.
- Nunca montes las versiones a mano. Usa siempre el archivo proporcionado; nunca reorganices sus elementos.
Área de respeto y tamaño mínimo
Espacio para respirar, tamaños que siguen siendo legibles
Deja al menos 0.5 X de espacio libre en todos los lados del logotipo. X es la altura del símbolo (o de la insignia) en esa versión. Ningún texto, imagen, línea, otro logotipo ni borde de página puede entrar en esta área.
Tamaños mínimos
| Elemento | Digital | Impresión |
|---|---|---|
| Versión horizontal · símbolo | 140 px | 30 mm |
| Versión horizontal · insignia | 160 px | 34 mm |
| Versión vertical · símbolo | 72 px | 16 mm |
| Versión vertical · insignia | 80 px | 18 mm |
| Símbolo (solo) | 20 px | 5 mm |
| Insignia (sola) | 44 px | 8 mm |
Los valores son anchos. Por debajo de estos tamaños, usa el símbolo o la insignia solos en lugar de una versión completa.
Dos excepciones
- Icono de la app: la regla del área de respeto no se aplica. La insignia ocupa todo el marco y la plataforma redondea las esquinas.
- Favicon (16 a 32 px): la insignia se vuelve ilegible; usa el símbolo teal solo sobre fondo transparente.
Junto a otros logotipos
Deja al menos 1 X entre dos logotipos y equilíbralos a la misma altura óptica.
Color
Un color de marca, una escala neutra
El color de marca es Teal 500 · #049CB9. No hay un color de marca secundario; la profundidad procede de los tonos de la escala teal y de los grises neutros.
Vignetim teal
Neutros
Valores técnicos
- HEX
- #049CB9
- RGB
- 4 · 156 · 185
- CMYK (ref.)
- 98 · 16 · 0 · 27
- PANTONE (aprox.)
- 313 C a 314 C
El valor CMYK es una referencia calculada; conviértelo con el perfil ICC de la imprenta.
Proporción de uso
- Blanco / Neutral 50
- Espacio para respirar
- Neutral 600 a 900
- Texto y estructura
- Teal
- Acento y acción
Cada pantalla tiene exactamente una acción principal en teal.
Estados de los botones
Tres reglas de contraste
- Teal 500 no es un color de texto (3.25:1 sobre blanco). Usa Teal 700 para textos y enlaces.
- El texto blanco sobre Teal 500 debe tener al menos 18 px / 14 pt en negrita; para textos más pequeños, usa un fondo Teal 700.
- En modo oscuro, el acento es Teal 300 a 400; Teal 500 no es suficiente sobre fondos oscuros.
Tipografía
Inter, una tipografía, cuatro pesos
Inter es la única tipografía de la marca. Solo se usan los pesos 400, 500, 600 y 700. Si Inter no se puede cargar, recurre a la fuente del sistema y, después, a Arial.
Aa Bb Cc Çç Ğğ Iı İi Şş Öö Üü 0123456789
Aa
Regular · 400
Texto de cuerpo, textos largos.
Aa
Medium · 500
Etiquetas, cabeceras de tabla, énfasis.
Aa
SemiBold · 600
Titulares, botones, antetítulos.
Aa
Bold · 700
Solo titulares de campaña.
H1 32 / 38 px · 600 · -0.020em
Tu viñeta, lista antes de la frontera
H2 24 / 30 px · 600 · -0.016em
¿Cómo funciona una viñeta digital?
H3 20 / 26 px · 600 · -0.012em
Introduce la matrícula de tu vehículo
Body 16 / 26 px · 400
La app te envía un recordatorio cuando estás a 30 km de la frontera.
Body S 14 / 22 px · 400
Los precios se basan en la tarifa oficial de la viñeta de cada país.
Overline 11 / 14 px · 600 · +0.11em · CAPS
Países · Precios · Preguntas frecuentes
Interlineado: de 1.10 a 1.25 en titulares, de 1.50 a 1.65 en texto de cuerpo. Longitud de línea de 60 a 75 caracteres. Siempre alineado a la izquierda.
- No compongas el texto de cuerpo en mayúsculas. Las mayúsculas son solo para antetítulos y etiquetas cortas.
- No añadas espaciado entre letras al texto de cuerpo, ni lo compongas en teal.
- No estires ni inclines el texto; nada de cursivas ni negritas falsas.
- No uses más de cuatro niveles en un mismo soporte.
La trampa de las mayúsculas en turco
En la conversión automática, “i” debe convertirse en İ. Define lang="tr" en el HTML y usa toLocaleUpperCase('tr') en el código. De lo contrario, “istanbul” se convierte en “ISTANBUL”.
También ocurre a la inversa: el texto en inglés necesita lang="en"; si no, “Size” se convierte en “SİZE”.
Idiomas: subconjuntos latin-ext para TR y RO, cyrillic para UA, latin para DE y EN. Todos forman parte de Inter. Nunca cambies de tipografía por otro idioma.
Usos incorrectos
Lo que nunca debe hacerse con el logotipo
Esta lista no es exhaustiva: cualquier alteración del logotipo respecto al archivo proporcionado se considera un uso incorrecto.
Cuando se requiera impresión a una tinta, usa la versión oscura a una tinta aprobada, no la escala de grises.
Referencia rápida
Toda la guía de un vistazo
Carta de colores
- Teal 500 · marca#049CB9
- Teal 700 · texto / enlaces#046B80
- Teal 300 · acento en modo oscuro#5FCEE2
- Neutral 900 · titulares#161B1E
- Neutral 600 · texto secundario#565E64
- Neutral 50 · superficie#F7F8F9
Cinco reglas
- Usa el logotipo del archivo proporcionado.
- Deja 0.5 X de espacio libre en todos los lados.
- Teal 500 no es un color de texto. Usa Teal 700.
- Una tipografía: Inter, 400 / 500 / 600 / 700.
- El teal no supera el 10 % de ninguna superficie.
Lista de archivos
- Todos los logotiposZIP
- vignetim-horizontal-tealPNG
- vignetim-horizontal-whitePNG
- vignetim-horizontal-single-colour-darkPNG
- vignetim-vertical-tealPNG
- vignetim-badge-horizontalPNG
- vignetim-badge-verticalPNG
- vignetim-badgePNG
- vignetim-symbol-teal / whiteBajo petición
- vignetim-appicon-1024Bajo petición
- vignetim-favicon-16/32/48Bajo petición
Para impresión y gran formato, solicita los archivos vectoriales (SVG o EPS). PNG solo donde no se admitan vectores.
Icono de la app
- App Store (iOS)
- 1024 × 1024 px, sin transparencia
- Google Play
- 512 × 512 px, PNG de 32 bits
- Play · gráfico destacado
- 1024 × 500 px
- Perfil en redes sociales
- 1000 × 1000 px
Sube un cuadrado a sangre completa, sin esquinas redondeadas. El sistema operativo las redondea.
Variables CSS
:root {
--brand-500: #049CB9;
--brand-600: #03849E;
--brand-700: #046B80;
--brand-300: #5FCEE2;
--brand-50: #EAF8FB;
--ink-900: #161B1E;
--ink-600: #565E64;
--ink-200: #DDE1E4;
--ink-50: #F7F8F9;
--font-sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}Preguntas y aprobaciones
Para cualquier uso no contemplado en esta guía, o para solicitar un nuevo recurso, contacta con el responsable de la marca.
Versión 1.0 · Septiembre 2026