INGRESA LA CONTRASEÑA PARA CONTINUAR
CLIENTE
DINERS CLUB (DS)
CONTEXTO
Diners Club necesitaba un lenguaje común para sus productos digitales. Tarjetas, saldos, pagos y alertas aparecen en casi todas las pantallas de la app, y cada uno tenía que verse y comportarse igual, sin importar quién lo diseñara o lo construyera.
QUÉ HICE
Diseñé el design system de la app de Diners Club: fundamentos, tokens y componentes.
Cada componente se entrega con sus estados documentados (default, hover, press, disabled y loading), para que diseño e ingeniería construyan desde la misma referencia.
LA DECISIÓN
Nombré los colores por lo que hacen, no por cómo se ven. En lugar de un tono de azul marino, un componente usa primary.default, surface.background, border.subtle o text.on-dark.
El costo: más trabajo al inicio y más nombres que aprender. Lo mantuve porque un developer sabe qué token usar sin preguntar, y la marca puede cambiar un color en un solo lugar sin tocar cada pantalla.
IMPACTO
Una sola fuente de verdad para diseño e ingeniería. Las pantallas nuevas se arman con componentes existentes en lugar de dibujarse desde cero, y la app mantiene el mismo aspecto y comportamiento de un flujo a otro.
