Qualtrics Design System Deep Dive

By a designer who loves taking things apart.

1. Brand Overview

Let’s start with one truth: Qualtrics doesn’t just sell software; it sells control. The website design reflects that control — confident, structured, unflinching. Their design doesn’t scream innovation in color or ornament; instead, it whispers precision, reliability, and enterprise-grade trust.

Everything on qualtrics.com looks engineered rather than decorated. The layout is clean, monochrome-heavy, with deliberate injections of bright blue (rgb(30, 174, 219)) for interactivity. It’s a brand built for analysts and strategists, not for Instagram. The vibe is corporate modern: heavy typographic hierarchy, huge white space, and crisp components.

They operate in the “enterprise UX platform” space — the world of B2B SaaS that wants to feel like B2C design. Competitors like SurveyMonkey and Medallia lean more colorful or optimistic. Qualtrics goes the other way: confident black and white, a single expressive accent, and no fluff.

What's interesting: they’ve got a mix of Tailwind CSS utility thinking and Vuetify component frameworks living in the same design system. That signals a transition — maybe a move from component-library-first (Vuetify) to design-token-first (Tailwind).

The fonts tell another story. Custom typefaces like Bento Sans and Input Sans give the visuals a rational, tech-oriented edge. Design-wise, everything feels gridded to an 8px scale, with border radii that stretch from razor-sharp (0px) to cartoonishly soft (191981px). The extremes are deliberate: rectangular structure meets fluid pill shapes. This kind of duality speaks to a product that wants to combine enterprise stability with a friendly front.

Summary: The Qualtrics brand experience system is professional, slightly cold, built for trust, and executed with balance. It’s less about delight and more about confidence. Think “international corporate minimalism with a hint of optimism-blue.”

2. Color System

2.1 Primary Colors

The core brand tone revolves around black (rgb(0, 0, 0)), white (#ffffff), and that punchy blue (rgb(30, 174, 219)). The blue acts as the sole accent signaling interaction — hover, focus, call-to-action. They avoid gradient gimmicks. The emphasis is stark contrast.

This blue is very different from enterprise SaaS peers like Salesforce (who use a lighter sky blue) or SAP (who live in warmer blues). Qualtrics’ blue leans toward cyan: techy, clinical, dynamic. It works because it pops hard against the black-and-white base without feeling too playful. It's analytical energy, not playful whimsy.

Accessibility-wise, the contrast between white text on the cyan background or black text on white sections easily passes WCAG AA thresholds. However, the medium greys (#696969, #232827) approach the edge of readability if paired incorrectly. Note that Qualtrics uses them sparingly — mostly for UI controls, dividers, and navigation icons.

2.2 Complete Palette

This palette is extremely functional. Every hue has a job — no decorative excess. The heavy reliance on HSL values shows they’re building adaptive scales — smart when you’re thinking in design tokens, not hard-coded hex.

2.3 Color Relationships

Contrast drives everything. The black/white pairing sets the tone. Blue acts purely as interaction signaling — never background. The rest of the greys form a rational tonal ladder from gray-10 up to gray-100. That’s textbook accessible design thinking.

There’s no hint of pastel or duotone experiments. They don’t chase fashion; they chase clarity. I love the discipline.

Dark mode is implied through variables like gray-10 and gray-100, but the palette’s structure works in both directions. Add inversion and it would still hold together — another sign of good systematic thinking.

2.4 Usage Guide

Best combinations:

• #ffffff background with hsl(201,15%,5%) text — clean, accessible
• rgb(30,174,219) on #ffffff background — brand accent purity
• Gold on neutral dark surfaces — subtle warmth

Avoid:

• Blue (rgb(30,174,219)) on grey backgrounds — loses punch.
• Grey-on-grey text combinations (#696969 over #90% grey) — risk of low contrast.

This color language is binary in behavior — black/white base, blue/green/red highlights. It’s all functional contrast. Every hue has permission tied to purpose.

3. Typography

3.1 Font Families

Qualtrics builds its typographic DNA around Bento Sans, Benton Sans, and Input Sans — all Adobe Fonts, no Google Fonts. These choices have a rational, utilitarian flavor: high legibility, geometric proportions, low ornament.

• Bento Sans: Core headline and button usage.
• Benton Sans: Body and link text — crisp, neutral, reliable.
• Input Sans: Labels, small captions, uppercase utility styles.

Fallbacks include Helvetica Neue, Helvetica, and Arial — telling you these are optimized for universal rendering.

The overall impression: Every line of text feels modern but readable. You see it and think "enterprise-grade" without boredom.

3.2 Type Scale

Notice how headlines jump dramatically — from 96px giants to 22px subheads. It’s a big personality shift between hero and UI text. The typography breathes at desktop sizes but holds crispness at smaller breakpoints.

3.3 Hierarchy

They lean hard into contrast. Big, wide hero sections make 79px lowercase type feel monumental. Then they dial it down fast for body copy at 16px — standard enterprise legibility. Uppercase Input Sans for small labels adds tech credibility.

The hierarchy is clear even without color — pure typographic rhythm. Vertical spacing likely follows the 8px grid, aligning ascenders and baselines precisely. Nothing feels squishy or improvised. 

4. Spacing & Layout

4.1 Spacing Scale

The layout grid uses an 8px base scale, which remains one of the most practical foundations for responsive systems.

The frequency counts confirm most design weight sits between 12px–40px, ideal for micro-padding, grid gaps, and section spacing.

4.2 Layout & Breakpoints

Breakpoints range from 98px up to 1680px, with common nodes at 640px, 768px, 1024px, and 1280px. These are standard Tailwind conventions, which fits the framework evidence.

This system scales smoothly from mobile to wide desktop. Content likely locks around 1200–1280px for readability. On smaller breakpoints, typography compactly adapts — probably shaving 1–2 steps down the type scale.

5. Visual Elements

Border Radius System

Let’s talk curves. There’s a whole mix here, from strict rectangles to fluid pills.

That 191981px border radius shows a trend: if you want very round, go all in. No halfway curves. This “commit or go sharp” attitude makes everything more cohesive.

Shadows

Shadows are rare, soft, and mostly broadcast hierarchy rather than decoration.

They rely on flat design surfaces, occasionally enhancing depth with neutral drop shadows. Never exaggerated.

Borders

Borders replace shadows for defining edges — logical for a flat aesthetic.

6. Components

6.1 Buttons

There are three main patterns.

(1) Primary Button (Pill White to Blue)

Pill-shaped, clean hover blue, minimal stroke. The 191981px radius makes it feel fluid without cartooniness. 

(2) Secondary Dark Button

Consistent hover and focus across styles = great system discipline. Consistency matters.

(3) Ghost / Icon Button

These micro-interactions (scale and fade) bring just enough tactile feel without animation overuse.

6.2 Links

Link colors adjust depending on context:

They dropped underlines for everything except explicit CTAs. Hover states always turn blue (same hue family as the accent).

6.3 Forms

Focus states carry the same blue highlight rhythm.

I love that form fields invert color on focus — bold but clear. Total visual certainty for interaction.

6.4 Cards

Cards use mild radii and shadows:

• Border radius: 10px standard
• Shadow: rgba(0,0,0,0.12) 0 0 58 16px
• Padding: ~24px–32px likely based on spacing data

They prefer deep shadows over stacked borders, which makes cards float softly. Expect high z-index layering on hover, not glowing transitions — a careful, serious aesthetic.

7. Design Tokens (CSS Custom Properties)

/* === Qualtrics Design Tokens === */

/* Colors */
:root {
  --color-primary-black: rgb(0, 0, 0);
  --color-secondary-transparent: rgba(0, 0, 0, 0);
  --color-white: #ffffff;
  --color-neutral-dark: #232827;
  --color-gray-mid: #696969;
  --color-text-neutral-loud: hsl(201,15%,5%);
  --color-text-neutral-medium: hsl(201,15%,20%);
  --color-text-neutral-soft: hsl(201,15%,44%);
  --color-gray-10: hsl(201,15%,11%);
  --color-gray-60: hsl(201,15%,57%);
  --color-gray-70: hsl(201,15%,72%);
  --color-gray-90: hsl(201,15%,88%);
  --color-gray-95: hsl(201,15%,93%);
  --color-gray-100: hsl(201,15%,97%);
  --color-gold: #fdca40;
  --color-red: #e33f1e;
  --color-green: #3fa21c;
  --color-blue-swipe: #007aff;
  --color-accent-blue: rgb(30,174,219);
}

/* Typography */
:root {
  --font-bento-sans: "Bento Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-benton-sans: "Benton Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-input-sans: "Input Sans", sans-serif;
  --font-size-h1: 96px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
}

/* Spacing (8px grid) */
:root {
  --space-1: 1px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-70: 70px;
  --space-80: 80px;
  --space-100: 100px;
}

/* Border Radius */
:root {
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-round: 50%;
  --radius-pill: 9999px;
  --radius-mega-pill: 191981px;
}

/* Shadows */
:root {
  --shadow-none: rgba(0,0,0,0) 0px 0px 0px 0px;
  --shadow-modal: rgba(0,0,0,0.12) 0px 0px 58px 16px;
  --shadow-card: rgba(0,0,0,0.25) 0px 25px 50px -12px;
}

/* Borders */
:root {
  --border-black: 1px solid rgb(0,0,0);
  --border-white: 1px solid rgb(255,255,255);
}

8. AI Coding Assistant Prompt

# Qualtrics Design System Specification

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

## Brand Context
Qualtrics represents precision, enterprise confidence, and logical hierarchy. Design emphasizes structure and contrast: black, white, and a punchy cyan blue for interactivity. UI should feel professional and analytical.

## Color Palette
- Primary Black: rgb(0,0,0) — Text, outlines, navigation
- Secondary Transparent: rgba(0,0,0,0) — Neutral container backgrounds
- White: #ffffff — Page backgrounds, cards
- Accent Blue: rgb(30,174,219) — CTAs, hover, focus states
- Neutral Dark: #232827 — Buttons, dark surfaces
- Mid Grey: #696969 — Secondary text
- Text Neutral Loud: hsl(201,15%,5%) — Primary body text
- Text Neutral Medium: hsl(201,15%,20%) — Secondary body text
- Text Neutral Soft: hsl(201,15%,44%) — Captions
- Gray 10–100 (201,15%) — Gradation ladder for background levels
- Gold: #fdca40 — Highlights
- Red: #e33f1e — Error states
- Green: #3fa21c — Success states
- Swipe Blue: #007aff — Carousel arrows

## Typography
- Heading Font: "Bento Sans", Helvetica Neue, Helvetica, Arial
- Body Font: "Benton Sans", Helvetica Neue, Helvetica, Arial
- Utility Font: "Input Sans", sans-serif

| Level | Size | Weight | Line Height | Use |
|--------|-------|---------|-------------|-----|
| H1 (hero) | 96px | 700 | 1.0 | Hero titles |
| H1 alt | 79px | 300 | 1.2 | Intro messaging |
| H2 | 50px | 700 | 1.1 | Section headers |
| H3 | 40px | 700 | 1.2 | Sub sections |
| H4 | 32px | 700 | 1.2 | Inline modules |
| Body | 16px | 400 | 1.4 | Main content |
| Button | 14px | 400–700 | 1.0–1.4 | Action text |
| Caption | 12–14px | 400 | 1.2–1.5 | Metadata |

## Spacing & Grid
Base: 8px grid.
Available increments: 1, 8, 12, 16, 24, 30, 40, 48, 70, 80, 100px.
All layout, padding, and margin values must align to this rhythm.

## Border Radius
- none: 0px — Inputs
- sm: 2px — Tiny buttons
- md: 8px — Standard buttons
- lg: 10px — Cards
- xl: 16px — Modals
- round: 50% — Avatars, icons
- pill: 9999px — Inputs or pill CTAs
- mega-pill: 191981px — Large full pill buttons

## Shadows & Depth
- Flat baseline: rgba(0,0,0,0) 0px 0px 0px
- Card elevation: rgba(0,0,0,0.25) 0px 25px 50px -12px
- Modal elevation: rgba(0,0,0,0.12) 0px 0px 58px 16px
Depth used sparingly; keep surfaces clean.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: rgb(33,33,33);
  border-radius: 191981px;
  border: none;
  padding: 12px 16px;
  font-family: "Input Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
}
.btn-primary:hover {
  background: rgb(30,174,219);
  color: #fff;
}
.btn-primary:focus {
  background: rgb(30,174,219);
  color: #fff;
  opacity: 0.7;
  outline: 2px solid #000;
  border: 1px solid #000;
}
```

### Secondary Dark Button
```css
.btn-dark {
  background: rgb(35,40,39);
  color: #fff;
  border-radius: 191981px;
  padding: 12px 16px;
  font-size: 16px;
}
.btn-dark:hover, .btn-dark:focus {
  background: rgb(30,174,219);
  color: #fff;
}
```

### Ghost Button
```css
.btn-ghost {
  background: transparent;
  color: rgb(33,33,33);
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: transform 150ms ease;
}
.btn-ghost:hover {
  background: rgb(30,174,219);
  color: #fff;
  transform: scale(0.97);
}
```

### Input
```css
.input {
  background: transparent;
  color: #000;
  border-bottom: 1px solid #000;
  padding: 24px 32px 10px 0;
  font-size: 16px;
  font-family: "Benton Sans", sans-serif;
}
.input:focus {
  background: rgb(30,174,219);
  color: #fff;
  border: 1px solid #000;
  outline: 1px solid #000;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(0,0,0,0.12) 0 0 58px 16px;
  padding: 24px;
}
```

## Layout & Responsive Rules
Breakpoints: 640px, 768px, 1024px, 1280px, 1400px, 1680px.
Max container width: 1280px.
Padding: 16px mobile / 40px desktop.
Section gap: 40px–80px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus
- Focus rings: 2px solid black, visible on all buttons and inputs
- Hover color: Always rgb(30,174,219)
- No animation tints beyond opacity or scale(.97)

## DO List
- Use only colors defined in the palette
- Maintain 8px-based spacing
- Use black or white backgrounds only
- Keep type strictly within provided weights and sizes
- Reserve blue for interactive components
- Use pill buttons for prominent CTAs

## DON’T List
- Don’t add new blues or tints
- Don’t apply heavy shadows
- Don’t use mixed corner styles
- Don’t lowercase Input Sans labels (keep uppercase)
- Don’t overuse gold — it’s for accent moments only

## Example Implementations

Button (Tailwind)
```html
<button class="bg-white text-black rounded-[191981px] px-4 py-3 hover:bg-[#1eaedb] hover:text-white transition duration-150"></button>
```

Card (Tailwind)
```html
<div class="bg-white rounded-[10px] shadow-[rgba(0,0,0,0.12)_0_0_58px_16px] p-6"></div>
```

Input Field
```html
<input class="border-b border-black bg-transparent text-black focus:bg-[#1eaedb] focus:text-white focus:outline focus:outline-black p-4 w-full" />
```

9. Summary

Qualtrics’ design system is a clinic in corporate restraint. Black, white, blue. Rational spacing. Structured type. No wasted visuals. Every value feels measured.

Designers aiming for expressive structure or dashboard clarity can learn from this: limit palette, sculpt hierarchy, don’t apologize for precision. It’s not warm; it’s intelligent.

Brand Keywords:
enterprise-minimalist • analytical-modern • disciplined-tech • contrast-driven • human-precise