Design system

Introduction

This page is a work in progress.

Content list

Typeface

Font sizes

Text formatting

Guidelines

Typography
Titles

Size

REM

Line height

Name

140.47 px

8.78rem

1-

Title-1

Title-1

107.07 px

6.692rem

1-

Title-2

53.535px

81.61 px

5.1rem

1-

Title-3

Title-2

40.805px

Title-3

Space after

70.235px

Appearance

Headings

Size

REM

Line height

Appearance

Name

61.04px

3.815rem

1.17-

H1

48.83px

3.052rem

1.225-

H2

39.06px

2.441rem

1.953rem

The quick brown fox jumps over the lazy dog.

1.28-

H3

The quick brown fox jumps over the lazy dog.

1.563rem

1.250rem

1.000rem

0.800rem

The quick brown fox jumps over the lazy dog.

31.25px

25.00px

20.00px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

1.953rem

1.563rem

1.250rem

1.335-

1.39-

1.445-

H4

H5

H6

Space after

2.441rem

Paragraph

Size

REM

Line height

Name

16px

16px

1.250rem

1.445-

0.800rem

paragraph-large

1.000rem

1.5-

paragraph

0.640rem

Space after

18px

0.800rem

1.555-

paragraph-small

0.512rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

Appearance

Color

Primitives

Purple

100

Hex: #E3D5FE

200

Hex: #E3D5FE

300

Hex: #E3D5FE

400

Hex: #E3D5FE

500

Hex: #E3D5FE

600

Hex: #E3D5FE

700

Hex: #E3D5FE

800

Hex: #E3D5FE

900

Hex: #E3D5FE

1000

Hex: #E3D5FE

1100

Hex: #E3D5FE

Green

100

Hex: #E3D5FE

200

Hex: #E3D5FE

300

Hex: #E3D5FE

400

Hex: #E3D5FE

500

Hex: #E3D5FE

600

Hex: #E3D5FE

700

Hex: #E3D5FE

800

Hex: #E3D5FE

900

Hex: #E3D5FE

1000

Hex: #E3D5FE

1100

Hex: #E3D5FE

Neutrals

100

Hex: #E3D5FE

200

Hex: #E3D5FE

300

Hex: #E3D5FE

400

Hex: #E3D5FE

500

Hex: #E3D5FE

600

Hex: #E3D5FE

700

Hex: #E3D5FE

800

Hex: #E3D5FE

900

Hex: #E3D5FE

1000

Hex: #E3D5FE

1100

Hex: #E3D5FE

Styled

Primary

Primary

Hex: #E3D5FE

On-Primary

Hex: #E3D5FE

On-Primary-variant

Hex: #E3D5FE

Secondary

Secondary

Hex: #E3D5FE

On-Secondary

Hex: #E3D5FE

On-Secondary-variant

Hex: #E3D5FE

Surface

Surface

Hex: #E3D5FE

On-Surface

Hex: #E3D5FE

On-Surface-variant

Hex: #E3D5FE

Outline

Surface

Hex: #E3D5FE

On-Surface

Hex: #E3D5FE

Surface container

Surface

Hex: #E3D5FE

On-Surface

Hex: #E3D5FE

On-Surface

Hex: #E3D5FE

On-Surface

Hex: #E3D5FE

On-Surface

Hex: #E3D5FE

Spacing

16px

24px

32px

40px

48px

56px