Style Guide

Color Palette

Primary
#82BC01
color-primary-0
#BAED47
color-primary-1
#A5E615
color-primary-2
#6A9A00
color-primary-3
#4F7200
color-primary-4
Secondary 1
#10A401
color-secondary-1-0
#4CCF3E
color-secondary-1-1
#23C912
color-secondary-1-2
#0D8600
color-secondary-1-3
#096400
color-secondary-1-4
Secondary 2
#C5010B
color-secondary-2-0
#F94B53
color-secondary-2-1
#F11621
color-secondary-2-2
#A10008
color-secondary-2-3
#780006
color-secondary-2-4
Complement
#9E0160
color-complement-0
#C73C90
color-complement-1
#C1117C
color-complement-2
#81004E
color-complement-3
#60003A
color-complement-4

Formate anwenden

CSS Klasse color-primary-0 (Fonts) bzw. background-color-primary-0 (Flächen)

Zuweisen über class=»color-primary-0″ oder direkt style=»background-color: #4F7200; color: #BAED47;»

Fonts

Heading 1

In hac habitasse platea dictumst. Duis consectetur nunc magna, eget tincidunt purus mattis nec. Proin at ante accumsan, porta lorem nec, viverra mauris. Praesent egestas, felis ac tempor blandit, nulla lacus aliquet ex, non ornare odio justo vitae ligula. Aenean congue quam id quam volutpat eleifend. Ut tincidunt lorem nulla, in feugiat dui finibus id. Curabitur et ullamcorper erat.

Vivamus ut aliquam justo, non maximus ligula. Pellentesque eleifend, elit a pharetra dignissim, ipsum odio tempus turpis, et vestibulum urna dui scelerisque elit. Donec nec arcu vel orci mattis ullamcorper ac ac eros. Vestibulum eget massa congue, euismod tortor sit amet, porta lectus. Ut aliquam auctor libero ac laoreet. Donec viverra massa tellus, sit amet blandit nisi dictum id. Donec ut enim rhoncus, ultrices leo sit amet, gravida quam. 

Heading 2

In hac habitasse platea dictumst. Duis consectetur nunc magna, eget tincidunt purus mattis nec. 
Proin at ante accumsan, porta lorem nec, viverra mauris. 

Praesent egestas, felis ac tempor blandit, nulla lacus aliquet ex, non ornare odio justo vitae ligula. 

Aenean congue quam id quam volutpat eleifend. Ut tincidunt lorem nulla, in feugiat dui finibus id.

Heading 3

  • In hac habitasse platea dictumst.
  • Duis consectetur nunc magna.
  • Eeget tincidunt purus mattis nec.
  • Proin at ante accumsan.
  • Porta lorem nec, viverra mauris.
  • Praesent egestas, felis ac tempor.
  • Blandit, nulla lacus aliquet ex.
  • Non ornare odio justo vitae ligula.

Heading 4

  1. In hac habitasse platea dictumst.
  2. Duis consectetur nunc magna.
  3. Eeget tincidunt purus mattis nec.
  4. Proin at ante accumsan.
  5. Porta lorem nec, viverra mauris.
  6. Praesent egestas, felis ac tempor.
  7. Blandit, nulla lacus aliquet ex.
  8. Non ornare odio justo vitae ligula.
Heading 5
  • In hac habitasse platea dictumst.
  • Duis consectetur nunc magna.
  • Eeget tincidunt purus mattis nec.
  • Proin at ante accumsan.
  • Porta lorem nec, viverra mauris.
  • Praesent egestas, felis ac tempor.
  • Blandit, nulla lacus aliquet ex.
  • Non ornare odio justo vitae ligula.
Heading 6
  • In hac habitasse platea dictumst.
  • Duis consectetur nunc magna.
  • Eeget tincidunt purus mattis nec.
  • Proin at ante accumsan.
  • Porta lorem nec, viverra mauris.
  • Praesent egestas, felis ac tempor.
  • Blandit, nulla lacus aliquet ex.
  • Non ornare odio justo vitae ligula.