Utilities / iOS / Android / Web

DuckDuckGo

DuckDuckGo's rebrand pairs a stepped pond-water blue with mandarin orange and warm eggshell neutrals, set in its own DuckSans typefaces on a ladder of rounder corners.

Download
  • #1074CC
  • #F05F2B
  • #E6F6FF
  • #FBFAF9
  • #181817
  • #21C000

Color

Every color token in the file, grouped by role.

Brand

  • primary#1074CC
  • primary hover#045EB2
  • primary pressed#034180
  • primary wash#E6F6FF
  • primary soft#CBEAFF
  • primary sky#75B6EB
  • primary ink#02254D
  • on primary#FFFFFF
  • accent orange#F05F2B
  • accent orange deep#CC3B0A
  • accent orange wash#FFECDB
  • ink secondary#686868
  • dark ink secondary#B2B0AD
  • dark primary#75B6EB

Surfaces

  • paper#FFFFFF
  • canvas#FBFAF9
  • canvas warm#F7F5F2
  • surface warm#ECEBE7
  • dark bg#181817
  • dark surface#242323
  • dark surface raised#30302F

Text

  • ink#111111
  • dark ink#FFFFFF

Lines

  • divider#D1CECB
  • dark divider#454443

Status

  • success#21C000
  • success deep#247A64
  • danger#EB102D
  • danger on dark#FF545A

More

  • yellow#FAB341

Typography

Each style is set with the file's own family, size, weight and spacing.

  • DuckSansDisplayDuckSansDisplay is private and not available in open fonts. Shown in Figtree, the closest open match.
  • DuckSansProductDuckSansProduct is private and not available in open fonts. Shown in Inter, the closest open match.
  • Roboto MonoOpen font, shown as published.
  • display32px / 700 / 1.15

    DuckDuckGo

  • title20px / 500 / 1.2

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 1.3

    The quick brown fox jumps over the lazy dog

  • body small14px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • label16px / 700 / 1.25

    Continue to checkout

  • mono14px / 400 / 1.4

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl24px
  • pill1000px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • card
    card
  • warm card
    warm-card
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 115 lines
version: alpha
name: DuckDuckGo-design-analysis
description: "A privacy browser and search app on a 2025 rebrand: pond-water blue (#1074cc) as the action color, warm eggshell neutrals, mandarin orange for warmth and emphasis, in-house DuckSans type, and rounder shapes on a 4, 8, 12, 16, 24 and pill ladder. The same named palette (pondwater, mandarin, eggshell, lilypad) appears in the Android app and on duckduckgo.com."
status: Draft
appVersion: "source snapshot of the public Android repository and duckduckgo.com, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#1074cc"
  primary-hover: "#045eb2"
  primary-pressed: "#034180"
  primary-wash: "#e6f6ff"
  primary-soft: "#cbeaff"
  primary-sky: "#75b6eb"
  primary-ink: "#02254d"
  on-primary: "#ffffff"
  accent-orange: "#f05f2b"
  accent-orange-deep: "#cc3b0a"
  accent-orange-wash: "#ffecdb"
  ink: "#111111"
  ink-secondary: "#686868"
  paper: "#ffffff"
  canvas: "#fbfaf9"
  canvas-warm: "#f7f5f2"
  surface-warm: "#ecebe7"
  divider: "#d1cecb"
  success: "#21c000"
  success-deep: "#247a64"
  danger: "#eb102d"
  danger-on-dark: "#ff545a"
  yellow: "#fab341"
  dark-bg: "#181817"
  dark-surface: "#242323"
  dark-surface-raised: "#30302f"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#b2b0ad"
  dark-divider: "#454443"
  dark-primary: "#75b6eb"

typography:
  # Font note: "DuckSansDisplay" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  # Font note: "DuckSansProduct" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  display:
    fontFamily: "DuckSansDisplay, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.15
  title:
    fontFamily: "DuckSansProduct, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  body:
    fontFamily: "DuckSansProduct, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
  body-small:
    fontFamily: "DuckSansProduct, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  label:
    fontFamily: "DuckSansProduct, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
  mono:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 1000px

spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
  warm-card:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  card-dark:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

DuckDuckGo is a privacy-first browser and search app. In July 2025 it refreshed its look with a new palette, rounder shapes and in-house icons and typefaces, aiming for "calm instead of chaotic, streamlined instead of cluttered". [Observed]

What defines the look:

  1. A named, stepped palette. Pond water blue, mandarin orange, eggshell neutrals and lilypad green each run in steps 0 to 100 (for example pond water #f5fbfe to #01142d). [Measured]
  2. Blue for action, orange for warmth. Pond water 60 #1074cc is the action color on the web, and mandarin #f05f2b marks emphasis. [Measured]
  3. Warm neutrals. Eggshell grays (#fbfaf9 to #181817) sit beside a cool gray ladder (#fafafa to #111111). [Measured]
  4. Own typefaces. DuckSans Display and DuckSans Product ship with the app and the site. [Measured]
  5. Rounder shapes. The shape scale runs 4, 8, 12, 16, 24dp and a pill, with onboarding sheets at 36dp. [Measured]

Source for this file: the public DuckDuckGo Android repository (design system module) and the duckduckgo.com stylesheet, read on 2026-10-06. The iOS source is public in the apple-browsers repository but its design tokens were not read. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Action blue (pond water 60)#1074cc#75b6eb (pond water 40)Android rebrand palette, web
Action hover and pressed#045eb2, #034180not read
Blue washes#e6f6ff, #cbeaff, #f5fbfenot read
Orange (mandarin 50)#f05f2bsame
Orange deep and wash#cc3b0a, #ffecdbnot read
Page and warm surfaces (eggshell)#fbfaf9, #f7f5f2, #ecebe7#181817, #242323, #30302fAndroid rebrand palette
Border (eggshell 30)#d1cecb#454443
Text (gray 111)#111111#ffffff
Secondary text (gray 60)#686868#b2b0ad
Success#21c000, web deep #247a64
Alert red#eb102d#ff545a
Yellow#fab341web

All values are [Measured]. Dark surfaces are the eggshell 100, 90 and 80 steps, which is how the app maps them. [Inferred] The cool gray ladder is #fafafa, #f5f5f5, #eeeeee, #cccccc, #aaaaaa, #888888, #686868, #484848, #333333, #222222, #181818, #111111.

Typography

DuckSans Display (regular, medium, bold) for headings and DuckSans Product (regular, medium, bold) for interface text, with Roboto Mono for code. [Measured] The Android scale is 32, 24, 20, 16, 14 and 13sp for headings and 16, 14 and 15sp for body and button styles, with line heights of 16 to 36sp and letter spacing of 0.2 to 0.3sp on some. [Measured] The website references the same two families through --ds-font-family-product and --ds-font-family-display. [Measured]

Shape and spacing

Corner radii: 4dp (very small), 8dp (small), 12dp (medium), 16dp (large), 24dp (extra large), a 1000dp pill and a 36dp onboarding bottom sheet. [Measured] Spacing was not mapped.

Iconography and motion

The redesign includes icons drawn in-house, plus a green duck-foot shield in the address bar that shows tracking protection status. [Observed] The app includes cookie animation components (34dp high). [Measured]

Themes

Light and dark. A dark surface ladder from the eggshell scale exists. [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Browser-style back and forward controls and swipe gestures. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

An address bar with a tab switcher, in the usual mobile browser structure. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Search and navigation through the address bar. A Duck.ai button sits in the URL bar. [Observed]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Bottom sheets and alerts for privacy and cookie prompts. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not read. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not read. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom in-house icons. [Observed]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

No account is needed for the browser, so Guideline 4.8 does not apply. [Inferred] Checked: 2026-10-06 against general knowledge only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

Not compared with stock controls. The refresh is described as one visual language across platforms. [Observed]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with browser back through history. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

An omnibar with a tab switcher and a menu. [Inferred]

Main action

Expected on Android: Floating action button.

Searching and navigating from the omnibar. A floating action button is not part of the structure. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

A Dax dialog component, bottom sheets with a 36dp corner for onboarding, and info panels. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Custom components with attribute sets for buttons, chips, icon buttons, lists, dividers, info panels and expandable menus. [Measured]

Text sizing

Expected on Android: Font scale.

Text is in sp, so it follows the system font scale. [Measured]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

In-house icons. [Observed]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

No account is needed. Data safety form was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

Material-based theme (small, medium and large shapes) with the Dax design system replacing its colors and type. [Measured]

Platform: Web

The duckduckgo.com stylesheet was read. Search result layouts were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

A search box centered on the home page with a header menu. [Inferred]

Main action

Expected on Web: Page-level button.

The search box and submit action. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Not measured in detail. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable. [Inferred]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

CSS custom properties named --ds-* with DuckSansProduct and DuckSansDisplay, and the same pond water, mandarin and lilypad colors as the app. [Measured]

Cross-platform consistency

Consistent across platforms: the named palette, the two DuckSans families, rounder shapes and the privacy shield idea. [Measured for the palette and fonts]

Intentionally different: each platform expresses the same palette in its own format. [Measured]

Do's and Don'ts

Do

  • Use pond water blue for action and mandarin sparingly for emphasis.
  • Pair warm eggshell neutrals with the blue, not pure gray, where the rebrand calls for it.
  • Use the stepped radius ladder and pills for primary controls.
  • Use the product face for interface and the display face for headlines.

Don't

  • Don't use mandarin #f05f2b for body text on white. It is below 4.5 to 1.
  • Don't mix the cool gray and eggshell ladders on one surface.
  • Don't substitute other typefaces. The two DuckSans families are part of the identity.

Known Gaps

  • No on-device capture was done. All statements come from reading source and a stylesheet.
  • The iOS design tokens were not read, so the iOS section is mostly inferred, even though the iOS source is public.
  • Dark values for hover and washes were not read, and dark surface mapping is inferred from the eggshell ladder.
  • Spacing and motion values were not measured.
  • Store policy rules were not verified.