What is Pendo's primary brand color?

Pendo's brand voltage is pank rose, wired into the CSS as --color-pank and --color-pink-0 at #ff4876. It is a saturated warm pink sitting between hot pink and magenta — distinct from the rose-red of #de2864 (--color-pink-1), which is reserved for the primary button fill. On the captured marketing page, #ff4876 appears 88 times across text (30), border (43), and background (15) roles. The gradient hero above the fold sweeps through a family of related pinks from salmon to magenta, but the repeatable brand signal in components is always the single #ff4876 pank rose tone.

What typefaces does Pendo use, and what are good substitutes?

Pendo runs two families. Sora — a rounded geometric sans — handles the display and heading tier: the hero h1 at 60px / weight 600 / -0.54px tracking, section display at 52px / 600, and card titles at 18px / 700. Inter handles everything else: body at 15px / 400, nav links at 16px / 400, labels at 16px / 700 with uppercase transform, and captions at 14px. The pairing gives Sora's circular geometry to the loudest typographic moments and Inter's neutrality to running text. For Sora, Nunito or Outfit at the same weights are close open-source substitutes. Inter is already open-source at fonts.google.com.

How is the hero gradient constructed?

The above-fold hero uses a linear gradient that sweeps from warm salmon (close to the pank rose family) at the top left to a saturated magenta-pink at the right edge. The gradient is applied as a background on the hero section rather than as a text gradient. The CSS gradient endpoint colors — #ffafc8 (light rose), #eb4173, #c3285f, #871946, and #4b122d — are extracted from the page as brand-layer gradient stops and represent the full luminance sweep of Pendo's pink family from its lightest tint to its darkest shade. The hero drops cleanly to white below the fold with no intermediate surface.

What is Pendo's corner-radius philosophy?

Pendo runs a pill-first radius scale that is among the most generous in the analytics category. The 50px radius appears 31 times — on the primary CTA button, secondary ghost buttons, category chips, and tag badges. Cards use 16px (20 occurrences) or 20px (19 occurrences). Large feature containers sit at 24px (10 occurrences). There is no tight 4–8px tier on marketing surfaces. The closest analogue is the rounded approach that Linear uses on its marketing site, but Linear combines it with a dark surface; Pendo pairs the same generous rounding with a bright gradient and white canvas.

Can I use this DESIGN.md to build my own analytics marketing site?

Yes — the file is designed to feed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Pendo's specific moves: gradient hero that inverts to white below the fold, pank rose voltage on CTA and link surfaces, Sora display at 60px / weight 600 paired with Inter body, and a pill-first 50px radius scale. You can also reference token values directly in Tailwind config or CSS variables. One caveat: the gradient hero works here because the brand pink is chromatic enough to carry a full-bleed sweep without feeling promotional rather than editorial. Lower-chroma brands should consider a tinted canvas instead.

Pendo Design System

Pendo's marketing-site design system: magenta-pink gradient hero, Sora 60px display, Inter body, pank rose #ff4876 CTA pill.

About Pendo DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source pendo.io

Analytics & Data
Productivity & SaaS

Pendo's above-fold hero is not a flat block of brand color or a muted canvas — it is a gradient. A warm salmon sweeps from the top left and transitions into a saturated hot-pink at the right edge, with the headline and CTA centered on top. Below the fold, the page inverts completely to white, and the product feature section uses a grid of eight dark charcoal tiles, each holding a product screenshot. The result is a page that splits visually into two distinct acts: gradient theater above the fold, minimalist product catalog below. Segment and Mixpanel both run their heroes on white; Amplitude goes dark throughout. Pendo takes the gradient path that neither commits to fully.

The typography split is the standout technical choice. Pendo uses Sora — a rounded geometric sans rarely seen in B2B SaaS — for the hero headline (60px / 600 / -0.54px tracking) and section display moments (52px / 600). Inter, the most common font in modern SaaS, carries every body paragraph, nav link, and caption. The combination gives the display tier a geometric warmth that Inter alone would not produce, while keeping the running-text voice familiar and legible. This is the inverse of Cloudflare's single-family approach and closer to Stripe's display-plus-body split, but with Sora's circular geometry instead of Stripe's Ideal Sans serifs.

Feed this file to an AI coding tool and it reproduces Pendo's specific moves: gradient hero that drops to white below the fold, pank rose CTA pill, Sora at rounded-geometric display sizes, and a large-radius pill-first scale. The one move worth borrowing with restraint is the gradient hero — it works here because the brand color is chromatic enough to carry a full-bleed sweep. On a lower-chroma brand, the same treatment would read as decoration rather than identity.

What makes it distinct

Gradient hero as brand statementsalmon-to-hot-pink sweep above the fold, then the page inverts to a white canvas with dark product-screenshot tiles below
Sora for display, Inter for bodya two-family split rarely seen in B2B analytics; Sora at 60px weight 600 carries the hero, Inter at 15px weight 400 carries everything else
Pank rose voltagethe CSS custom property --color-pank (#ff4876) is the single chromatic brand signal, appearing on the primary CTA, key links, and category badges
Pill-first radius scale50px radius dominates buttons and chips; even cards run 16–24px, skipping the tight 4–8px range that Mixpanel and Amplitude use
Dark tile product gridbelow the fold, 8-up card grid with near-black #232323 surfaces showcases product screenshots on a white canvas, no shadow, just dark card fill

Live at pendo.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

pendo.io

Explore Pendo

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Pendo design system FAQ

Common questions about Pendo's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Pendo — official site

Pendo's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.