Manual de marca
Cómo se usa la identidad de TIPartner: logotipo, color, tipografía e iconografía. Todo lo que ves aquí es el sistema real del sitio —las muestras se pintan con los mismos tokens que usa el resto de las páginas—, no una maqueta aparte.
Logotipo
Tres archivos, todos SVG. Se eligen por el fondo sobre el que van, no por el tamaño: al ser vectoriales escalan sin pérdida.
De izquierda a derecha: principal sobre fondo claro · variante clara
sobre --azul-900 · isotipo.
-
Correcto
Usar
logo-tipartner-light.svgsobre cualquier fondo oscuro. La versión principal pierde legibilidad ahí. - Correcto Reservar el isotipo para espacios cuadrados: favicon, avatar, aplicación móvil.
- Incorrecto Recolorear el logotipo. Las dos variantes existentes cubren fondo claro y oscuro; no hace falta una tercera.
-
Incorrecto
Deformar la proporción. El
viewBoxes 381,9 × 134,73; cualquier ancho y alto deben mantener esa razón.
Descargas
Color
El azul y el naranja están muestreados del logotipo original. El resto de la escala se construyó alrededor de esos dos.
Azul
- azul-900 #0B1B2B Fondo de secciones oscuras y del pie.
- azul-800 #0F2739
- azul-700 #004C7F Color de los enlaces sobre fondo claro.
- azul-600 #0061A0 Azul de marca, tomado del logotipo.
- azul-500 #0A78BE Anillo de foco de teclado.
- azul-100 #D7E9F5
- azul-50 #EFF6FC
Naranja
- naranja-700 #8A4103
- naranja-600 #B85503 Relleno del botón primario. 4,84:1 con texto blanco.
- naranja-500 #EC7404 Naranja de marca. Solo gráficos.
- naranja-100 #FBE3CC
- naranja-50 #FEF4EA
La regla del naranja
Es la decisión menos obvia del sistema y la que más se rompe por descuido. El naranja de
marca #EC7404 con texto blanco encima da una razón de contraste de
2,9:1, por debajo del 4,5:1 que exige WCAG AA. El botón primario usa por eso
#B85503, que llega a 4,84:1.
-
Correcto
#EC7404en gráficos, ilustraciones, iconos decorativos y detalles sin texto encima. -
Incorrecto
#EC7404como fondo de un botón o detrás de cualquier texto. Usa#B85503.
Neutros y estado
- tinta-900 #101828 Títulos.
- tinta-700 #344054 Texto corrido.
- tinta-600 #475467
- tinta-500 #667085 Texto secundario.
- linea #E4E7EC
- papel-2 #EAF1F8 Fondo de sección alterna.
- verde-600 #067647 Confirmación.
- ambar-600 #B54708 Advertencia y contenido pendiente.
Tipografía
Sora para títulos, Inter para texto. Ambas se cargan desde Google Fonts con una pila de respaldo del sistema, así que si la descarga falla la página sigue legible.
Los tamaños son fluidos: se interpolan con clamp() entre un mínimo de móvil
y un máximo de escritorio, sin saltos por punto de quiebre.
Tecnología que hace avanzar tu negocio
Sora 700 · --t-display · clamp(2.3rem, 1.35rem + 3.6vw, 4.1rem) · un solo H1 por páginaTítulo de sección
Sora 600 · --t-h2 · clamp(1.75rem, 1.18rem + 2.1vw, 2.7rem)Título de tarjeta
Sora 600 · --t-h3 · clamp(1.18rem, 1.06rem + .5vw, 1.4rem)Entrada de sección: el párrafo que acompaña a un título y da contexto antes del detalle.
Inter 400 · --t-lead · clamp(1.08rem, 1rem + .45vw, 1.33rem)Texto corrido. Interlineado 1,65 y ancho máximo de 64 caracteres para que la línea no se haga difícil de seguir.
Inter 400 · --t-base · 17px fijoEtiqueta de apoyo
Inter 600 · --t-xs · 13px · versalitas con interletrado .12emIconografía
Un único sprite SVG con todos los símbolos, incrustado al inicio del
<body> desde parciales/iconos.php. Cada icono se referencia
con <use href="#i-…">, así que el archivo se descarga una vez y se
reutiliza en toda la página.
-
Correcto
Trazo, no relleno. Los iconos heredan el color del texto con
currentColor. -
Correcto
Agregar un icono nuevo significa agregar un
<symbol>aparciales/iconos.php. Queda disponible en todas las páginas a la vez. - Incorrecto Cargar una librería de iconos externa. El sprite pesa unos pocos KB y evita una petición a un tercero.
-
Incorrecto
Dejar un icono decorativo sin
aria-hidden="true": los lectores de pantalla lo anunciarían sin aportar nada.
Fotografía y logotipos de terceros
Retratos del equipo
Blanco y negro, contraste llevado a un objetivo común y salida a 400 × 400 px. La uniformidad importa más que la calidad individual: un retrato a color o con otro encuadre rompe la fila entera.
Logotipos de clientes
Se normalizan por área óptica, no por altura. Una marca apilada o
cuadrada necesita más altura que un logotipo horizontal para pesar lo mismo en la pantalla;
igualar alturas hace que unas se vean diminutas junto a otras. En el muro se neutralizan con
filter:grayscale(1) para que ninguna compita con la página.
- Incorrecto Ampliar con inteligencia artificial el rostro de una persona real. Si un retrato está bajo de resolución, la solución es una sesión de fotos.
- Incorrecto Usar el logotipo de un cliente sin su autorización vigente.
Forma y espaciado
| Token | Valor | Uso |
|---|---|---|
| --r-sm | 10 px | Muestras, avisos, campos de formulario |
| --r | 16 px | Tarjetas y paneles |
| --r-lg | 24 px | Bloques grandes y media |
| --r-pill | 999 px | Chips y etiquetas |
| --seccion | clamp(3,25rem, 5vw, 5,5rem) | Aire vertical entre secciones |
| --ancho | 1200 px | Ancho máximo del contenedor |
| --anillo | 3 px sobre --azul-500 | Foco de teclado, nunca se elimina |
La escala de espaciado va de --sp-1 (4 px) a --sp-9 (96 px). Usar
siempre un peldaño de la escala en vez de un número suelto es lo que mantiene el ritmo
vertical parejo entre páginas escritas en momentos distintos.
Accesibilidad
No es una sección aparte del manual: son restricciones que ya condicionaron las decisiones de arriba.
- Contraste mínimo 4,5:1 para texto. Es la razón de que el botón primario no lleve el naranja de marca.
- El foco de teclado es visible en todo elemento interactivo y no se elimina nunca.
- Un solo
<h1>por página y jerarquía de encabezados sin saltos. - El color nunca es la única señal. En esta misma página, correcto e incorrecto se distinguen además por el símbolo ✓ / ✕.
- Las animaciones respetan
prefers-reduced-motion.
Pendiente de definición
Este manual documenta lo que el sistema ya resuelve. Estas piezas de un manual de marca completo todavía no están definidas, y por eso no aparecen inventadas más arriba:
- Pendiente Área de resguardo y tamaño mínimo del logotipo.
- Pendiente Equivalencias para impresión: Pantone, CMYK y comportamiento sobre papel.
- Pendiente Reglas de convivencia con logotipos de alianzas y clientes en un mismo soporte.
- Pendiente Tono de voz y normas de redacción.
- Pendiente Plantillas de presentación, firma de correo y papelería.
Si necesitas alguna de ellas para un material concreto, escríbenos y la definimos.