Guía de Diseño

Esta guía proporciona los recursos visuales y técnicos necesarios para integrar Pago46 en tu plataforma de manera profesional y consistente.

Identidad Visual

Mantener la coherencia visual ayuda a generar confianza en el usuario final durante el proceso de pago.

Colores Institucionales

Hemos preparado los valores exactos en diferentes formatos para que puedas copiarlos y pegarlos directamente en tu hoja de estilos o software de diseño.

Color	Uso Principal	HEX	RGB	HSL	CMYK
Verde	Botones de acción	#28C339	rgb(40, 195, 57)	hsl(127, 66%, 46%)	79, 0, 71, 24
Azul Oscuro	Textos y fondos	#07214F	rgb(7, 33, 79)	hsl(218, 84%, 17%)	91, 58, 0, 69
Blanco	Fondos claros	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)	0, 0, 0, 0

Tipografía

Nuestra fuente oficial es Lato. Facilita la legibilidad en interfaces de pago y dispositivos móviles.

• Uso en Botones: Negrita (Bold), 16px, centrado, letter-spacing: 0px.
• Fallback: En caso de no poder cargar Lato, utiliza sans-serif.

Obtener Tipografía

Si no cuentas con la tipografía en tu proyecto, puedes descargarla o importarla gratuitamente a través de Google Fonts o encontrarla en Adobe Fonts.

---

Logotipos Base

Activos oficiales con fondo transparente. Utiliza la versión SVG siempre que sea posible para garantizar la máxima nitidez.

Versión	Color	SVG	PNG
Full	Verde	Descargar: svg	Descargar: sm · md · lg
	Azul	Descargar: svg	Descargar: sm · md · lg
	Blanco	Descargar: svg	Descargar: sm · md · lg
Isotipo	Verde	Descargar: svg	Descargar: sm · md · lg
	Azul	Descargar: svg	Descargar: sm · md · lg
	Blanco	Descargar: svg	Descargar: sm · md · lg

---

Catálogo de Botones

Ofrecemos botones listos para usar en múltiples idiomas, tamaños y esquemas de color. Selecciona tu preferencia a continuación para obtener los links de descarga directos.

Español

Variantes con los textos "Efectivo" y "Pagar con".

Verde / Azul

Tamaño	Full (Efectivo)	Full (Pagar con)	Iso (Efectivo)	Iso (Pagar con)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Verde / Blanco

Tamaño	Full (Efectivo)	Full (Pagar con)	Iso (Efectivo)	Iso (Pagar con)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Azul / Verde

Tamaño	Full (Efectivo)	Full (Pagar con)	Iso (Efectivo)	Iso (Pagar con)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Azul / Blanco

Tamaño	Full (Efectivo)	Full (Pagar con)	Iso (Efectivo)	Iso (Pagar con)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Blanco / Azul

Tamaño	Full (Efectivo)	Full (Pagar con)	Iso (Efectivo)	Iso (Pagar con)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Blanco / Verde

Tamaño	Full (Efectivo)	Full (Pagar con)	Iso (Efectivo)	Iso (Pagar con)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

English

Variants with "Cash" and "Pay with" labels.

Green / Blue

Size	Full (Cash)	Full (Pay with)	Iso (Cash)	Iso (Pay with)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Green / White

Size	Full (Cash)	Full (Pay with)	Iso (Cash)	Iso (Pay with)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Blue / Green

Size	Full (Cash)	Full (Pay with)	Iso (Cash)	Iso (Pay with)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Blue / White

Size	Full (Cash)	Full (Pay with)	Iso (Cash)	Iso (Pay with)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

White / Blue

Size	Full (Cash)	Full (Pay with)	Iso (Cash)	Iso (Pay with)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

White / Green

Size	Full (Cash)	Full (Pay with)	Iso (Cash)	Iso (Pay with)
xs	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
sm	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
md	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG
lg	SVG / PNG	SVG / PNG	SVG / PNG	SVG / PNG

Descarga Masiva

Puedes descargar el paquete completo con todas las variantes e idiomas en el siguiente enlace.

📦 Descargar Todos los Activos (.zip)

---

Ejemplos de Implementación

Copia y pega estos fragmentos de código para integrar el botón rápidamente en tu frontend. Estos ejemplos utilizan la variante Efectivo + Logo Full (Fondo Verde / Texto y Logo Azul) en su versión SVG.

HTML & CSS

<button class="p46-btn-pay">
  <!-- Recomendamos usar el SVG directamente para mejor calidad -->
  <img
    src="/img/buttons/green-and-dark-blue-contrast/logo-full/md/button-cash-ES.svg"
    alt="Pagar con Pago46"
    class="p46-button-img"
  />
</button>

<style>
  .p46-btn-pay {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .p46-btn-pay:hover {
    filter: brightness(90%);
  }
  
  .p46-btn-pay:active {
    transform: scale(0.98);
  }
  
  .p46-btn-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .p46-button-img {
    height: 48px; /* Ajusta según tu diseño */
    display: block;
  }
</style>

React (Tailwind)

import React from "react";

const Pago46Button = ({ onClick, disabled }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="transition-all hover:brightness-90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      <img
        src="/img/buttons/green-and-dark-blue-contrast/logo-full/md/button-cash-ES.svg"
        alt="Pagar con Pago46"
        className="h-[48px] block"
      />
    </button>
  );
};

export default Pago46Button;

---

Restricciones y Malas Prácticas

Para evitar el rechazo de la integración durante el proceso de certificación, no realices las siguientes acciones:

• Modificar Proporciones: No estires ni comprimas el logo o el isotipo.
• Alterar Colores: No cambies el verde institucional por otros tonos de verde o colores ajenos a la marca.
• Tipografía Incorrecta: No utilices fuentes con serifa (serif) como Times New Roman en el botón.
• Contraste Deficiente: No utilices el logo verde sobre fondos de colores similares que dificulten la lectura.

Certificación

Antes de pasar a producción, nuestro equipo revisará que la implementación del botón cumpla con estos lineamientos para asegurar la mejor tasa de conversión para tu comercio.

Elige tu guía

Soy un Comercio

Quiero cobrar pagos o enviar dinero a mis usuarios.

• Cobros (Pay-In)
• Retiros (Pay-Out)
• Retiros en moneda extranjera

Soy un Proveedor de Pago

Tengo puntos físicos y quiero procesar transacciones de Pago46.

• Procesar pagos
• Procesar retiros