Headlines

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

h1 class: "h3 icon-user headline-with-icon"

h2 class:"h6 icon-headline icon-users"

h1 class:"headline-product-name-pdp"

class:"headline-product-name"

h1 class:"h5 head-line"

Font family and fontSizes

Pangea regular

Extra small 12px

Small 14px

Lead paragraph 16px

Extra Large 20px

Pangea medium

Extra small 12px

Small 14px

Lead paragraph 16px

Extra Large 20px

Pangea bold

Extra small 12px

Small 14px

Lead paragraph 16px

Extra Large 20px

Textauszeichnung

class="font-bold"

small tag

class="text-light"

Text justify centered
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

TEST for ingredientslisting
Molkeneiweißkonzentrat Instant (enthält EmulgatorSonnenblumenlecithin (70%), Molkeneiweißisolat Instant (enthält Emulgator Sojalecithin) (30%)

Colors

Main colors

Invision overview

@brand-main: Kale
@dark-grey: Black Chia
@grey: Grey Dark 1
@middle-grey: Grey Medium 1
@bright-grey: White Chia
@brand-danger: Cherry main
@brand-info: Tangerine Main
@forFree: Cherry Light 1

OLD

@brand-main: #70b62f;

@brand-main-darken: #659d2b;

@lighter-green: #bee890;

NEW

@brand-main:
#388071
White copy

@brand-main-darken:
#4d9d70
White copy

@brand-main-light:
#39ada2
White copy

@brand-main-light-2:
#6fcac1
White copy

OLD

@dark-grey: #3c3c3e;

@grey: #a3a3a3;

@middle-grey: #e2e2e2;

@bright-grey: #f6f6f6;

NEW

@dark-grey:
#2e2f2f

@middle-grey:
#9C9C9B

@light-grey
#C3C3C2

@bright-grey:
#f4f4f2

OLD

@brand-danger: #d73228;

@forFree: #c73a51;

@brand-info: #ffc438;

NEW

@brand-danger:
#dd1200;
White copy

@brand-info:
#ff9859
White copy

@brand-main:
#388071
White copy

@brand-main-darken:
#4d9d70
White copy

@brand-main-light:
#39ada2
White copy

@brand-main-light-2:
#6fcac1
White copy

@brand-accent:
#ff9859
White copy

@brand-accent-darken:
#cc7a47
White copy

@brand-accent-light:
#ffad7a
White copy

@brand-accent-light-2:
#fec5a3
White copy

@brand-secondary-success:
#a3e4c0
White copy

@brand-secondary-warning:
#fef87b
White copy

WIP
@brand-danger:
#dd1200;
White copy

WIP
@forFree:
#ff6254
White copy

@brand-info:
#ff9859
White copy

@dark-grey:
#2e2f2f

@gray:
#646463

@gray-2:
#50504f

@middle-grey
#9c9c9b

@middle-grey-2
#7d7d7c;/p>

@bright-grey:
#f4f4f2

Taste colors

@appleCinnamon:
#c27854;

@wildberries:
#c73a51;

@vanilla:
#fcf29b;

@choco:
#795d46;

Badge colors

@buddy-yellow:
#eadb86;

@buddy-green:
#7cc98c;

@buddy-beige:
#f1c69b;

@buddy-pink:
#cf5c69;

@olive:
#9bb333;

@blue:
#9bb333;

@golden:
#9bb333;

Buttons

Button primary

Button

Button secondary

Button

Button secondary-light

Button

Button Tertiary

Button

Grid

c-1

col-2

col-3

col-4

col-6

col-12

CMS content

row with class "roc": reduced grid for "coach"

roc class roc

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.