Horizontal — Farbe (heller Hintergrund)
Hauptvariante. Blatt in brand-primary, Text in ink. Überall auf hellem Hintergrund zu verwenden.
Brand Kit
Marken Richtlinien
Logos, Farben, Typografien. Diese Seite dient dem Chargekeeper-Team als Referenz und als Marken-Kit für unsere Partner, die unsere Visuals bei sich einbinden.
Eine Frage zur Nutzung der Marke? Kontaktieren Sie uns.
Logos
Hauptvarianten
Verwenden Sie die für den Kontrast des Hintergrunds passende Variante. Halten Sie stets einen Schutzraum um das Logo ein, der der Höhe des Blatts entspricht.
Horizontal — Signature (dunkler Hintergrund)
DNA-Variante. Blatt in Signaturgrün, Text weiß. Dunklen Hintergründen und Momenten mit starker Wirkung vorbehalten.
Signature-Variante — Blatt in #38E54D (DNA-Grün). Dunklen Hintergründen vorbehalten.
Horizontal — monochrom weiß
Komplett weiß. Für stark strukturierte dunkle Hintergründe (dunkle Fotos) oder monochrome Medien.
Vertikal — Signature (dunkler Hintergrund)
Vertikale DNA-Variante. Wird im Footer der Website verwendet.
Signature-Variante — Blatt in #38E54D (DNA-Grün). Dunklen Hintergründen vorbehalten.
Vertikal — Schwarz (monochrom)
Vertikal monochrom schwarz. Druck, Fax, Schwarz-Weiß-Medien.
Bildmarke
Das Blatt
Die Bildmarke allein, für Favicons, Social-Avatare, Wasserzeichen und Signaturen zu verwenden.
Verwendung des Logos
Empfohlen & zu vermeiden
Empfohlen
- Einen Freiraum um das Logo einhalten (≥ Höhe des Blatts).
- Die für den Kontrast des Hintergrunds passende Variante verwenden.
- Die ursprünglichen Proportionen beibehalten (nicht verzerren).
- SVG für Web und Druck bevorzugen.
Zu vermeiden
- Die Farben nicht außerhalb der offiziellen Palette verändern.
- Keine Effekte hinzufügen (Schatten, Konturen, Verläufe).
- Das Logo nicht drehen oder verzerren.
- Das Logo nicht auf einen kontrastarmen Hintergrund setzen.
Maskottchen
Keeper
Markenfigur für freundliche Illustrationen, Fehlerseiten und die interne Kommunikation.
Keeper ist unser Maskottchen. Es erscheint hauptsächlich in spielerischen Kontexten (404-Seite, interne Medien, Events). Sparsam in kommerzieller Kommunikation einsetzen — in formellen Kontexten das Logo bevorzugen.
Farben
Palette
Drei unterschiedliche Rollen: ein universelles Grün für den alltäglichen Gebrauch, ein Signaturgrün für die DNA auf dunklem Hintergrund und ein Lime-Akzent für typografische Hervorhebungen. CSS-Tokens definiert in global.css — immer das Token referenzieren, niemals den Hex-Wert fest codieren.
Auf hellem Hintergrund — Arbeitsfarben
#27a273
Brand primary
--color-brand-primary Universell. Buttons, Links, UI-Akzente, Leaf des „Tag"-Logos. Alle Hintergründe, alle Kontexte.
#1a8a5e
Brand primary dark
--color-brand-primary-dark Hover / Pressed des Brand Primary.
#e1ffa0
Accent lime
--color-accent-lime Typo-Hervorhebung nur auf hellem Hintergrund („gelber Textmarker"-Effekt auf Schlüsselwörtern). Keine Markenfarbe.
Auf dunklem Hintergrund — Signature-DNA
#38E54D
Vert signature
--color-signature Historische DNA. Nur für dunkle Hintergründe und Momente mit hoher Wirkung: „Nacht"-Logo, Live-Badges, laufende Sitzungen, Hero-Dark-Akzente. Nie auf hellem Hintergrund (Lesbarkeit).
Grünskala
#c8fbe7
green-50
--color-green-50 Sehr helle Hintergründe, Hero-Verläufe.
#a8eccc
green-100
--color-green-100 Getönte Sekundärflächen.
#5fc99c
green-300
--color-green-300 Illustrationen und Zwischen-States.
#27a273
green-500
--color-green-500 Identisch mit Brand Primary.
#32735f
green-600
--color-green-600 Text auf hellem Hintergrund, dezente Akzente.
#1a3e39
green-700
--color-green-700 Dunkle Tertiärflächen.
#164038
green-800
--color-green-800 Dunkle Sekundärflächen.
#143109
green-900
--color-green-900 Tiefe dunkle Flächen, Premium-Bereiche.
#071412
green-950
--color-green-950 Footer, dunkle Signature-Hintergründe, Hero Dark.
#071412
ink
--color-ink Haupttext. Identisch mit green-950.
#ffffff
paper
--color-paper Haupthintergrund, Flächen.
#fafafa
paper-soft
--color-paper-soft Alternierende Bereiche, Karten.
#e6e6e6
paper-mute
--color-paper-mute Ränder, Trennlinien, deaktiviert.
Typografie
Schriften
Zwei Hauptschriften — eine Display-Schrift für Titel, eine Sans-Serif für Fließtext. Mono-Stack für Code.
Averta Std
Display — Überschriften
--font-display EV-Ladeüberwachung für Profis
Geometrische Sans, Premium-Charakter. Nur für H1–H6.
Fallback: General Sans, Inter, system-ui.
General Sans
Text — Fließtext & UI
--font-sans Die vollständige, interoperable und skalierbare Supervisionslösung.
Neutrale Sans-Serif, hervorragende Bildschirmlesbarkeit. Für den gesamten Fließtext und die UI.
Fallback: Inter, system-ui, Segoe UI, sans-serif.
ui-monospace
Code, Tokens
--font-mono OCPP 2.0.1 · API_KEY=ck_…
System-Stack: SFMono-Regular, Menlo, Monaco, Consolas, monospace.
Keine Custom-Schrift — Performance und OS-Konsistenz.
Typografische Skala
H1 — Display 6xl
H2 — Display 5xl
H3 — Display 4xl
H4 — Display 2xl
Intro-Absatz — lg/xl, text-ink/80.
Fließtext — base, text-ink/70.
Notiz / Caption — sm, text-ink/60.
Eyebrow — xs, uppercase, tracking large, brand-primary
Sind Sie Partner?
Laden Sie die Logos direkt von dieser Seite herunter. Für zusätzliche Formate (AI, EPS, hochauflösende Vektoren) oder spezifische Co-Brandings kontaktieren Sie uns.