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.