Lighthouse Styleguide

Layouts Dimensions Breakpoints Colors Typography Stylistic elements Useful Form elements Icons Packshots

LandingPage Layouts

Typ A 
Typ E 

Dimensions

full width 100% = max. 1260px

70%
full width 100% = max. 882px)
30% - 30px padding-left =
full width 100% = max. 348px

Breakpoints

Code/Class
Definitions
Example
class="hidden-mobile"
    class="visible-mobile"
@media (max-width: 480px)

class="hidden-tablet"
    class="visible-tablet"
@media (min-width: 481px) and (max-width: 1024px)

class="hidden-tablet-p"
    class="visible-tablet-p"
@media (min-width: 481px) and (max-width: 768px)

class="hidden-tablet-l"
    class="visible-tablet-l"
@media (min-width: 769px) and (max-width: 1024px)

class="hidden-desktop"
    class="visible-desktop"
@media (min-width: 1025px)

Colors

Redesign Color Palette

#ffffff
--White
#0500FF
--Haufe-Electric-Blue
#001344
--Haufe-Navy-Blue
#8A9EFF
--Haufe-Mid-Blue
#DBE5FF
--Haufe-Light-Blue
#F2F6FF
--UI-lighter-Blue
#FE73B2
--Haufe-Pink

Primary Color Palette - Interaction

#003f71
class="blue1"
#075bfa
class="blue2"
#00abf7
class="blue5"

Secondary Color Palette - Accentuation

#a60142
#ed1e79
class="pink"
#fe85a4
#008288
#03b9b6
#00e8e0

Greys Color Palette

#ffffff
class="white"
#f7f7f8
class="grey6"
#e7e7e8
class="grey8"
#d2d4d6
class="grey5"
#8f9299
class="grey3"
#636871
#232a36
class="grey2"

Validation Color Palette

#e81546
class="red"
#318551
class="green2"
#2cd96f
#f4a730
class="yellow1"
#ffc263

Typography

Code/Class
Definitions
Example
H1
font-size: 2em;
    margin: 0.67em 0;

Headline H1

H2
font-size: 1.5em;
    (Browser-Default)

Headline H2

H3
font-size: 1.17em;
    (Browser-Default)

Headline H3

H4
font-size: 1em;
    (Browser-Default)

Headline H4

H5
font-size: .83em;
    (Browser-Default)
Headline H5
P
    (also without any styles or tags)
font-size: 15px;
    line-height: 1.5em;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
A
color: #075bfa;
    text-decoration: none;
Link 
class="fw-bold"
    class="bold"
font-weight: 800
fw-bold 
class="fw-normal"
    class="noBold"
font-weight: 400
fw-normal 
class="fw-light"
font-weight: 300
fw-light 
class="fw-extra-light"
font-weight: 200
fw-extra-light 
class="ff-hmw-sans"
font-family: 'HaufeMerriweatherSans', Arial, sans-serif;
Haufe Merriweather Sans 
class="ff-hmw"
font-family: 'HaufeMerriweather', Times, serif;
Haufe Merriweather 
class="ff-bebasneue"
font-family: 'Bebasneue', Arial, sans-serif;
Bebas Neue 
class="fSize12"
fSize12 
class="fSize13"
fSize13 
class="fSize14"
fSize14 
class="fSize15"
fSize15 
class="fSize16"
fSize16 
class="fSize18"
fSize18 
class="fSize20"
fSize20 
class="fSize22"
fSize22 
class="fSize24"
fSize24 
class="fSize28"
fSize28 
class="fSize30"
fSize30 
class="fSize36"
fSize36 
class="fSize40"
fSize40 
class="fSize48"
fSize48 
class="font"
font 
class="black"
black 
class="blue1"
blue1 
class="blue2"
blue2 
class="blue3"
blue3 
class="blue4"
blue4 
class="blue5"
blue5 
class="blue6"
blue6 
class="blue7"
blue7 
class="grey1"
grey1 
class="grey2"
grey2 
class="grey3"
grey3 
class="grey4"
grey4 
class="grey5"
grey5 
class="grey6"
grey6 
class="grey7"
grey7 
class="grey8"
grey8 
class="green1"
green1 
class="green2"
green2 
class="orange"
orange 
class="orange1"
orange1 
class="pink"
pink 
class="red"
red 
class="yellow1"
yellow1 
class="yellow2"
yellow2 
class="white"
white 
<ul>
        <li/>
        <li/>
    </ul>
Browser default
  • erster Punkt
  • zweiter Punkt
  • dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • vierter Punkt
<ul class="list_style_bullet">
        <li/>
        <li/>
    </ul>
  • erster Punkt
  • zweiter Punkt
  • dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • vierter Punkt
<ul class="list_style_tick">
        <li/>
        <li/>
    </ul>
  • erster Punkt
  • zweiter Punkt
  • dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • vierter Punkt
<ol>
        <li/>
        <li/>
    </ol>
  1. erster Punkt
  2. zweiter Punkt
  3. dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  4. vierter Punkt
<ul class="link_list">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>

Stylistic elements

Code/Class
Definitions
Example
class="lighthouse-box"
Lighthouse Box
class="lighthouse-divider-before"
Überschrift
class="lighthouse-divider-after"
Überschrift
class="lighthouse-divider-before-small"
Überschrift
class="lighthouse-divider-after-small"
Überschrift
class="lighthouse-gradient-light-to-dark"
Beispiel
class="lighthouse-gradient-dark-to-light"
Beispiel
class="lighthouse-gradient-bottom-dark-to-top-light"
Beispiel
class="lighthouse-gradient-footer"
Beispiel
TBD
background-image: linear-gradient(-125deg,
                    #0b8041 0%, #0d8c59 10%, #109872 20%, #13a48a 30%, 
                    #16afa3 40%,#40b686 50%,#6abc69 60%,#95c24c 70%, 
                    #bfc82f 80%, #e9cf11 90%,#e9cf11 100%)
FINANCE
TBD
background-image: linear-gradient(-125deg,
                    #00ffc4 0%, #19d7da 35.9%, #3e45ff 100%)
HRS
TBD
background-image: linear-gradient(-125deg,
                    #040077 0%, #45c6ff 75.5%, #fffe00 100%)
VERTICALS
TBD
background-image: linear-gradient(-125deg,
                    #00ffc4 0%, #23c6e3 21.6%, #3e45ff 50%, 
                    #80f 78.5%,#f050a7 100%)
DACH/UMBRELLA
class="lighthouse-background lighthouse-background-stripes"
class="lighthouse-background lighthouse-background-dots"
class="lighthouse-background lighthouse-background-dots2"

Useful Classes

Code/Class
Definitions
Example
class="floatLeft"
float: left;
floatLeft 
class="floatRight"
float: right;
floatRight 
class="clearline"
clear: both;
clearline 
class="clearfix"
(Fix für die Höhe von Containern, in denen sich Float-Elemente befinden)
clearfix 
class="hidden"
ausblenden
class="book_tmpl_show"
zeigt Elemente nur bei Büchern an (PDS)
book_tmpl_show 
class="book_tmpl_hide"
blendet Elemente nur bei Bücher aus (PDS)
book_tmpl_hide

Grid Container

Code/Class
Definitions
Example
<div class="rowContainer">
        <div class="row">
            <div class="col ccol8 col6 acol12">
                content here
            </div>
            <div class="col ccol4 col6 acol12">
                content here
            </div>
        </div>
    </div>
12er Grid
content here
content here

Form elements

Code/Class
Definitions
Example
<input type="text">
    <input type="text" class="valid">
    <input type="text" class="warning">
    <input type="text" class="error">
    <input type="text" class="disabled" disabled>








<select>
        <option value="opt1">Option 1</option>
        <option value="opt2">Option 2</option>
    </select>
    <select class="valid">...</select>
    <select class="warning">...</select>
    <select class="error">...</select>
    <select class="disabled" disabled>...</select>








<div class="lighthouse-radio">
        <input type="radio" id="r1"><label for="r1">Beispiel</label>
        <input type="radio" id="r2" class="warning"><label for="r2">Beispiel</label>
        <input type="radio" id="r3" class="error"><label for="r3">Beispiel</label>
        <input type="radio" id="r4" class="disabled" disabled><label for="r4">Beispiel</label>
    </div>



<div class="lighthouse-checkbox">
        <input type="checkbox" id="c1"><label for="c1">Beispiel</label>
        <input type="checkbox" id="c2" class="warning"><label for="c2">Beispiel</label>
        <input type="checkbox" id="c3" class="error"><label for="c3">Beispiel</label>
        <input type="checkbox" id="c4" class="disabled" disabled><label for="c4">Beispiel</label>
    </div>



class="button btnOrange"
background: #eb6005
    color: #fff
Buttontext 
class="button btnBlue"
background: #075bfa
    color: #fff
Buttontext 
class="button btnBlue disabled"
background: #cedffe
    color: #fff
Buttontext 
class="button btnBlueBorder"
background: #fff
    color: #075bfa
Buttontext 
class="button btnBlueBorder btnThin"
background: #fff
    color: #075bfa
Buttontext 
class="button btnGrey"
background: #8f9299
    color: #075bfa
Buttontext 
class="button btnGrey1"
background: #d2d4d6
    color: #075bfa
Buttontext 
class="button btnGrey2"
background: #8f9299
    color: #075bfa
Buttontext 
class="button btnWhite"
background: #075bfa
    color: #075bfa
Buttontext 
class="button btnWhiteBorder"
background: transparent
    color: #ffffff
Buttontext

Icons

Code/Class
Definitions
Example
class="icon-empty"
class="icon-download"
class="icon-arrow-erase"
class="icon-paypal"
class="icon-visa"
class="icon-mastercard"
class="icon-invoice"
class="icon-debit"
class="icon-info"
class="icon-star-half"
class="icon-arrow-erase"
class="icon-book"
class="icon-menu"
class="icon-tolino"
class="icon-kindle"
class="icon-haufe"
class="icon-apple"
class="icon-android"
class="icon-pen"
class="icon-index"
class="icon-filter"
class="icon-clock"
class="icon-arrow-down"
class="icon-arrow-rewind"
class="icon-arrow-totop"
class="icon-calendar"
class="icon-cart"
class="icon-checkmark"
class="icon-chevron-breadcrumb"
class="icon-chevron-down"
class="icon-chevron-left"
class="icon-chevron-right"
class="icon-chevron-up"
class="icon-chevrons-left"
class="icon-chevrons-right"
class="icon-cogwheels"
class="icon-compare"
class="icon-content"
class="icon-cross"
class="icon-e-trust"
class="icon-envelope-rounded"
class="icon-envelope"
class="icon-eye-crossed"
class="icon-eye"
class="icon-facebook"
class="icon-gift"
class="icon-globe-net"
class="icon-image"
class="icon-linkedin"
class="icon-magnifier"
class="icon-page"
class="icon-paper-plane"
class="icon-phone"
class="icon-printer"
class="icon-questionmark"
class="icon-scales"
class="icon-smiley"
class="icon-speech-bubble"
class="icon-star-empty"
class="icon-star-full"
class="icon-trash"
class="icon-truck"
class="icon-twitter"
class="icon-update-clock"
class="icon-user-male"
class="icon-xing"
class="icon-play"
class="icon-stoerer" style="height:58px;width:51px;"
class="icon-stoerer" style="height:115px;width:101px;"
class="icon-stoerer" style="height:230px;width:201px;"
class="icon-ssl" style="height:56px;width:59px;"
class="icon-uhr" style="height:60px;width:60px;"
class="icon-newsletter" style="height:58px;width:60px;"
class="icon-edge" style="height:60px;width:60px;"
Mehr SVG-Icons >>

Packshot Dimensions

$$Product_image(bestNr,Size)

36
36 
50
50 
100
100 
136
136 
152
152 
289
289 
300
300 
648
648 

last update: 11.9.23 by ML. Updated gradients to include new color transitions and improved linear gradient definitions.