Manual de marca Terranec
Identidad, color, tipografía, componentes y reglas de uso para los dos sistemas visuales de Terranec: la app de paneles y la landing pública.
Dos sistemas, una tipografía
La app y la landing comparten la familia Inter y el isotipo, pero no la paleta. La app usa tokens claros/oscuros con un acento por superficie. La landing es oscura e inmersiva y no reutiliza los tokens de la app.
index.css · index.htmlPaneles de producto con estilo tipo Stripe. Tema claro y oscuro. El acento cambia según quién usa la superficie.
landing.cssSitio público de marketing. Siempre oscuro. Aurora animada, títulos con gradiente de marca y vidrio esmerilado.
El cubo Terranec
Un cubo en perspectiva con el degradado de marca de teal a índigo. Se usa solo (isotipo), acompañado del nombre (lockup) o dentro de un contenedor (ícono de app).
Área de protección
Deja libre alrededor del logo un margen igual a x, la mitad de la altura del isotipo. Ningún texto, borde o imagen entra en esa zona.
TerranecTamaño mínimo
Por debajo de estos tamaños el degradado y las aristas del cubo pierden legibilidad. Usa el isotipo solo cuando el lockup no alcance su mínimo.
TerranecUsos incorrectos
××××××Paleta
El degradado de marca une las dos paletas: sus extremos teal e índigo son los acentos de las superficies Cliente y Plataforma en la app.
Neutros · tema claro
Neutros · tema oscuro
Neutros · landing
Inter, para todo
Una sola familia en todo el proyecto, desde Google Fonts. Sin serif ni monoespaciada: los números de KPIs usan Inter con cifras tabulares.
abcdefghijklmnñopqrstuvwxyz
0123456789 ¿?¡! @ # $ % &
$4.711.090
$ 901.111
Cifras de ancho fijo: las columnas se alinean y los valores no "saltan" al actualizarse.
$4.711.090
$ 901.111
El ancho variable desalinea tablas y KPIs. Solo para texto corrido.
Radios y sombras
Esquinas generosas y sombras suaves. El radio crece con el tamaño del elemento; la sombra de color se reserva para el acento.
Firma visual
Tiles de ícono con degradado diagonal de 135° y shadow-glow, repetidos en KPIs, quick-actions del residente y el launcher. Prueba las dos superficies y los dos temas.
Grid de 12 columnas
Los paneles de la app se componen con spans de 12, 8, 7, 5 y 4 columnas. En móvil todo colapsa a una sola columna.
Esta misma página es el sistema en uso.
Aurora animada, nav flotante en vidrio esmerilado, títulos con el degradado de marca — nada de esto es un mockup, es landing.css tal cual corre en producción.