Pitch: Mutige geometrische Selbstsicherheit auf einer lila Bühne

7 Min. Lesezeit • 1207 Worter
Pitch: Mutige geometrische Selbstsicherheit auf einer lila Bühne screenshot

„Das Werkzeug, mit dem man Präsentationen erstellt, sollte selbst die beste Präsentation im Raum sein.” — Christian Reber, Gründer

Pitch existiert, weil Präsentationssoftware in den 1990er-Jahren aufgehört hat, sich ästhetisch weiterzuentwickeln. Gegründet in Berlin von Christian Reber und dem Team hinter Wunderlist, hat Pitch neu gedacht, was passiert, wenn Designer ein Präsentationswerkzeug für Designer entwickeln. Wo Google Slides zweckmäßig wirkt und PowerPoint den Eindruck von Konzernwelt vermittelt, öffnet Pitch mit einem randlosen lila Farbverlauf-Hero, bevölkert mit schwebenden 3D-Glasformen — und stellt damit sofort klar, dass dies ein Produkt mit klaren Vorstellungen davon ist, wie Präsentationen aussehen sollten.

Wichtigste Erkenntnisse

  1. Lila als Bühne, nicht als Akzent – Die meisten Marken verwenden ihre Farbe als Button-Tönung. Pitch nutzt Lila als gesamte Umgebung für seinen Hero-Bereich und schafft so einen theatralischen Auftakt, der gleichzeitig als Produktdemonstration dient.
  2. Extra-fette Schrift signalisiert Autorität – Überschriften mit Schriftstärke 800 (schwerer als bei fast jedem SaaS-Wettbewerber) kommunizieren null Zögern bezüglich der Produktpositionierung.
  3. Zweistufige Typografie erzeugt Rhythmus – Dichte, schwere Überschriften mit Zeilenhöhe 1,0, gefolgt von luftigem Fließtext mit Zeilenhöhe 2,0, erzeugen einen dramatischen Wechsel zwischen „Aufmerksamkeit erregen” und „lesen lassen”.
  4. Individuelle Schriftarten sind Wettbewerbsvorteile – Die geometrische Weichheit von Eina01 ist mit Systemschriften nicht reproduzierbar, sodass jeder Wettbewerber, der Inter verwendet, im Vergleich generisch wirkt.
  5. Template-first Onboarding löst das Problem der leeren Leinwand – Die Template-Galerie ist der Haupteingang und zeigt Nutzern, wie „gut” aussieht, bevor sie selbst etwas erstellen.

Warum Pitch wichtig ist

Pitch hat bewiesen, dass Produktivitätssoftware das gleiche visuelle Handwerk aufweisen kann wie die Artefakte, die sie erzeugt. In einer Kategorie, die von Werkzeugen dominiert wird, die völlig anders aussehen als ihre Ergebnisse, lebt Pitch vor, was es predigt: Die Marketing-Website ist selbst eine Präsentation, und die Template-Galerie des Produkts setzt einen Qualitätsstandard, der die Ergebnisse jedes Nutzers aufwertet.

Zentrale Errungenschaften: - Entwickelt vom Wunderlist-Team (von Microsoft übernommen), das ein Consumer-Grade-Designverständnis in B2B-Software einbringt - Wegbereiter für Echtzeit-Multiplayer-Zusammenarbeit mit sichtbaren Cursorn als Designelement, nicht nur als Feature - Einführung von KI-Aktionen für markengerechte Texte und Visuals, die Nutzer zu höherer Qualität führen, anstatt Komplexität hinzuzufügen

Zentrale Designprinzipien

1. Die lila Bühne

Der Hero-Farbverlauf ist kein farbiger Abschnitt — er ist eine Präsentationsbühne. Ein lebhafter lila Farbverlauf füllt das gesamte Viewport, bevölkert mit halbtransparenten 3D-Glasobjekten, die Licht einfangen und Pitch’ Verständnis von Material, Tiefe und Komposition demonstrieren. Das Produkt verkauft sich selbst, indem es eine Präsentation ist.

Unterhalb des Hero wechseln die Abschnitte zu sauberen weißen Hintergründen mit warmem Anthrazittext (rgb(43,42,53)) — eine Farbe mit einem subtilen lila Unterton, die mit der Markenidentität harmoniert, anstatt einen harten Kontrast zu erzeugen.

┌─────────────────────────────────────────┐
│  ░░░░ LEBHAFTER LILA FARBVERLAUF ░░░░  │
│  ░░░░ 3D-Glasformen schweben ░░░░░░░░  │
│  ░░░░░ WEISSE FETTE ÜBERSCHRIFT ░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  Sauberer weißer Abschnitt              │
│  Warmer Anthrazittext (43,42,53)        │
│  Großzügige Zeilenhöhe 2,0 im Fließtext│
│                                         │
└─────────────────────────────────────────┘

2. Monumentale Typografie mit Eina01

Pitch hat Eina01 in Auftrag gegeben, eine geometrische Sans-Serif mit weichen, abgerundeten Endungen, die jeder Überschrift eine unverwechselbare Wärme verleihen. Bei Schriftstärke 800 (extra-fett) tragen Überschriften die Bestimmtheit eines Keynote-Speakers, der sein Material beherrscht.

Die Schriftstufung arbeitet in zwei unterschiedlichen Modi. Überschriften sind dicht und wirkungsvoll: 80px Display-Text bei Zeilenhöhe 1,0 mit -1,6px Buchstabenabstand, wobei Ober- und Unterlängen zwischen den Zeilen fast berühren und so grafische Elemente statt bloßem Text erzeugen. Der Fließtext ist das Gegenteil — 18px bei Zeilenhöhe 2,0, außergewöhnlich großzügiger Abstand, der Prosa eine entspannte, editoriale Qualität verleiht, als würde man eine gut gesetzte Zeitschrift lesen.

Negativer Buchstabenabstand skaliert proportional mit der Größe: -2% sowohl bei 80px (-1,6px) als auch bei 42px (-0,84px), wodurch die optische Dichte bei jeder Überschriftengröße erhalten bleibt.

3. Zurückhaltendes Interaktives Design

Jedes interaktive Element bewegt sich im Raum zwischen scharfen Unternehmenskanten und verspielter Consumer-Rundung. Der 6px Button-Radius signalisiert „professionelles Kreativwerkzeug” — bewusst genug, um aufzufallen, zurückhaltend genug, um ernst genommen zu werden. Button-Padding von 24px horizontal bietet komfortable Klickziele ohne Ausufern.

Die Navigationsleiste mit 60px ist bewusst kompakt. Bei einem Präsentationswerkzeug sollte der Inhalt immer größer wirken als die Benutzeroberfläche. Eine Ankündigungsleiste fügt 72px Werbefläche oberhalb der Navigation hinzu, ohne das Layout zu überladen.

Übertragbare Muster

Pitch’ Designsystem bietet mehrere Muster, die sich direkt auf andere Projekte übertragen lassen. Die warme Anthrazit-Textfarbe ist am unmittelbarsten anwendbar: rgb(43,42,53) vermeidet die Härte von reinem Schwarz bei gleichzeitiger Lesbarkeit, und ihr subtiler lila Unterton schafft Zusammenhalt mit jeder lila-nahen Markenpalette.

Das zweistufige Typografiesystem funktioniert in jedem Kontext, in dem Wirkung und Lesbarkeit in Einklang gebracht werden müssen:

:root {
  /* Pitch-inspirierte selbstbewusste lila Palette */
  --color-background: rgb(255, 255, 255);
  --color-text-primary: rgb(43, 42, 53);
  --color-brand-purple: #7B2FF2;
  --color-white: rgb(255, 255, 255);

  /* Typography */
  --font-display: "Eina01", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --nav-height: 3.75rem;
  --button-radius: 6px;
  --button-padding: 0 24px;
}

/* Display headline — dense, heavy, tight */
.display {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1.6px;
  color: var(--color-text-primary);
}

/* Section headline */
.section-heading {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.84px;
  color: var(--color-text-primary);
}

/* Body — generous breathing room */
.body {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: var(--color-text-primary);
}

/* Hero gradient stage */
.hero {
  background: linear-gradient(135deg, #7B2FF2 0%, #4A0E8F 100%);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA button — 6px radius, professional creative */
.button-primary {
  border-radius: 6px;
  padding: 0 24px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  background: var(--color-brand-purple);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

Für iOS-Anwendungen lassen sich dieselben Prinzipien durch System-Gewichtszuordnungen und die Leading-Modifier von SwiftUI übertragen:

extension Color {
    static let pitchBackground = Color.white
    static let pitchText = Color(red: 43/255, green: 42/255, blue: 53/255)
    static let pitchPurple = Color(red: 123/255, green: 47/255, blue: 242/255)
}

extension Font {
    static let pitchDisplay = Font.system(size: 80, weight: .heavy)
        .leading(.tight)
    static let pitchHeading = Font.system(size: 42, weight: .heavy)
    static let pitchBody = Font.system(size: 18, weight: .regular)
        .leading(.loose)
}

struct PitchButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color.pitchPurple)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 6))
            .opacity(configuration.isPressed ? 0.85 : 1.0)
    }
}

Design-Lektionen

Die Wahl von Lila in einem Meer aus Blau zahlt sich aus. In einer Landschaft, in der Slack, Notion, Linear und Figma alle auf Blau setzen, hebt sich Pitch’ Lila sofort von der Masse ab. Lila signalisiert Kreativität und Premium-Positionierung — genau die Assoziationen, die ein Präsentationswerkzeug braucht.

Schriftstärke 800 ist eine Entscheidung über die Markenstimme. Die meisten SaaS-Websites verwenden 600–700 für Überschriften. Pitch’ extra-fette Wahl dient nicht der Lesbarkeit — sie dient der Persönlichkeit. Die Marke schlägt nicht vor, es auszuprobieren; sie sagt, dies ist das Werkzeug. Verwenden Sie schwere Schriftstärken nur, wenn die Positionierung Ihres Produkts dieses Maß an Bestimmtheit unterstützt.

Zeilenhöhe 1,0 bei Display-Text erzeugt grafische Elemente. Wenn Ober- und Unterlängen fast berühren, werden Überschriften nicht mehr als Text gelesen, sondern funktionieren als visuelle Architektur. Das funktioniert nur bei großen Schriftgrößen (60px+), bei denen einzelne Buchstabenformen klar unterscheidbar sind.

Vermeiden Sie reines Schwarz bei einer farbigen Marke. Pitch’ warmes Anthrazit (rgb(43,42,53)) bewahrt den Seitenzusammenhalt, weil sein Unterton zur lila Palette passt. Reines Schwarz erzeugt einen Bruch, der das visuelle System untergräbt.

Vermeiden Sie dünne Schriftstärken bei einer auf Selbstsicherheit ausgerichteten Marke. Die leichteste Überschriften-Schriftstärke, die Pitch verwendet, ist 800. Fließtext mit 400 ist die einzige Ausnahme. Das Einmischen von 300 oder 400 bei Überschriften würde die bestimmte Positionierung untergraben, die die Marke aufzubauen sucht.

Häufig gestellte Fragen

Was macht Pitch’ Design unverwechselbar im Vergleich zu anderen Präsentationstools?

Pitch nutzt seine Marketing-Website als Demonstration seiner eigenen Produktphilosophie. Der randlose lila Farbverlauf-Hero mit 3D-Glasformen, Eina01-Überschriften mit Schriftstärke 800 und zweistufige Typografie (dichte Überschriften, luftiger Fließtext) schaffen eine Ästhetik, die sich unverkennbar vom zweckmäßigen Charakter von Google Slides oder dem Unternehmensgewicht von PowerPoint unterscheidet.

Wie setzt Pitch Farbe anders ein als typische SaaS-Produkte?

Die meisten SaaS-Marken verwenden ihre Primärfarbe als Akzent — farbige Buttons auf weißem Hintergrund. Pitch kehrt dies um, indem es lebhaftes Lila als gesamte Umgebung für seinen Hero-Bereich nutzt und so eine immersive Bühne statt dekorativer Tupfer schafft. Das Lila ist unapologetisch gesättigt, niemals mit Grau oder Weiß verdünnt.

Warum verwendet Pitch so schwere Schriftstärken?

Die Überschriften mit Schriftstärke 800 (extra-fett) sind eine bewusste Entscheidung über die Markenstimme. Bei dieser Stärke kommuniziert Typografie Überzeugung und Expertise, anstatt Inhalte nur zu beschriften. Es passt zu Pitch’ Positionierung als Werkzeug mit klaren Vorstellungen davon, wie Präsentationen aussehen sollten, geschaffen von Designern, die in diesen Vorstellungen sicher sind.

Was können Designer von Pitch’ Ansatz zur Multiplayer-Zusammenarbeit lernen?

Pitch behandelt Echtzeit-Zusammenarbeitscursor und gemeinsames Bearbeiten als Teil seiner visuellen Identität, nicht nur als Feature-Checkbox. Das Sehen der Cursor anderer Personen lässt das Werkzeug lebendig wirken und verstärkt die Team-Artefakt-Philosophie. Die Lektion ist, dass kollaborative Features Designelemente sind, die prägen, wie sich ein Produkt anfühlt, nicht nur, was es tut.

Referenzen