Der Online Styleguide beschreibt die Gestaltung und Anwendung aller Basiselemente. Die Anwendung eines einheitlichen Gestaltungsprinzips der proPellets sorgt für einen hohen Wiedererkennungswert. Es werden verschiedene gestalterische Optionen vorgestellt, die den unterschiedlichen inhaltlichen Anforderungen Rechnung tragen und dennoch einen einheitlichen Gesamteindruck vermitteln. Die Online-Präsenz basiert auf dem allgemein gültigen Corporate Design der proPellets. Farben sind dem Corporate Design Manual entnommen.

Google Font "Hind"
Schriftschnitte: light, normal, medium, semibold, bold

A ​‌B ​‌C​‌ D​‌ ​‌E​‌  F ​‌G ​‌H ​‌I ​‌J​‌ K ​‌L ​‌M ​‌N ​‌O ​‌P ​‌Q ​‌R​‌ S​‌ ​‌T ​‌U ​‌V ​‌W​‌ X ​‌Y​‌ Z​‌ 
​‌a ​‌b ​‌c​‌ ​‌d​‌ e ​‌f ​‌g ​‌h ​‌i ​‌j ​‌k ​‌l ​‌m ​‌n ​‌o ​‌p ​‌q ​‌r ​‌s ​‌t ​‌u ​‌v ​‌w ​‌x ​‌y ​‌z 
​‌​‌1​‌ 2 ​‌3 ​‌4 ​‌5 ​‌6 ​‌7 ​‌8 ​‌9 ​‌0​‌
‘​‌ ?​‌ ’ ​‌“ ​‌! ​‌” ​‌( ​‌% ​‌) ​‌[ ​‌# ​‌] ​‌{ ​‌@ ​‌} ​‌/ ​‌& ​‌< ​‌- ​‌+ ​‌÷ ​‌× ​‌= ​‌> ​‌® ​‌© ​‌$ ​‌€ ​‌£ ​‌¥ ​‌¢ ​‌: ​‌; ​‌, ​‌. ​‌*

Google Font "Hind", Schriftgrösse 44px, Schriftschnitt "light"
Für die Haupttitel verwenden.

Google Font "Hind", Schriftgrösse 28px, Schriftschnitt "medium"
Für Zwischentitel (nach Überschrift 1) verwenden.

Google Font "Hind", Schriftgrösse 24px, Schriftschnitt "semibold"
Für Zwischentitel innerhalb Überschrift 2 verwenden.

Google Font "Hind", Schriftgrösse 24px, Schriftschnitt "semibold"
Für die rechte Spalte, um einen Inhaltsblock zu betiteln.

Google Font "Hind", Schriftgrösse 18px, Schriftschnitt "normal"

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. 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.

Verlinkung

Link externes Ziel
Link internes Ziel

Aufzählung

• Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
• Aufzählung
• Aufzählung
• Aufzählung

Nummerische Aufzählung

1. Eins
2. Zwei
3. lobortis vitae, malesuada iaculis, lectus. Pellentesque wisi nunc, varius porttitor, auctor id, cursus vitae, felis. Phasellus arcu enim, lacinia ina
4. Drei

Um bei einem Thema weiterführende Informationen oder eine Kontaktaufnahme anzufügen, stehen sogenannte "Call-To-Action"-Elemente zur Verfügung.

Button

Nach einem Absatz (Text) kann dieser Button verwendet werden, auf eine Kontakt- oder Detailseite zu verlinken. Dieses Element sollte maximal 2x pro Seite verwendet werden. 

Button

Es steht ein eigenes Inhaltselement vom Typ "Grüne Box" zur Verfügung.

Dieses Element ist für den Einsatz in der Rechten Spalte gedacht, um einem Inhalte der Hauptspalte mehr Gewicht zu geben und um auf zusätzliche Informationen hinzuweisen. Dieses Inhaltselement sollte maximal 1x pro Seite verwendet werden. 

Pro Box können folgende Angaben erfasst werden:

• Symbol / Icon
• Text
• Linktext
• Linkziel

Die Bildwelt soll auf der ganzen Website in einem einheitlichen Stil entsprechen. Es werden primär eigens von ProPellets.ch erstellte Bilder verwendet, wo nötig werden Bilder von Bilddatenbanken eingekauft (z.B. fotolia).

Stil

• Warme Farben
• Grün- Beige- und Brauntöne
• Emotionalität / Fokus auf den Menschen 
• Aussagekraft beachten, das Bild sollte mit dem zugehörigen Thema übereinstimmen
• Detailaufnahmen für die Kopfbilder verwenden
• Bei Pellets darauf achten, dass diese durchgezogen einen ähnlichen Farbton haben 

» Bei den Teaserboxen auf der Startseite und Landinpages wird automatisch ein entsprechender Filter vom System über das Bild gelegt, damit der Farbton mit der restlichen Website übereinstimmt.

Für das Inhaltselement "Visualisierung" wurden von internezzo ag Pellet-Sujets produziert. Mehr Informationen zur Verwendung dieses Elements sind hier festgehalten.