Brand Kit · für Presse, Partner und Team
Nutzen Sie unsere Marke richtig. Wir machen es Ihnen leicht.
Alles, was Sie brauchen, um Essentras zu erwähnen, zu verlinken oder darüber zu schreiben. Eine verbindliche Quelle. Am besten als Lesezeichen speichern.
Farbe
Eine Markenfarbe. Zwei, wenn man Schwarz mitzählt.
Klicken Sie auf ein Farbfeld, um den Hex-Code zu kopieren. Die Markenpalette stammt direkt aus der Instagram-Identität von @essentras.
Logo
Eine Wortmarke. Zwei Farbvarianten.
Das Logo ist die kleingeschriebene Wortmarke essentras in Inter 800 mit violettem Punkt. Schwarz auf hellem Hintergrund, Weiß auf dunklem. Der Punkt ist immer violett. Mehr braucht es nicht.
Auf hellem Hintergrund
color="ink"Standardvariante. Für weiße, fast weiße oder zart getönte Hintergründe. Wortmarke in Ink-900 (#0a0a0a), Punkt in Akzentfarbe (#7C3AED).
Auf dunklem Hintergrund
color="white"Invertiert für dunkle Hero-Bereiche, Fotoüberlagerungen und Video. Wortmarke in Weiß. Der Punkt bleibt violett. Tönen Sie ihn niemals zugunsten der Lesbarkeit um.
Skalierung: dieselbe Marke in jeder Größe
Quadratisches Icon · 2 Varianten
Zwei Richtungen. Eine Wahl.
Die horizontale Wortmarke funktioniert weder bei 16×16 (Browser-Tab) noch bei 1024×1024 (App-Icon). Wir brauchen eine quadratische Marke. Zwei Richtungen im Überblick: das „e." und der Punkt, jeweils in Violett und Weiß. Direkt nebeneinander vergleichen.
„e."
Die Wortmarke, reduziert auf den ersten Buchstaben samt Signaturpunkt. Vereint den Wiedererkennungswert des Anfangsbuchstabens und den Markenpunkt in einem Zeichen.
Violett ist der Standard: Greif darauf zurück, es sei denn, du brauchst die Marke ausdrücklich auf hellem Untergrund.
Der Punkt
Die pure Markensignatur. Nur der Punkt, groß skaliert als Marke. Maximal minimalistisch, maximal unverwechselbar. Das macht fast niemand.
Violett ist der Standard: Greif darauf zurück, es sei denn, du brauchst die Marke ausdrücklich auf hellem Untergrund.
Alle 4 im Vergleich · e. Violett · e. Weiß · Punkt Violett · Punkt Weiß
In deinem iOS-/macOS-Dock
In einer dunklen Oberfläche (Slack / Discord / Safari im Dark Mode)
Favicon im Browser-Tab (16 px): der Überlebenstest
So entscheidest du
Öffne diese Seite auf Smartphone und Laptop. Prüfe jede Variante im echten Kontext: Favicon-Leiste, Startbildschirm, Slack-Workspace-Icon. Wähle nicht, was dir isoliert gefällt. Wähle, was sich gegen 40 andere Apps behauptet. Schick deine Wahl an [email protected]: e. oder Punkt, und Violett oder Weiß.
Typografie
Zwei Schriften. Drei Rollen.
Inter übernimmt Titel und Fließtext. JetBrains Mono übernimmt Zahlen und Daten. Das ist das gesamte System. Beide kostenlos, beide bei Google Fonts, der gesamte Stack wiegt < 30 KB. Führe für kein Material, kein Deck, keine Anzeige und keinen Social Post eine dritte Schrift ein.
Inter
- Verwendete Schnitte
- 400 · 500 · 600 · 700 · 800 · 900
- Laufweite
- −2 % bei Titeln, Standard im Fließtext
- Lizenz
- OFL (kostenlos, keine Namensnennung erforderlich)
- Warum
- Wirkt wie modernes B2B (Stripe, Linear und GitHub setzen alle darauf)
JetBrains Mono
- Verwendete Schnitte
- 400 · 500 · 700
- Einsatz
- Zahlen, Kennzahlen, Tags, Code, Preis-Chips
- Lizenz
- Apache 2.0 (kostenlos)
- Warum
- Tabellarische Ziffern: DA / DR / Preis stehen sauber in Spalten
Schriftskala: was wo zum Einsatz kommt
Jede Stufe unten ist auf dieser Seite live im Einsatz. Wählen Sie nach Rolle, nicht nach Augenmaß. Die rechte Spalte zeigt den exakten Token: Tailwind-Klassen für die Website, Größe und Schnitt für alles andere.
text-5xl→6xl · tracking-tight · leading-[1.05] · einmal pro Seitetext-4xl→5xl · tracking-tight · Abschnittstiteltext-xl→2xl · tracking-tight · leading-snug · Kartentiteltext-lg · kleine Überschriften, Tabellen- und Kartenlabelstext-xs · GROSSBUCHSTABEN · tracking-[0.2em] · Akzent Violetttext-lg · leading-relaxed · ink-600 · Introstext-base (16px) · leading-relaxed · ink-700 · Standardtext-sm · ink-600 · Sekundärtext, Fußnotentext-xs · tracking-wider · Zeitstempel, Labelsfont-mono · tabular-nums · alle Zahlen, Preise, DA/DRInter-Schriftschnitte: wann Sie zu welchem greifen
Sechs Schnitte, jeder mit einer klaren Aufgabe. Wenn Sie zwischen zwei schwanken, wählen Sie den leichteren.
Schrift für Social Media & Grafiken
Dieselben zwei Schriften, skaliert für Canvas-Formate. Konkrete Pixelgrößen sorgen dafür, dass ein Instagram-Post, ein Deck und die Website einheitlich wirken. Headlines in Inter, Zahlen in JetBrains Mono, ausnahmslos.
- Overline
- Inter Medium · 28px · 0.2em · GROSSBUCHSTABEN
- Headline
- Inter ExtraBold 800 · 96px · tracking-tight · line-height 1.05
- Fließtext
- Inter Regular · 44px · line-height 1.4
- Kennzahl / Zahl
- JetBrains Mono Bold · 120px+
- Overline
- Inter Medium · 32px · 0.2em · GROSSBUCHSTABEN
- Headline
- Inter ExtraBold 800 · 120px · tracking-tight
- Fließtext
- Inter Regular · 48px
- CTA-Chip
- Inter Semibold · 40px
- Overline
- Inter Medium · 24px · 0.2em · GROSSBUCHSTABEN
- Headline
- Inter Bold 700 · 72px · tracking-tight
- Fließtext
- Inter Regular · 34px · line-height 1.5
- Quelle / Handle
- JetBrains Mono · 26px
- Zitat
- Inter Regular 400 · 56px · Zeilenhöhe 1.35
- Name
- Inter Semibold 600 · 32px
- Position / Unternehmen
- JetBrains Mono · 26px · ink-500
- Marke
- Wortmarke oder „e."-Icon, unten links
- ✓Alles linksbündig. Headlines, Fließtext, Kennzahlen: bündig links.
- ✓Headlines eng gesetzt (Zeilenhöhe 1.05). Fließtext luftig (1.4–1.6).
- ✓Beginnen Sie mit einer Zahl in JetBrains Mono, wenn Sie eine haben.
- ✓Weißer (#fff) oder fast schwarzer (#0a0a0a) Hintergrund. Violett (#7C3AED) als einziger Akzent.
- ✓Schließen Sie mit der Wortmarke oder dem violetten „e."-Icon ab, klein, in einer Ecke.
- ✗Keine zentrierten Absätze. Kein Blocksatz.
- ✗Keine dritte Schrift: weder Montserrat noch Poppins noch eine „lustige" Display-Schrift.
- ✗Keine Schlagschatten, Konturen, Verläufe oder Schrägstellung bei Schrift.
- ✗Kein ExtraBold im Fließtext: 800 ist nur für Headlines und die Wortmarke.
- ✗Keine Zahlen in Inter, wenn JetBrains Mono verfügbar ist. Sie richten sich nicht sauber aus.
Nutzungsregeln
Klares Ja. Klares Nein.
- ✓Verwenden Sie die kleingeschriebene Wortmarke mit violettem Punkt. Das ist die Marke.
- ✓Setzen Sie für die Wortmarke immer Inter ExtraBold (800) ein.
- ✓Auf dunklem Hintergrund wird die Wortmarke weiß invertiert. Der Punkt bleibt violett.
- ✓Halten Sie den Mindestabstand ein: die Höhe eines kleinen „x" auf allen Seiten.
- ✓Unter 14px verschwindet der Punkt bei bestimmten DPRs. Das ist in Ordnung.
- ✓Skalieren Sie gleichmäßig. Der Punkt skaliert proportional zur Wortmarke.
- ✗„Essentras“ in Produkttexten nicht großschreiben: immer klein.
- ✗Keinen Punkt hinter die Wortmarke setzen („essentras.“ wirkt veraltet).
- ✗Weder „seit 2018“ noch andere Datumsangaben neben der Marke platzieren.
- ✗Die Wortmarke nicht in einen Kreis, ein Badge oder einen farbigen Container setzen.
- ✗Für die Marke weder Gilroy noch Montserrat noch eine andere Schrift als Inter verwenden.
- ✗Keine Schatten, Konturen, Umrandungen, Verläufe oder Schrägstellungen anwenden.
- ✗Nicht horizontal oder vertikal strecken.
- ✗Den Punkt nicht umfärben: Er ist immer #7C3AED (Akzentfarbe).
Stimme & Tonalität
Direkt. Konkret. Menschlich.
Konkrete Regeln
- Ziffern verwenden. „60“, nicht „sechzig“. „7 Tage“, nicht „sieben Tage“. Zahlen ziehen den Blick an.
- <b></b>
- x
- x
- x
- x
- x