Overview
Here you’ll find the building blocks for our brand. This page was created to set parameters for using the elements and visuals that make up our unique brand identity.
Follow these guidelines to help Smarty Pay become instantly recognizable, wherever people see it.
Using the Smarty Pay Logo
Below you’ll find downloadable versions of the logo:
Clear Space
Clear space buffers the logo from images, text, or other graphics that compromise its impact and visibility. The more breathing room you give our logo, the greater the impact it can have.
The clear space around the logo must be equal to or greater than the size of the triangle in the icon.
Sizing
We’ve optimized our logo for specific sizes. The Smarty Logo must be crystal clear and legible, whether it appears on a smartphone or the jumbo screen in an arena.
The minimum height for digital media is 20 dp (20 px)
The minimum height for print is 0.125 in (3.1 mm)
Don't do this
The Smarty Pay Logo is a symbol people recognize, so it should never be altered.
Don't
Use the logo in a phrase or sentence.
Full-color Logo
The full-color logos pair our Smarty Pay Red icon with Almost Black (#141520) or White (#FFFFFF) text.
The Almost Black full-color logo can be shown on a White background or light imagery.
The White full-color logo can be shown on an Almost Black background or dark imagery.
Monochrome Logo
If it's difficult to see the full-color logo over a specific color or image you can use a monochrome logo instead.
In monochrome logos the icon is the same color as the wordmark (either Almost Black or White). The triangle in the icon is knocked out so the background shows through.
Using the Smarty Pay Icon
Our Icon
The Smarty Pay Logo Icon is a flexible mark that can act as a call to action or a shorter version of the Smarty Pay Logo. If you don't have room to use the logo at minimum size with the required clear space, you should use the Smarty Pay Icon instead.
Clear Space
Clear space buffers the logo icon from images, text, or other graphics that compromise its impact and visibility. The more breathing room you give our logo icon, the greater the impact it can have.
The clear space around the logo icon must be equal to or greater than the size of the triangle within the icon.
Don't do this
The Smarty Pay Logo Icon should never be altered in any way.
Don't
Use colors other than Smarty Pay Red, Almost Black, or White.
App icon
The default app icon may be used on the web to represent the app itself. It should not be used in printed materials or as a place for the Smarty Pay logo.
Smarty Pay Brand Colors
Smarty Pay Red
#E94F4F
RGB: 233.79.79
White
#FFFFFF
RGB: 255.255.255
Almost Black
#141520
RGB: 20.21.32
Online buttons
The Smarty Pay button is for use on checkout page or product detail page of participating third-party apps and websites.
The Smarty Pay button should always appear in your app or website as a directly clicable asset that immediately launches into the Smarty Pay experience.
To ensure better visibility and sufficient contrast, the black Smarty Pay button should be used on a white and light background, and the white Smarty Pay button should be used on a black and dark background.
CTA buttons
Pay with
The «Pay with Smarty Pay» button is used to notify users that they can purchase items and services in-app with Smarty Pay.
Add to
The «Add to Smarty Pay» button is used to notify users that they can add their credit or debit card details to Smarty Pay. For more information about this feature, please contact us.
Donate with
The «Donate with Smarty Pay» button is used to notify users that they can donate to non-profit organizations or various donation campaigns via Smarty Pay.
Button sizing
Smarty Pay payment buttons can be the same size or larger than similar payment or checkout buttons. A button should never be smaller than other buttons.
The width of the button can be extended to match other environmental elements. When extending, the width should always be extended evenly on both sides of the mark.
Button clear space
An area of clear space must be left around each edge of the button. This allows the button to breathe and makes it easier to recognize.
