Skip to main content

Design Guide

This guide provides the visual and technical resources needed to integrate Pago46 into your platform professionally and consistently.

Visual Identity​

Maintaining visual consistency helps build trust with the end user during the payment process.

Institutional Colors​

We have prepared exact values in different formats so you can copy and paste them directly into your stylesheet or design software.

ColorPrimary UseHEXRGBHSLCMYK
GreenAction buttons#28C339rgb(40, 195, 57)hsl(127, 66%, 46%)79, 0, 71, 24
Dark BlueText and backgrounds#07214Frgb(7, 33, 79)hsl(218, 84%, 17%)91, 58, 0, 69
WhiteLight backgrounds#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)0, 0, 0, 0

Typography​

Our official font is Lato. It facilitates readability in payment interfaces and mobile devices.

  • Use in Buttons: Bold, 16px, centered, letter-spacing: 0px.
  • Fallback: In case Lato cannot be loaded, use sans-serif.
Get Typography

If you don't have the typography in your project, you can download or import it for free via Google Fonts or find it on Adobe Fonts.

Base Logotypes​

Official assets with transparent backgrounds. Use the SVG version whenever possible to ensure maximum sharpness.

VersionColorSVGPNG
FullGreen
Download: svg
Download: sm · md · lg
Blue
Download: svg
Download: sm · md · lg
White

Download: svg

Download: sm · md · lg
IsotypeGreen
Download: svg
Download: sm · md · lg
Blue
Download: svg
Download: sm · md · lg
White

Download: svg

Download: sm · md · lg

Button Catalog​

We offer ready-to-use buttons in multiple languages, sizes, and color schemes. Select your preference below to get direct download links.

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

SizeFull (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
Bulk Download

You can download the complete package with all variants and languages at the following link.

📦 Download All Assets (.zip)

Implementation Examples​

Copy and paste these code snippets to quickly integrate the button into your frontend. These examples use the Cash + Full Logo (Green Background / Dark Blue Text and Logo) variant in its SVG version.

<button class="p46-btn-pay">
  <!-- We recommend using the SVG directly for better quality -->
  <img
    src="/img/buttons/green-and-dark-blue-contrast/logo-full/md/button-cash-EN.svg"
    alt="Pay with 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; /* Adjust according to your design */
    display: block;
  }
</style>

Restrictions and Best Practices​

To avoid integration rejection during the certification process, do not perform the following actions:

  • Modify Proportions: Do not stretch or compress the logo or isotype.
  • Alter Colors: Do not change the institutional green to other green tones or non-brand colors.
  • Incorrect Typography: Do not use serif fonts like Times New Roman on the button.
  • Poor Contrast: Do not use the green logo on backgrounds of similar colors that make reading difficult.
Certification

Before moving to production, our team will review that the button implementation complies with these guidelines to ensure the best conversion rate for your business.