Leapsome’s
Design Guide

This design guide serves to align Leapsome’s brand and visual direction.
With it, we can take control of global styles to edit typography, colors & elements across the website.

Product overview

Meet Leapsome: the all-in-one people enablement platform.

CEOs and HR/People Operations teams in forward-thinking companies like Spotify, Trivago, and Babbel choose Leapsome to enhance their people management processes.

With Leapsome, you empower and develop employees across your organization. Leapsome combines tools for Goals & OKRs management, performance reviews and 360s, employee surveys, continuous feedback, 1:1 meetings, learning, compensation, and promotions — all in one easy-to-use, customizable platform.

Color palette

Not sure about something? andy.parker@leapsome.com

Primary palette

BRAND COLORS

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 about something? andy.parker@leapsome.com

Headings

Develop your people, scale your business

Display

72px

Line Height

1 -

Develop your people, scale your business

Display

60px

Line Height

70px

Develop your people, scale your business

Heading 2

30px

Develop your people, scale your business

Heading 3

34px

Develop your people, scale your business

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