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

Paragraph Small

14px