IzyPagos: Guía de Marca y Sistema de Diseño
La fuente única para diseñar, escribir y construir IzyPagos de forma coherente — en pantalla y en papel. Pensada para enviarse a diseñadores, desarrolladores, agencias, imprentas y equipos de marketing.
Menos banca, más herramienta de cobro
IzyPagos ayuda a los comercios colombianos a cobrar hoy, sin datáfono ni fricción, con seguridad de nivel bancario. La marca actual tiene un buen nombre y un buen gesto —la “Y” como señal de triunfo— pero su ejecución (neón cian + rojo cómic sobre negro) resta profesionalismo y choca con el lenguaje del propio producto, donde el rojo significa “pago rechazado”.
Esta guía propone una evolución, no una ruptura: conserva el equity azul/cian y el gesto de la “Y”, pero lo resuelve como un check de aprobación que asciende (pago aprobado + crecimiento + rapidez), profundiza el azul para transmitir confianza, y reserva el rojo exclusivamente para errores. Sumamos un verde “Pago aprobado” como el momento emocional del producto.
Confianza sin frialdad
Azul profundo + jerarquía clara. Se ve serio y seguro, no como un banco viejo.
Rapidez como sistema
El check ascendente, el cian y el verde de “aprobado” codifican velocidad y éxito.
Cercanía con el comercio
Voz directa, tuteo, cero letra chica. “Si puedes vender, puedes cobrar — hoy.”
Estrategia y voz de marca · sistema de color con HEX/RGB/CMYK · tipografía · logotipo rediseñado en SVG (6 variantes) · design tokens listos para desarrollo (CSS + JSON) · especificaciones de componentes con estados · aplicaciones digitales y físicas · propuesta de refactor del sitio · y una lista priorizada de cambios.
Qué frena hoy la confianza y la conversión
Hallazgos sobre izypagos.com y el borrador de logo, ordenados por prioridad. Cada uno incluye cómo corregirlo. Los puntos marcados “validar en vivo” requieren revisar el CSS/capturas del sitio para cuantificarse.
1 · Críticos
En el borrador, el rojo (líneas cómic) es protagonista. En pagos, el rojo = declinado/error. Usarlo como acento de marca genera ruido semántico y ansiedad justo donde se necesita calma.
El trazo neón fino sobre negro pierde legibilidad a tamaños pequeños (favicon, app icon) y su estética de streaming/gaming no proyecta seguridad financiera.
No se detecta paleta ni tipografía especificada en el marcado: síntoma de estilos ad-hoc, difíciles de mantener y propensos a inconsistencia entre botones, tarjetas y secciones.
2 · Importantes
Conviven “Crear cuenta”, “Crear cuenta gratis”, “Hablar con ventas”, “Hablar con dIAna”, “Contactar” y “Comenzar diagnóstico”. Compiten entre sí y diluyen la acción principal.
“Hazlo Izy: Vende y cobra sin preocupaciones” + “Cobra fácil y sin enredos” dicen lo mismo dos veces y no cuantifican (sin datáfono, activación en minutos, 16+ métodos).
PCI DSS, 3D-Secure y la reducción de contracargos (hasta 70%) viven en una sección interna, no cerca del hero, donde más pesan para decidir.
El asistente con IA es un diferenciador real, pero como sección aislada parece un extra, no parte del “cómo funciona” ni del soporte.
3 · Recomendados
El cian neón sobre negro y textos claros pueden no alcanzar AA. Sin especificación, cada pantalla improvisa.
“Hecho para tu sector” es un ángulo fuerte; falta prueba (testimonios de comercios, casos). No inventar cifras.
El comercio opera desde el teléfono; el flujo de link de pago y QR debe pensarse primero para móvil, con objetivos táctiles ≥ 44px.
Confianza en movimiento
IzyPagos existe para que cobrar deje de ser un problema. La dirección creativa —“Confianza en movimiento”— combina geometría limpia y seria con un gesto ascendente que codifica velocidad y aprobación. Se siente segura como un banco, pero se usa como una herramienta.
Esencia
Cobrar, fácil. El pago que no estorba.
Propósito
Que cualquier comercio en Colombia acepte pagos sin fricción, sin miedo al fraude y sin depender de un banco.
Promesa de marca
“Si puedes vender, puedes cobrar — hoy.”
Posicionamiento
Para el comercio colombiano que quiere cobrar sin complicarse, IzyPagos es la pasarela que une seguridad bancaria (PCI DSS, 3D-Secure) con la simpleza de un link — activa en minutos y acompañada por IA (dIAna).
Personalidad
Arquetipo: el Aliado ágil — cercano y resolutivo, con un toque de “mago” por la tecnología que hace invisible lo complejo. Habla claro, va al grano y celebra contigo cuando el pago entra.
Valores
- Claridad — si hay que explicarlo dos veces, está mal diseñado.
- Rapidez — el tiempo del comercio es dinero; cada paso de más es una venta menos.
- Seguridad sin drama — protegemos en silencio; el comercio solo ve “aprobado”.
- Cercanía — hablamos como un colega, no como un contrato.
Diferenciadores
Pago al Toque
Tap-to-phone: cobra con tarjeta sin datáfono, solo con el celular.
Link + Botón de Pago
Cobra por WhatsApp o web en segundos; API para integrarlo todo.
Antifraude
3D-Secure, tokenización y monitoreo que reducen contracargos hasta 70%.
Atributos que debe transmitir visualmente
| Atributo | Cómo se codifica |
|---|---|
| Confianza / seguridad | Azul profundo, jerarquía clara, espacio en blanco, sellos visibles. |
| Innovación tecnológica | Cian secundario, el check ascendente, datos en tipografía mono/tabular. |
| Facilidad de uso | Un solo acento por pantalla, radios amables, pasos numerados. |
| Rapidez | Gesto ascendente, microinteracciones cortas, verde de “aprobado”. |
| Cercanía | Voz en tú, fotografía de comercios reales, lenguaje sin jerga. |
Percepción objetivo. Comercio: “esto es fácil y me protege”. Consumidor: “pago seguro y rápido, se ve serio”.
Claro, humano y directo
Una sola voz para todo IzyPagos —web, app, checkout, correos, redes y documentos fiscales— que cambia de tono según el momento, nunca de personalidad. Regla base: tuteo cercano por defecto; “usted” solo en documentos legales y fiscales.
Tono por momento
| Momento | Tono | Ejemplo |
|---|---|---|
| Comercial | Motivador, concreto | “Empieza a cobrar hoy. Gratis y sin datáfono.” |
| Proceso de pago | Tranquilo, guía | “Estás pagando a Panadería La 15. Monto: $38.000.” |
| Éxito / aprobado | Celebratorio, breve | “¡Listo! Pago aprobado. Ya está en tu cuenta.” |
| Error / rechazo | Calmado, con salida | “El banco rechazó el pago. Pídele a tu cliente otra tarjeta.” |
| Seguridad | Tranquilizador, concreto | “Protegido con 3D-Secure. Nosotros vigilamos; tú vendes.” |
| Soporte | Humano, resolutivo | “Cuéntame qué pasó y lo resolvemos juntos.” |
Cómo hablamos a cada quien
A comercios
Como un colega que sabe de negocio: enfocado en tiempo, dinero y tranquilidad. “Tu plata, más rápido y más segura.”
A consumidores
Breve y confiable en el momento del pago: quién cobra, cuánto y que es seguro. Cero jerga, cero sorpresas.
Palabras que usamos / que evitamos
- fácil · listo · hoy · al toque
- cobra · tu negocio · tu plata
- aprobado · seguro · sin enredos
- contracargo (no “chargeback”)
- jerga: gateway, settlement, onboarding*
- “estimado cliente”, tono bancario frío
- “revolucionario”, superlativos vacíos
- alarmismo o culpar al usuario en errores
* Términos técnicos solo en documentación para desarrolladores, nunca en producto de cara al comercio o consumidor.
Ejemplos listos para usar
Color, tipografía y sistema gráfico
Toca cualquier muestra para copiar su HEX. La paleta se organiza en cuatro capas: neutros (70–90% de la interfaz), un acento de marca, colores semánticos y, muy puntualmente, efectos.
Colores de marca
Semánticos
Neutros (Tinta)
Texto normal ≥ 4.5:1, texto grande ≥ 3:1. Para texto/enlaces azules sobre blanco usa Azul 700 (el 600 queda para rellenos y botones, donde el blanco encima sí cumple). El rojo se reserva para error; nunca como fondo amplio.
Gradiente de marca
Azul 600 → Cian 500 (135°). Uso restringido: solo el isotipo y el momento “aprobado”. Nunca como fondo genérico de héroe — es el tropo fintech más gastado y resta credibilidad. Los héroes van en plano (Noche o blanco).
Tipografía
| Rol | Familia | Uso |
|---|---|---|
| Display / Títulos | Sora | Titulares, marca, cifras destacadas. Pesos 600/700/800. |
| Cuerpo / UI | Inter | Párrafos, formularios, etiquetas, botones. Pesos 400/500/600. |
| Datos financieros | IBM Plex Mono | Montos, IDs de transacción, referencias, códigos. Siempre tabular-nums. |
Todas son de código abierto y uso comercial (Google Fonts). Regla financiera: montos con separador de miles y decimales alineados; nunca abreviar montos en recibos.
Fuentes públicas · referencias y descarga
Las tres son gratuitas, de uso comercial y con licencia SIL Open Font License 1.1. En web se cargan por Google Fonts; para impresión, descarga los .ttf/.otf desde los enlaces. Fallback del sistema: system-ui, Segoe UI, sans-serif.
Sistema gráfico
- Geometría: teselado redondeado (squircle) del isotipo; el gesto del check ascendente es el patrón gráfico raíz.
- Radios: 8 / 12 / 16 / 24 px + pill. Amable, no infantil.
- Iconografía: monolínea, trazo 1.75px, currentColor, esquinas redondeadas. Sin emojis como iconos.
- Fotografía: comercios reales colombianos, luz natural, manos y producto; evitar stock corporativo genérico.
- Elevación: sombras suaves (3 niveles), no bordes gruesos. Fondos planos; el gradiente solo en marca/aprobado.
- Movimiento: microinteracciones cortas (120–200ms, easing suave). El botón baja 1px al presionar; “aprobado” hace un check breve. Respeta prefers-reduced-motion.
Componentes con estados reales
Mobile-first, accesible y tokenizado. Toca cualquier token para copiarlo. Todos los componentes principales muestran sus estados: default, hover, focus, active, disabled, loading, success y error.
Fundamentos
Espaciado (grid 8px)
Radios
Breakpoints
600 · 768 · 1024 · 1280 · 1536 px
Botones
Una sola primaria por vista. Foco visible obligatorio (anillo azul 3px). Altura táctil mínima 44px en móvil.
Campos de formulario
Controles
Estados y feedback
Badges de transacción
Skeleton loader
Alertas
Estado vacío
Aún no tienes cobros
Crea tu primer link de pago y compártelo por WhatsApp. Cada transacción aparecerá aquí.
Momentos de producto
Confirmación de pago
Panadería La 15 · TXN-8F42A1
Recibo digital
Link / QR de pago
Especificación del resto de componentes
Todos comparten los mismos tokens (color, radio, sombra, foco) y el mismo set de estados. Referencia rápida:
| Componente | Estados | Nota clave |
|---|---|---|
| Selectores / dropdown | default · hover · focus · open · disabled | Menú con sombra-2, radio-md, ítem activo en Azul 50. |
| Tabs | default · active · hover · focus | Indicador inferior en Azul 600, 2px. |
| Tablas | default · hover fila · orden | Bordes hairline, sin cebra; montos tabular a la derecha. |
| Modales | open · closing | Overlay rgba(11,21,36,.5); radio-xl; foco atrapado. |
| Tooltips | hover · focus | Tinta 900, texto blanco, 12px, delay 150ms. |
| Menús / Nav | default · active · hover | Ítem activo Azul 700 sobre Azul 50. |
| Breadcrumbs | default · current | Separador “/”, actual en Tinta 900. |
| Indicador de progreso | 0–100 · indeterminate | Pista Tinta 200, avance Azul 600; checkout con pasos. |
| Estado vacío | default | Icono monolínea + 1 acción; nunca dejar en blanco. |
| Checkout | datos · 3DS · éxito · error | Un paso por pantalla en móvil; resumen fijo del monto. |
| Panel admin | — | Densidad de datos, mono tabular, filtros persistentes. |
Digital y físico
La misma marca, coherente donde aparezca: producto, comunicación y materiales impresos para comercios.
Digital
Sitio, dashboard, checkout, links y QR de pago, correos, publicidad y redes. Isotipo teselado + azul primario; fondos planos.
Comunicación
Correos transaccionales (recibo/confirmación), presentaciones, plantillas de redes. Voz del cap. 04.
Físico / Comercio
Stickers “Aquí paga con IzyPagos”, señalética de caja, tarjetas, papelería, facturas, uniformes y material POP.
Sticker para comercios (ejemplo)
Composiciones: correcto / incorrecto
- Isotipo con su área de seguridad respetada.
- Un acento por pieza; el resto neutros.
- Verde solo para “aprobado”; rojo solo para error.
- Fotografía real de comercios colombianos.
- Gradiente azul→cian como fondo de todo.
- Rojo decorativo o líneas cómic del borrador.
- Estirar, rotar o recolorear el isotipo.
- Mezclar más de dos tipografías o usar Sora en cuerpo largo.
La “Y” como check que asciende
Conservamos el wordmark IzyPagos y la idea de la “Y” del borrador, pero la resolvemos como un gesto único: un check de aprobación cuyo brazo largo sube (crecimiento y rapidez), dentro de un teselado redondeado tipo app. Cuenta una historia del producto —pago aprobado— en una sola forma escalable.
Borrador actual
- Funciona: el nombre, el gesto de la “Y”/victoria, el equity azul.
- A corregir: trazo fino no escala; rojo conflictúa con “error”; estética neón resta seriedad; mano poco legible.
Propuesta
- Escala de 16px a valla; sólido y reproducible en 1 tinta.
- Significado triple: check (aprobado) + flecha (crecimiento) + “Y” (Izy).
- Bajo riesgo de parecerse a otras fintech: no es tarjeta, ni escudo, ni rayo genérico.
Variantes
Cada variante se descarga en SVG (vectorial, editable) o PNG de alta resolución generado con la tipografía real. Para todo junto, usa el pack oficial.
Área de seguridad y tamaño mínimo
Margen libre igual a la mitad del alto del teselado (½X) en los cuatro lados. Tamaño mínimo: isotipo 20px / lockup 24px de alto. Favicon: versión sin chispa para no ensuciar a 16px.
Códigos de color del logo
- Sobre blanco, Nube o Noche.
- Isotipo solo cuando el espacio manda.
- Negativo (blanco) sobre fondos oscuros.
- Recolorear, rotar o inclinar el mark.
- Añadir sombras, contornos o degradados ajenos.
- Colocar sobre fondos de bajo contraste o fotos sin capa.
Concepto en una línea: “La Y de Izy es el gesto de aprobar y crecer.” Los seis SVG están en el cap. 10, limpios y editables.
Estructura para convertir
Propuesta de arquitectura y jerarquía para izypagos.com con la nueva identidad. Navegación clara, confianza arriba, una acción dominante.
Nueva navegación
Soluciones · Métodos de pago · Precios · Seguridad · Desarrolladores · [ Ingresar ] · Crear cuenta gratis
Consolida “Servicios/Ventajas/Anti-Fraude” en menús claros; una sola primaria persistente.
Jerarquía de la página principal
| Sección | Objetivo | Qué cambia |
|---|---|---|
| Header | Orientar + 1 CTA | Logo nuevo, nav consolidada, “Crear cuenta gratis” fija. |
| Hero | Promesa concreta | “Cobra hoy. Sin datáfono, sin filas.” + subrayado de valor + primaria/secundaria. Fondo Noche plano (sin gradiente). |
| Franja de confianza | Reducir riesgo | Sello PCI DSS + logos de métodos (Visa, MC, Nequi, PSE) apenas bajo el hero. |
| Beneficios | Traducir a negocio | 3–4 beneficios (cobra rápido, sin datáfono, menos fraude, tu plata a tiempo). |
| Productos / Soluciones | Explicar el qué | Presencial, Online, Link/Botón, Pago al Toque, API — en tarjetas con icono monolínea. |
| Cómo funciona | Bajar fricción | 3 pasos “1, 2, 3… Izy” con dIAna integrada en el flujo. |
| Seguridad | Profundizar confianza | 3D-Secure, tokenización, monitoreo; “reduce contracargos hasta 70%”. |
| Integraciones | Encajar en su stack | Métodos locales + API/plugins; enlace a Desarrolladores. |
| Prueba social | Validar | Testimonios reales de comercios por sector. Sin cifras inventadas. |
| FAQ | Resolver objeciones | Costos, tiempos de dispersión, requisitos, seguridad. |
| CTA final | Cerrar | “Empieza a cobrar hoy” + primaria única. |
| Footer | Confianza + legal | Producto / Recursos / Legal, redes, sello PCI, © IzyPagos. |
Recomendaciones mobile
- Objetivos táctiles ≥ 44px; primaria fija abajo.
- Flujo de link/QR pensado primero para el teléfono.
- Un paso por pantalla en checkout; resumen de monto visible.
Accesibilidad y reutilizables
- Contraste AA; foco visible; navegación por teclado.
- Reutiliza botones, tarjetas, badges y alertas del cap. 06.
- Elimina: rojo decorativo, CTAs duplicadas, estilos ad-hoc.
Listo para producción
Descarga oficial de los recursos de marca: logos en SVG y PNG, la paleta en formatos profesionales, los tokens listos para desarrollo y las tipografías públicas. Todo individual o en un solo pack.
Pack oficial de marca
Logos (SVG + PNG), paleta (CSS/SCSS/JSON/ASE/GPL/HEX), tokens y guía rápida — en un solo .zip para tu equipo, agencia o imprenta.
Logotipo · SVG + PNG
Los PNG se generan al momento, a alta resolución y con la tipografía real cargada (isotipo/favicon 1024px; lockups a 8× con fondo transparente).
Favicon e íconos de app
Ya enlazados en el <head>: favicon.ico multiescala, SVG y apple-touch-icon. Para PWA: icon-192.png / icon-512.png.
Paleta · formatos profesionales
.ASE importa directo en Illustrator/Photoshop · .GPL en GIMP/Inkscape/Krita · CSS/SCSS/JSON para desarrollo. Todas incluyen HEX y RGB.
Tipografía
Design tokens
Además: brand-spec.md con la extracción de marca en OKLch. Importa tokens.css y usa siempre variables (var(--accent)), nunca hex sueltos.
Sistema de diseño (repo)
Paquete listo para repositorio en /design-system: tokens (CSS/SCSS/JSON), reset + base + componentes + utilidades, preset de Tailwind y los logos, con package.json. Se importa en cualquier proyecto con un solo import '@izypagos/design-system' o un <link> a izypagos.css.
Por dónde empezar
Secuencia recomendada, de mayor a menor impacto sobre confianza y conversión.
| # | Cambio | Prioridad | Impacto |
|---|---|---|---|
| 1 | Adoptar el logo rediseñado + tokens como fuente única | Crítico | Coherencia y escalabilidad |
| 2 | Reasignar el rojo a error; verde para “aprobado” | Crítico | Confianza / claridad |
| 3 | Rehacer el hero con promesa concreta + franja de confianza | Crítico | Conversión |
| 4 | Unificar CTAs (1 primaria + 1 secundaria) | Importante | Conversión |
| 5 | Subir señales de seguridad (PCI, 3DS) cerca del hero | Importante | Confianza |
| 6 | Integrar a dIAna en onboarding, cobro y soporte | Importante | Diferenciación |
| 7 | Aplicar la voz del cap. 04 en todo el producto | Importante | Marca |
| 8 | Fijar contraste AA y rediseño mobile-first del cobro | Recomendado | Accesibilidad |
| 9 | Añadir prueba social real por sector | Recomendado | Credibilidad |
| 10 | Migrar todos los componentes al sistema del cap. 06 | Recomendado | Mantenibilidad |
Cómo usar esta guía. Es la fuente oficial para diseñadores, desarrolladores, agencias e imprentas. Ante cualquier duda de color, tipografía o voz, esta guía manda; si algo no está resuelto aquí, decide con el principio raíz: claro, seguro, sin enredos.