Five Dots / Designsystem / v1.0

Verbinde die Punkte.
Bewahre die Identität.

Eine praktische Referenz für die freigegebene Gestaltung der Website: selbstbewusste Typografie, ein blauer Verbindungspunkt, klare Produktgeschichten und gezielte Bewegung.

Designer-PDF herunterladen (Englisch) · Vollständigen Styleguide lesen (Englisch) · Design-Tokens · Social-Media-Banner (Englisch)
01 / Identität

Vier Grundlagen. Ein Verbindungspunkt.

Five Dots
Five Dots

Die Geometrie des Zeichens entspricht dem Favicon. Diese Beispiele kombinieren das Zeichen mit DM Sans. Bestehende einzelne SVG-Wortmarken verwenden noch Arial und benötigen für die externe Weitergabe eine geprüfte Version mit Pfadtext.

Logo-Downloads

Bereit für dein nächstes Profil.

Nutze das quadratische PNG für LinkedIn und andere Profilbilder. Beide Exporte sind 1024 × 1024 px groß, mit Abstand für quadratische oder runde Zuschnitte. Nutze SVG für skalierbare Gestaltung.

Transparente Zeichen

Zeichen für helle Hintergründe herunterladen (SVG)
Zeichen für dunkle Hintergründe herunterladen (SVG)

Kombiniere das Zeichen für eine vollständige Wortmarke mit DM Sans. Die älteren vollständigen SVG-Logos enthalten editierbaren Arial-Text und sind nicht die bevorzugten Vorlagen für neue externe Arbeiten.

Social-Media-Banner herunterladen (Englisch)

Eine Identität. Jeder Kanal.

Fertige englische Banner für LinkedIn-Unternehmensseiten, YouTube und X. Jedes Layout verwendet die freigegebene Zeile „Your RevOps consultant in your AI.“ Lade PNG zum Hochladen oder SVG mit Pfadtext für die Gestaltung herunter. Der eingebettete Bannertext bleibt Englisch.

Alle englischen Banner herunterladen (ZIP)

Die SVG-Schrift ist in Pfade umgewandelt, damit die Schriftarten erhalten bleiben. Prüfe den Zuschnitt vor der Veröffentlichung in der Upload-Vorschau jeder Plattform. Format- und Upload-Hinweise lesen (Englisch).

02 / Farbe

Blau mit Raum zum Atmen.

paper#FAFBFE
ink#202733
muted#526078
accent#3563E9
accentHover#254CBE
accentLight#E8EFFF
line#DDE3ED
white#FFFFFF
inverseText#F5F7FC
inverseAccent#82A5FF

Nutze Blau für Aktionen, aktive Zustände und den fünften Punkt. Halte große Flächen hell und Text dunkel. Vermeide grüne Markenakzente und orange Hauptschaltflächen.

03 / Typografie
Klares Denken.
Menschlicher Ausdruck.

DM Sans

Hauptüberschriften, Fließtext und Oberfläche. Klare Hierarchie, moderate Strichstärken und großzügige Zeilenhöhe.

Newsreader kursiv

Kurze redaktionelle Betonungen in Überschriften.

IBM PLEX MONO

Schritte, Abschnittsbezeichnungen und kleine technische Details.

Für neue Komponenten: 16 px Fließtext, 14 px Sekundärtext, mindestens 12 px für wichtige Hilfstexte. Übernimm keine winzigen Demo-Beschriftungen in Formulare.

04 / Komponenten

Mach den nächsten Schritt klar.

Dein RevOps-Berater in deinem KI-Assistenten.

Kombiniere eine klare Hauptaktion mit einer zurückhaltenderen Alternative.

Hauptaktion ↗ Alternative Aktion ↗

Beispielschaltflächen führen innerhalb dieser Anleitung weiter. 50 px Höhe · 7 px Radius · 13 px Beschriftung. Karten nutzen 12–14 px Radien, große Abschnittsflächen 18 px.

05 / Rhythmus und Bewegung

Raum zum Verstehen.

  • 1240 px Inhaltsbreite; 100 px Abschnittsabstand auf dem Desktop.
  • Spalten auf schmalen Bildschirmen untereinander anordnen; mobil meist 55–65 px Abschnittsabstand.
  • Wechsle offene, helle und dunkle Abschnitte für einen abwechslungsreichen Rhythmus.
  • Der Einstiegsbereich geht direkt in das Problem über.

Bewegung mit einem Zweck.

  • Einstiegsanimation: 5 Sekunden pro Phase.
  • Kundenlogos: kontinuierliche Schleife von 25 Sekunden.
  • Bei Hover und Fokus pausieren und reduzierte Bewegung berücksichtigen.
  • Wichtige Informationen nie hinter Animationen verstecken.
06 / Wiederverwendung

Erweitere das System bewusst.

Jede künftige Empfehlung sollte Nutzerbedarf, wiederverwendetes Muster, mobiles Verhalten und Auswirkungen auf Barrierefreiheit benennen. Neue Farben, Schriftarten und Logovarianten brauchen eine bewusste Markenentscheidung.

Diese Referenz dokumentiert die freigegebene Richtung. Vorgeschlagene Wiederverwendungsstandards und verbleibende CSS-/Asset-Unstimmigkeiten stehen im vollständigen Guide; dies ist keine Barrierefreiheitszertifizierung.