simpleclub Brand Styleguide
Willkommen zum offiziellen Styleguide. Hier sind alle Richtlinien zur korrekten Verwendung der simpleclub Brand Assets.
Schreibweise „simpleclub“
Der Markenname wird immer klein und zusammen geschrieben.
Auch wenn er am Satzanfang steht.
Das simpleclub Logo
Unser Logo ist das zentrale Element unserer visuellen Markenidentität.
Logo-Konstruktion
Primary Logo
Positive Variante
Negative Variante
Secondary Logo
Standalone Bildmarke für kompakte Anwendungen
Die positive und negative Variante unterscheiden sich voneinander. Details dazu im folgenden Abschnitt Special Rule.
Positive Variante
Negative Variante
Special Rule
Anpassung des Logos für weiße Hintergründe
Negative Variante;}.cls-3{clip-path:url(%23clippath);}%3c/style%3e%3cclipPath%20id='clippath'%3e%3cpath%20class='cls-1'%20d='M22.23,47.07l-16.34-9.43c-.78-.45-1.26-1.29-1.26-2.18v-18.87c0-.9.48-1.73,1.26-2.18L22.23,4.96c.39-.22.82-.33,1.26-.33s.87.11,1.26.33l16.34,9.43c.78.45,1.26,1.28,1.26,2.18v18.87c0,.9-.48,1.73-1.26,2.18l-16.34,9.43c-.39.22-.83.34-1.26.34s-.87-.11-1.26-.34M19.92.96L3.57,10.39c-2.21,1.27-3.57,3.65-3.57,6.19v18.87c0,2.55,1.37,4.92,3.57,6.19l16.34,9.44c.69.4,1.42.67,2.18.82h2.79c.76-.15,1.49-.42,2.18-.82l16.34-9.44c2.07-1.19,3.4-3.36,3.56-5.72v-19.8c-.16-2.37-1.49-4.53-3.56-5.72L27.06.96c-1.1-.64-2.34-.96-3.57-.96s-2.47.32-3.57.96'/%3e%3c/clipPath%3e%3cclipPath%20id='clippath-1'%3e%3crect%20class='cls-1'%20x='-1.15'%20y='-1.07'%20width='48.75'%20height='54.04'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='Ebene_1-2'%3e%3cg%20class='cls-3'%3e%3cg%20class='cls-2'%3e%3cimage%20width='83'%20height='92'%20transform='translate(-1.15%2052.97)%20scale(.59%20-.59)'%20xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABdCAYAAAA7ZEEJAAAACXBIWXMAABLqAAAS6gEWyM/fAAACjElEQVR4nO3YS3KrMBCF4R/t5NbN/tfnGRlBDHrQQjyk7j4T4hir+3zlil2ZPp/PPM8zAH9X1scz++fy95auROfEr8ueQeWszIy78/P/3xQApmlie2V9PLF/Ln9v6Up0Tvy67BlUzsrMeCIBAZSjyhO2wx21NSEe7qgt2fwNddT2hPxwRz2T5Ke8o55PyME46rmE7VKO2pqwHuqoOaOqhM2hjppWqkiIFnfUJJQ0u0/5pY6jnk30PdRRt/fXpvzfJkfdex0m8Q511NT90mTeoY6aul+SsPzgqNeghu8HjtqOGva/cNQ21AhUVNhRySUJKirsqKSSBRUVdlT2KYKKCjvqxusQVFTYUVcrEaiosKMCFaCiwsZRoRJUVNg4ajWoqLBRVDgJWh6y1LGJehq0PGSpYwyVRtDykKWOLdRm0PKQpY4NVLgItFxoqWMD9TLQcqGljm5UuBi0VMQK6uWgpSLaUeEm0OQSRlBvA00uoRwVbgZNLqEc9XbQ5BJKUeEh0OQSSlEfA00uoQwVHgZNLaEN9XHQ1BJaUOEl0O8ltKG+Bvq9hBZUeBkU9KG+Dgp6UKETUNCBCh2Bgg7UrkBhbFToEBTGRu0SFMZEhY5BYUzUrkFhLFQYABTGQh0CFEZBHQgUxkAdChT6RoUBQaFv1CFBoU9UGBgU+kQdGhT6QgUFoNAXqgpQ6AMVFIFCH6iqQOFdVFAICu+iqgSFd1BBMSi8g6oaFJ5FBQOg8CyqCVB4BhUMgcIzqKZA4V5UMAgK96GCUVC4D9UsKFyPCsZB4XpU86BwHSo46JqrUB30K62o4KBRWlEdNJHTqDhoNmdRHbSQWlRw0MPUojqoIFJUcFBxpKgOWpEjVM8N+QUliWxdkLQbNQAAAABJRU5ErkJggg=='/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
GradientPositive VarianteDie leuchtenden Farbtöne des Hexagons, insbesondere Grün und Türkis, entfalten auf dunklen
Hintergründen ihre volle Strahlkraft. Auf hellen Untergründen fehlt jedoch der notwendige Kontrast.
Ein subtiler Gradient dunkelt diese Bereiche ab und gewährleistet so eine optimale Lesbarkeit.
Der Gradient ist bereits in den Logo-Dateien enthalten.
Logo Don'ts
Wie das simpleclub Logo nicht verwendet werden darf:
Das Logo nicht drehen ❌
Das Logo muss immer gerade ausgerichtet sein.
Das Logo nicht verzerren ❌
Das Logo muss immer sein originales Seitenverhältnis behalten.
Das Secondary Logo nicht falsch herum nutzen ❌
Die Farbe Lila muss immer oben sein.
Das Logo nicht weiß oder schwarz einfärben ❌
Es muss stets seine volle Farbigkeit behalten.
Nicht die Farbe des Textes ändern ❌
Der Schriftzug muss stets die Anthrazitfarbe beibehalten.
Keinen Text im Secondary Logo platzieren ❌
Das Secondary Logo darf nicht verändert werden.
Keine Grafiken zum Logo hinzufügen ❌
Das Logo darf nicht verändert werden.
Das Logo nicht auf bunten Hintergründen platzieren ❌
Hintergründe müssen farbneutral (nahezu weiß oder anthrazit) sein.
Achten Sie auf die Sicherheitszone ❌
Andere Elemente dürfen nicht zu nah am Logo platziert werden.
Das Logo nicht in belebten Bereichen platzieren ❌
Das Logo immer auf neutralem Hintergrund platzieren.
Keine Effekte oder Schatten hinzufügen ❌
Das Logo muss immer als solches unverändert bleiben.
Farbpalette
Unsere Farben sind ein wesentlicher Bestandteil der simpleclub Brand
Farbspektrum des Hexagons
'%3e%3cg%20filter='url(%23filter0_f_1037_130)'%3e%3crect%20x='-36.3232'%20y='-59.1313'%20width='503.46'%20height='548.231'%20fill='url(%23pattern0_1037_130)'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_1037_130'%20x='-46.3232'%20y='-69.1313'%20width='523.46'%20height='568.231'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='5'%20result='effect1_foregroundBlur_1037_130'/%3e%3c/filter%3e%3cpattern%20id='pattern0_1037_130'%20patternContentUnits='objectBoundingBox'%20width='1'%20height='1'%3e%3cuse%20xlink:href='%23image0_1037_130'%20transform='matrix(0.00963651%200%200%200.00884956%20-0.0010987%200)'/%3e%3c/pattern%3e%3cimage%20id='image0_1037_130'%20width='104'%20height='113'%20preserveAspectRatio='none'%20xlink:href='data:image/jpeg;base64,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'/%3e%3c/defs%3e%3c/svg%3e)
Primary Brand Colors
anthracite #1
#121E26RGB 18, 30, 38
anthracite #2
#0D161CRGB 13, 22, 28
white
#FFFFFFRGB 255, 255, 255
blue
#0059D6RGB 0, 89, 214
secondary blue
#0069FCRGB 0, 105, 252
Secondary Brand Colors
dark blue
#193E5DRGB 25, 62, 93
red
#DD284ERGB 221, 40, 78
green
#5DC071RGB 93, 192, 113
Brand Gradients
dark blue - anthracite #2
white - grey
secondary gradient #1
secondary gradient #2
Content Colors
Typografie
Die richtige Schriftverwendung ist entscheidend für ein konsistentes Markenbild
Headlines
Nexa Heavy & Nexa Book
Nexa Heavy
Nexa Book
Kombiniert
Sublines & Button-Text
Nexa XBold
Subline
Button-Text
Fließtext
Nexa Regular & Nexa XBold für Hervorhebungen
Nexa Regular: Standard-Fließtext
Dies ist ein Beispieltext, der zeigt, wie Fließtext in Nexa Regular aussieht. Er eignet sich ideal für längere Textpassagen und sorgt für eine angenehme Lesbarkeit.
Mit Nexa XBold für Hervorhebungen
Dies ist ein Beispieltext, der zeigt, wie wichtige Begriffe hervorgehoben werden. Mit Nexa XBold lassen sich Schlüsselwörter betonen.