Shopping / iOS / Android / Web

eBay

eBay keeps the interface neutral so listings supply the color: a gray ramp, one action blue and status washes, with buttons that are 40 high and gently rounded.

Download
  • #0968F6
  • #191919
  • #707070
  • #F7F7F7
  • #E53238
  • #288034

Color

Every color token in the file, grouped by role.

Brand

  • primary#0968F6
  • primary pressed#0049B8
  • on primary#FFFFFF
  • brand red#E53238
  • dark primary#4D93FC

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F7F7F7
  • canvas sunken#E5E5E5
  • dark canvas#000000
  • dark surface#191919

Text

  • ink#191919
  • ink muted#707070
  • ink quiet#8F8F8F
  • ink disabled#C7C7C7
  • dark ink#F7F7F7
  • dark ink muted#8F8F8F

Lines

  • border#8F8F8F
  • border strong#363636

Status

  • success#288034
  • success wash#F6FEF6
  • warning#C15100
  • warning wash#FFFAF5

More

  • inverse#191919
  • blue wash#F5F9FF
  • blue soft#D4E5FE
  • blue deep#002A69
  • critical#D50B0B
  • critical wash#FFF5F5
  • yellow#FFBD14

Typography

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

  • Market SansMarket Sans is private and not available in open fonts. Shown in Inter, the closest open match.
  • giant 346px / 600 / 52px

    eBay

  • giant 236px / 600 / 44px

    eBay

  • giant 130px / 600 / 38px

    eBay

  • large 224px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • large 120px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • medium16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • small12px / 400 / 16px

    The quick brown fox jumps over the lazy dog

  • button14px / 700 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • sm8px
  • md16px
  • button20px
  • lg24px
  • round999px

Spacing

The spacing scale, drawn to size.

  • xxs2px
  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px
  • xxl48px

Components

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

  • button primary
    button-primary
  • button secondary
    button-secondary
  • button tertiary
    button-tertiary
  • button strong
    button-strong
  • notice info
    notice-info
  • notice success
    notice-success
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 146 lines
version: alpha
name: eBay-design-analysis
description: "A marketplace built from its published Skin system: Market Sans in 400 and 600, a neutral ramp from white to #191919, one action blue (#0968f6), semantic red, green and yellow, 20px pill-ish buttons 40 high and 8 to 24 radii, with light and dark themes from the same tokens."
status: Draft
appVersion: "read from the published Skin token files (version 19.37.0), 2026-10-06; the live site could not be measured"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0968f6"
  primary-pressed: "#0049b8"
  on-primary: "#ffffff"
  ink: "#191919"
  ink-muted: "#707070"
  ink-quiet: "#8f8f8f"
  ink-disabled: "#c7c7c7"
  canvas: "#ffffff"
  canvas-subtle: "#f7f7f7"
  canvas-sunken: "#e5e5e5"
  border: "#8f8f8f"
  border-strong: "#363636"
  inverse: "#191919"
  blue-wash: "#f5f9ff"
  blue-soft: "#d4e5fe"
  blue-deep: "#002a69"
  critical: "#d50b0b"
  critical-wash: "#fff5f5"
  success: "#288034"
  success-wash: "#f6fef6"
  warning: "#c15100"
  warning-wash: "#fffaf5"
  yellow: "#ffbd14"
  brand-red: "#e53238"
  dark-canvas: "#000000"
  dark-surface: "#191919"
  dark-ink: "#f7f7f7"
  dark-ink-muted: "#8f8f8f"
  dark-primary: "#4d93fc"

typography:
  # Font note: "Market Sans" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  giant-3:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 46px
    fontWeight: 600
    lineHeight: 52px
  giant-2:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 44px
  giant-1:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 38px
  large-2:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
  large-1:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  medium:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  small:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  button:
    fontFamily: "'Market Sans', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px

rounded:
  sm: 8px
  md: 16px
  lg: 24px
  button: 20px
  round: 999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.button}"
    height: 40px
    padding: 0 20px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.button}"
    height: 40px
    padding: 0 20px
  button-tertiary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.button}"
    height: 40px
    padding: 0 20px
  button-strong:
    backgroundColor: "{colors.inverse}"
    textColor: "{colors.canvas}"
    typography: "{typography.button}"
    rounded: "{rounded.button}"
    height: 40px
    padding: 0 20px
  notice-info:
    backgroundColor: "{colors.blue-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px
  notice-success:
    backgroundColor: "{colors.success-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px

Overview

eBay is the long-running online marketplace. Its published system, Skin, describes a neutral, practical interface: white and light gray, near-black text, one blue for action and color used mainly for status, with the colored eBay wordmark carrying the brand. [Observed]

What defines the look:

  1. A neutral ramp. Nine grays from white #ffffff to black #000000, with #191919 as the main text and #707070 as secondary. [Measured]
  2. One action blue. #0968f6 for primary buttons, links and selection, with #0049b8 for pressed states. [Measured]
  3. Rounded buttons. Buttons are 40 high with a 20px corner, 20px side padding and a 14px label. Primary is a solid blue with bold white text, secondary has an accent outline. [Measured]
  4. Status colors with washes. Red, green (kiwi), orange and yellow each have eight steps, used with pale washes for notices. [Measured]
  5. Market Sans at two weights. Regular 400 and semibold 600, with bold 700 on primary buttons. [Measured]
  6. Soft elevation. One subtle shadow, 0 4px 12px at 7 percent black. [Measured]

Source for this file: eBay's published Skin token and button files (version 19.37.0), read on 2026-10-06, plus one measurement of an ebay.com page that returned only an error page, which showed Market Sans and the brand red. The live home and search pages block automated browsers, so they were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Action blue#0968f6, pressed #0049b8#4d93fcSkin tokens
Text#191919#f7f7f7Skin tokens
Secondary text#707070#8f8f8fSkin tokens
Disabled text#c7c7c7not readSkin tokens
Page#ffffff#000000Skin tokens
Subtle surface#f7f7f7, #e5e5e5#191919Skin tokens
Border#8f8f8f, strong #363636not readSkin tokens
Blue wash and soft#f5f9ff, #d4e5fenot readSkin tokens
Critical#d50b0b on #fff5f5not readSkin tokens
Success#288034 on #f6fef6not readSkin tokens
Warning#c15100 on #fffaf5not readSkin tokens
Brand red#e53238Measured on an ebay.com page

The full steps run for blue (100 to 800), red, green, orange and yellow. [Measured]

Typography

Market Sans at 400 and 600, with Arial behind it. The published size scale is 10, 12 (small), 14 (body), 16 (medium), 20 and 24 (large), and 30, 36 and 46 (giant). Buttons use 14 at 700. The measured error page used 24 at 700 for its title and 16 at 400 for text. [Measured]

Shape and spacing

Radii are 8, 16 and 24 in the token file, and buttons use 20. Spacing runs 2, 4, 8, 12, 16, 20, 24, 32, 40 and 48. The error page's older button used a 3px corner with 10 by 20 padding. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light and dark ship as token files, with live variants of each. [Measured]

Platform: iOS

The eBay app was not captured. The notes below follow from the published system.

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 bottom tab bar for the main areas of a marketplace app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A bold primary button for bidding or buying. [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 blue, the neutral ramp and the button shape with the published system. [Inferred]

Platform: Android

The eBay app was not captured. The notes below follow from the published system.

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 bottom navigation bar for the main areas of a marketplace app. [Inferred]

Main action

Expected on Android: Floating action button.

A bold primary button for bidding or buying. [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 blue, the neutral ramp and the button shape with the published system. [Inferred]

Platform: Web

eBay's published Skin system. The live site was not measured because it blocks automated browsers.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Not measured. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

Not measured. [Inferred]

Main action

Expected on Web: Page-level button.

A solid blue button, 40 high with a 20px corner and a bold white label. [Measured from Skin]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A subtle shadow of 0 4px 12px at 7 percent. Notices use the wash colors. [Measured from Skin]

Controls

Expected on Web: Native or custom.

Primary, secondary and tertiary buttons, with the secondary outlined in the accent color and the tertiary in a medium gray. [Measured from Skin]

Text sizing

Expected on Web: Browser zoom.

Sizes are published in rem. [Measured from Skin]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 40 high, with icon buttons up to 48. [Measured from Skin]

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 files read. [Observed]

Platform conformance

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

Skin is eBay's shared system for the web product. [Measured]

Cross-platform consistency

Consistent across platforms: the blue, the neutral ramp, Market Sans and the status colors. [Measured for the published system, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the one blue for primary actions and links.
  • Keep surfaces neutral and let listings carry color.
  • Pair each status color with its pale wash.
  • Keep buttons 40 high with a 20px corner.

Don't

  • Don't add a second action color.
  • Don't use the status colors as decoration.
  • Don't use shadows beyond the one subtle elevation.

Known Gaps

  • The live ebay.com pages could not be measured, so layouts, listing cards and the header are not described.
  • The iOS and Android apps were not captured. Their sections are inferred.
  • Dark values for status colors and borders were not read.
  • The primary blue comes from the current Skin release and the live site may still show an older color in places.
  • Icons, motion and breakpoints were not measured.
  • Account deletion and store policy rules were not verified.