Surveymonkey Design System Deep-Dive

1. Brand Overview

Surveymonkey’s design language is a mix of pragmatic utility and approachable friendliness. It’s clearly a B2B SaaS product, but the tone in the visual layer avoids the sterile, overly corporate feel you see in some enterprise tools. This is a service for people who need actionable feedback, not just data analysts buried in spreadsheets.

The vibe: clean, confident, and slightly playful. The brand leans hard on green as a core identifier — not just any green, but a vibrant #00bf6f paired with softer tints like #adebd1 and #e5f9f1. That green says “growth” and “success” in the most literal way. It’s a deliberate move — green is unique in a sea of SaaS blues. They’re not trying to blend in with the Atlassians and Slacks of the world.

Typography tells the other half of the story. The primary face, National 2, is a sharp, modern grotesque. It’s assertive without being shouty. Paired with Inter for UI microcopy and captions, you get a balance between brand personality and interface clarity. National 2 does the brand work; Inter does the utility work.

Layout and spacing follow a strict 8px grid philosophy, which keeps the whole system feeling tight and predictable. That’s a big deal for a product with lots of complex forms, tables, and data entry points. If your spacing is sloppy, your UI feels cognitively heavier.

One thing you notice right away: corners are consistently softened with modest radii — 4px on most controls, 12px on images, occasional larger radii for modals. This keeps the interfaces from feeling brittle.

In short: Surveymonkey’s design system is about trust and accessibility without losing brand distinction. The greens are the emotional anchor, the typography is the voice, and the spacing is the skeleton. They’ve made choices that work for both marketing pages and dense product UI — not an easy feat.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(173, 235, 209) (#adebd1), a pale mint green. This is interesting — usually “primary” in a token set is the main action color, but here the semantic “primary” is more of a background or supportive tone. The actual action green — rgb(0, 191, 111) (#00bf6f) — appears in borders, buttons, and hover states. This dual-green setup helps keep CTAs distinct without saturating the UI in high-chroma color.

Psychologically, green is associated with success, progress, and growth — perfect for a company whose product is about improving through feedback. Compared to competitors (Qualtrics: blue; Typeform: black/white with accents), Surveymonkey’s green is more inviting and less corporate. It’s also easier to differentiate at a glance.

2.2 Complete Palette

Yes, that’s a lot. This isn’t a minimal palette; it’s a fully fleshed-out token set for a complex product.

2.3 Color Relationships

Dark text (#1e2124) over white (#ffffff) is safe for WCAG AAA — high contrast. Action green (#00bf6f) over white is also very readable. The light mint primary (#adebd1) doesn’t work for text — it’s a background/support color only.

Dark mode elements use slightly muted dark grays (#4d586f, #5e6a87) rather than pure black, keeping contrast comfortable.

2.4 Usage Guide

• Use action green only for interactive elements — buttons, hover states, progress indicators.
• Never use mint green for text — it’s too light; reserve for backgrounds and surfaces.
• Keep dark text on light backgrounds — avoids accessibility issues.
• Avoid mixing too many functional colors in one view — greens, blues, and oranges each have strong emotional weight.

3. Typography

3.1 Font Families

• National 2 — Primary brand font. Used for headings, links, and buttons. Fallbacks: Helvetica Neue, Helvetica, Arial, Hiragino Sans, Hiragino Kaku Gothic Pro, 游ゴシック, YuGothic, MS Gothic.
• Inter — UI utility font. Used for captions, small buttons, and precise UI text. No fallbacks listed.

No Google Fonts or Adobe Fonts — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

National 2 at 48px sets a strong hero tone on marketing pages. The 36px and 24px variants scale down for section headers. Inter at 14px is used for fine print, captions, and UI labels — the kind of text you don’t want to distract but still need readable. The mix is functional: National 2 carries brand presence, Inter carries legibility in dense UI.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px scale.

Heavy use of 8px and 32px — likely base padding and grid gaps. 4px is common for control padding and small gaps.

4.2 Layout

Breakpoints:

• 0px
• 480px
• 576px
• 768px
• 992px
• 1200px
• 1280px
• 1400px

This is a hybrid between Bootstrap’s breakpoints and some custom large-screen sizes.

5. Visual Elements

Border Radius

Dominant radius: 4px. Occasional 12px for larger elements, and extreme 1920px for fully rounded pills.

Shadows

Minimal use:

• rgba(0, 0, 0, 0.14) 0px 2px 8px 0px
• rgba(0, 0, 0, 0.14) 0px 8px 8px -4px

Mostly flat design with subtle depth.

Borders

Frequent 1px solid borders (#00bf6f, #1e2124, #d1d3d4). Used for separation instead of heavy shadows.

6. Components

6.1 Buttons

Example: .wrenchSelectMenuContainer.wrenchSelectMenu-size-lg

• Default:
  • Background: #ffffff
  • Color: #333e48
  • Padding: 0px
  • Border radius: 4px
  • Border: 1px solid #d0d2d3
  • Font: National 2, 16px, weight 400

No hover/active/focus styles defined here — likely handled globally.

6.2 Links

Several styles:

• Link Blue: default #007faa, hover #00bf6f
• Dark Text link: default #1e2124, no hover color change
• Gray link: default #73747a, hover underline
• White link: default #ffffff
• Light blue link: default #63b1cb, hover #00bf6f
• Dark steel link: default #333e48

Underline behavior varies — some links underline on hover, others don’t.

6.3 Forms

Text inputs:

• Background: #ffffff
• Color: #333e48
• Border: 1px solid #d0d2d3
• Radius: 4px
• No focus styles defined in data.

6.4 Cards

No explicit card component in extracted data, but white backgrounds with 4–12px radius and subtle shadows are consistent.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #adebd1;
  --color-secondary: transparent;
  --color-text-dark: #1e2124;
  --color-black: #000000;
  --color-dark-steel: #333e48;
  --color-white: #ffffff;
  --color-link-blue: #007faa;
  --color-neutral-gray: #6b787f;
  --color-action-green: #00bf6f;
  /* ... include all from palette ... */

  /* Typography */
  --font-family-primary: "National 2", Helvetica Neue, Helvetica, Arial, Hiragino Sans, Hiragino Kaku Gothic Pro, 游ゴシック, YuGothic, MS Gothic;
  --font-family-ui: "Inter";
  --font-size-h1: 48px;
  --line-height-h1: 1.13;
  /* ... full type scale ... */

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-full: 1920px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.14) 0px 2px 8px 0px;
  --shadow-md: rgba(0,0,0,0.14) 0px 8px 8px -4px;
}

8. AI Coding Assistant Prompt

# Surveymonkey Design System Specification

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

## Brand Context
Surveymonkey’s design system is clean, friendly, and professional. It uses green as a distinctive brand anchor, balanced by neutral grays and whites. Typography blends brand personality (National 2) with UI clarity (Inter). Layouts follow a strict 8px grid.

## Color Palette
- Primary Mint: #adebd1 — Backgrounds, supportive surfaces
- Action Green: #00bf6f — CTAs, hover states, progress indicators
- Dark Text: #1e2124 — High-contrast text
- Link Blue: #007faa — Links
- White: #ffffff — Page backgrounds, cards
- Neutral Gray: #6b787f — Secondary text
- Error: #ac145a — Validation errors
- Warning: #f05b24 — Alerts
- Info: #2dccd3 — Notifications
- Success: #00ad65 — Positive hover states
- [Include all functional colors from palette]

## Typography
- Headings: "National 2", Helvetica Neue, Helvetica, Arial, Hiragino Sans, Hiragino Kaku Gothic Pro, 游ゴシック, YuGothic, MS Gothic
- UI Text: "Inter"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 500 | 1.13 | Page titles |
| H2 | 36px | 500 | 1.28 | Section headings |
| H3 | 24px | 500 | 1.33 | Subsections |
| Body | 16px | 400 | 1.13 | Paragraphs |
| Caption | 14px | 400 | 1.40 | Fine print |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 3px, 4px, 8px, 12px, 13px, 16px, 24px, 32px, 48px, 64px, 96px  
Use multiples for all padding/margin.

## Border Radius
- none: 0 — data tables
- sm: 4px — inputs, small buttons
- md: 12px — images, cards
- full: 1920px — pill buttons

## Shadows & Depth
- shadow-sm: rgba(0,0,0,0.14) 0px 2px 8px 0px
- shadow-md: rgba(0,0,0,0.14) 0px 8px 8px -4px

## Component Specifications
### Primary Button
Default:  
background: #ffffff; color: #333e48; border: 1px solid #d0d2d3; radius: 4px; font: National 2 16px 400;  
Hover: background: #009F5F; color: #ffffff;  
Focus: outline: 2px solid #00bf6f;  
Disabled: opacity: 0.5;

### Link
Default: color: #007faa; text-decoration: none;  
Hover: color: #00bf6f; text-decoration: none;

### Input Field
Default: background: #ffffff; border: 1px solid #d0d2d3; radius: 4px; color: #333e48;  
Focus: border-color: #00bf6f;

## Layout & Responsive Rules
Breakpoints: 480px, 576px, 768px, 992px, 1200px, 1280px, 1400px  
Max content width: 1400px  
Page padding: 16px mobile / 32px desktop

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators use outline color #00bf6f
- Disabled states: 50% opacity

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid
- Use National 2 for headings, Inter for UI text
- Keep corners consistent (4px or 12px)
- Use subtle shadows sparingly

## DON'T List
- Don’t introduce new greens or blues
- Don’t mix sharp and rounded corners
- Don’t use heavy drop shadows
- Don’t remove focus outlines

## Code Examples
```css
.btn-primary {
  background: #ffffff;
  color: #333e48;
  border: 1px solid #d0d2d3;
  border-radius: 4px;
  font-family: "National 2";
  font-size: 16px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #009F5F;
  color: #ffffff;
}
.btn-primary:focus {
  outline: 2px solid #00bf6f;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input {
  background: #ffffff;
  border: 1px solid #d0d2d3;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  font-family: "Inter";
}
.input:focus {
  border-color: #00bf6f;
  outline: none;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: rgba(0,0,0,0.14) 0px 2px 8px 0px;
}
```

9. Summary

TL;DR — Surveymonkey’s design system is green-forward, grid-disciplined, and type-conscious. National 2 gives it brand voice, Inter keeps UI text clean. Greens are for action; mint is for background. Spacing is locked to 8px multiples. Shadows are minimal — borders do the heavy lifting.

Brand Keywords:

• green-forward
• utilitarian-friendly
• grid-disciplined
• type-conscious
• flat-with-depth