eBay DESIGN.md

1. Brand Identity

Brand Overview

eBay is a global e-commerce marketplace connecting buyers and sellers worldwide. Founded in 1995, eBay has evolved from an auction-only platform to a comprehensive marketplace featuring fixed-price listings, deals, and a vast range of product categories from electronics to collectibles.

Brand Personality

• Empowering: Enabling buyers to find unique items and sellers to reach global audiences
• Trustworthy: Buyer protection, seller ratings, and secure transactions
• Diverse: Embracing the wide variety of products and sellers
• Dynamic: Real-time auctions, deals, and competitive pricing
• Community-Driven: Connecting collectors, enthusiasts, and everyday shoppers

Logo Specifications

The eBay logo features the distinctive multicolor wordmark with overlapping letters:

• Logo Colors:
  • Red: #E53238 (e)
  • Blue: #0064D2 (b)
  • Yellow/Gold: #F5AF02 (a)
  • Green: #86B817 (y)
• Logo Style: Overlapping, playful letterforms representing connection and community
• Clear Space: Minimum clear space equal to the height of the lowercase 'e'
• Minimum Size: 40px width for digital applications

Design System

eBay uses the Evo Design System (formerly Skin), a comprehensive component library with:

• Pure CSS framework (@ebay/skin)
• Marko components (@ebay/ebayui-core)
• React components (@ebay/ebayui-core-react)
• BEM methodology for CSS naming
• Accessibility-first (WCAG 2.2 AA compliant)

2. Color Palette

Primary Colors

css/* eBay Blue - Primary Brand/Action Color */
--color-blue-600: #3665F3;        /* Primary buttons, links */
--color-blue-500: #3E73FF;        /* Hover states */
--color-blue-700: #2C54C8;        /* Active/pressed states */
--color-blue-100: #E6EEFF;        /* Light backgrounds */

Brand Logo Colors

css/* Multicolor Logo Palette */
--ebay-red: #E53238;              /* Logo red */
--ebay-blue: #0064D2;             /* Logo blue */
--ebay-yellow: #F5AF02;           /* Logo yellow/gold */
--ebay-green: #86B817;            /* Logo green */

Semantic Colors

css/* Background Colors */
--color-background-primary: #FFFFFF;
--color-background-secondary: #F7F7F7;
--color-background-tertiary: #E5E5E5;
--color-background-elevated: #FFFFFF;
--color-background-inverse: #111820;
--color-background-disabled: #E5E5E5;

/* Success/Positive */
--color-green-600: #5BA71B;
--color-background-success: #E8F4E1;
--color-foreground-success: #2E7D0D;

/* Attention/Warning */
--color-yellow-500: #F5AF02;
--color-background-attention: #FEF4D9;
--color-foreground-attention: #8B6914;

/* Error/Critical */
--color-red-600: #E0103A;
--color-background-attention: #FDEDED;
--color-foreground-attention: #CC0000;

/* Foreground/Text Colors */
--color-foreground-primary: #111820;
--color-foreground-secondary: #707070;
--color-foreground-disabled: #A6A6A6;
--color-foreground-on-inverse: #FFFFFF;
--color-foreground-link-primary: #3665F3;
--color-foreground-link-visited: #800080;

Border Colors

css--color-border-subtle: #E5E5E5;
--color-border-medium: #C7C7C7;
--color-border-strong: #767676;
--color-border-accent: #3665F3;
--color-border-success: #5BA71B;
--color-border-attention: #F5AF02;
--color-border-disabled: #E5E5E5;

State Layer Colors

css--color-state-layer-hover: rgba(0, 0, 0, 0.04);
--color-state-layer-pressed: rgba(0, 0, 0, 0.08);
--color-state-layer-focus: rgba(54, 101, 243, 0.12);
--color-state-layer-selected: rgba(54, 101, 243, 0.08);

Dark Mode Support

css/* Dark Theme Colors */
--color-background-primary-dark: #121212;
--color-background-secondary-dark: #1F1F1F;
--color-background-elevated-dark: #2A2A2A;
--color-foreground-primary-dark: #F7F7F7;
--color-foreground-secondary-dark: #A6A6A6;

3. Typography

Font Family

css/* Primary Font Stack */
--font-family-primary: "Market Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* System Font Fallback */
--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

/* Monospace (code/data) */
--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;

Market Sans

Market Sans is eBay's proprietary typeface, designed for clarity and readability across digital platforms:

• Clean, geometric sans-serif design
• Optimized for screen readability
• Available in multiple weights
• Supports extended character sets

Type Scale

css/* Display/Hero Text */
--font-size-giant: 32px;          /* Hero headings */
--font-size-large-1: 24px;        /* Large display */
--font-size-large-2: 20px;        /* Section headings */

/* Body Text */
--font-size-medium: 16px;         /* Primary body */
--font-size-regular: 14px;        /* Standard body */
--font-size-small: 12px;          /* Secondary text */

/* Detail Text */
--font-size-tiny: 11px;           /* Captions, labels */

Font Weights

css--font-weight-regular: 400;
--font-weight-medium: 500;        /* Emphasis */
--font-weight-semibold: 600;      /* Subheadings */
--font-weight-bold: 700;          /* Headings, CTAs */

Line Heights

css--line-height-tight: 1.2;         /* Headings */
--line-height-normal: 1.4;        /* Body text */
--line-height-relaxed: 1.6;       /* Long-form content */

Typography Classes

css/* Giant Text (always bold) */
.typography-giant { font-size: 32px; font-weight: 700; line-height: 1.2; }

/* Large Text (always bold) */
.typography-large-1 { font-size: 24px; font-weight: 700; line-height: 1.25; }
.typography-large-2 { font-size: 20px; font-weight: 700; line-height: 1.3; }

/* Medium Text */
.typography-medium { font-size: 16px; font-weight: 400; line-height: 1.4; }
.typography-medium.bold-text { font-weight: 700; }
.typography-medium.secondary-text { color: var(--color-foreground-secondary); }

/* Regular Text */
.typography-regular { font-size: 14px; font-weight: 400; line-height: 1.4; }

/* Small Text */
.typography-small { font-size: 12px; font-weight: 400; line-height: 1.4; }

4. Spacing & Layout

Spacing Scale

css/* Base Unit: 4px */
--spacing-50: 2px;
--spacing-100: 4px;
--spacing-200: 8px;
--spacing-300: 12px;
--spacing-400: 16px;
--spacing-500: 20px;
--spacing-600: 24px;
--spacing-800: 32px;
--spacing-1000: 40px;
--spacing-1200: 48px;
--spacing-1600: 64px;
--spacing-2000: 80px;

Page Grid System

eBay uses a responsive page grid system:

css/* Mobile (< 601px) */
--page-margin: 16px;
--column-gap: 16px;
--columns: 4;

/* Tablet (601px - 960px) */
--page-margin: 24px;
--column-gap: 24px;
--columns: 8;

/* Desktop (961px - 1280px) */
--page-margin: 48px;
--column-gap: 24px;
--columns: 12;

/* Large Desktop (> 1280px) */
--max-width: 1280px;
--page-margin: auto;
--column-gap: 24px;
--columns: 12;

Layout Grid Classes

css/* Container */
.page-grid { max-width: 1280px; margin: 0 auto; padding: 0 var(--page-margin); }

/* Responsive Columns */
.layout-grid { display: grid; gap: var(--column-gap); }
.layout-grid--2-columns { grid-template-columns: repeat(2, 1fr); }
.layout-grid--3-columns { grid-template-columns: repeat(3, 1fr); }
.layout-grid--4-columns { grid-template-columns: repeat(4, 1fr); }

Item Tile Grid

css/* Product listing grid configurations */
.item-tile-group { display: grid; gap: 16px; }
.item-tile-group--2-up { grid-template-columns: repeat(2, 1fr); }
.item-tile-group--3-up { grid-template-columns: repeat(3, 1fr); }
.item-tile-group--4-up { grid-template-columns: repeat(4, 1fr); }
.item-tile-group--5-up { grid-template-columns: repeat(5, 1fr); }
.item-tile-group--6-up { grid-template-columns: repeat(6, 1fr); }

5. Component Specifications

Buttons

Primary Button (Buy It Now, Add to Cart)

css.btn--primary {
  background-color: #3665F3;
  color: #FFFFFF;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  min-height: 40px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.btn--primary:hover { background-color: #2C54C8; }
.btn--primary:active { background-color: #1F3D9E; }
.btn--primary:disabled { background-color: #C7C7C7; color: #767676; }

Secondary Button

css.btn--secondary {
  background-color: transparent;
  color: #3665F3;
  border: 1px solid #3665F3;
  border-radius: 24px;
  padding: 11px 23px;
  font-size: 14px;
  font-weight: 700;
  min-height: 40px;
}
.btn--secondary:hover { background-color: rgba(54, 101, 243, 0.04); }

Tertiary Button (Text-only)

css.btn--tertiary {
  background-color: transparent;
  color: #3665F3;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

Destructive Button

css.btn--destructive {
  background-color: #E0103A;
  color: #FFFFFF;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-weight: 700;
}

Button Sizes

css.btn--small { padding: 8px 16px; min-height: 32px; font-size: 12px; }
.btn--regular { padding: 12px 24px; min-height: 40px; font-size: 14px; }
.btn--large { padding: 16px 32px; min-height: 48px; font-size: 16px; }

Form Elements

Text Input

css.textbox {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #767676;
  border-radius: 8px;
  font-size: 14px;
  background-color: #FFFFFF;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.textbox:hover { border-color: #111820; }
.textbox:focus {
  border-color: #3665F3;
  box-shadow: 0 0 0 2px rgba(54, 101, 243, 0.2);
  outline: none;
}
.textbox--invalid { border-color: #E0103A; }
.textbox:disabled { background-color: #F7F7F7; border-color: #E5E5E5; }

Floating Label Input

css.floating-label {
  position: relative;
}
.floating-label__input {
  padding: 20px 16px 8px;
  border: 1px solid #767676;
  border-radius: 8px;
}
.floating-label__label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  transition: all 150ms ease;
  color: #707070;
}
.floating-label__input:focus + .floating-label__label,
.floating-label__input:not(:placeholder-shown) + .floating-label__label {
  top: 8px;
  transform: translateY(0);
  font-size: 11px;
}

Select Dropdown

css.select {
  appearance: none;
  padding: 12px 40px 12px 16px;
  border: 1px solid #767676;
  border-radius: 8px;
  background-color: #FFFFFF;
  background-image: url("chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

Checkbox

css.checkbox__control {
  width: 18px;
  height: 18px;
  border: 1px solid #767676;
  border-radius: 4px;
  background-color: #FFFFFF;
}
.checkbox__control:checked {
  background-color: #3665F3;
  border-color: #3665F3;
  background-image: url("checkmark.svg");
}

Radio Button

css.radio__control {
  width: 18px;
  height: 18px;
  border: 1px solid #767676;
  border-radius: 50%;
  background-color: #FFFFFF;
}
.radio__control:checked {
  border-color: #3665F3;
  border-width: 5px;
}

Cards & Tiles

Item Tile (Product Card)

css.item-tile {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.item-tile:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.item-tile__image {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}
.item-tile__body {
  padding: 12px;
}
.item-tile__title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #111820;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-tile__price {
  font-size: 16px;
  font-weight: 700;
  color: #111820;
  margin-top: 4px;
}
.item-tile__shipping {
  font-size: 12px;
  color: #5BA71B;
  margin-top: 4px;
}

Card Component

css.card {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card--elevated {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

Navigation

Tabs

css.tabs__items {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  gap: 24px;
}
.tabs__item {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 400;
  color: #707070;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tabs__item--selected {
  color: #111820;
  border-bottom-color: #3665F3;
  font-weight: 700;
}
.tabs__item:hover { color: #111820; }

Breadcrumbs

css.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.breadcrumbs__item {
  color: #3665F3;
  text-decoration: none;
}
.breadcrumbs__item:hover { text-decoration: underline; }
.breadcrumbs__separator {
  margin: 0 8px;
  color: #707070;
}
.breadcrumbs__item--current {
  color: #111820;
  pointer-events: none;
}

Pagination

css.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination__item {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: #111820;
}
.pagination__item:hover { background-color: #F7F7F7; }
.pagination__item--selected {
  background-color: #3665F3;
  color: #FFFFFF;
}

6. Iconography

Icon System

eBay uses a comprehensive SVG icon system with consistent sizing and styling:

css/* Icon Sizes */
--icon-size-small: 16px;
--icon-size-regular: 24px;
--icon-size-large: 32px;
--icon-size-xlarge: 48px;

/* Icon Button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.icon-btn:hover { background-color: #F7F7F7; }
.icon-btn:active { background-color: #E5E5E5; }

Common Icons

Star Rating

css.star-rating {
  display: inline-flex;
  gap: 2px;
}
.star-rating__icon {
  width: 16px;
  height: 16px;
  color: #F5AF02;  /* Gold/yellow for filled stars */
}
.star-rating__icon--empty {
  color: #C7C7C7;  /* Gray for empty stars */
}

7. Motion & Animation

Timing Functions

css/* Standard Easings */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0.0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

Duration Tokens

css--duration-instant: 0ms;
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--duration-slower: 400ms;
--duration-slowest: 500ms;

Common Animations

Fade In/Out

css@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fade-in var(--duration-normal) var(--ease-out);
}

Slide Up

css@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slide-up var(--duration-slow) var(--ease-out);
}

Loading Spinner

css@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.progress-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #E5E5E5;
  border-top-color: #3665F3;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

Skeleton Loading

css@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #F7F7F7 25%,
    #E5E5E5 50%,
    #F7F7F7 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Auction Countdown Animation

css@keyframes pulse-urgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.countdown--urgent {
  color: #E0103A;
  animation: pulse-urgent 1s ease-in-out infinite;
}

Transition Standards

css/* Interactive Element Transitions */
.btn { transition: background-color 150ms var(--ease-out), transform 100ms var(--ease-out); }
.btn:active { transform: scale(0.98); }

/* Link Hover */
.link { transition: color 100ms var(--ease-out); }

/* Card Hover */
.card { transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }
.card:hover { transform: translateY(-2px); }

8. Accessibility

Focus States

css/* Focus Ring - Visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid #3665F3;
  outline-offset: 2px;
}

/* Focus within containers */
.btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(54, 101, 243, 0.3);
  outline: none;
}

/* High contrast focus */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

Color Contrast

• Normal text (< 18px): Minimum 4.5:1 contrast ratio
• Large text (>= 18px or 14px bold): Minimum 3:1 contrast ratio
• UI components: Minimum 3:1 contrast ratio
• All eBay design tokens are WCAG 2.2 AA compliant

Screen Reader Support

html<!-- Visually Hidden Text -->
<span class="clipped">Accessible label</span>

<style>
.clipped {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

ARIA Patterns

html<!-- Product Card with Price Announcement -->
<article aria-label="Apple iPhone 14, $599">
  <img src="..." alt="Apple iPhone 14 front and back view">
  <h3>Apple iPhone 14</h3>
  <p aria-label="Price: $599">$599.00</p>
  <p aria-label="Free shipping">Free shipping</p>
</article>

<!-- Auction Countdown -->
<time datetime="PT2H30M" aria-live="polite" aria-label="2 hours and 30 minutes remaining">
  2h 30m
</time>

<!-- Star Rating -->
<div role="img" aria-label="4.5 out of 5 stars rating">
  <!-- Star SVGs -->
</div>

<!-- Add to Watchlist -->
<button aria-pressed="false" aria-label="Add to watchlist">
  <svg aria-hidden="true"><!-- heart icon --></svg>
</button>

Keyboard Navigation

• All interactive elements are focusable via Tab
• Arrow keys navigate within composite widgets (menus, tabs, carousels)
• Enter/Space activate buttons and links
• Escape closes modals and dropdowns
• Skip links provided for navigation bypass

Touch Targets

css/* Minimum touch target: 44x44px (WCAG) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* eBay standard: 40px minimum with 8px spacing */
.btn { min-height: 40px; }
.icon-btn { min-width: 40px; min-height: 40px; }

Reduced Motion

css@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

9. Platform-Specific Guidelines

Web Application

• Framework: Marko.js for server-side rendering, React for interactive components
• Responsive Design: Mobile-first approach with breakpoints at 601px, 961px, 1280px
• Performance: Critical CSS inlined, lazy-load images, progressive enhancement
• Browser Support: Last 2 versions of major browsers (Chrome, Firefox, Safari, Edge)

Mobile Web

css/* Mobile Viewport */
@media (max-width: 600px) {
  /* Full-width buttons */
  .btn--fluid { width: 100%; }
  
  /* Stacked navigation */
  .header__nav { display: none; }
  .header__menu-btn { display: flex; }
  
  /* 2-column product grid */
  .item-tile-group { grid-template-columns: repeat(2, 1fr); }
  
  /* Larger touch targets */
  .btn { min-height: 48px; }
}

iOS App Guidelines

• Follow Apple Human Interface Guidelines where applicable
• Use native iOS components for system-level interactions
• Maintain eBay brand colors and typography
• Support Dynamic Type for accessibility
• Integrate with Apple Pay using eBay styling

Android App Guidelines

• Follow Material Design 3 principles adapted for eBay brand
• Use eBay color palette for Material components
• Support system dark mode
• Implement Android-specific navigation patterns
• Integrate Google Pay with eBay styling

Search Interface

css.search-bar {
  display: flex;
  align-items: center;
  height: 48px;
  border: 1px solid #767676;
  border-radius: 24px;
  background-color: #FFFFFF;
  overflow: hidden;
}
.search-bar:focus-within {
  border-color: #3665F3;
  box-shadow: 0 0 0 2px rgba(54, 101, 243, 0.2);
}
.search-bar__input {
  flex: 1;
  border: none;
  padding: 0 16px;
  font-size: 14px;
}
.search-bar__button {
  width: 48px;
  height: 48px;
  background-color: #3665F3;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

Auction-Specific Components

css/* Bid Button */
.btn--bid {
  background-color: #3665F3;
  color: #FFFFFF;
  border-radius: 24px;
  padding: 12px 32px;
  font-weight: 700;
}

/* Current Bid Display */
.bid-display {
  background-color: #E6EEFF;
  padding: 16px;
  border-radius: 8px;
}
.bid-display__label {
  font-size: 12px;
  color: #707070;
}
.bid-display__amount {
  font-size: 24px;
  font-weight: 700;
  color: #111820;
}

/* Countdown Timer */
.countdown {
  font-size: 14px;
  font-weight: 700;
}
.countdown--warning { color: #8B6914; }  /* < 1 hour */
.countdown--urgent { color: #E0103A; }   /* < 10 minutes */

/* Bid History */
.bid-history__item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #E5E5E5;
}

Seller Rating Component

css.seller-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seller-rating__percentage {
  font-size: 14px;
  font-weight: 700;
  color: #111820;
}
.seller-rating__feedback {
  font-size: 12px;
  color: #707070;
}
.seller-rating--positive { color: #5BA71B; }
.seller-rating--neutral { color: #707070; }
.seller-rating--negative { color: #E0103A; }

Category Navigation

css.category-nav {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 0;
  -webkit-overflow-scrolling: touch;
}
.category-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  text-decoration: none;
}
.category-nav__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #F7F7F7;
}
.category-nav__label {
  font-size: 12px;
  color: #111820;
  text-align: center;
}

Watch/Save Functionality

css.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  background: #FFFFFF;
  font-size: 12px;
  color: #707070;
  cursor: pointer;
}
.watch-btn:hover {
  background: #F7F7F7;
  border-color: #C7C7C7;
}
.watch-btn--active {
  color: #E0103A;
  border-color: #E0103A;
}
.watch-btn__icon {
  width: 16px;
  height: 16px;
}

Additional Resources

Official Documentation

• Evo Web Components: https://opensource.ebay.com/evo-web/
• GitHub Repository: https://github.com/eBay/evo-web
• eBay Design Playbook: https://playbook.ebay.com/design-system/

NPM Packages

• @ebay/skin - CSS framework
• @ebay/ebayui-core - Marko components
• @ebay/ebayui-core-react - React components

Design Principles

1. Accessibility First: WCAG 2.2 AA compliance is mandatory
2. Mobile-First: Design for smallest screens, enhance for larger
3. Performance: Optimize for fast load times and smooth interactions
4. Consistency: Use design tokens and components for brand cohesion
5. Trust: Clear pricing, shipping info, and seller ratings build confidence