---
version: alpha
name: Pitch — Integration Arc with Gradient Brand Pill
colors:
  ink: '#0C021C'
  sample-1: '#000000'
  sample-2: '#0000EE'
  sample-3: '#F6F6F6'
  sampled-canvas: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Mark Pro Bold", "Mark Pro Bold Placeholder", sans-serif'
    fontSize: 48px
    fontWeight: 700
    lineHeight: 57.6px
  body:
    fontFamily: '"Eina 03 Bold", "Eina 03 Bold Placeholder", sans-serif'
    fontSize: 16px
    fontWeight: 700
    lineHeight: 19.2px
---

## Overview
An isolated Pitch integration CTA with a bold centered headline, gradient brand pill, arced partner marks and a lightweight Explore workflows action. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot isolates `#launch`; bounds were measured after a warm-up render and checked again after capture.

## Colors
Opaque token values come from computed CSS samples in this reference. The sampled-canvas token, when present, is a screenshot pixel sample. Gradients, alpha fills, photography and artwork are described visually rather than reduced to a single invented color.

## Typography
The computed heading sample (Generate slides from your existing stack) uses "Mark Pro Bold", "Mark Pro Bold Placeholder", sans-serif, 48px, weight 700, leading 57.6px. Supporting text uses "Eina 03 Bold", "Eina 03 Bold Placeholder", sans-serif at 16px / 19.2px. The matching mobile heading-category sample is 32px / 38.4px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
Desktop uses a broad shallow arc of six circular marks around a large centered Pitch pill beneath a two-line headline. At 390px partner marks form an arch above a smaller brand pill, while the headline and Explore workflows action stay centered. This is a rearrangement of the composition, not a scaled desktop image. Desktop image: 1440 × 568 px. Mobile viewport: 390 × 844 px; isolated mobile components may be taller than the viewport. Two measured widths do not establish exact CSS breakpoints.

## Elevation & Depth
Pale circular icon backgrounds and a violet gradient pill provide gentle depth on an otherwise white field. Brand marks retain their source colors.

## Shapes
Circular partner medallions, an elongated brand pill and a bare text-plus-arrow CTA avoid enclosing the whole group in a card.

## Components
Headline, six partner/source marks including Notion, Slack, HubSpot and Figma, central Pitch mark and Explore workflows link. No integration was connected and no link destination interaction was tested.

## Do’s and Don’ts
Preserve the arced relationships and give partner icons breathing room. Do not turn a decorative integration illustration into evidence that an integration was configured or verified. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.