bobbie Design 2024/25
Generell
Vorgänger: /bobbie-design-2022
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)
Standard Text = 16px
Zur Auszeichnung und besonderen Hervorhebungen nutzen wir Fettdruck, bzw. Roboto Black. Unterstrichener Text wird weitesgehend vermieden.
Überschriften:
- H1: font-size = 40px
- H2: font-size = 36px, bold
- H3: font-size = 18px
Farben
PRIMARY #005387
ATTENTION #0149f5
SECONDARY #D6D5CB
INFO #002634
INHERIT 10 #F1F1F1
INHERIT 100 #A1A1A0
REWARD #00B51B
SUCCESS #237F52
ERROR #FF2D21
WARNING #F9A900
Light Farben
PRIMARY #b4d7e8
ATTENTION #fdc58c
SECONDARY #D6D5CB
INFO #acacac
INHERIT 100 #F1F1F1
REWARD #8edd5b
SUCCESS #81be54
ERROR #f58981
WARNING #fedc72
Farben Garten- und Landschaftsbau
#5a9c38
#043501
#e0ecd8
#ecf5e6
Farben Tiefbau
#999999
#1d1d1d
#e8e8e8
#f5f5f5
Farben Dach
#ec4444
#000000
#fdebde
#fff6ef
Für CMS Seiten / Frontpage
Standard Text = 16px
CMS-Page Layout:
- 1 column (in der max. Breite festgelegt auf: 1400px)
- CMS-Full-Widht-Light (in der Breite nicht festgelegt)
Überschriften
- H1: Händisch gesetzt (auf dieser Seite: bobbie Design 2024/25)
- font-size = 46px - 64px
- fontweight: 700 / bold
- H2: Händisch gesetzt (auf dieser Seite: Generell)
- font-size = 36px
- fontweight = 700 / bold
- H3: Händisch gesetzt (auf dieser Seite: Farben)
- font-size = 18px
- fontweight: 700 / bold
Allgemein
Um mehr Abstand zwischen verschiedenen Elementen zu bekommen, bitte die Margin unter Design Options nutzen (i.d.R. 50).
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.
Wenn es aus technischen oder Design Gründen notwendig ist, kann die Größe des Textes auf CMS Seiten geändert werden.
Bilder bitte wenn möglich nicht in Textblöcke legen: überlegt euch, wie der Text um ein Bild aussehen soll und nutzt die strukturierenden 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.
Separator
Die unterschiedlichen Hintergrundfarben werden zur Trennung verschiedener Bereiche genutzt.
Für mehr Abstand zwischen den Bereichen werden Margins von 50-70 eingefügt.
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
Buttons OLD
Button Type 1
class: button-primary
class: button-attention
class: button-secondary
class: button-info
class: button-inherit
class: button-inherit-10
class: button-reward
class: button-success
class: button-error
class: button-warning
Button Type 2 light-color
class: button-primary-light
class: button-attention-light
class: button-secondary-light
class: button-info-light
class: button-inherit-light
class: button-inherit-10-light
class: button-reward-light
class: button-success-light
class: button-error-light
class: button-warning-light
Button specials
class for align: none (default)
class for align: button-center
class for align: button-right
class: button-round
class: button-width-350
Sections
classs: box-shadow-medium
class: box-shadow-medium bobbie-radius-20