Continental
Es un Sistema de Diseño multiplataforma creado para estandarizar, escalar y acelerar el desarrollo de productos digitales construidos en los 4 países donde la marca tiene presencia.
El Sistema de Diseño de CONTINENTAL será la fuente única de verdad creada para garantizar consistencia, eficiencia y calidad en la construcción de los productos digitales de los 4 países, donde la marca tiene presencia.
Alineará a los equipos de diseño, desarrollo y producto bajo un mismo lenguaje, reduciendo duplicidad de esfuerzos y acelerando decisiones. Definirá no solo cómo se ven las interfaces, sino cómo funcionan y se implementan, para mantener consistencia sin importar el producto, la plataforma o el mercado.
Una base escalable, en construcción en Figma y documentada en una plataforma propia desarrollada con Next.js, sin depender de herramientas externas.
Documentación
Construida desde cero como plataforma propia, sin depender de herramientas como Zeroheight, desarrollada en Next.js y desplegada en Vercel, con una estructura de navegación por secciones que permite escalar el contenido sin rehacer nada.
Variables
Construidos con el sistema de Variables de Figma, en dos capas: tokens primitivos (los valores base de color, tipografía y espaciado) y tokens semánticos que los referencian según su uso (fondo, texto, borde, estado). Con modos configurados por marca y país, un solo cambio de variable se propaga a cualquier producto sin tocar una sola pantalla. Estos mismos tokens se aplicaron directo en el front-end de los productos construidos, manteniendo una sola fuente de verdad entre diseño y código.
Componentes
Construidos con Auto Layout y variantes de Figma, cada componente hereda sus valores directo de los tokens semánticos, sin colores ni espaciados fijos escritos a mano. Cada uno contempla sus estados (default, hover, disabled, error) y se adapta de forma responsiva a distintos tamaños de pantalla, listo para ensamblarse en cualquier producto sin ajustes adicionales.
Aplicación de CONTINENTAL
Aplicado dentro de un flujo de trabajo real, mapeando cada caso posible en cada pantalla, estados vacíos, errores, cargas, variantes para que QA y desarrollo construyan sin ambigüedad. Todo entregado listo para handoff directo desde Figma, sin dejar decisiones de implementación al azar.
