Professional Documents
Culture Documents
Pay-Pa - Adapted Style Guide
Pay-Pa - Adapted Style Guide
Systems
pay- pa d e s i g n l a n g u a g e s y s t e m
s h a n i c e c k m c n a l ly
PAY- PA B R A N D S T Y L E G U I D E 2021
01
Pay-Pa Branding
pay: pa b r a n d i n g
financial confidence.
finance.
The Logo 01
p ay - p a d e s i g n l a n g u a g e s y s t e m 2021
02
Brand Colors
buttons
#232323
#FFD600
Darkest Yellow
Brand Colours
#BDBDBD
Sub Grey
Pay-Pa has three primary colours that
together create the Pay-Pa branding.
When used effectively, these colours
create an energetic, sleek and modern
tone for the Pay-Pa Brand.
#6F7072
Faded Grey
#474747
Pay-Pa Overlay Grey
brand colours
Text
#FFEA00 TEXT
Pay-Pa Black
Darker Yellow Darker Yello w
A A
Background
BAC KGROUND
#0 1D2
6 8
Contrast 12.58
Contrast 14.0
= AA Large - PASS
2
= AA Large - PASS
=
AAA Large - PASS
=
AAA Large - PASS
#F8FAFB
= AA Normal - PASS
#1D252C = AA Normal - PASS
Accessibility Pay-Pa White =
AAA Normal - PASS Pay-Pa Black =
AAA Normal - PASS
p ay - p a d e s i g n l a n g u a g e s y s t e m 2021
03
Typography
TYPOGRAPHY
Typography
Roboto is the consistent font style for
Pay-Pa Mobile & Web. Additionally, the
Roboto font is for promotional materials
1,000,000/Mono/83pt/light/9%
and campaigns.
digit Heading 1.
This font is BOLD with an edge of
modernism. Different thicknesses help to
provide contrast, hierarchy & emphasis.
Heading 2. Find Your Financial rhythm / Roboto/ 24pt /MEDIUM/ 9% sp
PAy-PA button Find Your Financial rhythm / Roboto / 18pt / Regular /9% spacing
SUBTITLE 1. Find Your Fin anci al rhy thm / Roboto / 16pt / medium / 2.15 px spacing
Typography
p ay - p a d e s i g n l a n g u a g e s y s t e m 2021
04
Common
UI Elements & Styles
PRIMARY & SECONDARY BUTTONS
ENABLED
buttons
DISABLED
ENABLED
General Buttons
DISABLED
SELECTED
common ui elements
Backdrops
Backdrops are used throughout Pay-Pa’s
UI to help introduce pages and to inject
bold colors into our interfaces.
1. Navigation buttons
3. Selection controls
common ui elements
onboarding background
/w feature title outline
Feature
text
Introductions
At the beginning of each feature, Pay-Pa
has splash screens and progressive
onboarding. These screens provide users a
quick overview of what features are
available in each section.
2. onboarding info
title & description
05
Grid/Layout
G r i d s / L ay o u t
Grid Layouts
Grid Layout
P
G r i d s / L ay o u t
p ay - p a d e s i g n l a n g u a g e s y s t e m 2021
06
Interactions
& Animations.
G r i d s / L ay o u t
Animations swipe
functionality
(left or right)
animation
(tap to continue
to next screen)
Slide In/Slide Out
i n t e r a c t i o n s & a n i m at i o n s
p ay - p a d e s i g n l a n g u a g e s y s t e m 2021
07
Copy/Language
Guidelines
Language & tone of Voice
Language / Tone Of
Voice Guidelines
The tone of voice for Pay-Pa is friendly, warm,
and familiar.
Thank You