Typography

Heading Typeface

Onest

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*()

Body Typeface

Rubik

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*()

Desktop

Mobile

Font size: 72px / 4.5rem | Line height: 120%

Heading 1

Font size: 44px / 2.75rem | Line height: 120%

Heading 1

Font size: 52px / 3.25rem | Line height: 120%

Heading 2

Font size: 40px / 2.5rem | Line height: 120%

Heading 2

Font size: 44px / 2.75rem | Line height: 120%

Heading 3

Font size: 32px / 2rem | Line height: 120%

Heading 3

Font size: 36px / 2.25rem | Line height: 140%

Heading 4

Font size: 24px / 1.5rem | Line height: 140%

Heading 4

Font size: 28px / 1.75rem | Line height: 140%

Heading 5

Font size: 20px / 1.25rem | Line height: 140%

Heading 5

Font size: 22px / 1.375rem | Line height: 140%

Heading 6

Font size: 18px / 1.125rem | Line height: 140%

Heading 6

Font size: 16px / 1rem | Line height: 150%

Tagline

Font size: 22px / 1.375rem Line height: 160%

Text large Extra bold

Text large Bold

Text large Semi bold

Text large Medium

Text large Normal

Text large Light

Font size: 18px / 1.125rem Line height: 160%

Text medium Extra bold

Text medium Bold

Text medium Semi Bold

Text medium Medium

Text medium Normal

Text medium Light

Font size: 16px / 1rem Line height: 160%

Text regular Extra bold

Text regular Bold

Text regular Semi Bold

Text regular Medium

Text regular Normal

Text regular Light

Font size: 14px / 0.875rem Line height: 160%

Text small Extra bold

Text small Bold

Text small Semi Bold

Text small Medium

Text small Normal

Text small Light

Font size: 12px / 0.75rem Line height: 160%

Text tiny Extra bold

Text tiny Bold

Text tiny Semi Bold

Text tiny Medium

Text tiny Normal

Text tiny Light

Color

Primitive Variables

Primitive colors are the foundational building blocks of a design system's color palette. They serve as the base for more specific design decisions.

Neutrals

Stylized droplet shape, representing a liquid or fluid element.

Neutral White

#FFFFFF

Stylized droplet shape, representing a liquid or fluid element.

Neutral Lightest

#F2F2F2

Stylized droplet shape, representing a liquid or fluid element.

Neutral Lighter

#D9D9D8

Stylized droplet shape, representing a liquid or fluid element.

Neutral Light

#B3B4B2

Stylized droplet shape, representing a liquid or fluid element.

Neutral

#808380

Stylized droplet shape, representing a liquid or fluid element.

Neutral Dark

#4D514D

Stylized droplet shape, representing a liquid or fluid element.

Neutral Darker

#1B1F1A

Stylized droplet shape, representing a liquid or fluid element.

Neutral Darkest

#020701

Verdun Green

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green Lightest

#E8EEE5

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green Lighter

#D2DDCC

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green Light

#63884C

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green

#215500

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green Dark

#1A4400

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green Darker

#0D2200

Stylized droplet shape, representing a liquid or fluid element.

Verdun Green Darkest

#091900

Conifer

Stylized droplet shape, representing a liquid or fluid element.

Conifer Lightest

#F3FBED

Stylized droplet shape, representing a liquid or fluid element.

Conifer Lighter

#E7F8DC

Stylized droplet shape, representing a liquid or fluid element.

Conifer Light

#ACE785

Stylized droplet shape, representing a liquid or fluid element.

Conifer

#89DD52

Stylized droplet shape, representing a liquid or fluid element.

Conifer Dark

#6DB041

Stylized droplet shape, representing a liquid or fluid element.

Conifer Darker

#365820

Stylized droplet shape, representing a liquid or fluid element.

Conifer Darkest

#294218

La Palma

Stylized droplet shape, representing a liquid or fluid element.

La Palma Lightest

#EAF3E8

Stylized droplet shape, representing a liquid or fluid element.

La Palma Lighter

#D5E8D1

Stylized droplet shape, representing a liquid or fluid element.

La Palma Light

#6EAF60

Stylized droplet shape, representing a liquid or fluid element.

La Palma

#318E1D

Stylized droplet shape, representing a liquid or fluid element.

La Palma Dark

#277117

Stylized droplet shape, representing a liquid or fluid element.

La Palma Darker

#13380B

Stylized droplet shape, representing a liquid or fluid element.

La Palma Darkest

#0E2A08

Color Schemes

Easily manage colors of your website with global color schemes—use variables to quickly style sections.

Color Scheme 1

Product demonstration showing color scheme preview

Color Scheme 2

Stylized droplet shape, representing a liquid or fluid element.

Text

Aa

Color/Neutral Darkest

Stylized droplet shape, representing a liquid or fluid element.

Background

Color/Verdun Green Lightest

Stylized droplet shape, representing a liquid or fluid element.

Foreground

Color/Verdun Green Lighter

Stylized droplet shape, representing a liquid or fluid element.

Border

Opacity/Neutral Darkest 15

Stylized droplet shape, representing a liquid or fluid element.

Accent

Color/Verdun Green

Scheme preview

Accent color

Foreground color