Payoneer Style Guide

Overview

The purpose of this style guide is to help you understand how to manage this project in style. It lays out all the elements, components, tools, and resources used to develop it. Each section begins with a tutorial to reinforce you further.

Global Styles

This project comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project. Styles are added to an embed so we can see the CSS inside the Webflow Designer.

Shortcuts

The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.

Do Math Within Input Fields

Everything in this project is measured using REM. The base font size is 1 rem. When you need to convert units such as pixels to REM, simply select your input field and type 14/16rem and it automatically calculates the difference and converts. You can do any other form of calculation, as well.

Remove Unused Elements

Once you're finished editing the project, open the Style Manager and click Clean Up to remove unused classes. Then open the Interactions panel and click Clean Up to remove unused interactions. Finally, open the Assets Panel, expand it from the top right, click Select All and Delete. Webflow will automatically dispose of any assets you haven't used. The rest will show up again once you publish your project and refresh the page.

Colors

All the colors used in this project are saved as global swatches in the color picker. If you use a new color, please remember to save it as a swatch.

Swatches (primary)

#ff4800

#dfd902

#20dc68

#0092f4

#da54d8

Swatches (secondary)

#FFFFFF

#efefef

#878787

#252526

Backgrounds

Texts

Gradients (two colors)

Gradients (three colors)

Gradients (full)

HTML Tags

Use HTML tags to control the default styling for a particular element type. Setting typography styles on the Body (All Pages) tag will cascade down to all typography in the entire project. It’s good practice to set the default font family, font size, and line height on this tag and override those styles on H1-H6 heading tags. Learn More

H1 • Title

H2 • Subtitle

H3 • Third Title

H4 • Fourth Title

H5 • Fifth Title

H6 • Sixth Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Links

All Quotes
‍
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Heading Classes

Headings help users and search engines to read and understand text. For example, they act as signposts for the readers and make it easier for them to figure out what a post or page is about. Headings also define which parts of your content are important, and show how they’re interconnected. Remember to use only one H1 per page.

H1 • Heading-XLarge

H2 • Heading-Large

H2 • Heading-Large-1.5

H3 • Heading-Medium

H4 • Heading-Small

H5 • Heading-XSmall

H6 • Heading-Tiny

Text Classes

Typography organization keeps your brand professional. Use class prefix text- on a piece of text to change the size of the text. This project uses a global classing system based on Client-First. This project uses a 4pt system based on REM measurements. When you need to convert units such as pixels to REM, select your input field and type 20/16rem and it automatically calculates the difference and converts.

text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-regular
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.

text-style-4lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.

text-style-5lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.

Text Weights

Style font-weight css to make text more or less bold.

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

font-avenir-demi

font-weight-bold

font-weight-bolder

Text Alignments

Style text-align css to make text, or other elements, align left, center, or right.

text-align-left

text-align-center

text-align-right

Rich Text

A rich text element (RTE) is perfect for creating long-form content for blog posts, about pages, biographies — you name it. Instead of adding individual heading, paragraph, list, or image elements, you can double click into a rich text element to create these different content elements directly. RTE also makes it easy for collaborators (e.g. team members or clients) to edit rich content within the Editor.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
‍

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

This is a placeholder image.

Buttons

A button serves as your call to action (CTA) and links to pages, forms, assets, and more. They should be as universal and global as possible.

button button button button button button-text button-text

Icons

Use global classes for your icons to easily manage them across the project.
Quickly find all of Payoneer Icons here

Icon Sizes

Social Media

Elements

In addition to the primary elements featured in this style guide, Webflow offers many more building blocks.

List

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Custom Code

There are three ways to add custom code to this project. You can embed it directly into your page, insert it in your page settings, or host it on another server and then embed it as a script file.

Resources

Take your Webflow game to the next level with these tools and services.

Finsweet Attributes

Give your Webflow website superpowers, such as advanced filtering, search, and much more.

Flowbase

Flowbase is the largest Webflow resource site, with premium components, templates, and guides.

Webflow University

Learn web design, development, and the ins and outs of Webflow through comprehensive tutorials.

Accessibility Checklist

Your website should be inclusive of, and accessible to, as many people as possible. This essential tool for Webflow users contains guidelines derived from WCAG, including how to implement them with no and low-code solutions.

FONTS

Fonts placheholders exists below (to be used across the project)

Font KR 400 (NOTO KR)

Font KR 600 (NOTO KR)

Font KR 900 (NOTO KR)

Finsweet Attributes

Give your Webflow website superpowers, such as advanced filtering, search, and much more.

Flowbase

Flowbase is the largest Webflow resource site, with premium components, templates, and guides.

Webflow University

Learn web design, development, and the ins and outs of Webflow through comprehensive tutorials.

Accessibility Checklist

Structure

This project was developed using the Client-First methodology to enable anyone that opens this Webflow Project to understand how it was structured and built. These are the primary pillars that were used.

Structures

page-wrapper

main-wrapper

page-padding

Containers

container-large

container-medium

container-small

Max Widths

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Margins

margin-0

margin-tiny

margin-xxsmall

margin-small

margin-medium

margin-large

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

margin-top-0

margin-top-desktop-0

margin-top-3rem

margin-top-5rem

margin-custom2

margin-custom3

Paddings

padding-0

padding-tiny

padding-xxsmall

padding-xsmall

padding-small

padding-medium

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Padding Directions

padding-top

padding-bottom

padding-left

padding-right

padding-vertical

padding-horizontal

Margin Directions

margin-top

margin-bottom

margin-left

margin-right

margin-vertical

margin-horizontal

Responsiveness

hide-tablet

hide-mobile-landscape

hide-mobile-portrait

show

show-tablet

show-mobile-landscape

show-mobile-portrait

Utility

spacing-clean

z-1

z-2

align-center

div-square

clickable-on

overflow-hidden

overflow-scroll

overflow-auto