Favicon

> WIDTH × HEIGHT

Gridstyle

container width:

#WIDTH

+ gutter width

Fontstyle

body bg color: #BODY-BACKGROUND font color: #COLOR

Titel

H1 - FONT FAMILY FONT-SIZE STYLE #COLOR line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

H2 - FONT FAMILY FONT-SIZE STYLE #COLOR line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

H3 - FONT FAMILY FONT-SIZE STYLE #COLOR line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

H4 - FONT FAMILY FONT-SIZE STYLE #COLOR line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

H5 - FONT FAMILY FONT-SIZE STYLE #COLOR line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

H6 - FONT FAMILY FONT-SIZE STYLE #COLOR line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

Fonts

FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT margin-bottom: MARGIN-BOTTOM

Font <b>, <strong>

FONT FAMILY STYLE

Link text

a. #COLOR > a. #COLOR

Lists

FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR
list item second line
- FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR
FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR

FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR
list item second line
1. FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR
FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR

Special fonts

Lead text FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR

SEO Text FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR

Footer und Checkout FONT FAMILY STYLE FONT-SIZE DESKTOP line-height: LINE HEIGHT #COLOR

Colors

Bootstrap colors

primary BACKGROUND-COLOR

secondary BACKGROUND-COLOR

success BACKGROUND-COLOR

danger BACKGROUND-COLOR

warning BACKGROUND-COLOR

info BACKGROUND-COLOR

light BACKGROUND-COLOR

dark BACKGROUND-COLOR

gray-100 BACKGROUND-COLOR

gray-200 BACKGROUND-COLOR

gray-300 BACKGROUND-COLOR

gray-400 BACKGROUND-COLOR

gray-500 BACKGROUND-COLOR

gray-600 BACKGROUND-COLOR

gray-700 BACKGROUND-COLOR

gray-800 BACKGROUND-COLOR

gray-900 BACKGROUND-COLOR

Suxesiv colors

white BACKGROUND-COLOR

black BACKGROUND-COLOR

tertiary BACKGROUND-COLOR

fourth BACKGROUND-COLOR

fifth BACKGROUND-COLOR

primary-hover BACKGROUND-COLOR

secondary-hover BACKGROUND-COLOR

tertiary-hover BACKGROUND-COLOR

fourth-hover BACKGROUND-COLOR

fifth-hover BACKGROUND-COLOR

Buttons

Standard Button

Standard normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Standard hover

Background: #BG COLOR

Standard small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

primary Button

Primary normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Primary hover

Background: #BG COLOR

Primary small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

secondary Button

Secondary normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Secondary hover

Background: #BG COLOR

Secondary small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

tertiary Button

Tertiary normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Tertiary hover

Background: #BG COLOR

Tertiary small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

fourth Button

Fourth normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Fourth hover

Background: #BG COLOR

Fourth small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

fifth Button

Fifth normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Fifth hover

Background: #BG COLOR

Fifth small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

success Button

Success normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Success hover

Background: #BG COLOR

Success small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

warning Button

Warning normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Warning hover

Background: #BG COLOR

Warning small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

danger Button

Danger normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Danger hover

Background: #BG COLOR

Danger small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

info Button

Info normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Info hover

Background: #BG COLOR

Info small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

disabled Button

Disabled normal

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Disabled hover

Background: #BG COLOR

Disabled small

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Background: #BG COLOR

Background: #BG COLOR
font-size: FONT-SIZE , FONT WEIGHT
min-width: MIN_WIDTH
height: HEIGHT
border-radius: BORDER-RADIUS

Notifications/Alerts Standard-Template (based on Bootstrap)

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Images

No picture (Placeholder)

Icons

normal

hover

active

active hover

Spacings

Spacing 1:


                                                    
                                                        SPACING

Spacing 2:


                                                    
                                                        SPACING

Spacing 3:


                                                    
                                                        SPACING

Spacing 4:


                                                    
                                                        SPACING

Spacing 5:


                                                    
                                                        SPACING

Spacing 6:


                                                    
                                                        SPACING