Website Basics

Primäre Farben

Yellow
#FFD511

Dark Grey
575757

      
Extra Brand Farben


zero emission
#00B54E


Wacker Neuson Grey
#4C5A59 (ex. Footer)

      
Sematische Farben
- zero emission ist auch das Success Grün
- Rot ist ausschließlich für Error zulässig

Success
#00B54E

Error
#E65516

35 % Yellow
#FFC107

35 % Success
#28A745

10 % Error
#E65516

 

 

Neutrale Farben

White
#FFFFFF
RGB 255 255 255

10 %
#F1F1F1
RGB 241 241 241

30 %
#A8A8A8
RGB 168 168 168

60 %
#878787
RGB 138 138 138

Black
#000000
RGB 0 0 0

Rahmen & Schattenstile


  • Boxenrahmen/Linien ausschließlich in Medium Grey (#878787)
  • Weitere CD-Farben sind zulässig
  • Rot wird ausschließlich für Errors verwendet

Border
1 Px with

Border bold
4 Px with

Schatten
1 Px with

Typographie


  • Als Standardschrift wird die Helvetica Neue Regular verwendet
  • Fallback Schrift ist die Arial
H1 Regular / 72 px
H2 Regular / 48 px
H3 Regular / 40 px
H4 Regular / 32 px
H5 Regular / 24 px
H6 Bold / 18 px
 


Headlines Banners & Cards
Banner Regular / 37 px
Card Regular / 26 px
Product title Bold / 24 px
 


Bodytext
Copy Big Regular / 18 px
Copy Regular / 15 px
Small Regular / 13 px
Tiny Regular / 11 px

Typographische Farben


  • Copy Schrift ist immer schwarz
  • Headlines in schwarz, weiß oder grau möglich
  • Sekundäre graue Farbe Medium Grey (#878787) wird nur in Labels verwendet
Primary color
#000000		 Secondary color
#575757		 White
#FFFFFF		 Success
#00B54E		 Error
#E65516		 Medium Grey
#878787

Buttons


  • CTA auch im zero emission grün möglich
 
Button big (46 px)
 
Primary
#FFD511
Hover Primary
#D2AA00
Secondary
#575757
Hover
#000000

 
Tertiary / Textlink
#000000		 Mehr erfahren  

 

 

 

 

Variations for all Buttons

Button small (36 px)
Button Text/Icon
Button Icon
Button Arrow

UI-Elemente

Text-Inputs
Selects

Container


  • Primary Box: Highlighter befindet sich immer gegenüber vom Bild (falls vorhanden)
Primary Box

#F5F5F5 & #575757 / Stroke 4 px

#F5F5F5F & #FFD511 / Stroke 4 px

  
Secondary Box

#FFFFFF / #575757

Hover / Shadow #000000

  
Highlight Box

#575757

#FFD511

#00B54E
 

Miniatur Beispiele für Verhalten des Hightlighters als Stilelement


Standard Tabelle


Standard Actionbar


Website Designelemente

Autorisierte Contentmanager können die Dokumentation aller bestehenden Designelemente hier einsehen.

Beispiel für ein Text- & Bildelement

Newsletter


Contentbreite 

Element: Breite:
100% Elemente 600 px
50% Elemente 278 px
33% Elemente 180 px 

 

Farben 

Element: Farbe:
Hintergrund allgemein #FFFFFF
Hintergrund Content #F2F2F2
Headline-Balken #575757
Buttons #FFD511

 

Schrift

Schrift: Attribute:
 
Fließtext		  
  • font-family: Helvetica,Arial,sans-serif; 
  • margin-bottom: 20px; 
  • font-weight: normal; 
  • font-size: 15px; 
  • line-height: 1.25; 
  • color: #323232;
 
Headlines klein		  
  • font-family: Helvetica,Arial,sans-serif; 
  • margin-bottom: 10px; 
  • font-weight: bold; 
  • font-size: 15px; 
  • line-height: 1.25; 
  • color: #323232;
 
Headlines groß		  
  • font-family: Helvetica,Arial,sans-serif; 
  • margin-bottom: 15px; 
  • font-weight: 600; 
  • font-size: 18px;
  • line-height: 1.25; 
  • color: #FFFFFF;

Header


  • Grauer Balken mit Information "Im Browser öffnen", Farbe: #575757
  • Gelber Balken mit individuellem Titel des Newsletters, Farbe: #FFD511

Content

Dieser Bereich lässt sich über Templates individuell zusammenstellen.
Die Templates haben Breiten von 100% oder 2 x 50% (Ausnahme Promobox 3 x 33%).
Die Auswahl möglicher Templates und deren Gestaltung findet sich hier:
https://scnem2.com/a.php?sid=9om0.od87th,f=999

Footer


  • Graue Fläche - Farbe: #575757
  • Schriftfarbe: #FFFFFF