Brand guidelines

Brand

Tagline

Buy & Sell Digital Assets

Mission

Unlock the power of total control with Topper.

Descriptor

Topper is a fiat on-ramp with higher approval rates and support for twice as many digital assets as its competitors. It is a Web3 payment tool that helps crypto projects process more customer payments through integration.The Topper payment widget is built to simplify the payment process, accept more currencies and deliver higher approval rates, resulting in fewer declines and more revenue. Developed by Uphold, the Web3 financial platform.

Tone of voice

Easy
Transparent
Cutting-edge
Reliable
Sleek
Professional
Fun
Geeky

Brand personality

Uphold's personality is easy, transparent, cutting-edge, reliable, sleek, professional, fun, and geeky, with a stylish but never sloppy approach.

Our tone of voice should reflect these attributes in all communications.

Use of direct speech

We encourage the use of "you" and "we" in Uphold's communications to create a more personal and conversational tone.

Focus on technology

Uphold should focus on the technology behind the platform, highlighting its unique features and benefits.

These include our unique platform architecture, the largest asset offering, our patented "Anything to Anything" interface, our proven platform APIs, the best-in-class fiat on-ramp for Web3 projects, our self-custody option, our commitment to full transparency, our seasoned blockchain team, our market insights, our trading tools, and our institutional-grade research.

Audience

Uphold reaches a broad audience, including those who may be less familiar with cryptocurrency and blockchain technology.

Our communications should be accessible and easy to understand for all.

Example tone of voice for Uphold

“Easy, Accessible, and Transparent”

At Uphold, we're on a mission to make Web3 easy and accessible for everyone.

We believe in radical transparency, which is why we're proud to publish our reserves and never lend out customer assets. With our unique platform architecture, you'll have seamless access to more than 260 digital assets across both CeFi and DeFi venues, giving you the deepest liquidity and optimal execution. Plus, our patented "Anything to Anything" interface makes discovering and executing on these assets easy. Our self-custodial wallet ensures that your assets are always protected, and our institutional-grade research can help you make better trading decisions. We believe in being fully transparent with our users and always putting their needs first. Join us and experience the future of finance with Uphold.

Typography

Proxima Nova is our type family

Proxima Nova is the brand font used for print and graphic executions.

Aa

Light
Regular
Medium
Semibold
Bold

ABCDEFGHIJKLMNOPQRSTUVSXZ
abcdefghijklmnoptqrstuvsxz
123456789@#$%&*

Font style

We use these weights as a rule, allowing a high flexibility in its use.

Regular
Medium
Semibold
Bold

Although different applications require different typographical structures.

Font style

Although you can use all caps for small captions, or for visuals, we recommend using all sentence case in most typographic applications.

Align
Keep it flush left

Headline styles

Here we have the headline styles to understand the relation between size and leading.

All values must be scaled according to the support to be used.

Size 44

Leading 56

Hero

Size 32

Leading 40

Heading 1

Size 28

Leading 36

Heading 2

Size 24

Leading 32

Heading 3

Size 20

Leading 28

Heading 4

Size 18

Leading 26

Paragraph

Size 14

Leading 24

Body 1

Size 12

Leading 20

Body 2

Size 10

Leading 12

Tag

Hierarchy of information

Typographic hierarchy is the navigational system that renders complex information accessible.

Think of a book outline; the size, style, and position of type not only inform what order it should be read, but also describe the parent-child relationships of the content.

One clear spaces have been developed that shift in size depending on the size of the mark. Everything starts with the logo.

Paragraph break

A paragraph break is a single line space marking the division between one paragraph and the next in a body of text.

We use at least the same font size as the paragraph we are breaking.

Example pairings

Here are some examples of typographic pairs that we commonly use. Limit type sizes to three.

Headline with subheading and paragraphs

Limit type sizes to three, it will ensure your design can be easily navigated and understood.

Here are some examples of typographic pairs that we commonly use on our communication.

Color

Brand colors

The Uphold brand uses 3 colors as its primary colors and their variations across all platforms and communications.

Primary for Dark

primary-for-dark-20
HEX #84FB7F
RGB 132  251  127
CMYK 84  0  38  18
PANTONE 7479C

Primary for Light

primary-for-light-40
HEX #49CC68
RGB 73  204  104
CMYK 90  0  93  0
PANTONE 7482C

Neutral

neutral-100
HEX #090D14
RGB 9  13  20
CMYK 88  76  30  82
PANTONE 532C

Base White

base-white
HEX #FFFFFF
RGB 255  255  255
CMYK 0  0  0  0
PANTONE White

Base Black

base-black
HEX #000000
RGB 0  0  0  0
CMYK 30  0  0  100  
PANTONE Black 6C
Use Primary for Dark for content on dark backgrounds.
Use Primary for Light for content on Light backgrounds.

An exception can be made, when using the Primary color as a background for an element that lives inside a light background itself. It is up to the designer to see which Primary variation works best as the element background (Primary for Light or Primary for Dark), as long as that doesn’t compromise the legibility or overall experience, while benefiting the visual aesthetics.

Content with highlight text

Content with highlight text

Color scheme B03

B03 Background
N01 Content
P05 Highlights

Color scheme P05

P05 Background
B03 Content
N01 Highlights

Color scheme N01

N01 Background
B03 Content
P06 Highlights

For Interface Applications, Please Refer to the Design System

Topper Flex Guide

Topper’s flow

On-ramp flow: First time buyer example

This is the underlying structure of all Uphold design, grids help balance your layout, creating the spacing and information organization that will guide customers to the most important visual elements and messages.

Foundations

Core principles for Topper’s design themes

Customized Navigation

Logo placement variation

Tokens

Actions: Primary button state colors

Tokens

Actions: Secondary button state colors

Tokens

Actions: Input state colors

Tokens

Backgrounds: Solid colors

Topper’s flow

- Check all tokens for Dark mode and Light mode.
- Typography tokens are not considered in this release.
- Check icons here.

Changelog

v2025.09.5

Initial release