Pendo Design System

Overview

Pendo's marketing site opens with a gradient hero and ends with a white canvas — a structural choice that separates it from the rest of the product analytics category. Gradient theater, then catalog. The hero is a warm salmon-to-magenta sweep carrying a 60px Sora headline and a rose CTA pill; below the fold, the page returns to white and presents an 8-up grid of dark charcoal product tiles. Amplitude goes dark throughout. Mixpanel and Segment sit on white throughout. Pendo uses both, in sequence.

The two-family type split reinforces the distinction. Sora — a rounded geometric sans rarely seen in B2B analytics — handles every display moment: the 60px hero h1, a 52px section display, and 18px card titles. Inter carries everything else. Where Cloudflare unifies across a single family and Stripe uses a display serif plus a sans, Pendo draws the boundary at display vs. body and uses geometric roundness as the brand signal at large sizes.

The rose voltage runs through a multi-stop gradient family (from light rose to deep burgundy) for the hero, and consolidates into a single pank rose (#ff4876) for component-level accents: the primary CTA border, link underlines, tag chip borders, and badge fills.

Key Characteristics:

• Gradient hero above the fold (salmon-to-magenta), white canvas below — the page switches act at the scroll break.
• Sora for display (60px / weight 600 / -0.54px tracking), Inter for body (15px / 400) — the two-family split is the dominant typographic signature.
• Pank rose ({colors.primary-light} — #ff4876) as the repeatable brand accent; deeper rose ({colors.primary} — #de2864) fills the primary CTA button.
• Pill-first radius: 50px on buttons and chips (31 occurrences), 16–24px on cards — no tight 4–8px tier on any marketing surface.
• Dark charcoal tiles ({colors.surface-dark} — #232323) in the product feature grid carry product screenshots against the white canvas. Zero shadow; depth comes from the stark fill contrast.
• Uppercase Inter label-caps ({typography.label-caps}) — 16px / 700 / 1.77px letter-spacing — appear as section category identifiers above headings.
• Logo wall beneath the hero renders customer marks in dark ink on white at uniform scale.

Colors

Brand

• Primary Rose ({colors.primary} — #de2864): frequency 4. Used as background (3) and border (1). The fill of the primary CTA button; the deeper end of the gradient family. Wired as --color-pink-1.
• Pank Rose ({colors.primary-light} — #ff4876): frequency 88. Used as text (30), border (43), background (15). The repeatable brand voltage — CTA border, inline links, tag chip outlines, badge fills. Wired as --color-pank and --color-pink-0.

Text

• Ink ({colors.ink} — #1a1a1a): frequency 106. The dominant body-text and hero-headline color. Near-black with no tint. Wired as --color-neutral-900.
• Ink Dark ({colors.ink-dark} — #232323): frequency 184. The surface color of the dark product tiles — also appears as text and border in the below-fold card grid. Wired as --color-neutral-800.
• Ink Off ({colors.ink-off} — #060119): frequency 71. Used as text (33) and border (35). A deep ink-black with a violet undertone — the darkest body text tier and the off-black for the footer nav. Wired as --color-gray-4 and --color-neutral-off-black.
• Ink Muted ({colors.ink-muted} — #808080): frequency 24. Secondary text: caption rows, sub-labels, metadata beneath product tiles.
• Ink Subtle ({colors.ink-subtle} — #979797): frequency 6. Tertiary text — the lightest readable tone, used for dates and auxiliary metadata. Wired as --color-gray-3.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 1595. The below-fold page floor, card backgrounds, nav surface. The dominant surface by a wide margin.
• Surface Dark ({colors.surface-dark} — #232323): the fill of the dark product-tile cards in the 8-up feature grid. Sits on the white canvas without shadow or border — depth from fill contrast alone.
• Surface Deep ({colors.surface-deep} — #1a1a1a): slightly darker variant — used on the deepest card tier and the footer surface.

Hairline

• Hairline ({colors.hairline} — #e6e6e6): frequency 7. Card borders on the white canvas, the secondary ghost-button outline. The only border tone in the structural tier.

Typography

Font Families

The system runs two families. Sora — a rounded geometric sans-serif — handles every display and heading moment. The Sora fallback stack is "sora Fallback", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif, which reads as an intentional pairing with Pendo's legacy serif stack. Inter handles body, nav, label, caption, and section-heading surfaces. Its fallback stack walks "inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif.

The visual effect of the split: Sora's circular geometry at 60px / weight 600 gives the hero a friendly authority uncommon in analytics tools; Inter at 15–16px / weight 400 keeps the running text neutral and fast to scan.

Hierarchy

Principles

The display tier caps at weight 600 in Sora — not 700 or 800. The 60px hero at 600 is the loudest typographic moment on the page; the rounded geometry of Sora gives it warmth without requiring extra weight. Inter at the body tier uses no heavier than 700 (reserved for the uppercase label-caps), with weight 400 carrying 80%+ of body text. The two-family strategy is disciplined: Sora appears on display, heading, and button surfaces only — it never mixes with Inter at body scale.

Note on Font Substitutes

Sora is open-source (Google Fonts). If you need a closer geometric: Nunito and Outfit have comparable circular terminals at display sizes. Inter is open-source and its normal distribution. The ui-monospace system stack is Pendo's mono fallback (for code examples in product screenshots), not a brand voice.

Layout

Spacing System

• Base unit: 8px — the dominant gap value.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 48px.
• Card internal padding: {spacing.2xl} (32px) on dark product tiles; {spacing.xl} (24px) on smaller feature elements.
• Section padding (vertical): ~80–96px between major sections.
• Nav padding: {spacing.2xl} (32px) horizontal; full-width at the viewport edge.

Grid & Container

• Max content width: ~1000px on the hero headline; ~1300px on the product-tile grid.
• Hero: gradient-fill hero with headline + CTA centered on ~600px safe zone. Customer logo wall directly beneath.
• Feature grid: 2-column layout at desktop for the 8-up dark product tiles, collapsing to 1-column on mobile.
• Section rhythm: gradient hero → white logo wall → white editorial sections → white product grid → dark sections → footer.

Rhythm

The page alternates between gradient-saturated (hero) and white minimal (editorial and product sections). The dark tile cards create local visual weight on the white canvas without changing the canvas color — a contrast trick that avoids the heavy "zebra striping" that competing tools sometimes use between sections.

Elevation

The system has no shadow tier on the captured marketing surface. The dark product tiles ({colors.surface-dark}) sit on the white canvas ({colors.canvas}) with no drop shadow — the 75-point lightness contrast between #232323 and #ffffff carries all the elevation work. The only shadow hint is a faint --drop-shadow-lg CSS variable declared but not rendered on the captured surface.

• Flat (no shadow): hero, editorial sections, logo wall, footer — 99% of surfaces.
• Tonal lift: {colors.surface-dark} (#232323) cards on {colors.canvas} (#ffffff).

Shapes

The radius scale is pill-first with generous mid-tier:

• {rounded.none} 0px — hero section edges, footer edges.
• {rounded.sm} 6px — smallest UI surface (input field on some form contexts).
• {rounded.md} 12px — medium chips, dropdown corners.
• {rounded.lg} 16px — standard card corners (20 occurrences).
• {rounded.xl} 20px — larger card variant (19 occurrences).
• {rounded.2xl} 24px — feature container (10 occurrences).
• {rounded.pill} 50px — primary CTA button, ghost button, tag chips, category badges (31 occurrences — the dominant radius on interactive surfaces).
• {rounded.full} 9999px — circular avatar and icon marks.

The 50px pill is the brand's most legible shape signal — more generous than Amplitude's 8px and more rounded than Mixpanel's 4px.

Components

hero-section — The gradient canvas. Linear gradient from light rose to deep burgundy, 80×32px section padding. Holds the hero h1 in near-black, a subheading, and the rose primary CTA pill. The product screenshot sits directly beneath the CTA as an inline preview card.

button-primary — Rose {colors.primary} fill, white text, Sora 14px / 700, {rounded.pill} 50px radius, 8×16px padding, 40px height. "Get a Demo" is the canonical instance.

button-secondary — Transparent fill, ink text, 1px {colors.hairline} border, {rounded.pill} 50px radius, 8×16px padding, 40px height. Used for "Watch Video" tertiary CTAs.

top-nav — White {colors.canvas} surface, 64px height, 0×32px padding. Pendo wordmark flush left, product links centered, "Get a Demo" primary CTA flush right.

nav-link — Transparent, Inter 16px / 400, no hover surface visible in captured state.

hero-heading — Near-black text, Sora 60px / 600 / -0.54px tracking. The loudest typographic moment; the gradient canvas sits behind it.

section-heading — White text on dark section canvas, Inter 36px / 400 / -0.9px tracking. Used on the dark-background features panels ("Turn every release into a revenue moment").

body-paragraph — Off-black {colors.ink-off} text at Inter 15px / 400. The workhorse paragraph style.

body-paragraph-muted — Mid-gray {colors.ink-muted} text at Inter 15px / 400. Used for secondary copy beneath section headings.

label-caps — Uppercase Inter 16px / 700 / 1.77px letter-spacing, ink-colored. Section category identifiers ("ANALYTICS", "GUIDANCE", "ADOPTION") that appear above display headings.

card-dark — {colors.surface-dark} (#232323) fill, white text, Sora 18px / 700 title, {rounded.xl} 20px radius, 32px internal padding. The 8 feature-grid tiles.

card-dark-lg — {colors.surface-deep} (#1a1a1a) fill variant for deeper-contrast cards at 24px radius.

text-input — White fill, ink text, 1px hairline border, {rounded.md} 12px radius, 12×24px padding, 44px height.

tag-chip — Transparent fill, pank rose text and border, {rounded.pill} 50px radius, 4×12px padding. Category tags and product area chips.

footer — Dark {colors.surface-deep} fill, white text, Inter 15px / 400, 48×32px padding.

Do's and Don'ts

Do treat the gradient hero as a one-time act. The system uses the salmon-to-magenta gradient exclusively above the fold; below the fold the canvas is pure white. Spreading the gradient to section backgrounds or card fills turns a headline statement into wallpaper.

Do keep Sora strictly at the display and heading tier. The family carries its geometric weight at 52–60px; deploying it at 14–16px body scale would produce a letter-spacing rhythm that competes with Inter and loses the two-family contrast.

Do use the 50px pill radius on every interactive button and chip surface. The pill is the single most recognizable shape signal in the system — swapping to 8px on secondary buttons breaks the internal radius grammar.

Do render the product-tile grid on a white canvas with no shadow. The {colors.surface-dark} tiles earn their depth from lightness contrast alone; adding drop shadows would double the visual signal and muddy the catalog feel.

Don't use {colors.primary} (#de2864) for inline links or tag chips — that tone is reserved exclusively for the filled CTA button. Inline brand accents should use {colors.primary-light} (#ff4876, the pank rose).

Don't bump display weight to 700 or 800. Sora at 60px / weight 600 already reads with authority; heavier weights on this geometric family tip from confident to loud and undercut the product-first positioning.

Don't introduce a medium-gray card surface between the white canvas and the dark tiles. The system is binary: white or near-black. A mid-gray surface would break the contrast theater the page is built around.

Don't add letter-spacing to Sora display text. The -0.54px tight tracking on the 60px hero is precisely calibrated; adding positive tracking would push the rounded geometry toward playful rather than authoritative.

Known Gaps

• Dark mode: the captured marketing surface is light-dominant (gradient hero + white canvas). A product dark mode exists in the Pendo in-app guidance editor but is not represented in the marketing tokens.
• Hover and focus states: captured for {component.button-primary} resting state only; focus rings, hover tints, and disabled variants are not exposed on the marketing surface.
• Form inputs beyond resting: {component.text-input} is the resting state only; error, validation, and focus-ring states are not captured.
• Motion: the hero section includes a typed-text animation (toggling between feature keywords) but easing curves and duration are not captured in the static extraction.
• Product-surface tokens: this DESIGN.md captures the pendo.io marketing site. The Pendo product editor (app.pendo.io) — guides builder, analytics dashboards, NPS flows — carries a richer token set with its own dark surfaces, chart palettes, and modal system.
• Purple family: several CSS variables expose a purple family (--color-purpleDark-0 through -5, --color-neutral-midnight) that appear in zero rendered elements on the captured page. Likely a legacy product-palette or future brand extension.