Color y superficies
Tokens extraídos de los estilos actuales del repositorio PLC. Se conserva la identidad de alto contraste, con rojo como color de acción y acento.
#E10600#0B0B0C#171719#303034#F7F7F7#A8A8AD#FF6767#8CDBABTipografía y espaciado
Bebas Neue para titulares y branding; Inter para datos financieros, textos y controles. Las cifras requieren buena legibilidad y separación clara de unidades.
Inter Regular · 15 px · textos de apoyo, estados y etiquetas.
Escala de espaciado
Componentes de bordes rectos (radio 0) · divisores finos · bloques modulares.
Iconografía funcional
Familia de iconos lineales para operaciones. Los símbolos no deben ser el único indicador de una acción.
Botones y estados
| Estado | Tratamiento |
|---|---|
| Normal | Rojo PLC con texto blanco y bordes rectos |
| Hover | Mayor luminosidad sin cambiar la función |
| Focus | Contorno visible de 3 px para teclado |
| Disabled | Gris, sin respuesta al clic |
| Loading | «Procesando…», bloqueo de reenvío y feedback de estado |
Wallet, saldo y movimientos
Muestras basadas en los componentes y la estructura del dashboard PLC. Las cifras son demostrativas y no representan saldos reales.
Balance total
Tu saldo disponible
Actividad reciente
Vista de referencia del proyecto
Formulario y validación
Etiquetas visibles, unidades claras y confirmación explícita antes de ejecutar cualquier operación financiera.
Demostración visual: no se realizan transferencias ni se almacenan datos.
Responsive y accesibilidad
| Contexto | Regla |
|---|---|
| Escritorio | Sidebar de navegación, dashboard modular y tarjetas en dos columnas. |
| Tablet | Tarjetas reorganizadas, controles fluidos y navegación simplificada. |
| Móvil | Una columna, importes legibles, controles táctiles de al menos 44 px. |
| Finanzas | Separar saldo, moneda, estado y acciones; no usar únicamente color para distinguir resultados. |
| Accesibilidad | Foco visible, mensajes de error textuales, etiquetas y soporte de movimiento reducido. |