DuckDuckGo Design System Deep Dive

1. Brand Overview

DuckDuckGo’s design language is direct, trustworthy, and privacy-first. You feel it immediately: no unnecessary gloss, no distracting gradients in primary actions, no overcomplicated UI furniture. This is a search engine that wants you to trust it with less, not more. The design is utilitarian but not cold — there’s warmth in the color palette, a friendly duck mascot, and rounded corners everywhere.

The vibe here is “approachable tech.” They’re talking to people who are wary of surveillance-heavy platforms but still want modern convenience. The interface takes cues from consumer apps rather than corporate dashboards. Buttons are chunky enough to feel tappable on mobile. Typography is bold in headings, but body text is soft and readable. They clearly design for both mobile and desktop from the ground up — spacing and breakpoints show careful thought about touch targets.

Philosophically, it’s minimal without being stark. They use a lot of white space, restrained shadows, and a consistent 8px spacing grid. This works because it keeps the cognitive load low: you can scan, click, and move on without UI noise. Color is used sparingly for signals — primary blue for CTAs, green for success, red for warnings — and almost no decorative gradients except in hero sections.

DuckDuckGo’s design language is also “honest” — no fake skeuomorphism, no misleading visual affordances. If something looks clickable, it is. If something’s a link, it underlines on hover. This is a privacy brand projecting integrity through design.

2. Color System

2.1 Primary Colors

The main brand color is Primary Blue: #3969ef (rgb(57, 105, 239)). It’s bright but not neon, sitting between royal and cobalt blue. Psychologically, blue communicates trust, stability, and security — which fits DuckDuckGo’s privacy-first pitch. Compared to Google’s multi-color identity or Bing’s teal, DuckDuckGo’s single primary hue is more focused. They don’t scatter the brand identity across multiple primaries; blue is reserved for key interactive elements.

Secondary semantic color: rgba(0, 0, 0, 0.06) — a very light translucent black, used for subdued backgrounds or hover states. It’s almost a gray wash.

2.2 Complete Palette

Here’s the full extracted palette:

They also have a dense set of --color-* tokens covering yellows, purples, reds, greens, and blues, clearly for marketing sections and functional UI states.

2.3 Color Relationships

Contrast-wise, primary blue (#3969ef) on white is strong — WCAG AA passes for normal text and AAA for large text. White on primary blue passes AAA. Green (#4cba3c) on white is fine for accents but wouldn’t work for long text without bolding. The red (#eb102d) is aggressive — high contrast on white.

Dark mode isn’t explicitly defined here — no --color-bg-dark tokens — but the palette has deep blues (#0B2059, #051133) and dark purples (#070019) that could support a dark theme.

2.4 Usage Guide

• Works well: Primary blue with white text for CTAs. Green badges on white backgrounds. Red for destructive buttons or alert banners.
• Avoid: Red text on dark purple — low readability. Using translucent blacks as text — they’re for hover backgrounds.
• Pairing guidelines: Use dark grays (#222, #333) for body text over light backgrounds. Reserve pure black for maximum contrast elements like table borders and high-importance text.

3. Typography

3.1 Font Families

Headings, buttons, and links use Proxima Nova — a geometric sans with good screen readability. Fallbacks: Helvetica Neue, Helvetica, Segoe UI, Nimbus Sans L, Liberation Sans, Open Sans, FreeSans, Arial. Body text occasionally uses Georgia for certain heading contexts, with Times/Times New Roman as fallback — likely for emphasis or quotes.

No Google or Adobe Fonts here; it’s a custom/self-hosted stack.

3.2 Type Scale

3.3 Hierarchy

They use weight to signal hierarchy more than size in some contexts — a bold 18px link can outrank a regular 20px subheading. Headings are tight in line height (1.00–1.11), forcing them to stack neatly. Body text breathes with 1.40–1.50 line heights. The uppercase styles with extra letter spacing are for meta labels or category headings.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints are granular — they cover almost every possible device width from 300px up to 1920px. This means they’re tuning layouts for very specific devices (e.g., 428px, 761px). This is rare — most brands stick to ~5 major breakpoints. It shows DuckDuckGo’s commitment to pixel-perfection across devices.

5. Visual Elements

Border Radius System: Heavy use of rounded corners. Values range from 4px (small divs) to 50% (full circles). Common: 8px, 12px, 20px, 24px, 30px, 40px. They even have asymmetric radii like 30px 30px 30px 0px for cards.

Shadows: Soft, multi-layer shadows with low opacity black. Example: rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.08) 0px 20px 40px. They also have a bright green glow (rgba(68, 255, 98, 0.6) 0px 0px 16px) — clearly for success/active states.

Borders: Thin (1px) solid lines in light gray (#dddddd) for cards. Hairline black borders for tables.

6. Components

6.1 Buttons

They have multiple button variants:

Variant 1 — White Card Button

• Default: white bg, black text, 20px radius, 16px padding, heavy shadow.
• Hover: background var(--suggestion-bg--highlight).
• Focus: outline 2px solid var(--color-focus-ring).

Variant 2 — Gray CTA Button

• Default: rgba(0,0,0,0.06) bg, dark gray text (#222), 12px radius, no shadow.
• Hover: primary active bg, box shadow, outline 4px solid hover color.
• Active: scale(0.95).

Variant 3 — Green Badge Button

• Default: #4cba3c bg, black text, 12px 0px radius, small shadow.

Variant 4 — Blue CTA Button

• Default: #3969ef bg, white text, 12px radius.
• Hover: primary active bg + shadow.
• Active: scale(0.95).

Variant 5 — Outline Circle Button

• Default: transparent bg, dark gray text, 40px radius, 1px rgba(0,0,0,0.12) border.

6.2 Links

Consistent: no underline by default, underline + color change on hover. Colors vary: dark gray (#4c4c4c), navy gray (#353748), black (#000), white (#fff), primary blue (#3969ef), deep blue (#2b55ca).

6.3 Forms

Text inputs:

• Default: transparent bg, black text, 8px radius, no border.
• Focus: outline 2px solid var(--color-focus-ring), background var(--theme-button-ghost-bg--hover).

6.4 Cards

Card borders: 1px solid #dddddd, radius varies (20px, 30px). Shadows for elevated states.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #3969ef;
  --color-secondary: rgba(0,0,0,0.06);
  --color-black: #000000;
  --color-dark-gray: #222222;
  --color-red-alert: #eb102d;
  --color-green-success: #4cba3c;
  --color-white: #ffffff;
  --color-medium-gray: #666666;
  --color-navy-gray: #353748;
  --color-deep-blue: #2b55ca;
  --color-light-gray: #dddddd;
  --color-dark-charcoal: #333333;
  --color-deep-blue-focus: #005fcc;
  --color-transparent-black-12: rgba(0,0,0,0.12);

  /* Typography */
  --font-proxima-nova: "Proxima Nova", "Helvetica Neue", Helvetica, "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial;
  --font-georgia: Georgia, Times, "Times New Roman";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --space-140: 140px;
  --space-280: 280px;
  --space-440: 439.984px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-40: 40px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.08) 0px 20px 40px;
  --shadow-md: rgba(0,0,0,0.1) 0px 2px 6px, rgba(0,0,0,0.08) 0px 8px 16px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 1px 4px, rgba(0,0,0,0.08) 0px 4px 8px;
  --shadow-green-glow: rgba(68, 255, 98, 0.6) 0px 0px 16px;
}

8. AI Coding Assistant Prompt

# DuckDuckGo Design System Specification

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

## Brand Context
DuckDuckGo values privacy, clarity, and approachability. The design is clean, bold in CTAs, with soft rounded corners and minimal decorative elements. Color is functional, typography is strong but readable.

## Color Palette
- Primary Blue: #3969ef — CTAs, download buttons, primary links
- Secondary Gray Wash: rgba(0,0,0,0.06) — hover backgrounds, subtle surfaces
- Black: #000000 — body text, table borders
- Dark Gray: #222222 — secondary text, icons
- Red Alert: #eb102d — error states, destructive actions
- Green Success: #4cba3c — success badges
- White: #ffffff — backgrounds, text on dark
- Medium Gray: #666666 — secondary text
- Navy Gray: #353748 — CTA section text
- Deep Blue: #2b55ca — link accents
- Light Gray: #dddddd — card borders
- Dark Charcoal: #333333 — hover text
- Deep Blue Focus: #005fcc — focus ring
- Transparent Black 12%: rgba(0,0,0,0.12) — input borders

## Typography
Font families:
- Headings/Buttons/Links: "Proxima Nova", "Helvetica Neue", Helvetica, "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial
- Special headings: Georgia, Times, "Times New Roman"

Type sizes:
| Level | Size | Weight | Line Height | Use |
| H1 Large | 64px | 800 | 1.00 | Hero titles |
| H1 Medium | 48px | 800 | 1.00 | Section titles |
| H1 Small | 36px | 800 | 1.11 | Subsection headings |
| Subheading Bold | 20px | 700 | 1.20 | Subtitle emphasis |
| Subheading Regular | 20px | 400 | 1.40 | Body intro text |
| Serif Subheading | 20px | 400 | 1.40 | Quotes |
| Button Large | 18.72px | 700 | 1.50 | Prominent buttons |
| Link Large | 18px | 700 | 1.00 | Navigation links |
| Caps Heading | 18px | 600 | 1.00 | Labels |
| Link Medium | 16px | 400 | 1.50 | Body links |
| Body Medium | 16px | 400 | — | General text |
| Body Bold | 16px | 700 | 1.50 | Emphasis |
| Caption Bold | 14px | 600 | 1.00 | Meta labels |
| Caption Heavy | 14px | 700 | 1.00 | Strong emphasis |
| Caption Regular | 14px | 400 | 1.43 | Body captions |
| Caption Uppercase | 14px | 600 | 1.00 | Meta uppercase |
| Tiny Uppercase | 12px | 800 | 1.00 | Badge text |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 8px, 12px, 14px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 60px, 64px, 80px, 100px, 120px, 140px, 280px, 439.984px.

## Border Radius
- 4px — small divs
- 8px — buttons, inputs
- 10px — small buttons
- 12px — buttons, cards
- 16px — large buttons
- 20px — cards, badges
- 24px — buttons
- 30px — cards, buttons
- 40px — buttons, cards
- full (50%) — circles, avatars

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.08) 0px 20px 40px
- Medium: rgba(0,0,0,0.1) 0px 2px 6px, rgba(0,0,0,0.08) 0px 8px 16px
- Small: rgba(0,0,0,0.1) 0px 1px 4px, rgba(0,0,0,0.08) 0px 4px 8px
- Green Glow: rgba(68,255,98,0.6) 0px 0px 16px

## Component Specifications

### Primary Button (Blue)
```css
.btn-primary {
  background: #3969ef;
  color: #ffffff;
  padding: 0px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
}
.btn-primary:hover {
  background: var(--theme-button-primary-bg--active);
  box-shadow: var(--shadow-lg);
}
.btn-primary:focus {
  outline: 2px solid #005fcc;
}
.btn-primary:active {
  transform: scale(0.95);
}
```

### Secondary Button (Gray Wash)
```css
.btn-secondary {
  background: rgba(0,0,0,0.06);
  color: #222222;
  padding: 0px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
}
```

### Input Field
```css
.input {
  background: transparent;
  color: #000000;
  border-radius: 8px;
  padding: 1px 0px 1px 16px;
  border: none;
}
.input:focus {
  outline: 2px solid #005fcc;
  background: var(--theme-button-ghost-bg--hover);
}
```

## Layout & Responsive Rules
- Breakpoints: 300px–1920px (see extracted list)
- Page padding: multiples of 8px
- Grid gap: multiples of 8px

## Interaction Rules
- State changes: 150ms ease
- Focus indicators: 2px solid focus color
- Active states: scale(0.95)

## DO
- Use ONLY colors from palette
- Maintain 8px spacing grid
- Use Proxima Nova for headings and UI text
- Reserve primary blue for interactive elements
- Keep line heights tight for headings

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows — keep them soft
- Use low-contrast text colors

## Code Examples

Primary Button:
```css
.btn-primary { background:#3969ef; color:#fff; padding:0 16px; border-radius:12px; font-weight:700; font-size:14px; }
.btn-primary:hover { background:#2b55ca; }
```

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

Form Input:
```css
.input { border:none; border-radius:8px; padding:1px 0 1px 16px; }
.input:focus { outline:2px solid #005fcc; }
```

9. Summary

TL;DR: DuckDuckGo’s design system is privacy-first, approachable, and functional. Strong primary blue CTAs, soft rounded corners, and a disciplined 8px grid keep the UI clear and trustworthy.

Brand Keywords:

• trust-first
• friendly-minimalist
• privacy-tech
• approachable-modern