En Claro Chile lidero la creación del Design System desde cero. Trabajo en la arquitectura de tokens, los componentes en React y la documentación en Storybook. El sistema contempla Claro y VTR en modo claro y oscuro, con nombres y reglas compartidos entre Figma y código.
Las capturas salen del Storybook del sistema. En modo oscuro, los accesos alternativos del ingreso van sobre una superficie un nivel más alta para que contrasten.
Bases
Compartirlabaseentremarcas.
Defino las mismas rampas de color para Claro y VTR, con AMX y VTR Sans como tipografías de cada marca. Los componentes conservan su estructura.
Componentes
Llevarelsistemaalproducto.
Construyo tarjetas de planes y equipos con precio, condiciones y acciones. Comparten los tokens del sistema para responder a la marca y al modo activos.
Formularios
Diseñarcadaestadodelformulario.
Incluyo etiqueta, ayuda, error y estado en los campos, y trabajo la respuesta al teclado junto con el resto de los controles.
Tokens
Resolverlaaparienciacontokens.
Asigno roles como Primary o Accent a los componentes. Cada tema define el valor y ajusta los tonos del modo oscuro para mantener el contraste.
La Implementación
Cómoloconstruí.
Tokens desde Figma
Genero los tokens de código desde las variables de Figma. Defino roles como Primary o Danger para que cada tema resuelva su valor en los componentes.
Documentación en Storybook
Documento cada componente en Storybook con ejemplos en vivo, guías de uso y revisión de accesibilidad.
Design System for Claro
El Design System de Claro Chile y VTR.
Figma Variables
Tokens para ambas marcas y modos.
React 19
HTML nativo, teclado y ARIA.
TypeScript
Props tipadas en cada componente.
Tailwind CSS v4
Utilidades generadas desde los tokens.
Storybook 10
Documentación viva y accesibilidad.
Claro Chile · 2026 – hoy
Trabajo corporativo: muestro lo básico, con datos de ejemplo.
