PubMatic Design System Deep Dive

1. Brand Overview

PubMatic’s visual language is unapologetically functional with a clean, corporate tech tone. This is not a brand chasing visual gimmicks—everything is tuned for clarity, speed, and trust. They operate in ad tech, which means their audience is split between two camps: engineers who want clean, predictable UI, and business-side users who expect a polished, enterprise look.

The vibe: restrained color palette, sharp typography, and a preference for flat elements over heavy skeuomorphism. They lean on a bright cyan (#4fc8ed / rgb(79, 200, 237)) as the primary brand accent—this becomes the anchor for CTAs, links, and focus states. Surrounding this are grayscale tones from pure white (#ffffff) to deep charcoal (#333333), with midrange grays for dividers and backgrounds.

Typography is custom—TVNordEF family variants dominate headings and UI labels, with Helvetica and Arial fallbacks. This choice keeps the brand distinct without sacrificing fallback safety. The type scale is tight and deliberate—no sprawling line heights, minimal decorative spacing. This works for data-heavy layouts where density matters.

Layout-wise, they're rooted in an 8px grid system. Breakpoints are numerous (320px all the way to 1920px)—clearly tuned for both mobile and massive desktop dashboards. The system is hybrid: Tailwind CSS utility classes for rapid component styling, Bootstrap for grid structure and some component variants.

Overall, PubMatic’s design philosophy: corporate clarity + brand accent restraint. They aim for a UI that feels authoritative but nimble—fast to scan, easy to navigate, always consistent. No soft pill buttons here—everything is squared, sharp, and precise. If you’re building for them, precision is non-negotiable.

2. Color System

2.1 Primary Colors

The main brand color is rgb(79, 200, 237) (#4fc8ed). It’s a bright, saturated cyan—energetic without tipping into neon. Cyan in tech branding often signals modernity, innovation, and openness. Compared to competitors, PubMatic’s cyan is lighter than LinkedIn’s blue, more vibrant than IBM’s corporate tone, and avoids the teal-green shift you see in some SaaS brands.

This cyan is used sparingly—CTAs, link text, hover states. It’s not the background. That restraint keeps it impactful.

2.2 Complete Palette

From CSS variables:

• --k-preference-tabs-purposes-header-link-color: rgba(0, 0, 0, 1) — black text for preference headers.
• --k-preference-tabs-purposes-purposeListHeader-rejectAllButton-background-color: rgba(80, 200, 237, 1) — cyan for reject-all buttons.
• --k-preference-tabs-requests-rightForm-form-dividers-subtitle-color: rgba(112, 112, 112, 1) — medium gray for subtitles.
• --k-preference-tabs-requests-rightForm-form-checkboxes-error-label-color: rgba(240, 0, 0, 1) — red for error labels.
• --k-modal-purposeList-purposeListItems-purposeFill-color: rgba(241, 241, 241, 1) — light gray fill.
• --k-preference-tabs-requests-rightForm-form-checkboxes-unselected-background-color: rgba(194, 194, 194, 1) — light gray for unselected states.
• --k-banner-description-link-color: rgba(79, 200, 237, 1) — cyan for banner links.

2.3 Color Relationships

White + charcoal = high contrast (passes WCAG AAA easily for body text). Cyan (#4fc8ed) on white passes AA for large text but is borderline for small text—should always be bold or padded by contrast.

Dark mode? Not implemented here—these colors are tuned for light backgrounds. The cyan pops against dark backgrounds, so if dark mode were introduced, it would still work.

Error red (rgba(240, 0, 0, 1)) is strong and saturated—clear against white, less so against charcoal.

2.4 Usage Guide

• Works well: Cyan on white, white on cyan, charcoal on light gray.
• Avoid: Cyan on charcoal without bold weight—it’s legible but loses vibrancy.
• Dividers: Use #cccccc or #e6e7e8—never pure black; black dividers feel heavy.
• Interactive states: Cyan is only for interactive elements—don’t use it for decorative backgrounds.

3. Typography

3.1 Font Families

PubMatic uses the TVNordEF family—custom, condensed and regular variants:

• TVNordEF-BlackCon — heavy condensed, headings and buttons.
• TVNordEF-Regular — body copy, links.
• TVNordEF-Bold — small caps, certain headings.
• TVNordEF-Black — strong headings.
• Fallbacks: Helvetica, Arial for regular weights; arial for some UI elements.

No Google Fonts, no Adobe Fonts—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The condensed weights mean headings take up less horizontal space—important for dashboards and dense tables. The tight line heights keep blocks compact. Buttons and links often use uppercase condensed fonts—this creates a distinct, branded look.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints are granular—mobile variants at 320px up to wide desktop at 1920px. Bootstrap grid (container, row, col) + Tailwind utilities for specific adjustments.

5. Visual Elements

Border Radius

None. All borderRadius values are 0px. This is a deliberate choice—sharp edges everywhere.

Shadow System

Mostly flat. Only a few shadows:

• rgba(0, 0, 0, 0.15) 0px 11px 19px -4px — subtle depth.
• Inset shadow for inputs: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset.

Borders & Dividers

Frequent use of 1px solid lines in #cccccc or #333333. White borders on dark backgrounds.

6. Components

6.1 Buttons

Variant 1 (black bg, 18px font, bold):

• Default: background: #000000, color: #333333, padding: 1px, border: none.
• Hover: background: #4fc8ed, color: #ffffff.
• Active: opacity: 0.85.
• Focus: Same as hover.

Variant 2 (white border, 14px font):

• Default: background: transparent, color: #ffffff, border: 1px solid #ffffff, padding: 0 16px.
• Hover: Cyan background, white text.
• Active: Opacity reduced.
• Focus: Cyan background.

Variant 3 (cyan bg, 18px font):

• Default: background: #4fc8ed, color: #ffffff, border: 1px solid rgb(56, 193, 235), padding: 12px.
• Hover: Slight shadow, cyan background.
• Active: White background, reduced opacity.
• Focus: Opacity 0.5, background from variable.

6.2 Links

Four patterns:

1. Cyan (#4fc8ed) no underline → hover: white underline.
2. Dark cyan (#39badd) → hover: white underline.
3. White with underline → hover: underline stays.
4. Black → hover: white underline.

6.3 Forms

Inputs: Borders in black or #cccccc. No rounded corners. Focus states not heavily styled—functional rather than decorative.

6.4 Cards

Light gray backgrounds (#e6e7e8), padding from spacing scale, occasional subtle shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-charcoal: #333333;
  --color-cyan-dark: #39badd;
  --color-mid-gray: #cccccc;
  --color-light-gray: #e6e7e8;
  --color-black: #000000;
  --color-cyan: #4fc8ed;
  --color-error-red: rgba(240, 0, 0, 1);
  --color-medium-gray: rgba(112, 112, 112, 1);
  --color-fill-light: rgba(241, 241, 241, 1);
  --color-unselected-gray: rgba(194, 194, 194, 1);

  /* Typography */
  --font-heading-condensed: "TVNordEF-BlackCon", sans-serif;
  --font-heading-regular: "TVNordEF-Regular", Helvetica, Arial, sans-serif;
  --font-heading-bold: "TVNordEF-Bold", sans-serif;
  --font-body: "TVNordEF-Regular", Helvetica, Arial, sans-serif;
  --font-icons: "pubmatic-icons";
  --font-glyphicons: "Glyphicons Halflings";

  /* Spacing (px) */
  --space-1: 1px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;

  /* Radius */
  --radius-none: 0px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.15) 0px 11px 19px -4px;
  --shadow-inset: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset;
}

8. AI Coding Assistant Prompt

# PubMatic Design System Specification

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

## Brand Context
PubMatic’s design is corporate-clean, tech-forward, and precision-driven. It uses a bright cyan accent against a restrained grayscale palette. Typography is custom and condensed, emphasizing data density and clarity.

## Color Palette
- Primary Cyan: #4fc8ed — CTAs, primary buttons, focus states
- Dark Cyan: #39badd — Logo, link headings
- White: #ffffff — Page background, text on dark
- Charcoal: #333333 — Body text on light
- Mid Gray: #cccccc — Dividers, subtle borders
- Light Gray: #e6e7e8 — Card backgrounds, panels
- Black: #000000 — Text, input borders, hover states
- Error Red: rgba(240, 0, 0, 1) — Validation errors
- Medium Gray: rgba(112, 112, 112, 1) — Subtitles
- Fill Light: rgba(241, 241, 241, 1) — Modal fills
- Unselected Gray: rgba(194, 194, 194, 1) — Checkbox unselected states

## Typography
Fonts:
- Headings: "TVNordEF-BlackCon"
- Body: "TVNordEF-Regular", Helvetica, Arial
- Icons: "pubmatic-icons"
- Glyphicons: "Glyphicons Halflings"

Type sizes:
| Element | Size | Weight | Line Height | Use For |
|---------|------|--------|-------------|---------|
| H1 | 54px | 400 | 0.90 | Page titles |
| H2 | 36px | 400 | 0.89 | Section headings |
| Body | 26px | 400 | 1.46 | Main content |
| Button | 22px | 400 | 1.43 | Uppercase actions |
| Body Small | 14px | 400 | 1.50 | Captions |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 5px, 8px, 10px, 12px, 15px, 20px, 25px, 30px, 40px
Use: Buttons (10-12px padding), cards (15-25px), sections (30-40px)

## Border Radius
- none: 0px — all components

## Shadows & Depth
- Large: rgba(0,0,0,0.15) 0px 11px 19px -4px
- Inset: rgba(0,0,0,0.075) 0px 1px 1px 0px inset
Flat overall; shadows used sparingly.

## Components

### Primary Button
Default: background #4fc8ed, color #ffffff, padding 12px, border 1px solid rgb(56, 193, 235), font-size 18px
Hover: shadow subtle, background #4fc8ed
Active: background #ffffff, opacity 0.85
Focus: opacity 0.5, background var(--k-preference-tabs-requests-rightForm-form-fields-active-background-color)

### Secondary Button
Default: transparent bg, white text, white border, padding 0 16px
Hover: cyan background
Active: opacity 0.85
Focus: cyan background

### Navigation Links
Default: cyan or dark cyan, no underline
Hover: white underline

### Input Fields
Border: 1px solid #000 or #cccccc
No radius
Focus: border-color cyan or black

### Cards
Background: #e6e7e8
Padding: 15-25px
Shadow: subtle lg shadow or none

## Layout & Responsive Rules
Breakpoints: 320px, 380px, 400px, 420px, 450px, 480px, 500px, 559px, 576px, 600px, 630px, 767px, 768px, 769px, 781px, 782px, 890px, 991px, 992px, 993px, 1024px, 1199px, 1200px, 1440px, 1599px, 1920px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: cyan background or outline
- Loading states: opacity changes

## DO
- Use only palette colors
- Maintain 8px spacing multiples
- Use condensed headings for titles
- Keep border radius at 0px
- Use cyan only for interactive elements

## DON'T
- Add custom colors
- Use rounded corners
- Overuse shadows
- Use cyan for non-interactive decoration
- Increase line heights beyond provided scale

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #4fc8ed;
  color: #ffffff;
  padding: 12px;
  border: 1px solid rgb(56, 193, 235);
  font-size: 18px;
  font-weight: 400;
  border-radius: 0;
  transition: background 150ms ease;
}
.btn-primary:hover { box-shadow: rgba(0,0,0,0.15) 0px 11px 19px -4px; }
.btn-primary:focus { opacity: 0.5; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 0 16px;
}
.btn-secondary:hover { background: #4fc8ed; }
```

Card:
```css
.card {
  background: #e6e7e8;
  padding: 15px;
  border-radius: 0;
  box-shadow: rgba(0,0,0,0.15) 0px 11px 19px -4px;
}
```

9. Summary

TL;DR: PubMatic’s design system is sharp-edged, cyan-accented, and grid-disciplined. No rounded corners, minimal shadows, and a restrained palette mean clarity wins. The condensed custom typography keeps data-heavy layouts tight.

Brand Keywords: corporate-clarity, cyan-accent, grid-disciplined, sharp-edged, data-dense