Zum Inhalt springen
Marke und Design

Alles zum Mitnehmen.

Logo, Banner, Farben, Schrift und jeder Baustein, aus dem diese Seite gebaut ist. Dateien herunterladen, Werte anklicken, fertig. Damit ein Angebot, eine Anzeige und die Website aussehen, als kämen sie aus demselben Haus.

  • SVG und PNG
  • 21 Symbole
  • Farbwerte per Klick

Alles in einem Paket

Leistungsbeschreibung, Angebotsvorlage in Word und als ausfüllbares PDF, der Aufnahmebogen fürs Setup und der komplette Markenordner. Ein Download, damit niemand vier Dateien einzeln sucht.

Unterlagen herunterladen

Dateien

Logo und Zeichen

SVG für alles, was gedruckt oder skaliert wird. PNG für alles, was ein SVG nicht annimmt. Die Wortmarke steckt als Pfad im SVG, es braucht also keine Schrift auf dem Rechner.

Recrio Logo

Logo

Zeichen und Wortmarke nebeneinander. Der Standardfall.

SVG PNG
Recrio Logo, weiß

Logo, weiß

Für dunkle Flächen: Fotos, den blauen Aufmacher, Folien.

SVG PNG
Recrio Zeichen

Zeichen

Nur die Kachel. Für Profilbilder, Favicons und kleine Größen.

SVG PNG
Recrio Wortmarke

Wortmarke

Nur der Schriftzug, in Pfaden. Braucht keine Schrift auf dem Rechner.

SVG PNG
Drei Regeln

Mehr braucht es nicht.

  • Der Radius gehört zum Zeichen. Die Kachel nie eckig setzen und nie runder machen, als sie ist.
  • Auf dunklem Grund die weiße Fassung nehmen, nicht die dunkle mit Schatten hinterlegen.
  • Um das Logo herum mindestens die halbe Kachelbreite frei lassen.

Banner

Für Vorschau und Signatur

Fertige Flächen mit Logo und Zeile. Beide auch als SVG, falls der Text getauscht werden soll.

Recrio Banner 1200 × 630
Banner 1200 × 630

Das Bild, das erscheint, wenn jemand recrio.de in WhatsApp, LinkedIn oder Slack teilt.

Recrio Banner 1600 × 400
Banner 1600 × 400

Breites Format für Briefköpfe, Folien und E-Mail-Signaturen.

Farben

Anklicken, eingefügt

Blau trägt jede Betonung, höchstens eine je Überschrift. Alles andere ist Grau mit einem Stich ins Blaue, damit die Flächen zur Palette gehören und nicht nur farblos sind.

Marke

Primär
--color-primary
Primär, dunkler
--color-primary-hell
Primär, Fläche
--color-primary-soft
Akzent
--color-accent

Schrift und Linien

Text
--color-ink
Text, weicher
--color-ink-soft
Nebentext
--color-muted
Beschriftung
--color-faint
Linie
--color-line

Flächen

Papier
--color-paper
Grund
--color-ground
Erfolg
--color-success
Erfolg, Fläche
--color-success-soft

Dunkler Aufmacher

Verlauf, oben
hero-1
Verlauf, Mitte
hero-2
Verlauf, unten
hero-3
Akzent auf Blau
hero-akzent
Leuchten
hero-glanz

Schrift

Zwei Schriften, keine dritte

Zwei Schriften mit klarer Aufgabe: Instrument Sans für Überschriften, Inter für alles, was gelesen wird. Beide kostenlos bei Google Fonts.

Aufmachertext-4xl sm:text-6xl · Instrument Sans Bold
Von Vermittlern für Vermittler
Abschnitttext-3xl sm:text-4xl · Instrument Sans Bold
Von Vermittlern für Vermittler
Überschrifttext-2xl · Instrument Sans Bold
Von Vermittlern für Vermittler
Kartenkopftext-base · Instrument Sans Semibold
Von Vermittlern für Vermittler
Fließtexttext-[15px] · Inter
Von Vermittlern für Vermittler
Beschriftungtext-xs · Inter, gesperrt, Versalien
Von Vermittlern für Vermittler

Symbolsatz

Eine Familie, kein Sammelsurium

Einundzwanzig Symbole, alle 24 × 24, alle als Strich in der Textfarbe, alle mit derselben Strichstärke. Ein Klick kopiert den Namen.

Bausteine

Knöpfe, Karten, Kacheln

Dieselben Bauteile, aus denen jede Seite hier besteht. Wer eine Präsentation oder ein Angebot setzt, hat damit die Formen beisammen.

Knöpfe
Auszeichnung und Kennzahl
Von Vermittlern für Vermittler
23
Module, einzeln zuschaltbar
DE
Rechenzentrum in Deutschland
Karten
01

Nummeriert

Für alles, was eine Reihenfolge hat.

Mit Symbol

Für alles, was nebeneinander steht.

Fensterrahmen
recrio.de · Pipeline
Fragen zum Aufklappen
Wofür ist dieser Baustein?
Für alles, was sonst eine Tabelle wäre. Eine Frage ist ein Einstieg, eine Tabellenzeile nicht.
Wie viele Fragen passen hinein?
Fünf bis acht. Danach liest niemand mehr.
Ablaufkette
  1. 01Schritt

    Erste Station

    Ein Satz, der sagt, was hier passiert.

  2. 02Schritt

    Zweite Station

    Ein Satz, der sagt, was hier passiert.

  3. 03Schritt

    Dritte Station

    Ein Satz, der sagt, was hier passiert.

  4. 04Schritt

    Vierte Station

    Ein Satz, der sagt, was hier passiert.

  5. 05Schritt

    Fünfte Station

    Ein Satz, der sagt, was hier passiert.

  6. 06Schritt

    Sechste Station

    Ein Satz, der sagt, was hier passiert.

Maße

Die übrigen Werte

Radien, Schatten und Abstände. Wer damit baut, muss nicht raten, wie stark ein Schatten sein darf.

Radius, Karte12 px
Radius, Fläche16 px
Radius, Knopf8 px
Schatten, ruhendkaum sichtbar
Schatten, angehobenbeim Überfahren
Schatten, Fensterunter Bildschirmausschnitten
Abschnitt, Höheinnen oben und unten
ZeilenbreiteFließtext

Etwas fehlt hier?

Sagen Sie kurz Bescheid, welches Format Sie brauchen. Dann liegt es am nächsten Tag hier.