--- version: alpha name: DuckDuckGo description: Pale gray-white canvas, DuckDuckGo Blue primary CTAs, Proxima Nova at heavy display weights, rounded-everything shape language, and a signature friendly-but-serious tone that makes privacy feel approachable rather than paranoid. colors: # Surfaces background: "#f5f5f5" # was rgb(245,245,245) — the off-white page canvas surface: "#ffffff" surface-muted: "#fafafa" # near-white for nav / input containers # Text / ink ink: "#222222" ink-secondary: "#4c4c4c" # was rgb(76,76,76) ink-muted: "#666666" on-background: "#222222" on-surface: "#222222" # Brand accent — DuckDuckGo Blue primary: "#3969ef" # --color-blue50 / rgb(57,105,239) primary-deep: "#2b55ca" # hover / darker blue variant rgb(43,85,202) primary-container: "#e2f0ff" # tinted blue surface for info/selection on-primary: "#ffffff" # Interactive / states hover-overlay: "#0a0a0a" # was rgba(0,0,0,0.06) — flattened over white; used for ghost hover focus-ring: "#3969ef" # --color-focus-ring — matches primary # Semantic success: "#4cba3c" # rgb(76,186,60) — green used for badges and trust signals success-deep: "#419e33" # hover state of green error: "#cf0e28" # --theme-button-destructive-bg--hover warning: "#e2a412" # --color-yellow70 info: "#034180" # --ds-accent-tertiary-text-color # Borders border: "#d5d5d5" # rgb(213,213,213) — subtle card/input strokes border-light: "#eeeeee" # was rgba(0,0,0,0.12) — flattened over white border-dark: "#353748" # dark navy border — used on certain nav chips # Shadows (see elevation table) shadow-soft: "#000000" # all shadows are pure black rgba — no brand tinting # Gradient tints (tinted section backgrounds — flattened from rgba stops) tint-green: "#dffff3" # was rgb(223,255,243) — privacy feature section wash tint-blue: "#e2f0ff" # was rgb(226,240,255) — Duck.ai section wash typography: display-hero: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 64px fontWeight: 800 lineHeight: 1.0 letterSpacing: -1.92px display: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.48px heading-section: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 36px fontWeight: 800 lineHeight: 1.11 letterSpacing: -0.36px heading-sub: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px body-large: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-medium: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px button-ui: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px button-large: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px label-overline: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.0 letterSpacing: 2.7px caption: fontFamily: "Proxima Nova, -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 40px 3xl: 60px 4xl: 80px 5xl: 120px rounded: none: 0px sm: 8px md: 12px lg: 20px xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.md}" padding: 14px 40px button-primary-hover: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.md}" padding: 14px 40px button-primary-focus: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.md}" padding: 14px 40px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 20px button-secondary-hover: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 20px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 20px button-ghost-hover: backgroundColor: "{colors.border-light}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 20px nav-bar: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 12px 24px search-bar: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 24px search-bar-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-featured: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px badge: backgroundColor: "{colors.success}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: 8px 16px badge-neutral: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.lg}" padding: 8px 16px badge-dark: backgroundColor: "{colors.ink}" textColor: "{colors.surface}" typography: "{typography.caption}" rounded: "{rounded.lg}" padding: 8px 16px chip: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 8px 16px --- # DuckDuckGo Design System ## Overview DuckDuckGo's homepage is an exercise in honest restraint. The canvas is a very light warm-gray (`{colors.background}`) — barely a step from pure white, clean enough to feel modern but fractionally warmer than clinical tech-product white. There are no hero gradients, no atmospheric mesh, no full-bleed illustration. What sits above the fold is almost aggressively simple: a centered logo, a pill-shaped search bar, and two compact feature cards — one for setting the default search engine, one for downloading the browser. The message is "we have nothing to hide," made literal in the design. The type system is built entirely around **Proxima Nova**, DuckDuckGo's chosen workhorse. It's a friendly geometric sans — not as austere as Inter, not as playful as Poppins, but somewhere in between, with humanist curves that make weight 800 headlines feel warm rather than aggressive. The hero headline ("Switch to DuckDuckGo. It's private and free!") runs at 64px, weight 800, negative-tracked at -1.92px — tight, bold, and confident without being confrontational. The combination communicates a brand that is direct without being preachy, friendly without being naïve. The signature accent is **DuckDuckGo Blue** (`{colors.primary}`) — a saturated sky-blue at `#3969ef` that appears on exactly one element above the fold: the "Download Browser" CTA. Green (`{colors.success}`) is the secondary signal color, used for the "Best Privacy" badge on the featured card. Below the fold, tinted section washes in pale green (`{colors.tint-green}`) and pale blue (`{colors.tint-blue}`) mark thematic feature areas, with a gentle gradient that fades to transparent — the only gradient in the system. The whole palette communicates trust and clarity, not excitement. **Key Characteristics:** - Nearly-white `{colors.background}` canvas — warm gray-white, no tinting or grain - **Proxima Nova** at weight 800 for display; single-family system with no secondary typeface - **DuckDuckGo Blue** `{colors.primary}` for the primary CTA only — treated as a rare stamp, not a recurring accent - **DuckDuckGo Green** `{colors.success}` for trust and privacy signals — badges, verification, "Best Privacy" - Generous rounded shapes: 12px for buttons, 20px for cards, pill for search bar and chip selectors - Dual-layer soft shadows: `rgba(0,0,0,0.1) 0 4px 12px` + `rgba(0,0,0,0.08) 0 20px 40px` — layered depth, no brand tinting - Tinted feature section washes: pale green and pale blue fade-out gradients below the fold - Radix UI primitives + PrimeReact components underpin the component architecture - Fast `0.1s ease-in-out` micro-interactions on buttons; `0.3s ease` for card opacity/transform - Navigation: near-invisible near-white bar with pill-shaped search centered, "Duck.ai" and hamburger right-aligned ## Colors ### Primary - **Background** (`{colors.background}`): The page canvas — `#f5f5f5`, barely off-white with a neutral gray undertone. - **Surface** (`{colors.surface}`): Card and modal fills — pure white, creates a slight elevation above the background. - **Ink** (`{colors.ink}`): Primary text — `#222222`, soft near-black that doesn't feel as heavy as pure `#000`. ### Brand Accent - **DuckDuckGo Blue** (`{colors.primary}`): The primary CTA color. Used exclusively for the "Download Browser" button and the most important interactive state. `--color-blue50` in the DDS system. - **Primary Deep** (`{colors.primary-deep}`): Hover state of the primary. Deeper blue shifts slightly toward navy. - **Primary Container** (`{colors.primary-container}`): Tinted blue surface for informational panels and the Duck.ai section wash. ### Secondary Brand - **DuckDuckGo Green** (`{colors.success}`): `#4cba3c` — privacy trust signals: "Best Privacy" badge, checkmarks, confirmation states. Carries the brand's environmental and privacy-first associations. - **Success Deep** (`{colors.success-deep}`): Hover state of green elements. ### Text Hierarchy - **Ink Secondary** (`{colors.ink-secondary}`): Body text links and nav items where full ink is too heavy. - **Ink Muted** (`{colors.ink-muted}`): Meta labels, captions, helper text. ### Semantic - **Error** (`{colors.error}`): Destructive action hover state — from `--theme-button-destructive-bg--hover`. - **Warning** (`{colors.warning}`): `--color-yellow70` — amber for advisory signals. - **Info** (`{colors.info}`): `--ds-accent-tertiary-text-color` — deep blue for informational text. ### Borders & Surfaces - **Border** (`{colors.border}`): `rgb(213,213,213)` — the standard card and input border stroke. - **Border Light** (`{colors.border-light}`): Nearly invisible — `rgba(0,0,0,0.12)` flattened — for ghost elements and nav chip outlines. - **Border Dark** (`{colors.border-dark}`): The dark navy chip border — used for mode selectors in the customization UI. ### Tinted Washes - **Tint Green** (`{colors.tint-green}`): Section background wash for privacy feature areas — fades to transparent. - **Tint Blue** (`{colors.tint-blue}`): Section background wash for AI/Duck.ai feature areas — fades to transparent. ## Typography ### Font Family - **Primary**: `Proxima Nova` — a humanist geometric sans. Self-hosted across weight 400–800. Fallback chain: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans`. - **Editorial accent**: `Georgia, Times, Times New Roman` — appears in a small number of editorial moments at 20px 400 for a serif counterpoint. - **OpenType Features**: `"dlig", "liga"` enabled system-wide — discretionary and standard ligatures active on all Proxima Nova instances. ### Hierarchy The complete type scale lives in the `typography:` token block above. | Token | Use | |---|---| | `display-hero` | Hero headline — Proxima Nova 64px 800, -1.92px tracking | | `display` | Sub-hero and feature section titles — 48px 800 | | `heading-section` | Section headings — 36px 800, -0.36px tracking | | `heading-sub` | Card titles and feature sub-headings — 20px 700 | | `body-large` | Lead paragraphs, intro copy — 20px 400 | | `body` | Running text, descriptions — 16px 400 | | `body-medium` | Emphasized body, bold inline text — 16px 700 | | `nav-link` | Navigation labels — 16px 700 | | `button-ui` | Standard button labels — 16px 700 | | `button-large` | Primary CTA labels ("Download Browser") — 18px 700 | | `label-overline` | Section overlines, uppercase tracking labels — 18px 600, 2.7px spacing | | `caption` | Badges, meta labels, chip selectors — 14px 600 | ### Principles - **One family, full weight range**: Proxima Nova spans 400–800 — all hierarchy is expressed through weight shifts, not family switches. - **800 for authority, 400 for readability**: Display text is always weight 800; body never goes above 400 unless it's interactive. - **Negative tracking at display scale**: -1.92px at 64px, -0.48px at 48px — optical tightening scales proportionally downward. - **Positive tracking for overlines**: `{typography.label-overline}` runs at +2.7px — uppercase spaced text for category markers. - **Ligatures on by default**: `"dlig", "liga"` are declared globally — ensures clean text rendering across all Proxima Nova weights. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. The scale is generous at the section level — `{spacing.3xl}` (60px) and `{spacing.4xl}` (80px) provide breathing room between page sections. Component-level spacing is tight: `{spacing.sm}` (8px) for chip padding, `{spacing.lg}` (24px) for card internals. The homepage is notably centered and narrow relative to the viewport width — content feels curated and deliberate rather than filling the frame. ### Grid & Container - Max content width: approximately 1000–1200px, centered - Hero: centered single column — search bar + headline + two feature cards - Feature sections below: 2-column product comparison grids, alternating tinted washes - Navigation: search-bar-centered layout with logo left and utility actions right ### Whitespace Philosophy - **Centered minimalism**: every element is centered, symmetric, and breathes. The design avoids left-heavy layouts. - **Cards do the heavy lifting**: product value is communicated through card pairs, not full-page illustration. - **Section tints replace dividers**: pale green and blue washes replace horizontal rules between feature sections. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Navigation, text, inline elements, tinted sections | | Subtle (Level 1) | `rgba(0,0,0,0.1) 0 1px 4px, rgba(0,0,0,0.08) 0 4px 8px` | Small interactive chips, inline components | | Card (Level 2) | `rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.08) 0 20px 40px` | Feature cards — the signature shadow | | Elevated (Level 3) | `rgba(0,0,0,0.1) 0 2px 6px, rgba(0,0,0,0.08) 0 8px 16px` | Download CTA card, elevated actionable panels | | Glow (Green) | `rgba(68,255,98,0.6) 0 0 16px` | Trust/privacy badge glow — green neon aura on selected states | | Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus — blue 2px outline ring | **Shadow Philosophy**: DuckDuckGo uses **pure black rgba dual-layer shadows** — a tight near shadow plus a wide diffuse far shadow. This creates a believable 3D lift without brand-tinting. The exception is the green glow on privacy-badge selected states: `rgba(68,255,98,0.6)` — the only colored shadow in the system, reserved exclusively for privacy-affirmation moments. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Section edges, full-bleed backgrounds | | `sm` | 8px | Small interactive elements, tight buttons | | `md` | 12px | Standard buttons, nav chips, UI controls | | `lg` | 20px | Feature cards, badge chips, segmented controls | | `xl` | 24px | Featured/hero cards, prominent containers | | `pill` | 9999px | Search bar, chip selectors, product showcase pills | DuckDuckGo runs a **soft-rounded everything** approach. The pill is the dominant shape for the most prominent interactive elements — the search bar is fully pill-shaped, as are the chip selectors in the customization UI. Feature cards use generous 20–24px radii. There are no sharp corners on any interactive surface. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — DuckDuckGo Blue (`{colors.primary}`), white text, 12px radius, Proxima Nova 18px 700. Applied to "Download Browser" — the single most prominent CTA. - **`button-secondary`** — White surface, dark text, 12px radius. "Set As Default Search" and comparison CTAs. - **`button-ghost`** — Background fill, dark text, 12px radius. Light-weight actions like "Compare More Protections." ### Search Bar **`search-bar`** — Fully pill-shaped (`{rounded.pill}`), white surface, search button + AI button as right-side inset chips. The homepage's structural centerpiece and the brand's primary product metaphor made literal as UI. ### Cards - **`card`** — White surface, 20px radius, dual-layer soft shadow. The standard feature card for product offering pairs. - **`card-featured`** — White surface, 24px radius, slightly deeper shadow. Used for the highlighted "Best Privacy" browser card. ### Chips and Badges - **`badge`** — Green `{colors.success}` fill, white text, 12px partial radius (`12px 0px` — asymmetric corner, top-left badge). Marks highlighted/recommended products. - **`badge-neutral`** — Background-colored fill, dark ink. Neutral category tags. - **`badge-dark`** — Near-black fill, white text. High-contrast announcement labels. - **`chip`** — Pill-shaped, white surface, `{colors.border}` outline. Used for toggle/chip selectors in the search customization flyout. ### Inputs **`input`** — Fully pill-shaped, white surface, no visible border at rest. Matches the homepage search bar's visual language throughout the product. ### Navigation **`nav-bar`** — Near-white (`{colors.surface-muted}`) background, Proxima Nova 16px 700 nav links. Centered search bar dominates; right side carries "Duck.ai" pill CTA and hamburger menu. ## Do's and Don'ts ### Do - Use Proxima Nova weight 800 for every display headline — authority in this system comes from weight, not typeface variety - Keep `{colors.primary}` for the primary CTA only — DuckDuckGo Blue is a trust stamp, not a color accent - Use `{colors.success}` for privacy and trust affirmations — green is the system's second language for privacy-positive signals - Apply dual-layer shadows on cards: tight `4px 12px` near-shadow plus wide `20px 40px` far-shadow. Both layers matter. - Use pill radius (`{rounded.pill}`) for search inputs, chip selectors, and product showcase elements - Apply negative letter-spacing to display text: -1.92px at 64px, -0.48px at 48px — never default tracking at display scale - Use tinted section washes (`{colors.tint-green}`, `{colors.tint-blue}`) with fade-to-transparent gradients for thematic section breaks - Maintain the centered layout — DuckDuckGo's layout is radically symmetric; never left-heavy or edge-hugging ### Don't - Don't use a second typeface for body or display — the system is Proxima Nova only; Georgia is a rare editorial guest, not a co-equal - Don't add brand-tinted shadows — the only colored shadow is the green privacy glow, reserved strictly for selected/affirmed states - Don't apply `{colors.primary}` to decorative elements, section backgrounds, or secondary actions — reserve Blue for the single primary action per view - Don't use radii below 8px on interactive surfaces — the system is committed to rounded shapes at all scales - Don't set display headlines at weight 400 or 600 — the visual contract requires 800 for any heading above 20px - Don't use sharp full-width dividers between sections — use tinted wash gradients or whitespace instead - Don't introduce warm or saturated background colors — the system's canvas is cool neutral gray-white; warmth is expressed through weight and shape, not color - Don't animate at durations above 0.3s — the system runs tight micro-interactions; anything slower reads as sluggish --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <360px | Single column, search bar full-width, headline 28px | | Mobile | 360–680px | Single column, nav collapses, cards stack vertically | | Tablet | 680–1024px | 2-column card grid, search bar constrained to ~600px | | Desktop | 1024–1366px | Full centered layout, 3-column feature grids | | Large Desktop | >1366px | Content centered at ~1200px max-width, wider margins | ### Touch Targets - All buttons are 44px+ tall - Pill search bar is 48px tall for comfortable tap - Card touch regions span the full card — 20px+ padding ensures generous tap area - Chip selectors are 40px+ tall with pill shape for easy thumb interaction ### Collapsing Strategy - Hero headline: 64px desktop → scales to 32–36px on mobile at weight 800 maintained - Two-card hero pair: side-by-side desktop → stacked vertically on mobile - Navigation: search-centered bar → search may shrink to icon, logo + hamburger on small mobile - Tinted wash sections: full-width alternating sections → same full-width behavior on mobile, content stacks ### Image Behavior - Product icons in cards (app icons, illustrated characters) maintain aspect ratio at all sizes - The DuckDuckGo mascot character sits at consistent scale — never tiled or stretched - Section gradient washes scale to viewport width — never tiled --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#f5f5f5) - Text: `{colors.ink}` (#222222) - Secondary text: `{colors.ink-secondary}` (#4c4c4c) - Brand accent / primary CTA: `{colors.primary}` (#3969ef) - Hover accent: `{colors.primary-deep}` (#2b55ca) - Trust / privacy green: `{colors.success}` (#4cba3c) - Card surface: `{colors.surface}` (#ffffff) - Border: `{colors.border}` (#d5d5d5) - Focus ring: `{colors.focus-ring}` (#3969ef) ### Example Component Prompts - "Create a DuckDuckGo homepage hero: `{colors.background}` canvas (#f5f5f5). Center a Proxima Nova 64px weight-800 headline in `{colors.ink}`, letter-spacing -1.92px, line-height 1.0. Below, a pill-shaped search bar (`{rounded.pill}`) in white `{colors.surface}` with `{colors.border}` 1px outline, 48px tall, placeholder 'Search privately' in `{colors.ink-muted}`. Search button and AI button inset right as pill chips. Below the bar: two white feature cards side by side, 20px radius, dual shadow: `rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.08) 0 20px 40px`." - "Design a DuckDuckGo feature card: white `{colors.surface}` background, `{rounded.xl}` (24px) radius, shadow `rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.08) 0 20px 40px`. Asymmetric green badge in top corner: `{colors.success}` fill, white text, 12px radius top-left only (12px 0 0 0). Card body: centered icon, Proxima Nova 16px 400 descriptor, then a button — primary `{colors.primary}` fill 18px 700 or secondary white fill 16px 700." - "Build a DuckDuckGo download CTA button: `{colors.primary}` (#3969ef) background, white text, Proxima Nova 18px weight 700, `{rounded.md}` (12px) radius, 14px top/bottom padding, 40px left/right padding. Hover: `{colors.primary-deep}` (#2b55ca). Transition: background-color 0.1s ease-in-out." - "Create DuckDuckGo navigation: `{colors.surface-muted}` background, centered pill search bar in white `{colors.surface}` with Search + Ask AI chip buttons. Left: DuckDuckGo logo. Right: 'Duck.ai' pill button with `{colors.border}` outline + 1px border, and hamburger menu. All nav links in Proxima Nova 16px 700 `{colors.ink}`." - "Design a DuckDuckGo tinted feature section: full-width background fades from `{colors.tint-green}` (#dffff3) at 0% to transparent at 50%. Content area max-width 1000px, centered. Section heading Proxima Nova 48px 800 `{colors.ink}`, body copy 20px 400 `{colors.ink-secondary}`. Feature grid: 2-column side-by-side product comparison with white shadow cards." ### Iteration Guide 1. **Start with `{colors.background}`** (#f5f5f5) — not pure white. The warm gray-white is the canvas; `{colors.surface}` (pure white) is reserved for cards. 2. **Blue is a single stamp per view** — use `{colors.primary}` for exactly one primary action. Green (`{colors.success}`) handles privacy affirmations. 3. **Weight 800 owns every headline** above 20px. Below 20px, 700 is the minimum for any UI copy. 4. **Dual-layer shadows on every card**: tight layer (4px+12px) + diffuse layer (20px+40px). Never single-layer. 5. **Pill shapes for search and chips, 12–24px radii for cards and buttons** — no sharp corners on interactive surfaces. 6. **Negative tracking at display size**: -1.92px at 64px, -0.48px at 48px, 0px at 36px and below. 7. **Tinted section washes fade to transparent** — never solid tint fills; always a gradient from the tint color to rgba(0,0,0,0). --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by DuckDuckGo. Brand names and trademarks belong to their respective owners.