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-simple
- symbol-arrow-left
- symbol-arrow-right-outline
- symbol-arrow-right-simple
- symbol-arrow-right
- symbol-arrow-up-outline
- symbol-arrow-up-simple
- symbol-arrow-up
- symbol-check
- symbol-close
- symbol-contactperson-pure
- symbol-contactperson
- symbol-download
- symbol-drawing-beratung
- symbol-drawing-blindnietmutter
- symbol-drawing-blindnietschraube
- symbol-drawing-coil
- 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
- symbol-socialmedia-x
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
Grid-12
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-08-04
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-06-06 (left)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-06-06 (right)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
RASTER (sichtbar aber nicht wählbar)
Grid-04-04-04 (left)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-04-04-04 (center)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-04-04-04 (right)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-03-03-03-03 (left)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-03-03-03-03 (center left)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-03-03-03-03 (center right)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.
Grid-03-03-03-03 (right)
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.