Leapsome
Style Guide

This style guide serves to quickly align the Leapsome websites brand and visual direction.
With it we can take control of global styles to edit typography, colours & elements across the whole site.

Product Overview

Meet Leapsome - the perfect platform for Performance Management & Employee Engagement. CEOs and HR / People Operations teams in forward-thinking companies such as Spotify, Trivago, and Babbel choose Leapsome to enhance their people management processes.

With Leapsome, you empower and develop employees across your organisation.Leapsome combines tools for Goals & OKRs Management, Performance Reviews and 360s, Employee Engagement Surveys, Instant Feedback & Praise, and 1-on-1 Meetings into one easy to use and customizable platform.

Colour Palette

Not sure on something? marko.skenderovic@leapsome.com

Primary Palette

BRAND COLOURS
Purple 900
#4317c0
Purple 700
#4a4ada
Primary
#5d5de9
Purple 500
#7f7ff1
Purple 300
#a5a5ff
Purple 100
#cfcfff
Peach 900
#eb4c4c
Peach 700
#f15d4b
Primary 600
#ec7264
Peach 500
#f3887c
Peach 300
#fc9e93
Peach 100
#fdb5ad
Blue 900
#34abe0
Blue 700
#4fbdee
Primary 600
#71d2fd
Blue 500
#89d8fc
Blue 300
#a6e0fa
Blue 100
#34abe0

Secondary Palette

GRADIENT
Orange 900
#d16c31
Orange 700
#f59259
Primary 600
#faab7d
Orange 500
#ffcaa3
Orange 300
#ffddc5
Orange 100
#fdeee4
Red 900
#c02634
Red 700
#d74854
Primary 600
#ff717d
Red 500
#ff8d97
Red 300
#ffa7af
Red 100
#ffd7db
Green 900
#427D6D
Green 700
#64c2ac
Primary 600
#70dac1
Green 500
#8de2ce
Green 300
#afeee0
Green 100
#d0f5ec

Typography Palette

HEADING & PARAGRAPH
A / Grey 900
#2d3958
A / Grey 700
#546285
A / Primary 600
#7b88a8
A / Grey 500
#bcc4da
A / Grey 300
#e6eaf5
A / Grey 100
#f8faff
B / Grey 900
#171725
B / Grey 700
#555555
B / Primary 600
#7b88a8
B / Grey 500
#C7C7CC
B / Grey 300
#e2e2ea
B / Grey 100
#fcfcfc

Typography Styles

Not sure on something? marko.skenderovic@leapsome.com

Headings

Develop your people, scale your business with our SaaS Platform.

Display
72px
Line Height
1 -

Develop your people, scale your business with our SaaS Platform.

Display
60px
Line Height
70px

Develop your people, scale your business with our SaaS Platform, quickly and efficiently.

Heading 2
30px

Develop your people, scale your business with our SaaS Platform.

Heading 3
34px

Develop your people, scale your business with our SaaS Platform.

Heading 4
20px
Aa Bb Cc Dd Ee
Heading 5
18px
Aa Bb Cc Dd Ee
Heading 6
12px

Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large Head
20px
Line Height
1.7 -

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Quotes & Lists

Not sure on something? marko.skenderovic@leapsome.com

Quotes

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 1
Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 2
Coloured

Lists

  • Example Item 1
  • Example Item 2
  • Example Item 3
List Dots

Buttons

Not sure on something? marko.skenderovic@leapsome.com

Button Primary

Submit
Button Primary
Submit
Button Pressed
Submit
Button Outline

Icons

Not sure on something? marko.skenderovic@leapsome.com

Primary

Navbar

Illustrations

Not sure on something? marko.skenderovic@leapsome.com

Photography

Not sure on something? marko.skenderovic@leapsome.com

UI Mockups

Not sure on something? marko.skenderovic@leapsome.com

Product Screenshots

Not sure on something? marko.skenderovic@leapsome.com