Volver al blog
diseñomarcaidentidadidentidad-visualfrontendux

Marca e identidad visual: el diseño del ecosistema soberano

TroncoCorp 3 min de lectura

Cada elemento visual de TroncoCorp — desde el grosor de un borde hasta el espaciado de una tipografía — comunica una decisión. Nada es decorativo. Todo es intencional.

Por qué el diseño importa en un ecosistema soberano

El diseño no es la capa superficial de la tecnología. Es la interfaz entre el sistema y las personas. Un diseño confuso comunica falta de control. Un diseño inconsistente comunica fragilidad. Un diseño genérico comunica que eres uno más.

TroncoCorp necesita comunicar, en cada interacción, que esto es otra cosa. No una startup más. No una web corporativa. Un ecosistema soberano.

La paleta: tres colores, mil significados

Redujimos la paleta a tres colores primarios:

  • Neon Green (#00FF00) — El color primario. Representa el ecosistema vivo, la tecnología activa, la conexión. Es el color del carbono neutralizado, de la energía que fluye.
  • Neon Orange (#FF4500) — El color de alerta y contraste. Parlamento, MadridTaxis, gobernanza. Comunica urgencia y atención.
  • Neon Blue (#1E90FF) — El color de infraestructura. Zénit, comunicaciones, capa técnica. Comunica profundidad y estabilidad.

Cada proyecto del ecosistema hereda uno de estos tres colores como acento. No más. La restricción fuerza coherencia.

Tipografía brutalista

Usamos tres familias tipográficas, cada una con un propósito:

  • Brutalist (system-ui bold) — Títulos y encabezados. Impacto directo, sin concesiones. La voz del ecosistema.
  • Elegant (serif) — Texto de lectura, artículos, descripciones. La voz del contenido.
  • Tech (monospace) — Datos, código, métricas. La voz del sistema.

No hay tipografía decorativa. No hay pesos intermedios. Cada texto usa exactamente la familia que necesita.

El grid como firma

El patrón de cuadrícula sutíl que aparece en el fondo de las páginas no es un adorno: es la firma visual del ecosistema. Una rejilla de 80x80px con líneas de neón apenas visibles que recuerdan que todo esto está construido sobre una base estructurada.

La cuadrícula aparece en todas las páginas pero nunca compite con el contenido. Es un recordatorio, no una distracción.

Efectos con propósito

Cada efecto visual tiene una justificación:

  • Scanline — La línea que cruza la pantalla periódicamente recuerda que el sistema está vivo, monitoreando, operando.
  • Glow — El resplandor neón indica elementos activos, interactivos, vivos. Un botón sin glow es un botón muerto.
  • Glitch — La animación de fallo controlado al hacer hover comunica que el sistema puede romperse… pero no lo hace.
  • Vignette — El oscurecimiento de los bordes en las secciones hero crea profundidad cinematográfica. Es el lenguaje del cine independiente aplicado a la interfaz.

Sistema de diseño, no framework

No usamos Tailwind UI, Shadcn, Material Design ni ningún framework de componentes. Cada botón, cada input, cada tarjeta está escrito a mano.

Esto no es purismo técnico. Es coherencia. Cuando cada componente está hecho a medida, no hay piezas que no encajen. Y cuando el ecosistema crezca, todos los componentes seguirán hablando el mismo idioma visual.

El logotipo

TRONCOCORP siempre en mayúsculas. CORP en neón verde. Sin icono, sin mascota, sin simplificar. El nombre completo, la tipografía impactante, el color como único adorno.

Un logotipo que no necesita explicación porque ya lo dice todo.

Compartir

EN