Portafolio · Diseño de producto
MCDS es el design system de MiCapi, una app financiera mobile-only. Cada decisión visual vive tokenizada en código, cada token tiene un porqué documentado, y cada pantalla se blindá con tests. Este sitio está maquetado con los mismos tokens que muestra.
El sistema
Un token es la unidad más pequeña de diseño con nombre: un color, una medida, una duración. Nada se escribe «a ojo» — todo valor visual de la app sale de un archivo con nombre, uso y porqué. Sobre esos ladrillos se sube el resto.
Color, tipografía, espaciado, radios, elevación, movimiento e íconos. Diez archivos que nombran cada valor: primary-500, space-4, radius-lg, motion-modal. Regla dura: ningún widget escribe un color o una medida literal — si no está acá, no existe.
Lo que se mueve y brilla: transiciones de página, shimmer, stagger, la geometría del isotipo. Piezas sin pantalla que los componentes usan para sentirse de la misma familia.
48 widgets con variantes cerradas: botones, campos, sheets, skeletons, segmented, alerts. Cada uno documenta sus decisiones en el propio código, con fecha.
15 dominios (onboarding, KYC, comprar, vender, swap, retirar, historial…) que solo consumen las capas de abajo. Una pantalla nueva hereda el sistema entero sin copiar nada.
Tokens de color
Los primitivos son la paleta cruda de marca. Los semánticos son roles con trabajo (fondo, texto, acción, estado) que cambian entre modos — el dark no es un espejo oscurecido del light: son superficies calibradas por separado. Tocá un color para copiar su hex.
Primitivos de marca
Escala neutral única (calibrada light + dark)
Tokens semánticos — mismos roles, dos calibraciones
| Rol | Light | Dark |
|---|---|---|
| bg fondo de pantalla | #FFFFFF | #0F1A19 |
| bgElevated cards | #FFFFFF | #16221F |
| fg texto primario | #1A1F1E | #E4ECEB |
| fgMuted secundario | #4A5250 | #B9C2BF |
| action CTA | #0D6B63 | #0D6B63 |
| link interactivo | #0D6B63 | #27A89C |
| chipBg / chipFg | #C8EDE9 | rgba(39,168,156,.18) |
| success | #2A8C52 | #6BC892 |
| warning | #C97A00 | #E8AE4D |
| error | #C0392B | #E88E83 |
| scrim velo modal | rgba(10,31,30,.5) — el mismo en ambos: verde de marca, no negro | |
Tabla completa en app_colors.dart: 38 roles semánticos, cada uno con su par light/dark y su porqué en el docstring.
El isotipo, token por token
#0D6B63#27A89C#7FD8CE#C8842F#E3A356#F8EFE2La marca tiene sus propios tokens, separados de los roles de UI: la identidad no se presta para pintar pantallas.
Tokens de tipografía
Dos familias con trabajos distintos: Inter habla (títulos, cuerpo, etiquetas) y JetBrains Mono cuenta (montos, precios, hashes, direcciones de wallet) — siempre con cifras tabulares para que las columnas de dinero no bailen.
Inter — escala de UI
JetBrains Mono — escala de dato
Cifras tabulares — demo en vivo
Con tabular-nums ✓
$ 999.999
Proporcionales
$ 999.999
Los mismos números contando: a la izquierda los dígitos ocupan siempre lo mismo; a la derecha el ancho baila con cada 1. En una columna de saldos, ese baile es ruido.
Tokens de espacio y forma
Todo gap y padding sale de una escala de paso 4. Ningún número suelto.
Escala de espaciado
Margen lateral de pantalla — tres familias medidas
Operación
16
Hubs, listas y flujos de dinero: pantallas densas, borde a borde.
Funnel
20
Formularios de verificación: campos que se llenan una vez, un paso más de aire.
Focal
24
Una sola cosa en pantalla: login, bienvenida, resultado.
No son tres números de gusto: son un censo de las pantallas reales, custodiado por un test. La próxima pantalla nace eligiendo una familia, no un número.
Radios — cada arco con su uso
Y una regla de tamaño: el touch target mínimo es 48 dp — lo medible de la accesibilidad no se negocia.
Tokens de elevación y movimiento
Las cards se separan por borde, no por sombra — la sombra se reserva para el dinero (cards de saldo) y lo que flota. En light, la sombra va tintada de verde de marca; nunca un gris muerto.
Tres niveles, un máximo por pantalla
Duraciones — 100 / 200 / 300 / 350 ms
Elegí una y tocá la pista.
Curvas
standard · drawer · accelerate · travel (con su rebote).
La curva travel es una desviación documentada del DS — aprobada con fecha para los indicadores que viajan entre opciones. Y todo el movimiento respeta «reducir animación» cuando el usuario lo pide.
Componentes
Los mismos componentes de la app, reconstruidos acá con los tokens. Cada uno trae sus reglas — la gracia del sistema no es tener piezas bonitas sino decisiones ya tomadas.
AppButton — pill, Inter 700, tracking 0.04em, press scale(0.98)
Regla: un botón primario por pantalla. El deshabilitado usa colores tokenizados, no una capa de opacidad.
Campos — normal, foco y bloqueado
El foco pinta el ring del token focusRing.
Dinero = mono con cifras tabulares, siempre.
Bloqueado = fondo propio + borde dashed + candado. Una señal de tres partes, no un simple apagado.
Estados y avisos
Compra confirmada
El BTC ya está en tu billetera MiCapi.
Red congestionada
La confirmación puede tardar unos minutos más.
No se pudo completar
Tu dinero no salió del origen. Podés reintentar.
Filas, chips y montos
Balance card
Saldo disponible
$ 1.240.500
+3,1 % hoySkeleton (shimmer)
Carga = la forma del dato que viene, nunca spinners de nada.
Empty state
Todavía no hay movimientos
Cuando compres o vendas, va a aparecer acá.
AppSegmented — indicador viajero con rebote
La píldora viaja con la curva travel (easeOutBack): el rebote leve explica hacia dónde se movió la selección. Tocá una opción.
Del mockup al flujo real — piezas con regla propia
El velo no es negro: es verde de marca al 50 % — atenúa lo pintado sin abrir un pozo en el lienzo. Entrada 300 ms con curva drawer.
Seis cajas mono, avance automático y pegado inteligente. Escribí o pegá un código.
El código llega por SMS.
Donde hay una tasa que respira, un dot dice si sigue viva. El gráfico se dibuja; no aparece.
El éxito se dibuja con un trazo sobrio de 420 ms. Nada de celebración — es dinero, no un juego.
Cuando el usuario debe verificar una dirección, se muestra completa en bloques de 4, con los extremos reforzados — agrupar ≠ truncar.
Dirección de retiro
Wallet registrada: Ahorros ✓
Al copiar, el propio control dice «Copiado ✓» 1,5 s. Sin SnackBar — el feedback vive donde estaba el dedo.
Método
Un design system no es un PDF bonito — es un contrato verificable. Así se trabaja acá.
Lo visual manda en el código y sus goldens; lo legal vive en un vault documental y entra verbatim, jamás parafraseado. Un mockup y la app difieren → gana la app, salvo ficha abierta.
Cada pantalla tiene capturas de referencia; un cambio visual que rompe el golden rompe el build. Los 95 goldens corren en CI con las fuentes reales — no aproximaciones.
analyze + test en verde para merge; tocar una línea roja financiera o legal exige el test que la blinde. El contraste de los pares críticos lo verifica un script, no el ojo del diseñador.
El sistema lleva un acumulador de correcciones. La cuenta histórica: 13 de 14 veces, el equivocado era el mockup y no la app. Por eso la fuente visual se invirtió al código — con fecha y evidencia.
Cada token trae su historia en el docstring: por qué el velo modal es verde y no negro, por qué el dark no es espejo del light, por qué esa curva se desvía. Nada es «así porque sí».
Touch targets de 48 dp, contraste AA verificado por pares, prefers-reduced-motion respetado, semántica de lector de pantalla probada con volcados reales — no supuesta.
Esto fue el brief
Marca y voz, color, forma, motion, cada componente con anatomía y estados, los patrones de los flujos de dinero y las pantallas — tal como fueron documentados, en claro y oscuro.