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.
Logo
The Upsales logo is our universal mark to be used in all communication, marketing and products. It is based on a 30 degree upward direction - to communicate the efficiency and growth of the Upsales brand and product. It has to be instantly recognisable - consistency is key. Make sure you don't edit, distort or modify the logo.
Download logos & logo pack
Overview
Clearspace
Avoid crowding the logo by ensuring appropriate spacing exists around it. Try to have at least the height of one "U" on all sides of the logo.
Product icon
This is our product icon which we use throughout our system and as our app symbol.
It can also be used when space is limited, and the primary logo appears too small. A good rule of thumb is: for applications where the image shown will be smaller than 100px, use the product icon.
It can also be used when space is limited, and the primary logo appears too small. A good rule of thumb is: for applications where the image shown will be smaller than 100px, use the product icon.
Usage
The logo can be used in #black, #white #money green or #money green light. Use the colour that suits and ensures best contrast between logo and background. However, in applications where no, or few, other brand elements (e.g. visuals, CTAs, typography or supporting text) are present, try to use the #money green version to create more brand recognition.
#White logo
#Money green square logo
#Money green light logo
#Money green logo
#Money green product icon
Guide
The logo should be presented in its original design and orientation. Do not crop, skew, colourize, add effects or in other ways edit the logo.
do not rotate the logo
Always use adequate resolution
do not skew the logo
do not add effects to the logo
do not change lockup
Download logos & logo pack
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 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
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
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
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
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]
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
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>
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>
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
.svg)
Visuals
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
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
Outdoor advertising
Online advertising
Download
Templates
Overview
Download
Templates
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
Overview
Social Media
Overview
Download