Pitch: Confiança Geométrica Ousada em um Palco Púrpura

6 min de leitura • 1419 palavras
Pitch: Confiança Geométrica Ousada em um Palco Púrpura screenshot

“A ferramenta que você usa para fazer apresentações deveria ser, ela mesma, a melhor apresentação da sala.” — Christian Reber, Fundador

Pitch existe porque o software de apresentações parou de evoluir esteticamente nos anos 1990. Fundado em Berlim por Christian Reber e a equipe por trás do Wunderlist, o Pitch reimaginou o que acontece quando designers constroem uma ferramenta de apresentação para designers. Enquanto o Google Slides parece utilitário e o PowerPoint parece corporativo, o Pitch abre com um hero de gradiente púrpura em tela cheia, povoado por formas 3D de vidro flutuantes — estabelecendo imediatamente que este é um produto com opiniões sobre como apresentações deveriam ser.

Principais Conclusões

  1. Púrpura como palco, não como destaque - A maioria das marcas usa sua cor como tonalidade de botão. O Pitch usa o púrpura como o ambiente inteiro da seção hero, criando uma abertura teatral que funciona simultaneamente como demonstração do produto.
  2. Extra-bold transmite autoridade - Headlines com peso 800 (mais pesadas que praticamente qualquer concorrente SaaS) comunicam zero hesitação sobre o posicionamento do produto.
  3. Tipografia em duas velocidades cria ritmo - Headlines densas e pesadas com line-height 1.0 seguidas por texto corpo arejado com line-height 2.0 produzem uma mudança dramática entre “capturar atenção” e “deixar ler.”
  4. Fontes personalizadas são vantagens competitivas - A suavidade geométrica da Eina01 é impossível de replicar com fontes do sistema, fazendo com que qualquer concorrente usando Inter pareça genérico em comparação.
  5. Onboarding baseado em templates resolve a tela em branco - A galeria de templates é a porta de entrada, ensinando os usuários como é o “bom” antes que criem qualquer coisa.

Por que o Pitch Importa

O Pitch provou que software de produtividade pode ter o mesmo nível de refinamento visual que os artefatos que produz. Em uma categoria dominada por ferramentas que não se parecem nada com seu resultado, o Pitch pratica o que prega: seu site de marketing é, ele mesmo, uma apresentação, e a galeria de templates do produto estabelece um padrão de qualidade que eleva o resultado de cada usuário.

Principais conquistas: - Construído pela equipe do Wunderlist (adquirido pela Microsoft), trazendo sensibilidade de design de nível consumidor para software B2B - Pioneiro em colaboração multiplayer em tempo real com cursores visíveis como elemento de design, não apenas uma funcionalidade - Introduziu ações de IA para texto e visuais alinhados à marca que direcionam os usuários para resultados de maior qualidade, em vez de adicionar complexidade

Princípios Fundamentais de Design

1. O Palco Púrpura

O gradiente hero não é uma seção colorida — é um palco de apresentação. Um gradiente púrpura vibrante preenche toda a viewport, povoado por objetos 3D de vidro translúcido que capturam a luz e demonstram a compreensão do Pitch sobre material, profundidade e composição. O produto se vende sozinho sendo uma apresentação.

Abaixo do hero, as seções fazem transição para fundos brancos limpos com texto em cinza quente (rgb(43,42,53)) — uma cor com uma sutil nuance púrpura que harmoniza com a identidade da marca em vez de criar contraste agressivo contra ela.

┌─────────────────────────────────────────┐
│  ░░░░ GRADIENTE PÚRPURA VIBRANTE ░░░░  │
│  ░░░░ Formas 3D de Vidro Flutuam ░░░░  │
│  ░░░░░ HEADLINE BOLD BRANCA ░░░░░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  Seção Branca Limpa                     │
│  Texto cinza quente (43,42,53)          │
│  Texto corpo com generoso line-height   │
│  2.0                                    │
│                                         │
└─────────────────────────────────────────┘

2. Tipografia Monumental com Eina01

O Pitch encomendou a Eina01, uma sans-serif geométrica com terminais suaves e arredondados que conferem a cada título uma distinção calorosa. Com peso 800 (extra-bold), os headlines carregam a assertividade de um palestrante keynote que domina seu material.

A escala tipográfica opera em dois modos distintos. Headlines são densas e impactantes: texto display de 80px com line-height 1.0 e letter-spacing de -1.6px, onde ascendentes e descendentes quase se tocam entre linhas, criando elementos gráficos em vez de mero texto. O texto corpo é o oposto — 18px com line-height 2.0, espaçamento excepcionalmente generoso que confere à prosa uma qualidade editorial relaxada, como ler uma revista bem diagramada.

O letter-spacing negativo escala proporcionalmente com o tamanho: -2% tanto em 80px (-1.6px) quanto em 42px (-0.84px), mantendo a densidade óptica em cada tamanho de headline.

3. Design Interativo Contido

Cada elemento interativo ocupa o espaço entre bordas corporativas afiadas e arredondamento lúdico de consumidor. O raio de botão de 6px sinaliza “ferramenta criativa profissional” — deliberado o suficiente para notar, contido o suficiente para levar a sério. O padding de botão de 24px horizontal oferece alvos de clique confortáveis sem excesso.

A barra de navegação de 60px é deliberadamente compacta. Para uma ferramenta de apresentação, o conteúdo deve sempre parecer maior que o chrome. Uma barra de anúncio adiciona 72px de espaço promocional acima da navegação sem congestionar o layout.

Padrões Transferíveis

O sistema de design do Pitch oferece vários padrões que se traduzem diretamente para outros projetos. A cor de texto cinza quente é a mais imediatamente aplicável: rgb(43,42,53) evita a agressividade do preto puro enquanto mantém a legibilidade, e sua sutil nuance púrpura cria coesão com qualquer paleta de marca adjacente ao púrpura.

O sistema tipográfico de duas velocidades funciona em qualquer contexto onde você precisa equilibrar impacto com legibilidade:

:root {
  /* Pitch-inspired confident purple 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;
}

Para aplicações iOS, os mesmos princípios se traduzem através de mapeamentos de peso do sistema e modificadores de leading do SwiftUI:

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)
    }
}

Lições de Design

Escolher púrpura em um mar de azul compensa. Em um cenário onde Slack, Notion, Linear e Figma se ancoram no azul, o púrpura do Pitch o separa imediatamente do grupo. Púrpura sinaliza criatividade e posicionamento premium — exatamente as associações que uma ferramenta de apresentação precisa.

Peso 800 é uma decisão de voz de marca. A maioria dos sites SaaS usa 600-700 para headlines. A escolha extra-bold do Pitch não é sobre legibilidade — é sobre personalidade. A marca não sugere que você experimente; ela diz que esta é a ferramenta. Use pesos pesados apenas quando o posicionamento do seu produto sustenta esse nível de assertividade.

Line-height 1.0 em texto display cria elementos gráficos. Quando ascendentes e descendentes quase se tocam, os headlines deixam de funcionar como texto e começam a funcionar como arquitetura visual. Isso só funciona em tamanhos grandes (60px+) onde formas individuais de letras são claramente distinguíveis.

Evite texto preto puro com uma marca colorida. O cinza quente do Pitch (rgb(43,42,53)) mantém a coesão da página porque sua nuance combina com a paleta púrpura. Preto puro cria uma desconexão que prejudica o sistema visual.

Evite pesos finos de fonte em uma marca orientada por confiança. O peso mais leve que o Pitch usa em títulos é 800. Texto corpo em 400 é a única exceção. Misturar headlines com peso 300 ou 400 prejudicaria o posicionamento assertivo que a marca trabalha para estabelecer.

Perguntas Frequentes

O que torna o design do Pitch diferente de outras ferramentas de apresentação?

O Pitch usa seu site de marketing como uma demonstração de sua própria filosofia de produto. O hero com gradiente púrpura em tela cheia com formas 3D de vidro, headlines Eina01 com peso 800 e tipografia em duas velocidades (headlines densas, corpo arejado) criam uma estética inconfundivelmente diferente da sensação utilitária do Google Slides ou do peso corporativo do PowerPoint.

Como o Pitch usa cor de forma diferente de produtos SaaS típicos?

A maioria das marcas SaaS usa sua cor primária como destaque — botões coloridos sobre fundos brancos. O Pitch inverte isso usando púrpura vibrante como o ambiente inteiro da seção hero, criando um palco imersivo em vez de toques decorativos. O púrpura é desculpadamente saturado, nunca diluído com cinza ou branco.

Por que o Pitch usa pesos de fonte tão pesados?

Os headlines com peso 800 (extra-bold) são uma decisão deliberada de voz de marca. Nesse peso, a tipografia comunica convicção e expertise em vez de apenas rotular conteúdo. Isso combina com o posicionamento do Pitch como uma ferramenta com opiniões fortes sobre como apresentações deveriam ser, criada por designers que confiam nessas opiniões.

O que designers podem aprender com a abordagem do Pitch para colaboração multiplayer?

O Pitch trata cursores de colaboração em tempo real e coedição como parte de sua identidade visual, não apenas como um checkbox de funcionalidade. Ver os cursores de outras pessoas faz a ferramenta parecer viva e reforça a filosofia de artefato em equipe. A lição é que funcionalidades colaborativas são elementos de design que moldam como um produto se sente, não apenas o que ele faz.

Referências