Styleguide Mirò GmbH

Ein einheitlicher Stil im Sinne des Corporate Designs ist für den Unternehmensauftritt unerlässlich. Nicht nur schafft er ein „aufgeräumtes“ und ausgewogenes Bild, er erhöht auch den Wiedererkennungswert.
Ein Styleguide ermöglicht es einem Unternehmen, sich konstant zu präsentieren. Er enthält verbindliche Vorgaben für die Verwendung von Schriftarten, Farben, Ikonen und anderen Gestaltungselementen.

Headlines

Headlines sind Überschriften, die sich in Headlines des Typs H1 (Titel) und Headlines des Typs H2-H6 (Untertitel) gliedern. Es existieren jeweils unterschiedliche Größen und Formate für Desktop und Tablet sowie für die mobile Ansicht.
H1 Large - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H1 Large - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H1 Large - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H1 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H1 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H1 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H2 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H2 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H2 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H3 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H3 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H3 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H4 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H4 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H4 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H5 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H5 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H5 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H6 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H6 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H6 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H7 Header - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H7 Header - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
H7 Header - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:

Text

Die Schriftmerkmale für Kurz- und Langtexte – etwa Schriftart, Schriftgröße, Farbe oder Ähnliches – werden jenen der Headlines angepasst. Bei richtiger Anwendung ergibt sich in der Folge ein harmonisches Gesamtbild, das optisch ansprechend ist und den Leser optimal führt.
Text normal - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text normal - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text normal - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text medium - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text medium - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text medium - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text large - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text large - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text large - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text small - Desktop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text small - Tablet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Text small - Mobile
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:

Buttons

Genauso wie die unterschiedlichen Arten von Links führen auch Buttons die Nutzer auf einen anderen Bereich der Website oder in selteneren Fällen zu externen Inhalten. Sie sind optisch noch auffälliger als Links und werden deshalb häufig für CTAs (=Calls to Action), also Handlungsaufforderungen, wie „Jetzt entdecken“ verwendet.
Button 1 - Desktop
Button
 
Button
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Background Color:
Hover Font Color:
Hover Background Color:
Button 1 - Tablet
Button
 
Button
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Background Color:
Hover Font Color:
Hover Background Color:
Button 1 - Mobile
Button
 
Button
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Background Color:
Hover Font Color:
Hover Background Color:
Button 2 - Desktop
Button
 
Button
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Background Color:
Hover Font Color:
Hover Background Color:
Button 2 - Tablet
Button
 
Button
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Background Color:
Hover Font Color:
Hover Background Color:
Button 2 - Mobile
Button
 
Button
Font:
Font size:
Lineheight:
Letterspacing:
Font Color:
Background Color:
Hover Font Color:
Hover Background Color:

Arrows

Pfeile werden im digitalen Bereich immer wieder gebraucht. Sie führen Nutzer eindeutig und ohne Umschweife zu gesuchten Inhalten. Auch wenn sie oft nur am Rande stehen und eine reine Nutzfunktion erfüllen, fallen sie ins Auge und müssen sich daher ins Gesamtbild einfügen.
icon-prev
icon-next
icon-up
icon-down

Colors

Jedes Unternehmen lässt sich auch über bestimmte Farben, die Corporate Colors, identifizieren. Dabei geht es nicht nur um Geschmack und Ästhetik, sondern auch um Sichtbarkeit. Im Styleguide sind die zu verwendenden Farben klar festgelegt, damit die Leserlichkeit von Texten, etwa auch auf Fotos, ausnahmslos gewährleistet ist.
bgweb
Header
Header .t2
Text
Link
Button 1Button 1 - hover
Background Color:
Font Color (h1):
Font Color (h2):
Font Color (text):
Font Color (link):
bgweb2
Header
Header .t2
Text
Link
Button 1Button 1 - hover
Background Color:
Font Color (h1):
Font Color (h2):
Font Color (text):
Font Color (link):
bglist
Header
Header .t2
Text
Link
Button 1Button 1 - hover
Background Color:
Font Color (h1):
Font Color (h2):
Font Color (text):
Font Color (link):
bghighlight
Header
Header .t2
Text
Link
Button 1Button 1 - hover
Background Color:
Font Color (h1):
Font Color (h2):
Font Color (text):
Font Color (link):
bghighlight2
Header
Header .t2
Text
Link
Button 1Button 1 - hover
Background Color:
Font Color (h1):
Font Color (h2):
Font Color (text):
Font Color (link):
bggallerybox
Header
Header .t2
Text
Link
Button 1Button 1 - hover
Background Color:
Font Color (h1):
Font Color (h2):
Font Color (text):
Font Color (link):

Icons

Ikonen sind Symbole, deren Bedeutung wir erlernt haben, und denen wir deshalb unmittelbar einen Sinn zuordnen können. Sie lockern auf, setzen optische Akzente und ermöglichen es, ohne Text bestimmte Informationen zu kommunizieren. In den Ikonen kommt die Individualität eines Unternehmens besonders stark zum Ausdruck.
icon-contactphone
icon-facebook
icon-instagram
icon-linkedin