E-commerce UI design
Product imagery is the hero; the accent drives one thing — buy.
- Typeface ·
- Friendly humanist sans + optional characterful brand display
- Hero ·
- 32–48px
- Body ·
- 16px
- Numerals ·
- Tabular for price & grids; price weighted, not colored
Soft (8–12px) — friendly, tactile
Pick one and apply it to every card, button, input, and modal. Mixing sharp and round corners is the #1 tell of un-designed UI.
Neutral chrome so photos pop. Accent only for add-to-cart/buy. Price gets weight, not color.
Medium. Browsing = generous product cards; PDP = focused, CTA above the fold.
Price prominent (2:1 with currency), product title bold, specs quiet.
Spring (energetic) for add-to-cart, quantity stepper, cart pop. Hover lift on cards.
Product card grid, cart badge, quantity stepper, sticky buy bar, featured rails.
Avoid in e-commerce & retail
- buried CTA
- two primaries on a PDP
- shouty discount colors everywhere
- motion blocking add-to-cart
Build it with StyleSeed
StyleSeed bakes this judgment into 74 rules your AI reads automatically. For e-commerce & retail, start from the Arc / Toss skin and the spring motion seed.