---
version: alpha
name: "Pendo"
website: "https://www.pendo.io"
description: >-
  A product analytics and in-app guidance platform whose marketing site opens with a bold magenta-pink gradient hero — a salmon-to-hot-pink sweep above the fold — carrying a 60px Sora display headline in near-black, then drops to a white canvas below with dark tile cards showcasing product screenshots. The dominant typeface pairing is Sora for display and Inter for body, an uncommon combination in the analytics category. The single brand color is a vivid pank rose — wired into the CSS as --color-pank — that appears on the primary CTA pill, key links, and category badges. Radius scale leans large: 50px pills dominate buttons and chips, with 20–24px on cards.

seo:
  title: "Pendo Design System for React — pank rose on white, Sora + Inter, 15 components"
  metaDescription: "Pendo's marketing-site design system: magenta-pink gradient hero, Sora 60px display, Inter body, pank rose #ff4876 CTA pill. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Gradient hero as brand statement — salmon-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 body — a 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 voltage — the 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 scale — 50px radius dominates buttons and chips; even cards run 16–24px, skipping the tight 4–8px range that Mixpanel and Amplitude use"
    - "Dark tile product grid — below the fold, 8-up card grid with near-black #232323 surfaces showcases product screenshots on a white canvas, no shadow, just dark card fill"
  tags:
    - "Analytics & Data"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.pendo.io"
      title: "Pendo — official site"
      description: "Pendo's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Pendo's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does Pendo use, and what are good substitutes?"
      answer: "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."
    - id: "hero-gradient"
      title: "How is the hero gradient constructed?"
      answer: "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."
    - id: "radius-scale"
      title: "What is Pendo's corner-radius philosophy?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own analytics marketing site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#de2864"
  primary-light: "#ff4876"
  ink: "#1a1a1a"
  ink-dark: "#232323"
  ink-off: "#060119"
  ink-muted: "#808080"
  ink-subtle: "#979797"
  canvas: "#ffffff"
  hairline: "#e6e6e6"
  surface-dark: "#232323"
  surface-deep: "#1a1a1a"

typography:
  display-xl:
    fontFamily: "\"Sora\", sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 66px
    letterSpacing: "-0.54px"
  display-md:
    fontFamily: "\"Sora\", sans-serif"
    fontSize: 52px
    fontWeight: 600
    lineHeight: 62px
    letterSpacing: "-0.52px"
  heading-lg:
    fontFamily: "\"Sora\", sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 27px
    letterSpacing: 0
  section-display:
    fontFamily: "Inter, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 45px
    letterSpacing: "-0.9px"
  body-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0
  label-caps:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "1.77px"
  button-md:
    fontFamily: "\"Sora\", sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  nav-link:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: "0.35px"

rounded:
  none: "0px"
  sm: "6px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  pill: "50px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 32px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.section-display}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-off}"
    typography: "{typography.body-sm}"
    padding: "0px"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "0px"
  label-caps:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    padding: "0px"
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.xl}"
    padding: "32px"
  card-dark-lg:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.2xl}"
    padding: "32px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
    height: "44px"
    borderColor: "{colors.hairline}"
  tag-chip:
    backgroundColor: "transparent"
    textColor: "{colors.primary-light}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "4px 12px"
    borderColor: "{colors.primary-light}"
  hero-section:
    backgroundColor: "linear-gradient(135deg, #ffafc8 0%, #ff4876 40%, #de2864 70%, #871946 100%)"
    textColor: "{colors.ink}"
    padding: "80px 32px"
  footer:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "48px 32px"
---

## 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

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 600 | 66px | Hero h1 ("The AI-powered analytics and adoption platform for builders") |
| `{typography.display-md}` | 52px | 600 | 62px | Major section display in Sora |
| `{typography.section-display}` | 36px | 400 | 45px | Dark-section h2 in Inter ("Turn every release into a revenue moment") |
| `{typography.heading-lg}` | 18px | 700 | 27px | Card titles in the dark product-tile grid |
| `{typography.body-lg}` | 18px | 400 | 27px | Feature-row lead paragraphs |
| `{typography.body-md}` | 16px | 400 | 24px | Default running text |
| `{typography.body-sm}` | 15px | 400 | 22px | The dominant body size across the page (88 occurrences) |
| `{typography.label-caps}` | 16px | 700 | 24px | Uppercase section identifiers above headings (1.77px letter-spacing) |
| `{typography.button-md}` | 14px | 700 | 20px | CTA button label in Sora |
| `{typography.nav-link}` | 16px | 400 | 24px | Top-nav link labels in Inter |
| `{typography.caption}` | 14px | 400 | 19px | Sub-labels, dates, auxiliary metadata |

### 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.