--- 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 | Role | Light | Dark | Where | |------|-------|------|-------| | Action blue (pond water 60) | `#1074cc` | `#75b6eb` (pond water 40) | Android rebrand palette, web | | Action hover and pressed | `#045eb2`, `#034180` | not read | | | Blue washes | `#e6f6ff`, `#cbeaff`, `#f5fbfe` | not read | | | Orange (mandarin 50) | `#f05f2b` | same | | | Orange deep and wash | `#cc3b0a`, `#ffecdb` | not read | | | Page and warm surfaces (eggshell) | `#fbfaf9`, `#f7f5f2`, `#ecebe7` | `#181817`, `#242323`, `#30302f` | Android 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 | `#fab341` | | web | 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.