bobbie Design 2022-2025
Generell
Wir versuchen, in unserer Außendarstellung einheitlich aufzutreten. Daher bitte beim Erstellen von Dokumenten an folgende Regeln halten.
Der Font bei bobbie ist immer Roboto
Von diesem Font sollte nur in wenigen Fällen abgewichen werden, wenn es technisch nicht anders möglich ist. In dem Fall folgende Ausweichschriftarten Verdana, Arial, sans-serif (in der Reihenfolge).
Standart Text = 14px / 16px Roboto Regular
Zur Auszeichnung und besonderen Hervorhebung nutzen wir Fettdruck, bzw. Roboto Black. Unterstrichener Text wird ausschließlich für Hyperlinks genutzt.
Überschriften:
- H1 : font-size = 46px fontweight: 700 / bold
- H2: font-size = 30px fontweight: 700 / bold
- H3: font-size = 20px fontweight: 700 / bold
- H4: font-size =16px fontweight: 400 / medium
- H5: font-size = 14px fontweight: 500 / regular
- H6: font-size = 11px fontweight: 500 /regular
Farben
PRIMARY #005387 69/124/1581
ATTENTION #0149f5 223/128/27
SECONDARY #D6D5CB 143/159/164
INFO #002634 0/38/52
INHERIT 10 #F1F1F1 225/225/225
INHERIT 100 #A1A1A0 136/136/136
REWARD #00B51B 49/189/0
SUCCESS #237F52 84/130/53
ERROR #FF2D21 223/41/27
WARNING #F9A900 255/192/0
Light Farben
PRIMARY #b4d7e8
ATTENTION #FDC58C
SECONDARY #D6D5CB
INFO #ACACAC
INHERIT 100 #F1F1F1
REWARD #8EDD5B
SUCCESS #81BE54
ERROR #F58981
WARNING FEDC72
Für CMS Seiten / Frontpage
Standart Text = 14px / 16px
CMS-Page Layout zu finden unter Layout:
- 1 column (in der max. Breite festlegt auf: 1400px)
- 1 column full width (in der max. Breite festlegt auf: 2400px)
Überschriften
- H1 : Gesetzt durch den CMS Editor (auf dieser Seite: bobbie Design 2022)
- font-size = 46px - 64px
- fontweight: 700 / bold
- H2: Erste händisch gesetzte Überschrift (auf dieser Seite: Generell)
- font-size = 30px - 34px
- fontweight: 700 / bold
- H2: Eingesetzt als Trenner
- font-size = 18px - 20px
- fontweight: 700 / bold
- background-color: #eaeaea
- H3: Zweite händisch gesetzte Überschrift (auf dieser Seite: RANDOM TEXT)
- font-size = 20px
- fontweight: 700 / bold
- H3: Eingesetzt als Trenner
- font-size = 16px - 18px
- fontweight: 700 / bold
- background-color: #eaeaea
- H4: font-size =16px
- fontweight: 400 / medium
- H5: font-size = 14px
- fontweight: 500 / regular
- H6: font-size = 11px
- fontweight: 500 /regular
Dont's
Dinge die man bitte vermeiden sollte.
Bitte nutzt die Option Header nicht um die Größe von Text zu ändern.
Wenn etwas kein strukturierendes Element ist, dann sollte es keine Heading / Überschrift sein.
Es ist auch möglich die Größe von Text auf CMS Seiten zu verändern.
Bitte legt Bilder nicht in Text-Blöcke. Überlegt euch, wie der Text um eine Bild ausehen soll und nutzt die Strukturierende Elemente Row und Column.
Random Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Beispiel CMS Seite Normal & Volltext
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Show some SQL
SELECT * FROM tbl_user WHERE user like "%bobbie%";
Beispiel CMS Seite seperat und mit Trenner
Heading 2 als Seperator
Heading 3 als Seperator
Heading 4 als Seperator
Heading 2 als Seperator gefolgt von Anfrage Blocks
Es folgen zwei Blocks die Anfrage Button inkl. logic abbilden.
- Static Block generic-anfrage-button
- Static Block generic-anfrage-button-normal
Logo
Logo allgemein
Das bobbie Logo liegt in diversen Varianten auf Google Drive. Weblink.
Wenn irgend möglich nutzen wir eine Vektor-Version, also .svg oder .emf/.ps/.pdf. Sonst png, wenn garnicht anders geht .jpeg.
Farbe
Folgende Reihenfolge der Logo Farben, von ideal nach schlecht:
- hellblau #005387
- Weiße auf dunkelblauem Untergrund #FFFFFF auf #002634
- Dunkelblau #002634
- Schwarz #000000
Das Logo sollte immer mit Rand zu anderen Gestaltungselementen gesetzt werden. Der Rand hat mindestens die Größe eines "o".
Claim
Wenn nicht aus dem Kontext absolut klar ist, was wir tun, dann das Logo "mit Claim" nutzen. Insbesondere wenn das Dokument zum Erstkontakt gedacht ist.
Steht auf Präsentationen ein anderer Claim unter dem Logo, ist dieser hinreichend groß, gesperrt und in der selben Farbe. Freigabe alternativ Claim durch ein Führungskreismitglied.
Kleines Logo
Ist extrem wenig Platz vorhanden, z.b. bei mobilen Applikationen, dann wird nur das erste "b" benutzt. Dieses kann Kontextabhängig auch andere inhalte als den Schraubenschlüssel haben, dazu bitte Rücksprache mit Mathias.
Kästchen / Hervorhebung
Wir nutzen gelegentlich farbige Kästchen um Inhalte hervorzuheben. Diese sind rechteckig, mit spitzen Ecken, haben keinen Schatten und in einer der bobbie Farben. Also so, wie die Farbliste oben.
Weitere Effekte
Sonstige Dinge tun wir nicht! Keine Schatten, keine 3D Effekte, kein WordArt etc.
Buttons
Button type 1
class: button-primaryclass:button-attentiony
class: button-secondaryclass: button-infoclass: button-inherit
class: button-inherit-10class: button-rewardclass: button-successclass: button-errorclass: button-warningButton type 2 light-color
class: button-primary-lightclass:button-attentiony-light
class: button-secondary-lightclass: button-info-lightclass: button-inherit-lightclass: button-inherit-10-lightclass: button-reward-lightclass: button-success-lightclass: button-error-lightclass: button-warning-lightButton type 3 outline
class: button-primary-outline
class:button-attentiony-outline
class: button-secondary-outline
class: button-info-outline
class: button-inherit-outline
class: button-inherit-10-outline
class: button-reward-outline
class: button-success-outline
class: button-error-outline
class: button-warning-outline
Button type 4 outline-dark
class: button-primary-outline-dark
class:button-attentiony-outline-dark
class: button-secondary-outline-dark
class: button-info-outline-dark
class: button-inherit-outline-dark
class: button-inherit-10-outline-dark
class: button-reward-outline-dark
class: button-success-outline-dark
class: button-error-outline-dark
class: button-warning-outline-dark
Button Spezials
class for align: none (default)
class for align: button-center
class for align: button-right
class for align: button-round
class for align: button-width-350
More CSS Classes
button-round
btn-width-250 btn-width-300 btn-width-350 btn-width-400
box-shadow-light box-shadow-medium
bobbie-radius-20 bobbie-radius-30
