Un toque retro. Una intención muy presente.
Los bordes marcados y las sombras pixeladas nos dan carácter. La legibilidad, el contexto y el cuidado de tus datos marcan las reglas.
El ADN de Virtef
Diseñamos claridad. No complicaciones.
Hablar de dinero no debería sentirse como descifrar un contrato. Nuestra identidad une educación financiera, una voz cercana y un toque de juego para ayudarte a entender, comparar y decidir con más contexto.
Explora los componentesPrueba los temas claro y oscuro y cambia de idioma desde la cabecera. Esta guía se adapta contigo.
Nuestra filosofía
No diseñamos para impresionarte con tecnicismos. Diseñamos para que puedas hacerte mejores preguntas sobre tu dinero.
Claridad antes que ruido
Una acción evidente, cifras legibles y explicaciones directas. Si algo cuesta entender, lo simplificamos, no lo escondemos.
Cercanía sin juicios
Hablamos como personas, no como un banco. Acompañamos el aprendizaje sin juzgar cuánto sabes ni cuánto tienes.
Juego con propósito
El acento retro hace la experiencia amable. Nunca sacrificamos la lectura ni convertimos decisiones financieras en una apuesta.
Confianza con contexto
Mostramos supuestos, advertencias y estados. Una simulación es una herramienta educativa, no una promesa ni asesoramiento financiero.
Accesible por diseño
Teclado, etiquetas claras, dos idiomas y dos temas. El color acompaña la información; nunca tiene que explicarla solo.
Utilidad antes que decoración
Cada componente debe ayudarte a entender un dato o completar una tarea. Si no aporta, sobra.
Identidad visual
Un mismo lenguaje en todas las pantallas: color con significado, tipografía legible y superficies con carácter.
Color con significado
Acción y enfoque
primaryConfirmación y avance
secondaryConsejos y descubrimientos
goldErrores y riesgos
destructiveEstructura y énfasis
inkEspacio para respirar
backgroundContenido en primer plano
cardContexto sin competir
mutedTres voces, una identidad
Geist · la voz de la interfaz
Tu dinero, sin sustos.
Títulos y texto cotidiano, con claridad y espacio para leer.
Geist Mono · los datos
$12,345.67
Cifras alineadas para comparar sin esfuerzo. Siempre con formato local.
Press Start 2P · el acento
VIRTEF
Un guiño al juego en pequeñas dosis. Nunca en párrafos ni formularios.
Bordes firmes, sombras honestas
Bordes de 2 px y sombras sin desenfoque. La jerarquía nace del espacio y el contraste, no de efectos que distraen.
Sin elevación
border-2 · noneSombra pequeña
border-2 · smSombra de marca
border-2 · defaultAsí hablamos
En lugar de: “Optimiza tu estructura de pasivos”.
Decimos: “Entiende cuánto pagarás y por qué”.
Verbos claros. Contexto antes de conclusiones. Humor en los momentos ligeros, nunca ante un error de seguridad o pérdida de datos.
Componentes en acción
Estos son los mismos componentes que usamos en Virtef, no imágenes ni imitaciones. Puedes tocarlos, escribir y recorrerlos con teclado.
Zona de prueba: nada se guarda ni se envía. Los datos y resultados de esta sección son ejemplos.
Acciones que se entienden
Ver ejemplo de uso
<Button variant="outline" onClick={onAction}>
{copy.action}
</Button>Campos que acompañan
Ver ejemplo de uso
<TextField
label={copy.goal}
value={goal}
onChange={setGoal}
hint={copy.hint}
error={error}
/>Estados que no te dejan adivinando
ActivoConfirmadoPendienteError
Ejemplo de error: no se pudo completar la acción. Tus datos introducidos se conservan.
Ejemplo de confirmación: el cambio se completó.
Todavía no hay movimientos
Aquí explicamos qué puedes hacer a continuación, sin dejarte ante una pantalla vacía.
Vista de un estado de carga
Datos con jerarquía
Importe de ejemplo
$2,500.00
Refleja el campo de esta demostración.
Porcentaje de ejemplo
20 %
Refleja el campo de esta demostración.
Un diálogo, no una interrupción
Un título claro, contenido con scroll propio y acciones siempre a mano. El foco permanece dentro hasta que lo cierras.
Ver ejemplo de uso
<Dialog>
<DialogTrigger>{copy.open}</DialogTrigger>
<DialogContent closeLabel={copy.close}>
<DialogHeader>
<DialogTitle>{copy.title}</DialogTitle>
</DialogHeader>
<DialogBody>{copy.content}</DialogBody>
<DialogFooter>{actions}</DialogFooter>
</DialogContent>
</Dialog>Piezas pequeñas, una experiencia coherente
Nuestro sistema sigue Atomic Design: átomos como botones, moléculas como campos con etiquetas, organismos como diálogos y templates que organizan la página. Reutilizamos las piezas para cuidar los detalles, no para que todas las pantallas sean iguales.
Diseñar accesible es un trabajo continuo: etiquetas visibles, foco reconocible, estados con texto y respeto por la preferencia de movimiento reducido.