Utilities / iOS / Android / Web

Bing

Bing steps back from its own interface: a full-bleed daily photograph, small white type and translucent pills that borrow their color from the picture.

Download
  • #222222
  • #FFFFFF
  • #555555
  • #ECECEC
  • #DDDDDD
  • #E81123

Color

Every color token in the file, grouped by role.

Brand

  • primary#222222
  • on primary#FFFFFF

Surfaces

  • overlay#222222E6 (90%)

Text

  • ink#000000CC (80%)
  • text muted#4C4C4C
  • text faint#DDDDDD

Lines

  • divider#ECECEC

Status

  • alert#E81123

More

  • glass#FFFFFFBF (75%)
  • glass strong#FFFFFFB3 (70%)
  • panel#555555

Typography

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

  • Segoe UISegoe UI is private and not available in open fonts. Shown in Open Sans, the closest open match.
  • title16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • label13px / 400 / 18px

    Continue to checkout

  • label bold13px / 700 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • sm6px
  • md8px
  • lg16px
  • xl24px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px

Components

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

  • pill light
    pill-light
  • nav link
    nav-link
  • overlay panel
    overlay-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 76 lines
version: alpha
name: Bing-design-analysis
description: "A search page that lets a daily photograph do the work: a full-bleed image under a dark overlay, translucent white pill buttons and chips in Segoe UI at 13 to 16 and 6px corners on panels."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#222222"
  on-primary: "#ffffff"
  overlay: "#222222e6"
  glass: "#ffffffbf"
  glass-strong: "#ffffffb3"
  ink: "#000000cc"
  panel: "#555555"
  divider: "#ececec"
  text-muted: "#4c4c4c"
  text-faint: "#dddddd"
  alert: "#e81123"

typography:
  # Font note: "Segoe UI" is a private font and is not available in open fonts. Closest open alternative: "Open Sans".
  title:
    fontFamily: "'Segoe UI', 'Open Sans', Segoe, Tahoma, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: "'Segoe UI', 'Open Sans', Segoe, Tahoma, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label:
    fontFamily: "'Segoe UI', 'Open Sans', Segoe, Tahoma, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
  label-bold:
    fontFamily: "'Segoe UI', 'Open Sans', Segoe, Tahoma, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 18px

rounded:
  sm: 6px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

spacing:
  sm: 8px
  md: 12px
  base: 16px

components:
  pill-light:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 42px
    padding: 0 20px
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    height: 39px
  overlay-panel:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px

Overview

Bing is Microsoft's search engine with a daily photograph behind the search box. The look is Fluent: a full-bleed image, translucent white pills, small Segoe UI type and a dark overlay. [Observed]

What defines the look:

  1. A photograph first. A daily full-bleed image sits behind the search box, with a dark 90 percent overlay on the page body. [Measured]
  2. Translucent white pills. Chips such as Image creator are white at 75 percent with black text, 42 high. [Measured]
  3. White text on the image. Navigation and headings are white on the photo. [Measured]
  4. Small Segoe UI. 13 to 16 for nearly everything. [Measured]
  5. 6px panels. The most common radius is 6. [Measured]

Source for this file: the Bing home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Segoe UI was read from the system font because the page does not load it, so its use on the web is the declared first family. Fluent's documentation was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Dark overlay#222222 at 90 percentPage overlay
Glasswhite at 70 to 75 percentPills and chips
Text on glassblack at 80 percentPill text
Text on photo#ffffff, #ddddddNavigation and headings
Panel gray#555555Result panels
Divider#ecececRules
Alert red#e81123Notifications

Typography

Segoe UI throughout, with Open Sans as the open alternative. Page titles measure 16 on 24, body 14 on 20, and small labels 13 at 400 and 700. [Measured]

Shape and spacing

Corners are 6 on panels, 8, 16 and 24 on cards, and fully round on pills. Pills are 42 high and navigation rows 39. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light and dark options exist, but only the image home page was measured. [Observed]

Platform: iOS

The Bing iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

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

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

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

A compact bottom bar for search, Copilot and discover. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A search box with a microphone and camera. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

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

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

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.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

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

The apps are expected to share the photo-first home and the translucent pills with the web. [Inferred]

Platform: Android

The Bing Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

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

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A compact bottom bar for search, Copilot and discover. [Inferred]

Main action

Expected on Android: Floating action button.

A search box with a microphone and camera. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

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

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

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

The apps are expected to share the photo-first home and the translucent pills with the web. [Inferred]

Platform: Web

The Bing home page, measured at 1440 and 390 wide. Result pages were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top row of links (Copilot, Images, Videos, Shopping and more) in white over the photo, with Sign in and Rewards at the right. [Observed]

Main action

Expected on Web: Page-level button.

A large search box with translucent pills for creators beneath. [Observed]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Translucent white pills 42 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Pills measure 42 high and navigation rows 39. [Measured]

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 to the public pages measured. [Observed]

Platform conformance

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

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the photo-first home and the translucent pills. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Let the daily photo carry the page.
  • Use translucent white pills for chips.
  • Keep text small and white on the image.
  • Use 6px corners on panels.

Don't

  • Don't put solid color blocks over the photo.
  • Don't use large type on the home page.
  • Don't add shadows to the pills.

Known Gaps

  • Search results, the Copilot view and the dark theme were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • Segoe UI was not downloaded by the page, so only the declared family is confirmed.
  • Fluent's documentation was not read, so role names are not given.