Style Guide

Colors

text colors

Black
#000000
For Primary Text
Class: '.text/bg-black'
Charcoal
#444444
For Secondary Text
Class: '.text/bg-charcoal'
Grey
#707070
For Disabled Text
Class: '.text/bg-grey-2'
White
#FFFFFF
For Primary Text (on dark backgrounds)
Class: '.text/bg-white'

colors

Pantone 2253U
#D2F8CA
Class: '.text/bg-pantone-1'
Pantone 366U
#A1D67A
Class: '.text/bg-pantone-2'
Pantone 577U
#93B479
Class: '.text/bg-pantone-3'
Pantone 2406U
#89A190
Class: '.text/bg-pantone-4'
Pantone 3536U
#00875F
Class: '.text/bg-pantone-5'
Pantone 7480U
#00C281
Class: '.text/bg-pantone-6'
Pantone 5595U
#D1DDCD
Class: '.text/bg-pantone-7'

UI Greyscale

Black
#000000
Class: '.text/bg-black'
Grey 1
#404040
Class: '.text/bg-grey-1'
Grey 2
#707070
Class: '.text/bg-grey-2'
Grey 3
#AEAEAE
Class: '.text/bg-grey-3'
Grey 4
#DDDDDD
Class: '.text/bg-grey-4'
White
#FFFFFF
Class: '.text/bg-white'

Rules

Black
#000000
Classes: '.border.border-black'
Dark Grey
#AEAEAE
Classes: '.border.border-grey-3'
Grey
#DDDDDD
Classes: '.border.border-grey-4'
White
#FFFFFF
Classes: '.border.border-white'

opacity

10% #000000
Class: '.opacity-10'
25% #000000
Class: '.opacity-25'
60% #000000
Class: '.opacity-60'

Fonts

Desktop

Mobile

H1 Headline - 65px

Lorem ipsum dolor sit amet

Class: '.h1'

Cardinal Fruit

Sentence Case

Example Size: 64px

Line Spacing : 72px

Letter spacing: -0.6px

H1 Headline - 32px

Lorem ipsum dolor sit amet

Class: '.h1'

Cardinal Fruit

Sentence Case

Example Size: 32px

Line Spacing : 38px

Letter spacing: -0.6px

H2 Headline - 32px

Lorem ipsum dolor sit amet

Class: '.h2'

Cardinal Fruit

Sentence Case

Example Size: 34px

Line Spacing : 51px

Letter spacing: 0%

H2 Headline - 24px

Lorem ipsum dolor sit amet

Class: '.h2'

Cardinal Fruit

Sentence Case

Example Size: 24px

Line Spacing : 41px

Letter spacing: 0%

Headline 1 - 32px

Lorem ipsum dolor sit amet

Class: '.headline-1'

Cardinal Fruit

Sentence Case

Example Size: 32px

Line Spacing : 38px

Letter spacing: 0%

Headline 1 - 24px

Lorem ipsum dolor sit amet

Class: '.headline-1'

Cardinal Fruit

Sentence Case

Example Size: 24px

Line Spacing : 32px

Letter spacing: 0%

Headline 2 - 32px

Lorem ipsum dolor sit amet

Class: '.headline-2'

Founders Grotesk

Sentence Case

Example Size: 32px

Line Spacing : 38px

Letter spacing: 0%

Headline 2 - 32px

Lorem ipsum dolor sit amet

Class: '.headline-2'

Founders Grotesk

Sentence Case

Example Size: 32px

Line Spacing : 38px

Letter spacing: 0%

Headline 3 - 24px

Lorem ipsum dolor sit amet

Class: '.headline-3'

Cardinal Fruit

Sentence Case

Example Size: 24px

Line Spacing : 30px

Letter spacing: 0%

Headline 3 - 24px

Lorem ipsum dolor sit amet

Class: '.headline-3'

Cardinal Fruit

Sentence Case

Example Size: 24px

Line Spacing : 30px

Letter spacing: 0%

Body - 22px

Lorem ipsum dolor sit amet

Class: '.text-body'

Founders Grotesk

Sentence Case

Example Size: 22px

Line Spacing : 28px

Letter spacing: 0.25px

Body - 22px

Lorem ipsum dolor sit amet

Class: '.text-body'

Founders Grotesk

Sentence Case

Example Size: 22px

Line Spacing : 28px

Letter spacing: 0.25px

Body2 - 16px

Lorem ipsum dolor sit amet

Class: '.text-body-2'

Founders Grotesk

Sentence Case

Regular

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0px

Body2 - 16px

Lorem ipsum dolor sit amet

Class: '.text-body-2'

Founders Grotesk

Sentence Case

Regular

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0px

Body Light - 16px

Lorem ipsum dolor sit amet

Class: '.text-body-light'

Founders Grotesk

Sentence Case

Light

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0px

Body Light - 16px

Lorem ipsum dolor sit amet

Class: '.text-body-light'

Founders Grotesk

Sentence Case

Light

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0px

Body3 - 14px

Lorem ipsum dolor sit amet

Class: '.text-body-3'

Founders Grotesk

Sentence Case

Normal

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0px

Body3 - 14px

Lorem ipsum dolor sit amet

Class: '.text-body-3'

Founders Grotesk

Sentence Case

Normal

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0.25px

Body Light2 - 14px

Lorem ipsum dolor sit amet

Class: '.text-body-light-2'

Founders Grotesk

Sentence Case

Light

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0px

Body Light2 - 14px

Lorem ipsum dolor sit amet

Class: '.text-body-light-2'

Founders Grotesk

Sentence Case

Light

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0px

Product Tag - 15px

Lorem ipsum dolor sit amet

Class: '.text-product-tag'

Founders Grotesk

Sentence Case

Example Size: 14px

Line Spacing : 18px

Letter spacing: 0.8px

Product Tag - 15px

Lorem ipsum dolor sit amet

Class: '.text-product-tag'

Founders Grotesk

Sentence Case

Example Size: 14px

Line Spacing : 18px

Letter spacing: 0.8px

Headline Tag - 15px

Lorem ipsum dolor sit amet

Class: '.text-headline-tag'

Founders Grotesk

Sentence Case

Medium

Example Size: 14px

Line Spacing : 18px

Letter spacing: 0.8px

Headline Tag - 15px

Lorem ipsum dolor sit amet

Class: '.text-headline-tag'

Founders Grotesk

Sentence Case

Medium

Example Size: 14px

Line Spacing : 18px

Letter spacing: 0.8px

CTA - 15px

Lorem ipsum dolor sit amet

Class: '.text-cta'

Founders Grotesk

Sentence Case

Medium

Example Size: 15px

Line Spacing : 23px

Letter spacing: 1.5px

CTA - 15px

Lorem ipsum dolor sit amet

Class: '.text-cta'

Founders Grotesk

Sentence Case

Medium

Example Size: 15px

Line Spacing : 23px

Letter spacing: 1.5px

Text link - 16px

Lorem ipsum dolor sit amet

Class: '.text-link'

Founders Grotesk

Sentence Case

Normal

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0px

Text link - 16px

Lorem ipsum dolor sit amet

Class: '.text-link'

Founders Grotesk

Sentence Case

Normal

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0.25px

Text link - 14px

Lorem ipsum dolor sit amet

Class: '.text-link-2'

Founders Grotesk

Sentence Case

Normal

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0.25px

Text link - 14px

Lorem ipsum dolor sit amet

Class: '.text-link-2'

Founders Grotesk

Sentence Case

Normal

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0.25px

Text link Light - 16px

Lorem ipsum dolor sit amet

Class: '.text-link-light'

Founders Grotesk

Sentence Case

Light

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0.25px

Text link Light - 16px

Lorem ipsum dolor sit amet

Class: '.text-link-light'

Founders Grotesk

Sentence Case

Light

Example Size: 16px

Line Spacing : 24px

Letter spacing: 0.25px

Text link Light - 14px

Lorem ipsum dolor sit amet

Class: '.text-link-light-2'

Founders Grotesk

Sentence Case

Light

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0.25px

Text link Light - 14px

Lorem ipsum dolor sit amet

Class: '.text-link-light-2'

Founders Grotesk

Sentence Case

Light

Example Size: 14px

Line Spacing : 20px

Letter spacing: 0.25px

Title 1 - 16px

Lorem ipsum dolor sit amet

Class: '.title-1'

Founders Grotesk

All Caps

Normal

Example Size: 16px

Line Spacing : 20px

Letter spacing: 0px

Title 1 - 14px

Lorem ipsum dolor sit amet

Class: '.title-1'

Founders Grotesk

All Caps

Normal

Example Size: 14px

Line Spacing : 16px

Letter spacing: 0px

Title 2 - 16px

Lorem ipsum dolor sit amet

Class: '.title-2'

Founders Grotesk

Sentence Case

Medium

Example Size: 16px

Line Spacing : 20px

Letter spacing: 0px

Title 2 - 16px

Lorem ipsum dolor sit amet

Class: '.title-2'

Founders Grotesk

Sentence Case

Medium

Example Size: 16px

Line Spacing : 20px

Letter spacing: 0px

Title 3 - 16px

Lorem ipsum dolor sit amet

Class: '.title-3'

Founders Grotesk

Sentence Case

Regular

Example Size: 16px

Line Spacing : 20px

Letter spacing: 0px

Title 3 - 16px

Lorem ipsum dolor sit amet

Class: '.title-3'

Founders Grotesk

Sentence Case

Regular

Example Size: 16px

Line Spacing : 20px

Letter spacing: 0px

Title 4 - 14px

Lorem ipsum dolor sit amet

Class: '.title-4'

Founders Grotesk

Sentence Case

Medium

Example Size: 14px

Line Spacing : 18px

Letter spacing: 0px

Title 4 - 14px

Lorem ipsum dolor sit amet

Class: '.title-4'

Founders Grotesk

Sentence Case

Medium

Example Size: 14px

Line Spacing : 18px

Letter spacing: 0px

Buttons

Classes: '.button.button--primary'

Classes: '.button.button--secondary'

Classes: '.button.button--tertiary'

Button style if it has the "disabled" attribute

Classes: '.button.button--primary.w-full' if you need the full width button, or limit to a certain size .w-[...px]

Icons

wrap the icon by element with class '.text-[color]' to add/change the icon color

{{ render 'icon-error' }}

{{ render 'icon-pause' }}

{{ render 'icon-play' }}

{{ render 'icon-sound-off' }}

{{ render 'icon-sound-on' }}

{{ render 'icon-success' }}

{{ render 'icon-swiper-button' }}

under development, not yet completed...