Nuestra guía de recursos y principios para programadores y diseñadores.
De acuerdo a la Sección 10 del Manual de Identidad Visual, estas son las variantes permitidas en interfaces de usuario, usando los assets canónicos disponibles.
Nuestros principios fundacionales del diseño. Cada interfaz de Finangher debe evaluarse contra este marco de trabajo.
Legibilidad instantánea y sin ambigüedad en saldos, cobros y cifras. La ingeniería de la cognición elimina dudas visuales.
La UI sirve al contenido financiero. El dinero es el protagonista absoluto y los controles se retiran fluidamente al hacer scroll.
Jerarquía clara y ordenada en el eje Z. El uso de elevación física, sombras difusas y capas separa los niveles de decisión.
Patrones de interacción altamente predecibles. Mismo gesto o control siempre produce el mismo resultado en todo el ecosistema.
Textura y peso digital. Las interacciones se sienten elásticas mediante física de resortes y coreografía háptica real.
Inclusión universal obligatoria. Relación de contraste mínima WCAG AA, targets táctiles mínimos y soporte Dynamic Type.
Descarga e integra los activos oficiales de la identidad visual de Finangher.
Descarga el logotipo en formato SVG e imágenes de alta definición. Incluye variantes corporativas oficiales a color, en blanco y en monocromo.
Aa Bb Cc 123
UniviaPro Bold - 700
Nuestra fuente oficial corporativa de estilo moderno. Descarga las variantes de fuente Book, Regular y Bold optimizadas para renderizado rápido.
MANUAL_DE_MARCA.PDF
Versión Oficial 1.0.0
Reglas formales de aplicación de la marca, proporciones del logotipo, márgenes y disclaimers requeridos por regulaciones financieras.
Accede directamente a la biblioteca compartida de iconos de Finangher en Figma. Basado en la rejilla original de 24x24px y trazo de 1.5px/2px.
Nuestra biblioteca Figma para diseñadores que construyen interfaces sobre Finangher. Incluye layouts Bento, botones elásticos y inputs.
Nuestros tokens se exportan de forma automatizada mediante Tailwind Config y CSS variables globales en Next.js.
Las leyes que gobiernan el color en Finangher: proporción, emparejamiento y los dos cuerpos del verde. Esta sección se renderiza desde los tokens reales — no puede divergir del sistema.
Foco táctil escaso — CTA primario y palabras-premio
El verde brillante representa el acento dinámico de Finangher. Es la herramienta de conversión por excelencia. Su uso está reservado estrictamente para guiar la atención del usuario a decisiones y flujos prioritarios.
Límite del 10% del lienzo. Un solo CTA verde por pantalla. El verde exige masa (≥ botón) y par oscuro — regla 12 del ADR-051.
El lienzo domina (60), la marca estructura (30), el foco es escaso (10). El verde masivo causa fatiga y diluye la jerarquía.
El color del contenido se empareja con SU superficie, no con el modo. Superficie fija → contenido fijo (verde CTA + tinta #1E0F6F). Superficie mode-aware → ink.
Mismo matiz, luminosidad por modo: brilla sobre oscuro (#6DFB21), profundiza sobre claro (#1F7A05). Solo vía token brand.primaryText, solo palabras-premio. Demo viva: números.
Hover, focus, selección y controles usan #1474FE. El verde jamás señala estado — señala recompensa y acción primaria.
Prueba la física de fluidos de nuestros botones de dimensiones fijas, inputs dinámicos y la precisión de cifras.
Nuestros botones tienen anchos fijos de token (w-btn-md: 254px o w-btn-sm: 166px) y una altura de 56px (touch target) o 44px.
Click en un botón = copiar su receta de tokens.
Prueba la validación contextual de inputs. Escribe exactamente 8 dígitos (DNI) u 11 dígitos (RUC) para ver el estado verificado.
Los 6 estados canónicos de un campo, tokenizados desde el archivo Figma de la máquina de estados, y los cuatro patrones vivos que se construyen sobre ellos.
Usaremos tu correo para confirmar tu cuenta.
Usaremos tu correo para confirmar tu cuenta.
Sigue escribiendo tu correo completo.
Correo válido.
Ingresa un correo electrónico válido.
Este campo no se puede editar por ahora.
En finanzas, los decimales deben alinearse perfectamente en vertical. Observa cómo al activar Tabular (tnum), las comas y los números de los saldos se alinean en una cuadrícula rígida, facilitando el escaneo visual rápido.
Venta de Servicio VIP
Hoy, 10:45 AM
+ $11,111.11
Confirmado
Proveedor de Servidores Google Cloud
Ayer, 3:20 PM
- $8,888.88
Confirmado
Comisión pasarela de pagos
Ayer, 3:20 PM
- $0.11
Confirmado
Cobro exitoso @tienda-zazzy
29 Jun, 11:15 AM
+ $9,999.00
Confirmado
Tres alturas de fila para tres densidades de información: card con avatar (74px), transacción (60px) y registro compacto (24px).
Fernanda Julca
Cliente frecuente
S/ 500.00
Fernanda Julca
Cliente frecuente
S/ 1,250.00
Fernanda Julca
Cliente frecuente
S/ 350.00
El color del monto viene de la física del catálogo (ADR-047): no es un tipo hardcodeado, es el contexto de la interfaz (formulario vs historial) el que decide el color.
Pago deuda pensión
Venta: 1 artículo → Cta BCP
Hace 1 día · 04:15 PM
+ S/ 10,000.00
Pago deuda pensión
Venta: 1 artículo → Cta BCP
Hace 1 día · 04:15 PM
S/ 89.90
Pago deuda pensión
S/ 89.90
Venta mostrador
S/ 45.00
Cuadre de inventario
S/ 0.00
Gragea de piña
30 unid. en Stock
S/ 10,000.00
Mantenimiento de laptop
Servicio
Cuadrado = cosa (producto/servicio) · Círculo = persona (regla semántica de formas).
MI TIENDA
Horario de atención
Lun-Sáb 8:00-20:00
Métodos de cobro
Pendiente de configurar
Tienda visible al público
Tu catálogo aparece en el marketplace
Segmenta bloques extensos y condensa filas — validado en Configuración y Cuentas. Versión tokenizada de ConfigGroup/ConfigRow (migración del componente real en backlog).
Componentes de selección, progreso y navegación recién migrados al design system dual-mode.
Seleccionado = acento de interacción (#1474FE) — el verde queda reservado al CTA (regla 12)
Paso 2 de 5
Paso 1 de 4
Paso 1 de 2
Finangher
L1 · 64/72 · BookFinangher
L3 · 48/56 · BookFinangher
L5 · 32/40 · BookFinangher
L9 · 14/20 · BookFinangher
P1 · 20/28 · BookFinangher
P2 · 16/24 · BookFinangher
P3 · 14/20 · BookFinangher
P4 · 12/16 · BookUna escalera, tres intensidades: 400 protagonista · 350 acompañamiento · 300 terciario
Reglas de animación tras el review de motion (filosofía Emil Kowalski/Apple): qué propiedad anima, cuánto dura y de dónde nace cada transición.
El thumb usa cubic-bezier(0.34, 1.56, 0.64, 1) — overshoot sutil, el mismo truco que usa iOS en sus toggles. El track solo transiciona color; nunca combines transition-all en un componente de alta frecuencia.
Un popover que escala desde el centro del viewport en vez de su trigger rompe la física — la corrección real ya vive en popover/dropdown-menu/select/tooltip de shared/ui.
| Uso | Duración | Easing | Ejemplo |
|---|---|---|---|
| Cambio de color (hover/active) | 150-200ms | ease-out | botones, bordes de input |
| Transform de escala/posición | 200-300ms | ease-out o cubic-bezier propio | cards, popovers |
| Toggle con "vida" (switch) | 300ms | cubic-bezier(0.34, 1.56, 0.64, 1) — back-out | switch |
| Apertura de modal/sheet (deliberada) | 500ms | ease-out | Dialog/Sheet al abrir |
| Cierre de modal/sheet (respuesta) | 300ms | ease-in-out | Dialog/Sheet al cerrar — más rápido que la apertura |
| Entrada de página (hero) | 600ms | ease-out | .hero-animate |
Regla de oro: nunca transition-all. Especificá SIEMPRE qué propiedad anima (transform, opacity, colors) — animar de más es tan costoso como animar mal.
La física del espaciado y esquinas de Finangher construida sobre la grilla de 8 puntos.
token-2xs (4px)
Brechas micro, icono a texto secundario
token-xs (8px)
Etiqueta sobre campo de entrada
token-sm (16px)
Padding interno estándar de tarjetas
token-md (24px)
Separación entre grupos independientes
token-lg (32px)
Pausas visuales de sección mayor
token-xl (48px)
Espaciado de botones en Bottom Sheets
token-2xl (64px)
Márgenes superiores de héroes de marca
Badges y chips pequeños
Botones e inputs estándar
Tarjetas de información
Contenedores y Bottom Sheets
