At Claro Chile, I lead the design system's development from the ground up. My work covers token architecture, React components, and Storybook documentation. The system supports Claro and VTR in both light and dark modes, with naming and conventions shared across Figma and code.
Screenshots come from the system's Storybook. In dark mode, alternative sign-in options sit on a slightly elevated surface to maintain contrast.
Foundations
Shareonefoundationacrossbrands.
I define matching color ramps for Claro and VTR, using AMX and VTR Sans as their respective typefaces. Component structure stays consistent.
Components
Bringthesystemintoproducts.
I build plan and device cards with pricing, terms, and actions. They share tokens so they can adapt to the active brand and theme.
Forms
Designeveryformstate.
Fields include labels, help text, errors, and clear states. I test keyboard behavior alongside other controls.
Tokens
Lettokenscontrolappearance.
I assign roles such as Primary and Accent to components. Each theme defines the values and adjusts dark-mode tones to maintain contrast.
Implementation
HowIbuiltit.
Tokens from Figma
I generate code tokens from Figma variables. I define semantic roles such as Primary and Danger so each theme can supply the right values to components.
Storybook documentation
I document every component in Storybook with interactive examples, usage guidance, and accessibility checks.
Design System for Claro
The design system for Claro Chile and VTR.
Figma Variables
Tokens for both brands and modes.
React 19
Native HTML, keyboard support, and ARIA.
TypeScript
Typed props for every component.
Tailwind CSS v4
Utilities generated from tokens.
Storybook 10
Live documentation and accessibility.
Claro Chile · 2026 – present
Corporate work: I share only the fundamentals, using sample data.
