DoubleVerify Design System Deep Dive

1. Brand Overview

DoubleVerify’s site has the feel of a confident, data-driven tech brand. It’s built for advertisers, agencies, and media platforms who care about precision, trust, and measurable performance. The visual language says: “We’re serious about verification, but we’re not boring.” You’ll notice bold purples, clean typography, and pill-shaped CTAs that pop off deep navy backgrounds. There’s a lot of contrast, but it’s carefully balanced so nothing feels garish.

They’ve got a clear design philosophy: clarity first, personality second. Navigation is straightforward, typography is legible at every breakpoint, and color usage is controlled. The primary purple (#6e2cb5) dominates key actions and interactive elements, supported by a strong secondary—actually the same purple—keeping the brand consistent. Accents like bright magenta (#c70099) and vivid orange in hover states add energy without breaking the palette.

The site’s structure is modular. Cards, CTAs, and content blocks have consistent corner radii and spacing, which makes the brand feel coherent across pages. The 8px spacing scale is everywhere—this keeps the rhythm tight and predictable. Buttons are expressive in state changes, with hover transforms that rotate and lift. This is not a flat, purely functional UI; it’s a deliberate mix of corporate trust and tech swagger.

This is a design system for teams that want a strong visual identity without losing usability. The rules are clear, the palette is locked down, and the components are built to be reusable. If you’re a developer or designer working with DoubleVerify’s brand, your job is to respect these constraints—because the moment you drift from the color values or spacing grid, you’ll break the brand’s precision.

2. Color System

2.1 Primary Colors

The main brand color is rgb(110, 44, 181) → #6e2cb5. It’s used as both primary and secondary in the semantic color set. This deep purple reads as authoritative but still approachable. Psychologically, purple is often tied to creativity and trust—good fit for a verification company that also wants to feel innovative.

Competitors in ad tech often lean on blues (trust, stability) or greens (growth, safety). DoubleVerify’s purple stands out in the category. It’s a differentiator in crowded dashboards and corporate decks.

The magenta #c70099 (rgb(199, 0, 153)) shows up in primary button fills—very high-energy and disruptive compared to the purple. This is a bold choice; they’re signaling that primary actions are important and deserve attention.

2.2 Complete Palette

2.3 Color Relationships

The palette is high-contrast. Deep navy (#14113b) against white (#ffffff) is comfortably AAA accessible. Purple (#6e2cb5) on white is also safe, but magenta (#c70099) on white needs checking—contrast is borderline on smaller text but fine for large button labels.

Hover orange (rgb(255, 128, 0)) is not in the core palette, but appears in interactive states. It’s visually explosive against purple/navy backgrounds—attention-grabbing, but could be jarring if overused.

No dark mode rules are evident. The site relies on dark navy backgrounds for hero sections, light lavender for content separation.

2.4 Usage Guide

Works well:

• White text on magenta buttons—high visual impact.
• Purple links on white backgrounds—clear and brand-consistent.
• Navy backgrounds with white text—secure, professional feel.

Avoid:

• Magenta text on purple backgrounds—low contrast, hard to read.
• Sky blue (#639af9) as body text—it’s tuned for hover/focus, not for static content.
• Mixing hover orange with magenta in adjacent elements—it becomes visual chaos.

3. Typography

3.1 Font Families

Two main families:

• Roboto Condensed — used for headings and some links. No fallbacks listed, but standard Roboto fallback applies.
• Roboto — used for body text, buttons, and secondary headings.

No Adobe Fonts. No variable fonts. This is a Google Fonts-based system.

3.2 Type Scale

3.3 Hierarchy

Headings lean condensed for a more modern, space-efficient look. Body text sticks to standard Roboto—readable, neutral. The scale is tight, with small jumps between some levels (18px vs 16px vs 15px), which means you have to be deliberate about which size you pick for clarity. Large headings (64px, 56px) are bold and compact—good for impactful hero sections.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but there are odd values too.

4.2 Layout

Breakpoints are numerous—fine-grained control:

320, 400, 480, 568, 768, 769, 992, 993, 1199, 1200, 1440, 1441, 1599, 1600, 1921, 1999, 2000px.

Clearly optimized for responsive precision. Expect container widths to shift at these points, keeping content tightly aligned.

5. Visual Elements

Border Radius

They love pills—100px radius is everywhere for CTAs.

Shadows

Two main shadows:

• rgba(0,0,0,0.09) 0px 9px 23px + rgba(0,0,0,0.1) 0px 5px 8px — soft depth
• rgba(0,0,0,0.06) 0px 0px 6px + rgba(0,0,0,0.13) 0px 6px 9px — subtle lift

Borders

Mix of dark navy and magenta borders for buttons, light lavender for dividers, grey for inputs.

6. Components

6.1 Buttons

Primary CTA (cta-btn--primary-fill)

• Default: bg #c70099, white text, padding 14px 24px, radius 100px, border 1px solid #c70099.
• Hover: bg rgb(255,128,0), white text, border 1px solid #c70099, transform translateY(-5px) rotate(-45deg).
• Active: bg #b696c6, color var(--btn--tertiary-fg).
• Focus: 1px white outline + 4px #3699f1 outline, border dashed var(--menu-links--active), transform translateX(100%) translateY(-50%).

Slider Bullet

• Default: bg #b1b1b1, text #14113b, radius 14px.
• Hover: bg rgb(255,128,0), text white.
• Active/Focus: bg #532188, color var(--btn--secondary-fg-hover).

Arrow Button

• Default: bg #6e2cb5, white text, radius 50%.
• Hover: bg rgb(255,128,0), white text.

6.2 Links

1. Purple (#6e2cb5), underline, normal weight. Hover to blue (#0022ff).
2. Navy (#14113b), bold, no underline. Hover to blue.
3. White, bold, no underline. Hover to blue.

6.3 Forms

Email input:

• Default: bg white, text rgba(20,17,59,0.6), border 1px solid #b1b1b1, radius 100px, padding 12px 16px 12px 60px.
• Focus: bg #532188, text var(--btn--secondary-fg-hover), border var(--secondary).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-deep-navy: #14113b;
  --color-white: #ffffff;
  --color-brand-purple: #6e2cb5;
  --color-light-lavender: #f5f0fa;
  --color-sky-blue: #639af9;
  --color-medium-blue: #5d90ec;
  --color-magenta: #c70099;
  --color-magenta-hover: #950073;
  --color-tertiary-hover: #b696c6;
  --color-secondary-hover-purple: #532188;
  --border-dark-navy: #1c1954;
  --border-magenta: #c70099;
  --divider-navy: #14113b;
  --border-light-lavender: #f5f0fa;
  --border-grey: #b1b1b1;
  --focus-blue: #3699f1;

  /* Typography */
  --font-body: "Roboto";
  --font-heading: "Roboto Condensed";

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-12-5: 12.5px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-25: 25px;
  --space-36: 36px;
  --space-40: 40px;
  --space-54: 54px;
  --space-72: 72px;
  --space-90: 90px;
  --space-100: 100px;
  --space-140: 140px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-14: 14px;
  --radius-18: 18px;
  --radius-24: 24px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.09) 0px 9px 23px, rgba(0,0,0,0.1) 0px 5px 8px;
  --shadow-md: rgba(0,0,0,0.06) 0px 0px 6px, rgba(0,0,0,0.13) 0px 6px 9px;
}

8. AI Coding Assistant Prompt

# DoubleVerify Design System Specification

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

## Brand Context
DoubleVerify’s design is precise, high-contrast, and tech-forward. It uses deep navy for trust, bold purple for brand identity, and energetic magenta/orange for CTAs. Spacing is based on an 8px grid with consistent corner radii.

## Color Palette
- Deep Navy: #14113b — backgrounds, headers
- White: #ffffff — text on dark, backgrounds
- Brand Purple: #6e2cb5 — primary actions, links
- Light Lavender: #f5f0fa — card backgrounds
- Sky Blue: #639af9 — hover/focus accents
- Medium Blue: #5d90ec — hover/focus accents
- Magenta: #c70099 — primary button fills
- Magenta Hover: #950073 — primary button hover
- Tertiary Hover: #b696c6 — tertiary button hover
- Secondary Hover Purple: #532188 — secondary button hover
- Border Dark Navy: #1c1954 — borders on links/spans
- Border Magenta: #c70099 — primary button borders
- Divider Navy: #14113b — list item separators
- Border Light Lavender: #f5f0fa — div borders
- Border Grey: #b1b1b1 — inputs
- Focus Blue: #3699f1 — focus outlines

## Typography
- Headings: "Roboto Condensed"
- Body: "Roboto"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Hero | 64px | 700 | 1.12 | Page titles |
| H1 Section | 56px | 700 | 1.14 | Section headings |
| H1 Mid | 44px | 500 | 1.16 | Subsections |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid. Values: 4, 5, 6, 8, 10, 12, 12.5, 14, 16, 18, 20, 22, 25, 36, 40, 54, 72, 90, 100, 140px.

## Border Radius
- 2px: iframe
- 3px: span
- 5px: div
- 8px: cards, small buttons
- 14px: buttons, cards
- 18px: divs
- 24px: large card
- 100px: pill buttons, inputs
- Full (50%): circular buttons

## Shadows & Depth
- Large: rgba(0,0,0,0.09) 0px 9px 23px, rgba(0,0,0,0.1) 0px 5px 8px
- Medium: rgba(0,0,0,0.06) 0px 0px 6px, rgba(0,0,0,0.13) 0px 6px 9px

## Components

### Primary Button
```css
.btn-primary {
  background: #c70099;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid #c70099;
  font-weight: 700;
  font-size: 15px;
}
.btn-primary:hover {
  background: rgb(255,128,0);
  transform: translateY(-5px) rotate(-45deg);
}
.btn-primary:focus {
  box-shadow: #ffffff 0 0 0 1px, #3699f1 0 0 0 4px;
}

Secondary Button (Slider Bullet)

.btn-secondary {
  background: #b1b1b1;
  color: #14113b;
  border-radius: 14px;
}
.btn-secondary:hover {
  background: rgb(255,128,0);
  color: #ffffff;
}

Input Field

.input-email {
  background: #ffffff;
  color: rgba(20,17,59,0.6);
  border: 1px solid #b1b1b1;
  border-radius: 100px;
  padding: 12px 16px 12px 60px;
}
.input-email:focus {
  background: #532188;
}

Layout & Responsive Rules

Breakpoints: 320, 400, 480, 568, 768, 992, 1199, 1440, 1600, 1921, 2000px.

Interaction Rules

• Hover transforms: translateY(-5px) rotate(-45deg) for primary button
• Focus outlines: white + blue dual ring
• Transition: ~150ms ease

DO

• Use only defined palette
• Keep spacing multiples of 8px
• Match border radius to component spec
• Use Roboto Condensed for headings
• Maintain high contrast

DON'T

• Invent new colors
• Mix sharp and pill corners in same section
• Use hover orange outside interactive elements
• Overuse transforms

Code Examples

Primary Button (Tailwind-like)

.btn-primary {
  @apply bg-[#c70099] text-white px-[14px] py-[24px] rounded-[100px] font-bold text-[15px];
}

Card

.card {
  background: #f5f0fa;
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow-md);
}

---

## 9. Summary

**TL;DR** — DoubleVerify’s design system is crisp, high-contrast, and brand-locked. Purple and magenta drive identity, navy grounds it, and the 8px grid keeps everything in rhythm. Respect the palette and corner radii, and you’ll stay on brand.

**Brand Keywords**: precision-tech, bold-contrast, verification-trust, grid-disciplined, pill-obsessed