Markenrichtlinien · Grundlagen

Version 1.0 · September 2026

MarkenrichtlinienDie Grundlagen

Logo, Farbe und Typografie. Alles, was Sie für den korrekten Einsatz der Marke vignetim. brauchen.

PDF herunterladen Logos herunterladen

01 · LogoLogovarianten & Farbe

Logo

Logovarianten & Farbversionen

Vier freigegebene Logovarianten

Horizontal · Symbol

Standard. Web, Dokumente, Präsentationen, E-Mail-Signaturen.

PNG

Vertikal · Symbol

Quadratische und hochformatige Flächen, Social Media, Roll-ups.

PNG

Horizontal · Badge

Header in der App, App-Store-Grafiken.

PNG

Vertikal · Badge

Splashscreens, Werbemittel.

PNG

Drei Farbversionen

Teal / heller Hintergrund

Weiß, Neutral 50, Teal 50.

PNG

Weiß / Teal-Hintergrund

Teal 500 bis 800.

PNG

Weiß / dunkler Hintergrund

Neutral 800 bis 900, auf Fotos.

PNG

Ebenfalls verfügbar

Für einfarbigen Druck gibt es eine einfarbig dunkle Version. Verwenden Sie diese Datei, statt in Graustufen umzuwandeln.

Einfarbig dunkel

PNG

Die Wortmarke steht immer in Kleinbuchstaben, mit Punkt: vignetim. Den ersten Buchstaben nie großschreiben und keine Laufweite hinzufügen.
Das Teal-Badge nie auf einen Teal-Hintergrund setzen. Es geht darin unter. Auf Teal das weiße Symbol allein verwenden.
Symbol oder Badge allein verwenden nur dann, wenn der Markenname an anderer Stelle derselben Fläche erscheint: App-Icon, Favicon, Profilbild.
Logovarianten nie von Hand zusammensetzen. Immer die bereitgestellte Datei verwenden; die Elemente nie neu anordnen.

01 · LogoSchutzzone & Größe

Schutzzone & Mindestgröße

Raum zum Atmen, Größen, die lesbar bleiben

Lassen Sie auf allen Seiten des Logos mindestens 0.5 X Schutzzone frei. X ist die Höhe des Symbols (oder Badges) in der jeweiligen Logovariante. Kein Text, Bild, keine Linie, kein anderes Logo und kein Seitenrand darf in diesen Bereich ragen.

Gestrichelte Linie = Logobegrenzung · Schattierte Fläche = Schutzzone

Mindestgrößen

Element	Digital	Druck
Horizontale Variante · Symbol	140 px	30 mm
Horizontale Variante · Badge	160 px	34 mm
Vertikale Variante · Symbol	72 px	16 mm
Vertikale Variante · Badge	80 px	18 mm
Symbol (allein)	20 px	5 mm
Badge (allein)	44 px	8 mm

Die Werte sind Breiten. Unterhalb dieser Größen Symbol oder Badge allein statt einer Logovariante verwenden.

Zwei Ausnahmen

App-Icon: Die Schutzzonenregel gilt nicht. Das Badge füllt den Rahmen aus, die Plattform rundet die Ecken ab.
Favicon (16 bis 32 px): Das Badge wird unleserlich; verwenden Sie das reine Teal-Symbol auf transparentem Hintergrund.

Neben anderen Logos

Halten Sie zwischen zwei Logos mindestens 1 X Abstand und gleichen Sie sie auf dieselbe optische Höhe an.

02 · FarbeFarbpalette

Farbe

Eine Markenfarbe, eine neutrale Skala

Die Markenfarbe ist Teal 500 · #049CB9. Es gibt keine sekundäre Markenfarbe; Tiefe entsteht durch die Abstufungen der Teal-Skala und durch neutrale Grautöne.

Vignetim teal

Neutraltöne

Technische Werte

HEX: #049CB9
RGB: 4 · 156 · 185
CMYK (Ref.): 98 · 16 · 0 · 27
PANTONE (ca.): 313 C bis 314 C

CMYK ist ein berechneter Referenzwert; mit dem ICC-Profil der Druckerei umwandeln.

Verwendungsverhältnis

70%

20%

10%

Weiß / Neutral 50: Weißraum
Neutral 600 bis 900: Text und Struktur
Teal: Akzent und Aktion

Jeder Screen hat genau eine primäre Aktion in Teal.

Button-Zustände

Standard · Teal 500

Hover · Teal 600

Gedrückt · Teal 700

Sekundär

Drei Kontrastregeln

Teal 500 ist keine Textfarbe (3.25:1 auf Weiß). Für Text und Links Teal 700 verwenden.
Weißer Text auf Teal 500 muss mindestens 18 px / 14 pt fett sein; für kleineren Text einen Hintergrund in Teal 700 verwenden.
Im Dark Mode ist der Akzent Teal 300 bis 400; Teal 500 reicht auf dunklen Hintergründen nicht aus.

03 · TypografieInter

Typografie

Inter, eine Schrift, vier Schnitte

Inter ist die einzige Schrift der Marke. Verwendet werden nur die Schnitte 400, 500, 600 und 700. Kann Inter nicht geladen werden, auf die Systemschrift und danach auf Arial ausweichen.

Aa Bb Cc Çç Ğğ Iı İi Şş Öö Üü 0123456789

Regular · 400

Fließtext, längere Texte.

Medium · 500

Labels, Tabellenköpfe, Hervorhebungen.

SemiBold · 600

Überschriften, Buttons, Overlines.

Bold · 700

Nur für Kampagnen-Headlines.

H1 32 / 38 px · 600 · -0.020em

Ihre Vignette, fertig vor der Grenze

H2 24 / 30 px · 600 · -0.016em

Wie funktioniert eine digitale Vignette?

H3 20 / 26 px · 600 · -0.012em

Geben Sie das Kennzeichen Ihres Fahrzeugs ein

Body 16 / 26 px · 400

Die App erinnert Sie, wenn Sie 30 km von der Grenze entfernt sind.

Body S 14 / 22 px · 400

Die Preise basieren auf dem offiziellen Vignettentarif des jeweiligen Landes.

Overline 11 / 14 px · 600 · +0.11em · CAPS

Länder · Preise · FAQ

Zeilenhöhe: 1.10 bis 1.25 für Überschriften, 1.50 bis 1.65 für Fließtext. Zeilenlänge 60 bis 75 Zeichen. Immer linksbündig.

Fließtext nicht in Großbuchstaben setzen. Großbuchstaben nur für Overlines und kurze Labels.
Fließtext nicht sperren und nicht in Teal setzen.
Text nicht strecken oder neigen; keine unechte Kursive oder unechte Fettung.
Nicht mehr als vier Ebenen auf einer Fläche verwenden.

Die Falle der türkischen Großbuchstaben

Bei der automatischen Umwandlung muss aus “i” ein İ werden. Setzen Sie lang="tr" im HTML und verwenden Sie toLocaleUpperCase('tr') im Code. Sonst wird aus “istanbul” “ISTANBUL”.

Umgekehrt gilt das auch: Englischer Text braucht lang="en", sonst wird aus “Size” “SİZE”.

Sprachen: latin-ext-Subsets für TR und RO, cyrillic für UA, latin für DE und EN. Alle sind Teil von Inter. Für eine andere Sprache nie die Schrift wechseln.

01 · LogoFalsche Verwendung

Falsche Verwendung

Was mit dem Logo nie passieren darf

Diese Liste ist nicht vollständig: Jede Veränderung des Logos gegenüber der bereitgestellten Datei gilt als falsche Verwendung.

Falsch: Proportionen verzerren — Proportionen verzerren

Falsch: Verlauf anwenden — Verlauf anwenden

Falsch: Kontur hinzufügen — Kontur hinzufügen

Falsch: Schatten und Effekte — Schatten und Effekte

Falsch: Elemente neu anordnen — Elemente neu anordnen

Falsch: Hintergrund mit geringem Kontrast — Hintergrund mit geringem Kontrast

Wortmarke neu setzen

Falsch: Schutzzone verletzen — Schutzzone verletzen

Falsch: In einen unnötigen Kasten setzen — In einen unnötigen Kasten setzen

Falsch: Transparenz anwenden — Transparenz anwenden

Falsch: Großbuchstaben und Laufweite — Großbuchstaben und Laufweite

Falsch: In Graustufen umwandeln — In Graustufen umwandeln

Ist einfarbiger Druck erforderlich, die freigegebene einfarbig dunkle Version verwenden, nicht Graustufen.

KurzübersichtAlles auf einer Seite

Kurzübersicht

Die ganze Richtlinie auf einen Blick

Farbkarte

Teal 500 · Marke#049CB9
Teal 700 · Text / Links#046B80
Teal 300 · Dark-Mode-Akzent#5FCEE2
Neutral 900 · Überschriften#161B1E
Neutral 600 · Sekundärtext#565E64
Neutral 50 · Fläche#F7F8F9

Fünf Regeln

Logo aus der bereitgestellten Datei verwenden.
Auf allen Seiten 0.5 X Schutzzone freilassen.
Teal 500 ist keine Textfarbe. Teal 700 verwenden.
Eine Schrift: Inter, 400 / 500 / 600 / 700.
Höchstens 10 % einer Fläche sind Teal.

Dateiliste

Alle LogosZIP
vignetim-horizontal-tealPNG
vignetim-horizontal-whitePNG
vignetim-horizontal-single-colour-darkPNG
vignetim-vertical-tealPNG
vignetim-badge-horizontalPNG
vignetim-badge-verticalPNG
vignetim-badgePNG
vignetim-symbol-teal / whiteAuf Anfrage
vignetim-appicon-1024Auf Anfrage
vignetim-favicon-16/32/48Auf Anfrage

Für Druck und Großformate die Vektordateien (SVG oder EPS) anfordern. PNG nur dort, wo Vektoren nicht unterstützt werden.

App-Icon

App Store (iOS): 1024 × 1024 px, ohne Transparenz
Google Play: 512 × 512 px, 32-Bit-PNG
Play · Feature-Grafik: 1024 × 500 px
Social-Media-Profil: 1000 × 1000 px

Laden Sie ein randloses Quadrat ohne abgerundete Ecken hoch. Das Betriebssystem rundet sie ab.

CSS-Variablen

:root {
  --brand-500: #049CB9;
  --brand-600: #03849E;
  --brand-700: #046B80;
  --brand-300: #5FCEE2;
  --brand-50: #EAF8FB;
  --ink-900: #161B1E;
  --ink-600: #565E64;
  --ink-200: #DDE1E4;
  --ink-50: #F7F8F9;
  --font-sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

Fragen & Freigaben

Für jede Verwendung, die diese Richtlinie nicht abdeckt, oder um eine neue Datei anzufordern, wenden Sie sich an die Markenverantwortlichen.

Version 1.0 · September 2026