arrow_upward

Brand guidelines

This page will give you guidance on how to design things with that characteristic Upsales feel. For more in depth guides, visit the design guidelines page.
02

Colours

Upsales uses a well balanced colour palette. We use #money green as our foundation, and then use other colours to highlight different graphics and sections. The colours are divided in different sections which uses the tone on tone principle.

Overview

HEX colours are used for screens, CMYK and PMS colours are used for print. Please note that the outcome of CMYK and PMS colours may vary on different printers, papers and techniques. Make sure you do test prints to determine the colour outcome before producing printed material.

Primary colours

Our primary colours are #money green, black, gray and white.

Money green is our main action color in our products and is the main color of the brand.

Money green light is our secondary action color and is also used for our success state.

Black is our headline colour

Grey 11 is for body text

Grey 1-3 can be used for neutral backgrounds

White is our main background colour.

Money green
#1d3d48
Money green Light
#c3e8e8
Black
#000000
Grey 11
#4b5562
Grey 2
#EDF1F5
White
#FFFFFF
Money green
C:66 M:16 Y:0 B:63
Money green Light
C:27 M:0 y:15 B:0
Black
C:0 M:0 y:0 B:100
Dark Gray
c:45 M:24 Y:14 K:44
Cool gray
C:4 M:3 y:6 B:7
White
n/A
Money green
7477 C
Money green Light
331
Black
Process black
Dark Gray
431
Cool gray
cool gray 1
White
n/A
Money green
C:89 M:22 Y:34 B:65
Money green Light
C:27 M:0 y:15 B:0
Black
C:0 M:0 y:0 B:100
Dark Gray
c:45 M:24 Y:14 K:44
Cool gray
C:4 M:3 y:6 B:7
White
n/A
Money green
7476
Money green Light
331
Black
Process black
Dark Gray
431
Cool gray
cool gray 1
White
n/A

Secondary Colours

Our secondary colours are mainly used as interface colours and in backgrounds. Each colour has two complimentary colours where the light ones are mainly used for backgrounds and the dark one to enhance details.
Info
#084391
Info super Light
#e4edf7
info Dark
#002c66
Alert
#e9be3a
Alert super light
#fef9e7
Alert Dark
#664c00
Danger
#b51601
Danger super light
#f6e8e8
Danger dark
#7a1100
Rose
#e0b3ba
Rose super light
#ffeff2
rose Dark
#500f3d
Beta
#cec1f5
Beta super light
#f2effd
beta dark
#3a0e55
grey
#e4eaf0
White
#FFFFFF
Black
#000000
Blue money
C:100 M:35 Y:0 K:0
Blue money light
C:100 M:35 Y:0 K:0
Blue money dark
C:100 M:50 Y:1 K:15
Gold
C:0 M:9 Y:58 K:0
Gold light
C:0 M:0 Y:25 K:0
Gold Dark
C:4 M:17 Y:96 K:0
Ruby
C:2 M:100 Y:85 K:6
Ruby light
C:0 M:14 Y:6 K:0
Ruby dark
C:27 M:86 Y:60 K:28
Rose gold
C:14 M:35 Y:0 K:0
Rosegold light
C:2 M:14 Y:0 K:0
Rosegold Dark
C:42 M:92 Y:0 K:50
Purple
C:29 M:25 Y:0 K:0
Purple light
C:9 M:8 Y:0 K:1
Purple dark
C:97 M:100 Y:0 K:18
Cool gray 2
C:4 M:3 y:6 B:7
White
N/A
Black
C:0 M:0 y:0 B:100
Blue money
300
Blue money light
290
Blue money dark
2945
Gold
1215
Gold light
process yellow 25%
Gold Dark
110
Ruby
186
Ruby light
489
Ruby dark
188
Rose gold
7437
Rosegold light
7436
Rosegold Dark
7652
Purple
270
Purple light
7443
Purple dark
2745
Cool gray 2
Cool gray 1
White
n/A
Black
Process Black

Specialty Colours

The specialty colours are designed for illustrations that require tone on tone pairings and product designs that require variations of tone and opacity.
Green-6
#182B35
Dark
Green-5
#1D3D48
Default
Green-4
#086471
Medium
Green-3
#41909B
Bright
Green-2
#C3E8E8
Light
Green-1
#E8F9F8
Super-Light
Success-6
#1B5E20
Dark
Success-5
#388e3c
Default
Success-4
#4CAF50
Medium
Success-3
#81c784
Bright
Success-2
#c8e6c9
Light
Success-1
#E8F5E9
Super-Light
Info-6
#002C66
Dark
Info-5
#084391
Default
Info-4
#1F5CAD
Medium
Info-3
#3F76BE
Bright
Info-2
#a3c6f5
Light
Info-1
#E4EDF7
Super-Light
Alert-6
#664C00
Dark
Alert-5
#B28600
Default
Alert-4
#E9BE3A
Medium
Alert-3
#FAD668
Bright
Alert-2
#fcf0c0
Light
Alert-1
#FEF9E7
Super-Light
Danger-6
#7A1100
Dark
Danger-5
#B51601
Default
Danger-4
#B51601
Medium
Danger-3
#3F76BE
Bright
Danger-2
#FDDCCC
Light
Danger-1
#E4EDF7
Super-Light
Beta-6
#3A0E55
Dark
Beta-5
#6C528C
Default
Beta-4
#A08FC3
Medium
Beta-3
#CEC1F5
Bright
Beta-2
#E6DFFC
Light
Beta-1
#F2EFFD
Super-Light
Rose-6
#500F3D
Dark
Rose-5
#86476B
Default
Rose-4
#B37B91
Medium
Rose-3
#E0B3BA
Bright
Rose-2
#FADCE0
Light
Rose-1
#FFEFF2
Light

Greys

Upsales uses a slightly blue-ish grey scale to make our UI look a bit more slick.
Black
#000000
Grey-13
#2F3947
Grey-12
#3E4957
Grey-11
#4B5562
Grey-10
#6B7C93
Grey-9
#9BAABE
Grey-8
#A4B3C7
Grey-7
#B2BECF
Grey-6
#CAD2DD
Grey-5
#D3DAE4
Grey-4
#E4EAF0
Grey-3
#E9EEF3
Grey-2
#EDF1F5
Grey-1
#F6F9FB
Greyeen
#5D757C

Colour guidance

Here are a few examples of how we use colours and how not to use them.
✔ Use Money Green as Main Hero Background.
✔ Legibility: think about the contrasts.
✔ Use light colours as video Background.
✗ Never use secondary colours as Main Hero Background.
✗ Legibility: think about the contrasts.
✗ Don't use full colour as video Background
For more tips on how and when to apply colours, check out the design guidelines
03

Typography

Inter is Upsales primary brand typeface. To ensure consistency and legibility it is used in all brand material, communications and product interfaces. At this moment in time we use three weights of Inter; Regular 400, Medium 500 and Semi-bold 600. These three weights gives a good coverage when it comes to typographic hierarchies. However - in special cases, if really needed - Inter is available in a total of 9 font weights.

Overview

Inter is an open-source typeface carefully crafted & designed for computer screens. It features a tall x-height to aid in readability of mixed-case and lower-case text and several OpenType features. Roboto Mono, a monospaced member of Google's Roboto family is also optimised for readability on screens and can be used for captions and small labels to create a more dynamic look.

Inter Semi-bold 600

Inter Regular 400

Roboto Mono Regular 400

Typography guidelines

Here are some general guidelines for how we use text. Depending on the text size, we have listed a couple of approaches below.

This headline is 2 times larger than the subheadline

This subheadline is 1.5 times larger than the body text

This is a standard body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline
Inter Semibold
2 times larger than subheadline
Leading = Same as text size
Tracking = o
TITLE (XL)
Inter semibold
1.5 times larger than body text
Leading = 1.33 times the text size
Tracking = 0
text
Inter regular
Leading = 1.5 time the text size
Tracking = 0

Styleguide web


‍To ensure a cohesive experience with good readability, use this type scale as a guide when setting texts for the web.

Headline: Desktop

scale

weight

size

line-height

XXL

Semi-bold 600

80px

-

XL

Semi-bold 600

68px

-

Large

Semi-bold 600

58px

-

Medium

Semi-bold 600

38px

-

Small

Semi-bold 600

28px

-

Extra small

Semi-bold 600

16px

Title: Desktop

scale

weight

size

line-height

Extra large

Regular 400

24px

-

Large

Regular 400

22px

-

Medium

Regular 400

18px

-

Small

Regular 400

14px

-

Extra small

Regular 400

12px

-

Text: Desktop

scale

weight

size

line-height

Extra large

Regular 400

24px

-

Large

Regular 400

22px

-

Medium

Regular 400

14px

-

Small

Regular 400

12px

-

Examples

Text style pairings as seen on the Upsales website.

The intelligent
CRM for fast-growing companies

Built to close deals and uncover opportunities

[h1 + Body]

Stay on-top of your prospects, clients and activities

Easily see how many meetings and opportunities are needed to reach your sales goals, and make your plans based on facts. Upsales optimises your prospecting and enables you to find quality leads - often where you didn’t realise there were any.

[h3 + Body]

Stay on-top of your prospects, clients and activities

headlines [inter 600, #black or #white]

2021.03.02

Tags [Roboto mono 400, #Dark gray or #white]

Easily see how many meetings and opportunities are needed to reach your sales goals, and make your plans based on facts. Upsales optimises your prospecting and enables you to find quality leads - often where you didn’t realise there were any.

paragraph [inter 400, #dark-grey]

Easily see how many meetings and opportunities are needed to reach your sales goals, and make your plans based on facts. Upsales optimises your prospecting and enables you to find quality leads - often where you didn’t realise there were any.

paragraph inverted [inter 400, #white]

Daniel Wikberg, Founder & CEO

captions [roboto mono 400]

Download

Inter is available through both Google Fonts and rsms.me/inter/. Roboto Mono is available through Google Fonts.

Inter

Inter [google Fonts]

Inter

inter [rsms.me]

Roboto Mono

Roboto mono [google fonts]
04

Icons

When it comes to icons we use our own custom Upsales icon font based on Google Material Design (MDS) Icons.

Icon library

If you've got the icon font installed on your computer you can simply copy the icons below and paste in your document. (And switch to the Upsales Icon font)

Sales entities & features

Activities
activity
Salesboard
salesboard
Board members
board-members
Companies & contacts
companies & contacts
One-off products
cube
Pipeline
opportunity
Subscription
subscription
ARR vs target
arr-vs-target
Revenue recognition
rev-rec
Sales
sales
Sales
sales-open
Performance overview
performance-overview
To-do
todo
Tiered products
tiers
E-sign
esign
App logo
Upsales-u

Marketing entities & features

Marketing
bullhorn
Email campaigns
email-campaign
Web forms
form
Customer journey
journey

Phones & phone calls

Used for the entity phone calls but also alongside a phone number to identify type.
Phone call
phone
Reached
phone-success
Not reached
phone-fail
Call list
call-list
Mobile phone
mobile

Appointments

Used for the entity appointments and their different states.
Appointments
Calendar
Postpone
calendar-arrow-right-o
Completed
calendar-check-o
Not completed
calendar-times-o
Settings
calendar-cog
Remove
calendar-minus-o
Add
calendar-plus-o
Empty
calendar-o
Sales
calendar-dollar
Alert
calendar-exclamation
Missing outcome
calendar-question-o
Room
room
Location
map-marker

Navigation

angle-down
angle-left
angle-right
angle-up
 
 
 
chevron-down
chevron-left
chevron-right
chevron-up
 
 
 
arrow-down
arrow-left
arrow-right
arrow-up
 
 
 
Close
times
Menu
bars
Options
ellipsis-h
Options Android
ellipsis-v

People

User
user
Users
users
Add
user-plus
Remove
user-times
approved
user-check
Minimize
user-minus
Inactive
user-slash
Settings
user-cog
User card
address-card
Contact list
address-book
Lead
lead
Account manager
account-manager

E-mail

Email
envelope
Opened
envelope-open
Proboscis A ;)
at
Scheduled email
schedule-mailing
Send
paper-plane
Reply
reply
Reply all
reply-all
Forward
forward

Communication

Notification
bell
Unread
bell-active
Inactive
bell-o
Disabled
bell-slash
 
 
 
Comment
comment
Hidden
comment-slash
Comments
comments
Typing
commenting
 
 
 
Devices
phonelink
Laptop
laptop

Social media & partners

Share
share-alt
Linkedin
linkedin
Facebook
facebook
Youtube
youtube
Twitter
twitter
Instagram
instagram
Google
google
Pied Piper
pied-piper
Slack
slack
Wistia
wistia-flags
Dagens Industri
di
Breakit
breakit
Cision
cision
Fortnox
fortnox
Fortnox
fortnox-rect
Visma
visma-icon
Visma
visma
Microsoft Teams
microsoft-teams
Microsoft Office
microsoft-office
Zoom app
zoom-app
Google Meet
google-meet
Economist
economist
idg
idg
Börskollen
borskollen
Avanza
avanza
Join.me
join-me
Allabolag
allabolag
Merinfo
merinfo
Eniro
eniro
Hitta.se
hitta

Status

Done
check
All done
check-all
Checked
check-square-o
Checked
check-square
Restricted
ban
Done
check-circle
Lost
times-circle
Important
exclamation-circle
Info circle
info-circle
Info
info
Article link
question-circle
Alert
exclamation-triangle
Goal
flag
Goal inactive
flag-o
Goal
flag-checkered
Locked
lock
Unlocked
unlock
Trophy
trophy
Archived
archive
 
 
 
Visible
eye
Hidden
eye-slash
 
 
 

Actions

Write
pencil
Edit
edit
Collapse
compress
Expand
expand
Delete
trash
Settings
cog
Settings
cogs
Settings
sliders
Duplicate
copy
Merge
code-branch
Merge
code-fork
Swap
swap-horizontal
Swap
swap-vertical
Filter
filter
Snooze
snooze
Fingerprint ID
fingerprint
Search
search
Zoom out
search-minus
Zoom in
search-plus
Refresh search
find-replace
Search web
search-globe
Visible
eye
Hidden
eye-slash
Refresh
refresh
Join
merge
Minus square
minus-square-o
Plus square
plus-square-o
Square
square-o

Charts & graphs

chart-bar
chart-line
line-chart
pie-chart
chart-area
signal
poll

Lists

List
list
Numbered list
list-numbered
Sort
sort
Grid
th
Grid large
th-large
Sort down
sort-down
Alphabetical down
sort-alpha-down
Sort down
sort-amount-down
Numerical down
sort-numerical-down
 
 
 
Sort up
sort-up
Alphabetical up
sort-alpha-up
Sort up
sort-amount-up
Numerical up
sort-numerical-up

Currency

Dollar
dollar
Dollar
dollar-circle
Euro
euro-sign
Pound
pund-sign
Yen
yen-sign

Editor elements

Play
play
Play
play-circle
Rewind
backwards
Code
code
Button
button
Divider
divider-line
Layers
layers
Image & text
image-text
Cmd
command
Bold
bold
Strike through
strikethrough
Underline
underline
Undo
undo
Redo
redo

Time

Alarm clock
alarm
Stopwatch
stopwatch
hourglas
hourglass-o
hourglass-end
hourglass-half
hourglass-start
history

Files

File
file-o
Code
file-code
PDF
file-pdf
Text
file-text
Excel
file-excel
Audio
file-audio
Image
file-image
Powerpoint
file-powerpoint
Video
file-video
Word
file-word
Folder
file-folder
Folder open
file-folder-open

Various

Beer
beer
Bomb
bomb
Book
book
Bookmark active
bookmark
Bookmark inactive
bookmark-o
Box
box-open
Industry
building
Calculator
calculator
Camera
camera
Time
clock-o
Cloud
cloud
Download
cloud-download
Upload
cloud-upload
Columns
columns
Icon name
crosshair
One-off product
cube
Products
cubes
Websites/internet
globe
Icon name
globe-slash
Map marker
map-marker
Icon name
building
Agreement
handshake
News
newspaper
Idea/coach
lightbulb
Idea/coach
lightbulb-o
Idea/coach
lightbulb-on-o
Dashboard
dashboard
Feed
feed

Download/install

We continuously add new icons and bring updates to this font, missing an icon?

In Figma, Sketch etc:
1. Download the latest version below
2. Install on your computer
3. Copy icons above and paste into your document
4. Switch font to Upsales

In code:
1. Download the latest version below
2. Add font to your repository
3. To render icons, use the prefix Icon Icon-*: <i class="Icon Icon-check"></i>
05

Visuals

A big part of our brand identity are product visualisations. It helps us explain what we do and where we aim; visuals can show the whole or one part of the product - as it is today or as we imagine a future part or feature will look like. It can also be entire product demos, such as screen recordings of a user journey.

Overview

As with all other parts of our brand identity, consistency is important. This section show how we use visuals today and how to create new ones by following a few simple guidelines.

Guide

Visualisations can be either stills or animations/recordings. The same guidelines applies. Visually focus on the feature/part of the product that is mentioned - either using a top down (vertically & horizontally centered), zoomed ("full screen"), cropped, or device perspective.
When using the top down or cropped perspective, select a base colour (this colour should be on the bright spectrum) and place a surface on top of it. The surface should have a soft drop shadow to elevate and differentiate it from the base.
Surface
Base
base + surface
top down perspective [#eee9ff 30% base, #white surface]
cropped perspective [#e7f9f9 30% Base, #white surface]

Download

Visuals
06

Illustrations

Our illustrations are mainly used to visualise different features of our product. They can be used either in still or moving format.

Overview

Here are all illustration that we use today. When using on the web they should only move once in a while and never together.
Subscribe
Intelligent leads
Pricing
Sales board
Find new leads
Recommendations for similar leads
Intelligent win/loss analysis
Set targets
AI sales coaching
Business model
Visualize upsell potential
Powerful business intelligence tool
Customer aquisition
Share reports to users
Address change

Download

Illustrations
07

Photography

Photography for Upsales should feel relevant and natural. Avoid extreme perspective, exaggerated metaphors, and staged/mannered scenes often found in stock photos. Instead, show subjects in real life scenarios, and focus on the natural feeling and more subtle details. If possible, hire a professional photographer to ensure a high quality and coherent imagery. When needed, open-source photos that can be used free across all channels can be found at unsplash.com. This section provides a few guidelines when it comes to photography style and composition.

People

Photograph the subject(s) in a natural environment. Keep the subject(s) in focus, avoid unnatural poses and gestures, and cluttered and distracting backgrounds.
✔ keep the subject in focus
✔ Use natural environments and lighting
Avoid cluttered and distracting backgrounds
✗ Avoid unnatural and staged scenes

Objects

Focus on the object in use and pay attention to the environment. Avoid scenes looking staged/unnatural and cluttered.
✔ focus on the object
✔ use up to date objects
✗ Avoid unnatural, staged and cluttered scenes
✗ Avoid outdated objects and cluttered scenes

Spaces

Photograph spaces in a natural but organised perspective. Use natural lighting and avoid cluttered and cramped environments.
✔ photograph organised spaces in natural lighting
✗ Avoid unorganised, cluttered and dark environments
08

Advertising

Here are some examples of how we use our visuals in advertising.

Outdoor advertising

Online advertising

Download

Templates
10

E-books

This section provides a Figma template for creating E-books. Note that this template only contains a chosen set of page layouts. More layouts may be needed. When creating new page layouts - keep this template in mind regarding text size, colours, composition and margins.

Overview

Download

Templates
11

Presentations

This section provides a Google slide template for creating presentations. Note that this template only contains a chosen set of page layouts. More layouts may be needed. When creating new page layouts - keep this template in mind regarding text size, colours, composition and margins.

Overview

Download

Templates
12

Merchandise

Here are a few examples of how to apply our logo on different merch.

Overview