Styleguide - Base

Color Palette

• black#000000
• white#FFFFFF
• font#1A1A18
• background#333333
• signal#D0021B
• karstens-main--dark#5C5F64
• karstens-main#878A8E
• karstens-grey--light#D8D8D8
• karstens-grey--lighter#EEEEEE
• heinrich-main--dark#00533D
• heinrich-main#00805F
• gebrueder-main--dark#B65202
• gebrueder-main#E56600
• garten-main--dark#8E8B00
• garten-main#C9C600
• matthiesen-main--dark#26551E
• matthiesen-main#3A9D40

SVG Symbols

• symbol-arrow-down
• symbol-arrow-left
• symbol-arrow-right
• symbol-icon-about-us
• symbol-arrow-up
• symbol-icon-attachment
• symbol-icon-building-construction
• symbol-icon-channel-worker
• symbol-icon-civil-engineering
• symbol-icon-close
• symbol-icon-construction-management
• symbol-icon-current
• symbol-icon-delete
• symbol-icon-draftsman
• symbol-icon-environmental-engineering
• symbol-icon-facts-and-figures
• symbol-icon-hamburger
• symbol-icon-infrastructure
• symbol-icon-investments
• symbol-icon-k
• symbol-icon-landscaping
• symbol-icon-managing-directors
• symbol-icon-map
• symbol-icon-mason
• symbol-icon-oepp
• symbol-icon-office-management
• symbol-icon-office
• symbol-icon-partnering
• symbol-icon-pdf
• symbol-icon-philosophy
• symbol-icon-photo
• symbol-icon-play
• symbol-icon-project-development
• symbol-icon-road-builders
• symbol-icon-sfb
• symbol-icon-shell
• symbol-icon-steel-and-concrete-workers
• symbol-icon-timeline
• symbol-icon-video
• symbol-iconfine-abwechslungsreiche-projekte
• symbol-iconfine-arbeitsbedingungen
• symbol-iconfine-arbeitskleidung
• symbol-iconfine-arbeitsweise
• symbol-iconfine-bagger
• symbol-iconfine-bau-dir-deine-zukunft
• symbol-iconfine-gesundheitspraevention
• symbol-iconfine-karriere
• symbol-iconfine-kieswerk
• symbol-iconfine-mitarbeiter-und-teamevents
• symbol-iconfine-moderne-techniken
• symbol-iconfine-schubkarre
• symbol-iconfine-zusatzleistungen
• symbol-link-download
• symbol-link-extern
• symbol-link-intern
• symbol-mail
• symbol-phone
• symbol-search
• symbol-social-facebook
• symbol-social-instagram

Webfonts

Open Sans (sans-serif)

400 / regularThe quick brown fox jumps over the lazy dog. 400 / italicThe quick brown fox jumps over the lazy dog. 600 / regularThe quick brown fox jumps over the lazy dog. 700 / boldThe quick brown fox jumps over the lazy dog.

Grid

Offset Columns

Nested Grid