Design System (demo)

Minimalista, flat, outlines, con bordes redondeados y acento amarillo.

Colores

Definidos como tokens CSS (variables). Todo el sistema consume esos tokens.

Negro

Gris muy oscuro

Gris oscuro

Amarillo (acento)

Violeta

Celeste

Blanco

Gris claro

Botones por estado

Ghost

Dark

Accent

Secondary

Botones para botoneras / menú desplegable

Ventanas modales

Tip UX: click en backdrop o Escape para cerrar. El foco vuelve al botón que lo abrió.

Tipografías

H1 — Titular principal

H2 — Sección

H3 — Sub-sección

Párrafo normal. Enlace y texto resaltado.

Texto secundario / ayuda / disclaimers.

Usos típicos:

Space Grotesk → títulos.
Inter → UI, textos, tablas y formularios.

Etiquetas (badges)

En 3 tamaños, sin bordes y redondeadas.

Neutral Acento Violeta Celeste

Fotos de usuarios (avatares)

Formularios

Bordes redondeados + borde gris muy oscuro. Estados: hover, focus, invalid, disabled. Checkbox/radio/switch con relleno amarillo en activo.

Usado para confirmaciones y recuperación.

Monto

Motivo

Nota

Acepto términos Inmediato Programado Guardar destinatario

Estados / mensajes

Operación confirmada.

Falta verificar identidad.

No se pudo procesar el pago.

Tip: activá 2FA para más seguridad.

Input inválido

Alias (ejemplo inválido)

Solo letras, números y puntos.

Selector de fecha (nativo)

Fecha

Para programar una transacción.

Filtros

Buscar

Estado

Desde

Hasta

Tabla que no se transforma a card

ID	Fecha	Tipo	Monto	Estado
trx_8f12...	11/01/2026	Transferencia	$ 35.000	OK
trx_9a03...	10/01/2026	Pago	$ 120.000	Pendiente
trx_1c77...	09/01/2026	Reintegro	$ 18.500	Fallido

Tabla que se transforma a card

ID	Fecha	Tipo	Monto	Estado
trx_8f128f12	11/01/2026	Transferencia	$ 35.000	OK
trx_9a039a03	10/01/2026	Pago	$ 120.000	Pendiente
trx_1c771c77	09/01/2026	Reintegro	$ 18.500	Fallido

Paginación

…

Pasos

Datos básicos
Verificación
Confirmación

Barra de progreso

65% completado

Tarjetas

Saldo disponible

$ 1.250.000

Último movimiento: Hoy 17:20

Pagos pendientes

Revisar

Monto estimado: $ 320.000

Reputación

4,8

Top

Últimos 30 días: +12 reseñas

Omar

Nivel: verificado • 2FA activo

Preferido Gestionar

Seguimiento de envío

AR-9340-XX

En tránsito

Última actualización: hace 2 h

“La mejor UX es la que te deja transferir en 10 segundos sin pensar.”

— Principio de diseño

Acordeón

¿Cómo funciona la protección de pago? ¿Qué métodos de verificación existen?

Separadores

Divider visible soft:

Divider visible strong:

Spacer invisible: