Pitch: Confianza Geométrica Audaz en un Escenario Púrpura

7 min de lectura • 1479 palabras
Pitch: Confianza Geométrica Audaz en un Escenario Púrpura screenshot

“La herramienta que usas para hacer presentaciones debería ser en sí misma la mejor presentación de la sala.” — Christian Reber, Fundador

Pitch existe porque el software de presentaciones dejó de evolucionar estéticamente en los años 90. Fundado en Berlín por Christian Reber y el equipo detrás de Wunderlist, Pitch reimaginó lo que sucede cuando diseñadores construyen una herramienta de presentaciones para diseñadores. Donde Google Slides se siente utilitario y PowerPoint se siente corporativo, Pitch abre con un hero de gradiente púrpura a sangre completa poblado con formas 3D de cristal flotantes — estableciendo inmediatamente que este es un producto con opiniones sobre lo que las presentaciones deberían ser.

Conclusiones Clave

  1. Púrpura como escenario, no como acento - La mayoría de las marcas usan su color como tinte de botón. Pitch usa el púrpura como el entorno completo para su sección hero, creando una apertura teatral que funciona a la vez como demostración del producto.
  2. La negrita extra comunica autoridad - Titulares con peso 800 (más pesados que casi cualquier competidor SaaS) comunican cero vacilación sobre el posicionamiento del producto.
  3. La tipografía a dos velocidades crea ritmo - Titulares densos y pesados con line-height de 1.0 seguidos de texto cuerpo aireado con line-height de 2.0 producen un cambio dramático entre “captar atención” y “dejarles leer.”
  4. Las tipografías personalizadas son fosos competitivos - La suavidad geométrica de Eina01 es imposible de replicar con fuentes del sistema, haciendo que cada competidor que usa Inter se vea genérico en comparación.
  5. El onboarding centrado en plantillas resuelve el lienzo en blanco - La galería de plantillas es la puerta de entrada, enseñando a los usuarios cómo se ve “lo bueno” antes de que creen algo.

Por Qué Pitch Importa

Pitch demostró que el software de productividad puede tener el mismo nivel de artesanía visual que los artefactos que produce. En una categoría dominada por herramientas que no se parecen en nada a su resultado, Pitch practica lo que predica: su sitio de marketing es en sí mismo una presentación, y la galería de plantillas del producto establece un estándar de calidad que eleva el resultado de cada usuario.

Logros clave: - Construido por el equipo de Wunderlist (adquirido por Microsoft), aportando sensibilidad de diseño de nivel consumidor al software B2B - Pionero en colaboración multijugador en tiempo real con cursores visibles como elemento de diseño, no solo como función - Introdujo acciones de IA para texto y visuales alineados con la marca que impulsan a los usuarios hacia resultados de mayor calidad en lugar de añadir complejidad

Principios de Diseño Fundamentales

1. El Escenario Púrpura

El gradiente hero no es una sección coloreada — es un escenario de presentación. Un gradiente púrpura vívido llena toda la ventana gráfica, poblado con objetos 3D de cristal translúcido que capturan la luz y demuestran la comprensión de Pitch sobre material, profundidad y composición. El producto se vende a sí mismo siendo una presentación.

Debajo del hero, las secciones transicionan a fondos blancos limpios con texto carbón cálido (rgb(43,42,53)) — un color con un sutil subtono púrpura que armoniza con la identidad de marca en lugar de crear un contraste agresivo contra ella.

┌─────────────────────────────────────────┐
│  ░░░░ GRADIENTE PÚRPURA VÍVIDO ░░░░░░  │
│  ░░░░ Formas 3D de Cristal Flotan ░░░  │
│  ░░░░░ TITULAR BLANCO EN NEGRITA ░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  Sección Blanca Limpia                  │
│  Texto carbón cálido (43,42,53)         │
│  Texto cuerpo generoso, line-height 2.0 │
│                                         │
└─────────────────────────────────────────┘

2. Tipografía Monumental con Eina01

Pitch encargó Eina01, una sans-serif geométrica con terminales suaves y redondeadas que dan a cada titular una calidez distintiva. Con peso 800 (extra-bold), los titulares llevan la asertividad de un orador principal que conoce su material.

La escala tipográfica opera en dos modos distintos. Los titulares son densos e impactantes: texto display de 80px con line-height de 1.0 y letter-spacing de -1.6px, donde los ascendentes y descendentes casi se tocan entre líneas, creando elementos gráficos en lugar de simple texto. El texto cuerpo es lo opuesto — 18px con line-height de 2.0, un espaciado excepcionalmente generoso que da a la prosa una cualidad relajada y editorial como leer una revista bien compuesta.

El letter-spacing negativo escala proporcionalmente con el tamaño: -2% tanto a 80px (-1.6px) como a 42px (-0.84px), manteniendo la densidad óptica en cada tamaño de titular.

3. Diseño Interactivo Contenido

Cada elemento interactivo ocupa el espacio entre bordes corporativos afilados y redondez de consumidor juguetona. El radio de botón de 6px señala “herramienta creativa profesional” — lo suficientemente deliberado para notarse, lo suficientemente contenido para tomarse en serio. El padding de botón de 24px horizontal proporciona objetivos de clic cómodos sin expansión excesiva.

La barra de navegación de 60px es deliberadamente compacta. Para una herramienta de presentaciones, el contenido siempre debe sentirse más grande que el chrome. Una barra de anuncios añade 72px de espacio promocional sobre la navegación sin aglomerar el diseño.

Patrones Transferibles

El sistema de diseño de Pitch ofrece varios patrones que se trasladan directamente a otros proyectos. El color de texto carbón cálido es el más inmediatamente aplicable: rgb(43,42,53) evita la dureza del negro puro mientras mantiene la legibilidad, y su sutil subtono púrpura crea cohesión con cualquier paleta de marca adyacente al púrpura.

El sistema tipográfico de dos velocidades funciona en cualquier contexto donde necesites equilibrar impacto con legibilidad:

: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 aplicaciones iOS, los mismos principios se trasladan a través de mapeos de peso del sistema y los modificadores de interlineado de 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)
    }
}

Lecciones de Diseño

Elegir púrpura en un mar de azul da resultados. En un panorama donde Slack, Notion, Linear y Figma se anclan en el azul, el púrpura de Pitch lo separa inmediatamente del grupo. El púrpura señala creatividad y posicionamiento premium — exactamente las asociaciones que una herramienta de presentaciones necesita.

El peso 800 es una decisión de voz de marca. La mayoría de los sitios SaaS usan 600-700 para titulares. La elección extra-bold de Pitch no se trata de legibilidad — se trata de personalidad. La marca no sugiere que lo pruebes; te dice que esta es la herramienta. Usa pesos pesados solo cuando el posicionamiento de tu producto soporte ese nivel de asertividad.

El line-height de 1.0 en texto display crea elementos gráficos. Cuando los ascendentes y descendentes casi se tocan, los titulares dejan de leerse como texto y empiezan a funcionar como arquitectura visual. Esto solo funciona en tamaños grandes (60px+) donde las formas individuales de las letras son claramente distinguibles.

Evita el texto negro puro con una marca de color. El carbón cálido de Pitch (rgb(43,42,53)) mantiene la cohesión de la página porque su subtono coincide con la paleta púrpura. El negro puro crea una desconexión que socava el sistema visual.

Evita los pesos de fuente delgados en una marca orientada a la confianza. El peso de titular más ligero que Pitch usa es 800. El texto cuerpo a 400 es la única excepción. Mezclar titulares con peso 300 o 400 socavaría el posicionamiento asertivo que la marca trabaja por establecer.

Preguntas Frecuentes

¿Qué hace que el diseño de Pitch sea distintivo frente a otras herramientas de presentación?

Pitch usa su sitio de marketing como demostración de su propia filosofía de producto. El hero de gradiente púrpura a sangre completa con formas 3D de cristal, titulares Eina01 con peso 800 y tipografía a dos velocidades (titulares densos, cuerpo aireado) crean una estética que es inconfundiblemente diferente de la sensación utilitaria de Google Slides o el peso corporativo de PowerPoint.

¿Cómo usa Pitch el color de manera diferente a los productos SaaS típicos?

La mayoría de las marcas SaaS usan su color primario como acento — botones de color sobre fondos blancos. Pitch invierte esto usando púrpura vívido como el entorno completo para su sección hero, creando un escenario inmersivo en lugar de toques decorativos. El púrpura es descaradamente saturado, nunca diluido con gris o blanco.

¿Por qué Pitch usa pesos de fuente tan pesados?

Los titulares con peso 800 (extra-bold) son una decisión deliberada de voz de marca. Con este peso, la tipografía comunica convicción y expertise en lugar de solo etiquetar contenido. Coincide con el posicionamiento de Pitch como una herramienta con opiniones fuertes sobre lo que las presentaciones deberían ser, creada por diseñadores que confían en esas opiniones.

¿Qué pueden aprender los diseñadores del enfoque de Pitch hacia la colaboración multijugador?

Pitch trata los cursores de colaboración en tiempo real y la co-edición como parte de su identidad visual, no solo como una casilla de función. Ver los cursores de otras personas hace que la herramienta se sienta viva y refuerza la filosofía del artefacto en equipo. La lección es que las funciones colaborativas son elementos de diseño que moldean cómo se siente un producto, no solo lo que hace.

Referencias