Header Font

Hello Headline

Characters

A B C D E F G H I J
K L M N O P Q R S T
U V W X Y Z

1234567890 !@#$%^&*()_+ -=[]\;',./{}|: "<>?`~

The quick brown fox jumps over the lazy dog.

THE QUICK BROWN FOX JUMPS OVER THE LAZY

              font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);

Body Font

Cera Round Pro

Characters - Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz

1234567890 !@#$%^&*()_+ -=[]\;',./{}|: "<>?`~

The quick brown fox jumps over the lazy dog.

THE QUICK BROWN FOX JUMPS OVER THE LAZY

              font-family: var(--font-body-family);
font-weight: var(--font-body-weight);

Characters - Medium

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz

1234567890 !@#$%^&*()_+ -=[]\;',./{}|: "<>?`~

The quick brown fox jumps over the lazy dog.

THE QUICK BROWN FOX JUMPS OVER THE LAZY

              font-family: var(--font-body-family);
font-weight: var(--font-body-weight-medium);

Characters - Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz

1234567890 !@#$%^&*()_+ -=[]\;',./{}|: "<>?`~

The quick brown fox jumps over the lazy dog.

THE QUICK BROWN FOX JUMPS OVER THE LAZY

              font-family: var(--font-body-family);
font-weight: var(--font-body-weight);

Doodle Font

Palmer Lake Print

Characters

ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ,.?!

              font-family: var(--font-doodle-family);

Typescale

Titles

H1 Title

H2 Title

H3 Title

H4 Title

Typescale

Body 1

Metus class orci quisque lobortis nunc sodales hac, conubia velit lorem enim est at nisl, litora cubilia auctor proin potenti vivamus commodo, dignissim natoque torquent tincidunt euismod quam. Ac lacus curae dignissim congue praesent eu fermentum, egestas laoreet sapien gravida vehicula ultrices magna lectus, luctus imperdiet nam id adipiscing purus.

Typescale

Body 2

Metus class orci quisque lobortis nunc sodales hac, conubia velit lorem enim est at nisl, litora cubilia auctor proin potenti vivamus commodo, dignissim natoque torquent tincidunt euismod quam. Ac lacus curae dignissim congue praesent eu fermentum, egestas laoreet sapien gravida vehicula ultrices magna lectus, luctus imperdiet nam id adipiscing purus.

Captions

Metus class orci quisque lobortis nunc sodales hac.

            .caption .caption__reg
.caption .caption__med
.caption__tiny

Type Styles

Basic Font styles

Strong
Emphasis
Inline link
~~Strike~~
^Sup

                Strong
                Emphasis
                Inline link
                Strike
                ^Sup

Colours

Brand Colours

Primary colours

                --color-yamo-mint: #48D597;
--color-yamo-mint-70: #82E2B6;
--color-yamo-alt: #CAF3E1
--color-yamo-gray: #464646;
--color-yamo-white: #ffffff;
--color-yamo-black: #000000;

Secondary colours

                --color-yamo-lemon: #FFD700;
--color-yamo-yellow: #FFC700;
--color-yamo-yellow-70: #FFD84D;
--color-yamo-carrot: #FF8200;
--color-yamo-cherry: #EB3300;
--color-yamo-soft-pink: #FFA7B2;
--color-yamo-berry: #EC86D0;
--color-yamo-blueberry: #A77BCA;
--color-yamo-blueberry-alt: #935CBF;
--color-yamo-pea: #30B700;
--color-yamo-pea-80: #59C533;
--color-yamo-sky: #00A9CE;
--color-yamo-sky-80: #5FCCDD;
--color-yamo-overlay-40: #464646;
--color-yamo-light-gray: #DEDEDE;
--color-yamo-dark-gray: #9F9E9F;
--color-yamo-light-blue: #F4F6FC;

Components

Buttons

Standard Buttons

Primary Button

<a href="#" class="button button__primary">Button</a>

Secondary Button

<a href="#" class="button button__secondary">Button</a>

Edit

<a href="#" class="button button__edit">Button</a>

Primary Yellow

<a href="#" class="button button__yellow">Button</a>

Primary Gray

<a href="#" class="button button__gray">Button</a>

Primary Black

<a href="#" class="button button__black">Button</a>

Quiz button

<a href="#" class="button button__quiz">Button</a>

<a class="button button__primary" disabled>Button</a>

<button class="button button__primary button__small">Button</button>

Link Underline

                Link Underline

Secondary Underline

                Secondary Underline

Components

Links

Navigation Links

              <li class="navLink">
  <a href="#">Link</a>
</li>
<li class="navLink">
  <a class="active" href="#">Link</a>
</li>
<li class="navLink navLink__dropdown">
  <a href="#">Dropdown</a>
</li>
<li class="navLink navLink__dropdown navLink__dropdown-open">
  <a href="#">Dropdown</a>
</li>

Short Links

Link Link

Components

Logos

Yamo

{% render 'logo', type: "yamo" %}

Retail Logos

{% render 'logo', type: "alcampo" %}

{% render 'logo', type: "corteIngles" %}

{% render 'logo', type: "dhl" %}

Components

Stickers

Standard Stickers

3+Jahre

<div class="sticker sticker__primary">
  <span>3+</span>
  <span>Jahre</span>
</div>

Components

Flags

Square

                {%- render 'flags', type: "square", flag: "swiss" -%}
{%- render 'flags', type: "square", flag: "austria" -%}
{%- render 'flags', type: "square", flag: "germany" -%}
{%- render 'flags', type: "square", flag: "spain" -%}

Circle

                {%- render 'flags', type: "circle", flag: "swiss" -%}
{%- render 'flags', type: "circle", flag: "austria" -%}
{%- render 'flags', type: "circle", flag: "germany" -%}
{%- render 'flags', type: "circle", flag: "spain" -%}

Components

Payment Methods

Icons

              {% render 'payments', type: "mastercard" %}
{% render 'payments', type: "visa" %}
{% render 'payments', type: "amex" %}
{% render 'payments', type: "twint" %}
{% render 'payments', type: "paypal" %}
{% render 'payments', type: "apple" %}
{% render 'payments', type: "klarna" %}
{% render 'payments', type: "invoicefr" %}
{% render 'payments', type: "invoicede" %}
{% render 'payments', type: "invoiceen" %}

Components

Icons

Checkout Icons

              {% render 'icon', type: "produkt" %}
{% render 'icon', type: "support" %}
{% render 'icon', type: "loyalty" %}
{% render 'icon', type: "orders" %}
{% render 'icon', type: "payment" %}
{% render 'icon', type: "profile" %}
{% render 'icon', type: "logout" %}

Secondary Icons

              {% render 'icon', type: "seedling" %}
{% render 'icon', type: "sustain" %}
{% render 'icon', type: "globe" %}

USPs

              {% render 'icon', type: "usp--Bio" %}
{% render 'icon', type: "usp--Sattigend" %}
{% render 'icon', type: "usp--NutriscoreA" %}
{% render 'icon', type: "usp--6hUngekuhltHaltbar" %}
{% render 'icon', type: "usp--NoSugar" %}
{% render 'icon', type: "usp--ColdPressed" %}
{% render 'icon', type: "usp--OhneKonzentrat" %}
{% render 'icon', type: "usp--100Pflanzenbasiert" %}

Components

Shapes

Secondary Icons

              
{% render 'shape', 
   type: "wave", 
   bg: 'var(--color-yamo-light-blue)'
%}

{% render 'shape', 
   type: "squiggle", 
   bg: 'var(--color-yamo-mint)'
%}

Automatically changes to mobile shape.

Doodles

Primary

Sunglases

Star

Mustage

Crocodile

Hat

Board

Lips

Glases

Crown

Hand

Microphone

Rocket

Sustainability

Empty Cart

Arrow

                {% render "doodles", type: "lemon,sunglases" %}
{% render "doodles", type: "sky,star" %}
{% render "doodles", type: "carrot,mustage" %}
{% render "doodles", type: "mint,crocodile" %}
{% render "doodles", type: "cherry,hat" %}
{% render "doodles", type: "soft-pink,board" %}
{% render "doodles", type: "berry,lips" %}
{% render "doodles", type: "blueberry,glases" %}
{% render "doodles", type: "pea,crown" %}
{% render "doodles", type: "mint,hand" %}
{% render "doodles", type: "lemon,microphone" %}
{% render "doodles", type: "carrot,rocket" %}
{% render "doodles", type: "sky,sustainability" %}
{% render "doodles", type: "berry,emptyCart" %}
{% render "doodles", type: "soft-pink,arrow" %}

Form Styles

Text inputs

Inputs

Field label

Field label with icon

E-Mail Field error message

Telefonnummer

Field label

Textareas

Kommentar

Notifications

Success message

Error message

Radio Buttons

Radio

Selected

Checkbox

Disabled

Checkboxes

Checkbox Field

Disabled Checkbox Field

File Field

Inline Form

Subscription Form

Grid Form

Lists

Unordered, Ordered, and Child lists

Standard Lists

UL (default)

One
Two
Three
Four

Numeric bullet OL

One
Two
Three
Four

Child lists

One
Two
Three, with child list
- First sub item
- Second sub item
- Third sub item, with child list
  - Third level item
  - Another third level item
Four

Link Items

Link List Items

Parent Item

What's new
Skincare
Makeup
Hair
Body
Wellness
Brands
Community
About Us

                
                  What's new
                  Skincare
                  Makeup
                  Hair
                  Body
                  Wellness
                  Brands
                  Community
                  About Us

Child Item

What's new
Skincare
Makeup
Hair
Body
Wellness
Brands
Community
About Us

                
                  What's new
                  Skincare
                  Makeup
                  Hair
                  Body
                  Wellness
                  Brands
                  Community
                  About Us

Modal

Signup Modal

Tables

Responsive Tables

Order	Date	Payment Status	Fulfillment Status	Total
#1001	December 22, 2015	Authorized	Unfulfilled	$43.03
#1002	December 23, 2015	Authorized	Unfulfilled	$44.03
#1003	December 24, 2015	Authorized	Unfulfilled	$45.03
#1004	December 25, 2015	Authorized	Unfulfilled	$46.03
#1005	December 26, 2015	Authorized	Unfulfilled	$47.03
#1006	December 27, 2015	Authorized	Unfulfilled	$48.03

Styles

Hello Headline

Cera Round Pro

Palmer Lake Print

Titles

H1 Title

H2 Title

H3 Title

H4 Title

Body 1

Body 2

Brand Colours

Mint

Mint (70)

Mint Alt

Gray

White

Black

Lemon

Yellow

Yellow (70)

Carrot

Cherry

Soft Pink

Berry

Blueberry

Blueberry (Alt)

Pea

Pea (80)

Sky

Sky (80)

Overlay (40)

Light Gray

Dark Gray

Light Blue

Buttons

Links

Logos

Stickers

Flags

Payment Methods

Icons

Shapes

Doodles

Text inputs

Subscription Form

Unordered, Ordered, and Child lists

UL (default)

Numeric bullet OL

Child lists

Link List Items

Signup Modal

Responsive Tables

Hast du Fragen?

Appetit auf mehr?