Design Language


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

Who Are We?

Pay-Pa is a Digital Banking & Payment app

to shop, save & invest your capital

responsibly in one central application. As

Covid-19 is drawing to an end, we want to

give users the ability to regain their

financial confidence.

We aim to help people become more

financially savvy and pride ourselves on

simplifying the intimidating world of

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

The five smaller swatches stacked on the

right-hand side are the secondary colours.
These colours pair with the primary
colours to help create a contrasting UI.

#474747

Pay-Pa Overlay Grey

Darker Yellow creates an accent and

highlight areas of interest.

#FFEA00 #1D252C #F8FAFB #061D28

Darker Yellow Pay-Pa Black Pay-Pa White Dark Navy

brand colours
 Text
 #FFEA00 TEXT

Pay-Pa Black
 Darker Yellow Darker Yello w


Brand colours #1D252C
 #FFEA00 


X
 X


A A
Background
 BAC KGROUND


Pay-Pa White
 Pay-Pa Black


#F8FAFB

 #1D252C 



Accessibility Contrast 14.82 


= AA Large - PASS

Contrast 12.5
= AA Large - PASS

= AAA Large - PASS

8


= AAA Large - PASS


= AA Normal - PASS
 = AA Normal - PASS

= AAA Normal - PASS = AAA Normal - PASS
Accessibility is an important element in UX
& UI Design. We want our app to be
accommodating for all users. Therefore for
our designs to do this, it needs to adhere
to the Web Content Accessibility
Guidelines.

These guidelines ensure that the design is

inclusive for all and defines how to make
web content more accessible to those
with disabilities.
#FFEA00
#1D252C Darker Yellow

Pay-Pa Black

We can monitor this using color

contrasting, Pay-pa aims to Our goal is to
make sure that all visual designs meet the
minimum color-contrast ratio for normal
and large text on a background, as per the Text

WCAG 2.0, Level AA guidelines.

 Pay-Pa Black - 
 Text

#1D252C TEXT
 Darker Yellow 

#FFEA0
See the example combinations of brand X
 X

0


colours used with different texts and Background
 Background


Darker Yellow - 

backgrounds. 


#FFEA00 - 

 Dark a N vy


#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

HeADING 3. Find Your Financial rhythm / Roboto / 18pt / BOLD / 9% spacing

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

Buttons are a vital element to help users unselected

get to their desired destinations. Pay-Pa
uses a wide range of buttons, there are so selected
many different styles catered to different
functions. We aim to create buttons that
unselected
are communicative and easy to
understand to make sure that the user selected
achieves their goals.

Buttons must be clear and identifiable. 



UNSELECTED ICON BUTTONS
There are different styles displayed that
are used throughout Pay-Pa’ UI.

SELECTED

common ui elements & styles

 manage money 1 general 1 manage money 2

common ui elements

Backdrops
Backdrops are used throughout Pay-Pa’s
UI to help introduce pages and to inject
bold colors into our interfaces.

general 2 general3 Questionnaire headboard

Typically, backdrops include the following
elements:

1. Navigation buttons

2. Text Titles & Descriptions

3. Selection controls

common ui elements & styles

 feature splash screen

w/ feature title, faded text overlay

& bold background imagery

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.

The screens conform to a specific layout

which is consistent throughout. The style is
sleek, sophisticated, and dynamic.

2. onboarding info

title & description

common ui elements & styles

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

05
Grid/Layout
 G r i d s / L ay o u t

Grid Layouts
Grid Layout
P

A 4 column grid system forms a layout

structure dividing the screens for mobile
applications.

Using this to design the screens helps

provide consistency and neat alignment
of UI elements. 



Pay-Pa is designed with a Mobile First

Design methodology.

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)

Animations for screens should be smooth

and sultry. This aligns with the
sophisticated and sleek brand values that
we project with our users. 



All transitions should be no longer than active/inactive


button instant 

1000ms

animation

To achieve Pay-Pa styled sequencing, Unselected Selected

make use of the following prototype
transitions

Smart Animate click


/W dissolve

functionality
Dissolve (Fade

Move In/ Move Ou

Pus tap interaction -

(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.

Pay-Pa stands for Payment Personal Assistant,

the app’s language style matches that of a
friendly companion.

The language is laid back and complimentary

where possible. Pay-Pa addresses the user on
a first-name basis to help provide a personal
connection with the user.

However, the language should be neutral in

areas of importance such as the "Budgeting
Analysis", this information must be clear and
easy to understand. Pay-Pa must feel
trustworthy and reliable, therefore areas with
sensitive information must conform to a
knowledgeable and neutral tone of voice in
detailed areas.

Pay-Pa is friendly and chatty for headings and

taglines but delivers a more formal tone when
speaking about financial data in detail to help
mitigate confusion.

LANGUAGE & TONE OF VOICE

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

Thank You