Styleguide - Base

Color Palette

• black#000000
• white#FFFFFF
• font#333333
• signal#D04D02
• fail#D04D02
• check#8EBF22
• main--deepdark#001320
• main--dark#002640
• main#00528D
• main--light#98B3C6
• main--lighter#E5EDF3
• grey--dark#666666
• grey--link#C3C3C3
• grey#E2E2E2
• grey--light#F4F4F4
• aluminum#910B26
• steel#00528D
• stainlesssteel--a2#237C39
• stainlesssteel--a4#76B830
• copper#CB5F28
• brass#C9A95E
• bronze#554126

SVG Symbols

• symbol-arrow-down-outline
• symbol-arrow-down
• symbol-arrow-down-simple
• symbol-arrow-left-outline
• symbol-arrow-left
• symbol-arrow-right-outline
• symbol-arrow-right
• symbol-arrow-left-simple
• symbol-arrow-right-simple
• symbol-arrow-up-outline
• symbol-arrow-up-simple
• symbol-arrow-up
• symbol-check
• symbol-close
• symbol-contactperson-pure
• symbol-contactperson
• symbol-download
• symbol-drawing-blindnietmutter
• symbol-drawing-beratung
• symbol-drawing-coil
• symbol-drawing-blindnietschraube
• symbol-drawing-einpresselement
• symbol-drawing-nietdorn
• symbol-drawing-niethuelse
• symbol-drawing-produkte-auf-einen-blick
• symbol-drawing-qualitaet
• symbol-drawing-reparaturen
• symbol-drawing-verantwortung
• symbol-fail
• symbol-link-extern
• symbol-link-intern
• symbol-mail
• symbol-map
• symbol-menu
• symbol-optional
• symbol-page
• symbol-phone
• symbol-play
• symbol-question
• symbol-search-pure
• symbol-search
• symbol-socialmedia-facebook
• symbol-socialmedia-instagram
• symbol-socialmedia-link
• symbol-socialmedia-linkedin
• symbol-socialmedia-sharing
• symbol-socialmedia-twitter
• symbol-socialmedia-whatsapp
• symbol-socialmedia-xing
• symbol-socialmedia-youtube

Webfonts

Muli (sans-serif)

400 / regularThe quick brown fox jumps over the lazy dog. 700 / boldThe quick brown fox jumps over the lazy dog. 900 / blackThe quick brown fox jumps over the lazy dog.

RASTER

Offset Columns

Nested Grid