Brand Guidelines

This page demonstrates our brand guidelines for sharing internally, with our partners and for those interested in the Comma brand.

Logo

Our logo is a valuable element of our visual identity.

The Comma logo is composed of a wordmark and a standalone icon matching the initial letter of the wordmark.

When using the logo please give the logo room to breathe. The logo is designed to be legible at small scales as well as large.

The icon only logo should be used sparingly, it should mainly be used in places where the word ‘Comma’ can be seen close by too. For example an avatar, a favicon etc.

The icon version is used off centre so it visually fits better to the eye in avatars, especially circular ones.

Logo variants

Sometimes we will need to use a variant of our logo. Some partner websites/marketplaces/blogs etc. will require us to use a white variant on dark backgrounds.

We only use the white variant of the Comma logo when absolutely necessary.

Download our logos

This file contains our logo and its variants in a range of useable layouts in SVG and PNG formats.

Download logo pack  

Logo misuse

These are a few examples of what not to do with the Comma logo. Please help us to be vigilant when producing materials for the Comma brand.

1

Never rotate or distort the logo. It must always appear in it’s original form.

2

Never change the colours of the logo.

3

Never add any effects to the logo.

4

Never outline or box the logo in.

5

Never move or separate any parts of the logo.

6

Never place the logo over busy backgrounds.

7

Never place the logo on a low contrast background - use the appropriate white logo version instead.

8

Never create your own sub logos.

9

Never use the logo within copy.

10

Never change the typeface of the logo.

Typography

Lato is a modern, clean and easy to scan font and is an essential component of our visual identity. We chose Lato because of its usability and ease to use  across the app, our website and other marketing collateral. This font is available to all, for free, making it easy to embed and share.

Aa

Lato Bold & Black
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p qr s t u v w x y z
Download Lato  

Font sizing

We use a 4px grid for our margins, paddings etc. across the app, website and other marketing material and this carries over to our font sizing and line-heights too.

Font size: 40px; line-height 48px
Font size: 32px; line-height 40px
Font size: 24px; line-height 32px
Font size: 18px; line-height 28px
Font size: 16px; line-height 24px
Font size: 14px; line-height 20px
Font size: 12px; line-height 16px
Font size: 10px; line-height 12px

Colour Palette

Our colour palette is designed to be calming and fun. Payments can be a boring and stressful process and our goal is to make payments frictionless and more enjoyable. This is why our brand across marketing and the app is made to be as joyful to view as possible.

Dark Blue
Main Headings
#1C3076
RGB 28 48 118
Blue Grey
Body text
#6775A7
RGB 103 117 167
Deep Blue
Links & Primary CTA
#2856CC
RGB 40 86 204
Clean Grey
Secondary CTA
#F0F2F8
RGB 28 48 118
Deep Grey
Icons
#5E72BA
RGB 94 114 186
Calming  Grey
Borders
#DEE1FF
RGB 222 225 255
Faded Blue
Backgrounds
#E4EAFA
RGB 228 234 250
Off White
Backgrounds
#F9FAFF
RGB 249 250 255
Deep Green
Backgrounds & Icons
#00B066
RGB 0 176 102
Deep Purple
Backgrounds & Icons
#7F43FF
RGB 127 67 255
Deep Red
Backgrounds & Icons
#FF4461
RGB 255 68 97
Deep Orange
Backgrounds & Icons
#FFA843
RGB 255 168 67
Faded Green
Backgrounds
#E6F7F0
RGB 230 247 240
Faded Green
Backgrounds
#EDE8FF
RGB 237 232 255
Faded Red
Backgrounds
#FFECEF
RGB 255 236 239
Faded Orange
Backgrounds
#FFF6EC
RGB 255 246 236