eBay Mobile — design system & UI screens
Short-form video sharing and social discovery platform, shown here in Stories playback mode with live comments from other viewers. The layout is a full-screen vertical video with an overlay UI: a back button and mic recording indicator at top-left, creator profile with action buttons (Share, Wallet, Items) at top-right, live comments stacked at bottom-left, and emoji reaction balloons floating across the screen.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/ebay-mobile.
Decoded design system
eBay Mobile's decoded design system: background #FFFFFF, text #000000, accent #751619, link #751619, primary #751619; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #751619 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #751619 |
| accent | #751619 |
| link | #751619 |
| button_bg | #751619 |
| button_text | #FFFFFF |
Using these colors
- Action color
#751619— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#751619— one role, not several (the action color).- accent
#751619— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 20px, 28px, 32px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.24) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px 0px - card:
rgba(0, 0, 0, 0.07) 0px 4px 12px 0px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 150ms · 167ms · 333ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·cubic-bezier(0.3, 0, 0.7, 1) - animated properties: opacity, scale, transform, border-color
Native design tokens
| Token | Value |
|---|---|
--color-avocado-100 | #fdfef6 |
--color-avocado-200 | #f8fcde |
--color-avocado-300 | #e9f5a0 |
--color-avocado-400 | #e3f13c |
--color-avocado-500 | #c1d737 |
--color-avocado-600 | #68770d |
--color-avocado-700 | #4e4e0c |
--color-avocado-800 | #282306 |
--color-blue-100 | #f5f9ff |
--color-blue-200 | #d4e5fe |
…and 110 more measured on the page.
Button states (measured)
- primary hover: background
#382AEF - primary focus: outline
2px solid rgb(16, 16, 16)
Layout (measured)
- container max-width:
1584px - nav: 102px relative
- common grid: 16 columns
Motion choreography (measured)
Load order: ul.carousel__list×4 → div.page-grid-container → section.page-notice
Scroll reveal: 22 elements rest at opacity 0, animate in over 0.167s cubic-bezier(0.3, 0, 0.7, 1).
Input (measured)
height 40px · radius 44px 0px 0px 44px
Responsive (measured)
- breakpoints: 512px · 600px · 768px · 779px · 799px · 879px
- mobile (390px): hero 28px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →