Tríada Diseño Vivo Visual Lab · Sistema de marca adaptable
Theme activo grupotriada.cl ↗
Laboratorio visual de marca

Una identidad. Infinitas formas de presentarse.

Explora cómo TRIADA adapta su sistema visual a campañas, temporadas y públicos sin perder coherencia de marca. Elige un theme y velo aplicado, en vivo, sobre componentes reales de la web.

21themes listos
6categorías de marca
13componentes reales
0librerías externas

Selector de themes

Cambia toda la piel de la marca con un clic

Cada theme redefine fondo, superficies, color primario, acentos, tipografía, radios, sombras, gradientes, botones, badges y la tríada de tres trazos. Filtra por categoría y observa el cambio en el escenario de abajo.

Tríada· Identidad Base
Base
Tríada·
Diagnóstico Empresarial 360

Soluciones digitales para empresas que quieren crecer.

Diagnóstico, estrategia y tecnología en un solo sistema. Diseñamos experiencias digitales que se adaptan a tu negocio.

Áreas de trabajo

Tres áreas, un solo diagnóstico

Evaluamos la madurez de tu empresa en Tecnología, Ventas y Finanzas — y te entregamos un plan concreto para cada una.

Tecnología

Sistemas que ordenan

Automatización, datos y herramientas que le devuelven horas a tu equipo cada semana.

Ventas

Un pipeline que convierte

Del primer contacto al cierre: procesos claros, seguimiento y foco en lo que sí vende.

Finanzas

Números que deciden

Visibilidad real de márgenes, flujo y costos para tomar decisiones con datos, no intuición.

78Madurez
Resultado por área

Tu empresa está en nivel Optimizado

Tecnología82
Ventas68
Finanzas74
Botones

Acciones

Badges & etiquetas

Estados

Tríada 360 En vivo Premium Nuevo

Propuesta comercial

Plan de transformación digital 360

Un acompañamiento de 90 días para ordenar tecnología, ventas y finanzas, con hitos claros y un informe ejecutivo por área.

  • Diagnóstico 360 + informe ejecutivo
  • Plan de acción por horizontes
  • Implementación acompañada

Desde

UF 48

Financiamiento en cuotas disponible.

Planes

Elige por dónde empezar

Diagnóstico

UF 12

Radiografía completa de tu negocio en 3 áreas.

  • Informe ejecutivo 360
  • Reunión de resultados
  • Mapa de madurez
Recomendado

Transformación

UF 48 / 90 días

Diagnóstico + implementación acompañada.

  • Todo lo del Diagnóstico
  • Plan por horizontes
  • Acompañamiento semanal

Continuo

UF 20 / mes

Socio tecnológico permanente para tu empresa.

  • Soporte y evolución
  • Tablero de gestión
  • Revisiones trimestrales

Por primera vez entendimos dónde estábamos parados. El diagnóstico fue directo, sin humo, y el plan lo pudimos ejecutar de verdad.

MJ

María José Contreras

Gerenta general · Retail regional

1 Cuéntanos de tu empresa
2 ¿Qué te duele hoy?
Panel & modal

Abre una ventana modal para ver cómo el theme activo reviste también los estados emergentes y paneles laterales.

Comparador de identidad

El mismo mensaje, seis percepciones de marca

Un bloque idéntico —logo, titular, botón y badge— renderizado en seis lentes distintos. Cambia el color, cambia la tipografía, cambia la sensación… pero la marca sigue siendo reconocible.

Galería de paletas

21 sistemas visuales con intención estratégica

Cada paleta tiene una personalidad, un uso recomendado y un contexto donde evitarla. Pasa el cursor sobre las franjas para ver los códigos. Ninguna es genérica: todas tienen un porqué comercial.

Modo cliente

Tu marca no necesita reinventarse cada mes.

Necesita un sistema visual capaz de adaptarse sin perder coherencia. Esto es lo que TRIADA construye para sus clientes:

  • Variaciones visuales por temporada
  • Campañas especiales y fechas comerciales
  • Skins para landing pages
  • Rebranding parcial controlado
  • Paletas alternativas premium
  • Themes activables sin reconstruir la web

“Una marca sólida puede cambiar de temporada sin perder su esencia.”

Todo el año

La misma marca, siempre reconocible.

Identidad Base Empezar

↑ La misma estructura y el mismo logo — solo cambia la piel según la campaña. Toca una temporada para fijarla.

Esto no es una maqueta: el sitio real ya puede vestirse así.

Abre grupotriada.cl con una piel de temporada activa — el mismo motor que ves aquí, aplicado en producción:

Tipografía

Cinco voces tipográficas, una misma marca

La base de TRIADA es Spectral (editorial) + Libre Franklin (grotesk). Estas son las alternativas que exploramos según el contexto — sin romper la identidad.

Editorial premium

Aa Fraunces

Fraunces + Libre Franklin

Diseñamos experiencias digitales que se adaptan a tu negocio.

Cuándo: portadas de informe, propuestas C-level, aniversarios. Da carácter y lujo silencioso.

Base actual

Aa Spectral

Spectral + Libre Franklin

Diagnóstico, estrategia y tecnología en un solo sistema.

Cuándo: la web y todo el día a día. Editorial, sobria, legible y cálida.

Tecnológica sobria

Aa Grotesk

Space Grotesk + Libre Franklin

Tu web puede vender más sin parecer una plantilla genérica.

Cuándo: demos de producto, dashboards, campañas Cyber. Techy sin caer en lo genérico.

Corporativa accesible

Aa Franklin

Libre Franklin (sola, dos pesos)

Campañas visuales para fechas clave, promociones y lanzamientos.

Cuándo: clientes tradicionales, máxima claridad, formularios y documentos operativos.

Cálida & humana

Aa Spectral italic

Spectral italic + Libre Franklin

Una marca sólida puede cambiar de temporada sin perder su esencia.

Cuándo: testimonios, San Valentín, mensajes de cercanía. La cursiva serif humaniza.

Sistema técnico

Un theme = un objeto de tokens

Todo el laboratorio se alimenta de un solo archivo, assets/themes.js. Agregar un theme nuevo es copiar un bloque, cambiar los colores y listo: aparece solo en el selector, la galería, el comparador y la demo.

// assets/themes.js — agrega un objeto y ya está en todo el lab { slug: 'mi-theme', name: 'Mi Theme', category: 'premium', mode: 'light', description: '...', personality: '...', bestUse: '...', avoidUse: '...', colors: { bg, surface, surface2, border, ink, text, text2, primary, primaryH, onPrimary, secondary, accent, tri1, tri2, tri3 }, band: { bg, ink, text, accent }, // la banda oscura (hero/CTA/footer) gPrimary: 'linear-gradient(...)', type: { serif, sans }, radius: 14, shadow: '20,34,46' }

01

Tokens, no hardcode

Cada componente lee variables --tk-*. Cambiar un theme = reasignar ~20 variables sobre el escenario.

02

Accesible por diseño

Contraste AA/AAA declarado por paleta, focus visible, y respeto total a prefers-reduced-motion.

03

Cero dependencias

HTML + CSS + JS vanilla. Se integra tal cual a grupotriada.cl o a la sección /experiencias.