Pendo Design System Deep Dive

1. Brand Overview

Pendo’s website makes one thing clear: this is a product-led growth SaaS brand that isn’t shy about color. The core vibe is bold, digital, and conversion-focused. You don’t get muted corporate blues here—you get unapologetic pinks (#de2864, #ff4876) and deep, high-contrast neutrals. It’s a brand that wants to stand out in the competitive product analytics and in-app guidance space.

The design philosophy leans toward clarity and speed. Elements are high-contrast, typography is big and confident, spacings are generous, and buttons are unmistakable CTAs. There’s a strong pill-button motif (massive border-radius values like 33554400px for full pills), which makes CTAs feel tactile and approachable.

The site uses Tailwind CSS, confirmed by arbitrary values and responsive modifiers in the code. That means utility-first, atomic class composition, but still with a clear token system under the hood.

The audience? Product managers, UX teams, growth marketers—people who spend their day in dashboards and want their tools to feel polished yet energetic. And Pendo’s design system delivers: it’s not minimalist; it’s purposeful maximalism in a product-led SaaS context. The pinks carry brand recognition, the dark backgrounds push content forward, and the typography says: “We know what we’re talking about.”

The system is pragmatic—there’s no overuse of ornamental shadows. Depth is achieved through color contrast, occasional soft shadows, and border accents. Every atom of the UI reads as part of a cohesive whole, from navigation to cookie banners.

2. Color System

2.1 Primary Colors

The main brand color is Pendo Pink (#de2864). It’s supported by a secondary, slightly lighter pink (#ff4876). This pink is assertive—it’s a CTA color, a highlight, a signal. Psychologically, pink here isn’t “soft” or “feminine”; it’s “brand-owning” and “attention-grabbing.” Against deep neutrals like #232323 or #060119, it pops hard.

Competitor comparison: Many SaaS brands choose blues or greens for trust and growth. Pendo’s pink is a differentiator—it reads instantly in a logo lineup. That’s risky for accessibility (pink can struggle against white for contrast), but here it’s paired mostly against dark backgrounds, keeping it WCAG-friendly.

2.2 Complete Palette

The CSS variable palette is huge—covering purples, greens, yellows, blues, reds, grays, neutrals. Examples:

• --color-purple-500: oklch(62.7% .265 303.9)
• --color-neutral-900: oklch(20.5% 0 0)
• --color-green-500: oklch(72.3% .219 149.579)

2.3 Color Relationships

High contrast is the rule: pink on dark, white on dark, dark on light. Accessibility holds up well in primary contexts. Dark mode is native—most pages use deep backgrounds by default, with light mode for certain content sections.

The palette supports multi-tone UI: you have functional blues, greens, reds for status indicators, plus a full neutral ladder from --color-neutral-200 (light) to --color-neutral-900 (dark). This means you can design dashboards or marketing pages without leaving the palette.

2.4 Usage Guide

Works well:

• #de2864 on #232323 — high energy CTA.
• White on #060119 — crisp readability.
• --color-green-500 for success icons against dark UI.

Avoid:

• Pink on white — contrast drops below comfortable WCAG levels.
• Gray (#979797) on pink — muddied readability.
• Overusing bright accent blues (#005fcc) outside functional states—dilutes brand pink focus.

3. Typography

3.1 Font Families

Two core families:

• Inter — sans-serif, modern, versatile. Fallbacks: system-ui, -apple-system, Segoe UI, Helvetica Neue, Arial, Noto Sans.
• Sora — geometric sans, more personality. Sometimes with serif fallback for special headings.

No Google Fonts import detected here (sources array empty), so likely self-hosted or bundled.

3.2 Type Scale

(There are dozens more—this is a condensed view. Full extracted data contains >60 type styles.)

3.3 Hierarchy

This system loves big headings—106px, 100px, 70px. That’s hero-section typography. Inter handles body, links, and UI text; Sora gives headings more personality. Weights range from 300 (light) to 700 (bold), matching content tone. Spacing values (like -0.9px letter-spacing) tighten large headings for visual impact.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

This strict adherence to multiples of 8px keeps the layout consistent.

4.2 Layout

Breakpoints: from 400px up to 1280px. There’s a full responsive ladder:

• Mobile: 400–640px
• Tablet: 728–1024px
• Desktop: 1024px+

Utility-first Tailwind means layout is composable per breakpoint. No fixed container widths given here, but we see consistent sectional padding (20px, 24px, 32px).

5. Visual Elements

Border Radius

They use everything from sharp corners (0px) to extreme pills (33554400px). Mapping:

• 2px — cookie link buttons
• 8px — small buttons, cards
• 12px — medium cards/tabs
• 16px — large cards
• 20px — footers, big cards
• 24px — section containers
• 50px — pill buttons, modals
• 33554400px — full pills (Nav CTAs)

Shadows

Mostly subtle:

• rgba(0, 0, 0, 0.1) 0px 1px 3px — small depth
• rgba(255, 255, 255, 0.05) inset — soft inner border
• Occasional heavy: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

Shadows are functional, not decorative.

Borders

Frequent 1–2px borders:

• Pink (#ff4876) underlines for headings
• White borders for buttons
• Gray (rgb(230,230,230)) for cards

6. Components

6.1 Buttons

Nav Free Button:

• Default: background: #000, color: #fff, padding 8px 16px, radius 33554400px, border 2px solid #fff
• Hover: color: #ff4876, background initial, opacity 0
• Focus: outline 2px, background #fafafa, color #122124

Nav Demo Button:

• Default: background: #de2864, color: #fff, padding 8px 16px, radius 33554400px, border 2px solid #de2864
• Hover: color: #ff4876, opacity 0
• Focus: outline 2px, background #fafafa, color #122124

Cookie Setting Link:

• Default: background: #ff4876, color: #fff, padding 12px 0px, radius 2px
• Hover/Focus: background changes to rgb(30, 174, 219)

Other button variants use dark neutrals, transparent backgrounds, or 12px radius with solid borders.

6.2 Links

Variants:

• Black text (#000) default, hover to #565656
• White text default, hover to #565656
• Neutral oklch (oklch(0.21 0.034 264.665)) default, hover to #565656

No underlines—text-decoration stripped.

6.3 Forms

No input data here—likely styled via Tailwind utilities. Checkboxes, radios not present in extraction.

6.4 Cards

Card example:

• Background: #fff
• Border: 1px solid #e6e6e6
• Radius: 8px
• Padding: 24px

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-primary: #de2864;
  --color-secondary-pink: #ff4876;
  --color-dark-neutral-1: #232323;
  --color-dark-neutral-2: #060119;
  --color-dark-neutral-3: #1a1a1a;
  --color-white: #ffffff;
  --color-gray: #808080;
  --color-gray-light: #979797;
  --color-blue: #005fcc;
  --color-gray-mid: #8a8a8a;
  --color-gray-dark: #757575;
  --color-off-white-transparent: #fefffb;
  --color-gray-ultra-light: #f3f3f3;
  /* ... full oklch variable set from data ... */

  /* Typography */
  --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans";
  --font-sora: "Sora", ui-serif, Georgia, Cambria, "Times New Roman", Times;

  /* Spacing */
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15.49px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-full: 33554400px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 3px;
  --shadow-inset-light: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

8. AI Coding Assistant Prompt

# Pendo Design System Specification

You are a Pendo design expert. Build UIs matching their visual language exactly.

## Brand Context
Pendo’s design is bold, product-led, and conversion-focused. Bright pinks stand out against deep neutrals. Typography is confident, spacing generous, and CTAs unmistakably pill-shaped.

## Color Palette
- Primary Pink: #de2864 — Primary buttons, CTA highlights
- Secondary Pink: #ff4876 — Cookie link borders, secondary CTAs
- Dark Neutral 1: #232323 — Dark sections
- Dark Neutral 2: #060119 — Hero backgrounds
- Dark Neutral 3: #1a1a1a — Button backgrounds
- White: #ffffff — Text on dark, surfaces
- Gray: #808080 — Secondary text
- Gray Light: #979797 — Disabled text
- Blue: #005fcc — Hover/focus accents
- Gray Mid: #8a8a8a — Neutral hover
- Gray Dark: #757575 — Neutral hover
- Off White Transparent: #fefffb — Overlays
- Gray Ultra Light: #f3f3f3 — Card backgrounds

## Typography
- Headings: "Sora", ui-serif fallback
- Body/UI: "Inter", system-ui fallback

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| Hero H1 | Inter | 106.25px | 700 | — | Hero titles |
| H1 | Sora | 70px | 700 | — | Section titles |
| H2 | Sora | 58px | 600 | 1.22 | Subheadings |
| Body | Inter | 16px | 400 | 1.50 | Paragraphs |
| Button | Inter | 14px | 700 | 1.43 | CTA text |
| Caption | Inter | 14px | 400 | 1.43 | Small notes |

## Spacing & Grid
Base: 8px grid. Scale: 5px, 6px, 8px, 10px, 12px, 15.49px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px.
Use 8px multiples for all padding/margins.

## Border Radius
- none: 0px — tables
- sm: 2px — cookie link buttons
- md: 8px — small cards
- lg: 12px — medium cards
- xl: 16px — large cards
- xxl: 20px — footers
- full: 33554400px — pill buttons

## Shadows & Depth
- subtle: rgba(0,0,0,0.1) 0px 1px 3px
- inset-light: rgba(255,255,255,0.05) 0px 0px 0px 1px inset

## Component Specifications

### Primary Button
Default:
```css
background: #de2864;
color: #fff;
padding: 8px 16px;
border-radius: 33554400px;
border: 2px solid #de2864;
font-weight: 700;
font-size: 14px;
```
Hover: `color: #ff4876; opacity: 0;`
Focus: `outline: 2px solid; background: #fafafa; color: #122124;`

### Secondary Button
Same as primary but:
```css
background: #000;
color: #fff;
border: 2px solid #fff;
```

### Navigation Links
Default: `color: #000; text-decoration: none;`
Hover: `color: #565656;`

### Card
```css
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 24px;
```

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 640px, 728px, 768px, 1024px, 1280px.
Mobile padding: 20px. Desktop: 32px.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: visible 2px outline in brand colors
- Disabled: 50% opacity

## DO List
- Use only palette colors
- Maintain 8px spacing grid
- Use Sora for headings, Inter for body/UI
- Keep CTAs pill-shaped
- High contrast between text and background

## DON'T List
- Don't use unapproved colors
- Don't mix sharp and rounded corners in same component
- Don't remove focus outlines
- Don't apply heavy shadows

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #de2864;
  color: #fff;
  padding: 8px 16px;
  border-radius: 33554400px;
  border: 2px solid #de2864;
  font-weight: 700;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover { color: #ff4876; opacity: 0; }
.btn-primary:focus { outline: 2px solid; background: #fafafa; color: #122124; }
```

### Card
```css
.card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 24px;
}
```

### Navigation Link
```css
.nav-link {
  color: #000;
  text-decoration: none;
}
.nav-link:hover { color: #565656; }
```

9. Summary

TL;DR — Pendo’s design system is bold, pink-driven, and built on an 8px grid. Pill-shaped CTAs, confident typography, and deep neutrals define the look. Colors are high-contrast, shadows minimal, and everything feels conversion-focused.

Brand Keywords:

• bold-pink
• product-led
• pill-cta
• high-contrast
• tailwind-driven