Brandbook
DeonPay Brand
Profesional · serio · sólido. Cómo se ve, se siente y suena DeonPay.
Identidad
Logotipo
El wordmark completo para uso con espacio horizontal, y el glyph solo para espacios reducidos (favicons, avatares, apps).
Para fondos claros
Descargar PNG
Para fondos oscuros
Descargar PNG
Área de protección: deja alrededor del glyph un espacio libre equivalente, como mínimo, al alto de la “D”. Tamaño mínimo recomendado: 24px de alto.
Qué no hacer
No estirar ni deformar
No recolorear
No rotar
No aplicar sombras ni efectos
Paleta
Color
Color acotado: brand solo para CTAs/navegación; verde/ámbar/rose solo para estados funcionales reales — nunca decoración.
Marca
Funcionales
Éxito
Pago aprobado, guardado correcto
Advertencia
Requiere atención, en proceso
Error
Pago rechazado, acción bloqueada
Sistema
Tipografía
Stack de fuentes del sistema — San Francisco en Apple, Segoe UI en Windows, Roboto en Android. Sin fuente custom: confiamos en la del sistema operativo del usuario.
Display financiero
$12,480.00
Eyebrow
Total procesado este mes
Cuerpo
DeonPay procesa pagos con tarjeta, links de pago y suscripciones recurrentes para comercios en México, con NetPay como procesador certificado.
Mono (IDs / código)
txn_8f2a1c4e9b3d7051
Jerarquía por peso y tamaño, no por color. font-light + tracking negativo en cifras; uppercase + tracking positivo en eyebrows.
Criterio
Principios de diseño
Editorial sobre decorativo
Sin cards anidadas ni sombras. divide-y entre filas, border-y en grupos. Eyebrows uppercase con tracking generoso, bordes finos. Nada de shadow-sm/md/lg salvo en flotantes (modals, tooltips).
Tipografía financiera
Números grandes con font-light, tracking negativo y tabular-nums. Eyebrows uppercase como subtítulos visuales. Jerarquía por peso y tamaño, no por color saturado. Whitespace por encima de densidad.
Color acotado, intencional
Brand blue solo para CTAs y navegación. Estados funcionales: emerald (éxito), rose (error), amber (advertencia). Nunca gradientes decorativos ni colores arbitrarios — cada color comunica un estado real.
POS: velocidad y feedback claro
Botones e inputs grandes para uso táctil. El estado de un cobro siempre visible. Feedback fuerte al cobrar. Cero ambigüedad: si un pago falla, se dice por qué y qué hacer.
Mobile-first, escalando con propósito
El móvil define el mínimo. En tablet/desktop los elementos crecen para mejor lectura a distancia o mayor densidad de información — nunca solo para llenar espacio.
Sistema
Componentes
Ejemplos vivos con las clases reales del producto (shadcn/ui + Tailwind).
Botones
Estado de transacción
Input
Fila de tabla
Sistema
Iconografía
Lucide es el set único de íconos de DeonPay. Iconos con propósito semántico; nunca emojis decorativos en UI.
Movimiento
Animación
Sutil, funcional, siempre con propósito. Toda animación respeta prefers-reduced-motion — quien lo activa ve el estado final sin transición.
Estado: idle
Identidad sonora
La firma sonora
Un doble golpe de C7 (2093 Hz) y su octava, con una cola de 0.85s y un bus de reverb sutil —derivado de un análisis espectral que transporta la estructura (dos golpes, ~80ms entre sí, timbre puro) a una identidad propia de DeonPay. El error es un descendente de la misma familia, de C5 a B4, con una sombra una octava abajo: comunica que algo no salió, sin sonar a alarma ni culpar al cliente.
Suena al confirmarse o fallar un cobro. Volumen fijo, nunca alarma.
Copy
Voz y tono
Español claro y directo, sin culpar al cliente. Los números siempre en formato es-MX.
“No se pudo procesar el pago.”
“Tu tarjeta fue rechazada.”