A design system for e-commerce—based on behavioral science, optimized for sustained growth.
View the demo →
For licensing contact: r@mote.agency
Introduction
Em exists as a classless CSS framework and semantic HTML component library—alongside a Claude Design system, Figma UI kit, and augmented Shopify Horizon theme—prioritizing customer lifetime value with every design decision made.
Meta
Optimal Meta ads efficiency cannot be achieved without optimal website efficiency.
Meta is a great place to introduce your campaign video and imagery to a large audience. Many attributes make up a good Meta Ads campaign. High quality creative, good copy, engagement, cost per click, and also importantly, the conversion rate of the website the ad is being sent to. This indicates clearly the role that conversion rate and average order play in reaching maximum ROAS. Conversion rate affects how much you have to spend for each conversion and average order value impact the return on that spend.
Meta can only drive sessions and acquisition cost directly, your website determines conversion rate, average order value, and most importantly customer lifetime value. Therefore your website plays a larger role in attaining optimal ROAS than Meta does directly. Ads can convince people to visit your website but your site still needs to convert. And not only convert but create an experience that will make your customers shop from you repeatedly, if you are to achieve optimal customer lifetime value. A good website shows that you care about your customer and this directly impacts customer lifetime value. Meta content should be harmonized with website content. Product imagery should have branded off-white background.
Google
As with Meta, optimal Google ads efficiency cannot be achieved without optimal website efficiency. Google Ads are great at allowing your products to easily be discovered. Google is a great place to drive people looking for your products to your website. Product catalog should be carefully curated. It is your primary creative on Google. YouTube should run 16:9 campaign videos. Product imagery should have branded off-white background.
Google is best at promoting product catalogs, less at campaign content. Visitors reaching your site from Google are likely landing on product pages, not home or collection pages. Therefore it is important to include all relevant campaigns imagery on product pages. Otherwise visitors arriving from Google miss out on a branded user experience which impacts customer lifetime value negatively.
As with Meta, Google can only drive sessions and acquisition cost directly, your website determines conversion rate, average order value, and most importantly customer lifetime value. Therefore your website plays a larger role in attaining optimal ROAS than Google does directly. As with Meta, Google content should be harmonized with website content.
Agents
All of our systems are designed to be equally legible and usable by agents and humans.
Systems
Grid
Clarity, consistency, coherence. Baseline grid based on leading. 8 column grid, gutters and margins are responsive multiples of leading.
Typography
Heading 1–6, paragraph & body. 21px leading. 1/8th pixel letter spacing. Antialiased font smoothing.
Colors
Foreground, background, light, and opacity scales. Hover, focus, active states for lines.
Pages
Home
https://rvdmijnsbrugge.myshopify.com →
Home page should open on primary 16:9 campaign video. Home page should show new arrivals with matching campaign video and imagery so that marketing channels are harmonized. Brands should work with a collections and campaigns content calendar system. New Arrivals show first because that's most likely what a customer seems first from advertising. After New Arrivals we should show Most Popular, or the products that the customer most likely might be looking for, if not New Arrivals.
Collection
https://rvdmijnsbrugge.myshopify.com/collections/all →
Collection pages should start with a short paragraph for context around the collection. This is also a great opportunity for brands to highlight some of the unique aspect of their collection, like superior quality or collaborations with artists. Campaign imagery should be mixed in with the products, this will provide visual context if customers land on the collection page from advertising. It will also give the strongest campaign images a permanent place to live. Additionally, campaign images should be set up as figures with captions, these captions should detail all the products shown in the image, as this has the potential of increasing average order value.
Product
https://rvdmijnsbrugge.myshopify.com/products/cotton-poplin-shirt →
Product pages should use one variant dropdown so inventory levels can be shown at a glance with one click for all variants. If a product has more than one option, or is a combined product, swatches should be used. Swatches that lead to a sold out variant should show so, to communicate scarcity and urgency accurately. Additionally, carefully curated complementary product should be shown to increase average order value. Besides the main product, all relevant campaign imagery should be presented, showing the product in context, increasing conversion rate and adding all possible other products shown in the campaign images, increasing average order value. Furthermore, related products should be shown, giving customers alternative options, in case the currently viewed product was close to what they were looking for, but not quite. For example, products of the same category or of the same brand, increasing conversion rate.
Showing good recommended products matters because most visitors don’t have time to explore your whole product catalog. They will make decisions with incomplete information. They will not make perfectly rational purchasing decisions. That’s why showing visitors additional products on the product page that they have a high statistical chance of also liking, is good design.
Components
Header
Search
Popular search terms because we want to save users time typing by putting the most likely search terms in front of them. Trending products to hint at urgency, for example products that went viral on socials and are at risk of selling out. These are different from most popular products shown in the empty cart, those are the products that have the highest chance of being added to cart and converting.
Suggestions for search terms that might be incomplete as the user types, again trying to save them effort typing. Results are what we really want the user to do click on one of the products resulting from the search and hopefully convert.
Filters
Opening with these detailed availability filter emphasises urgency and scarcity, further amplifying the badge overlays, size hover previews, and size dropdowns showing limited inventory.
Cart
Empty cart shows all time most popular products, those with the highest conversion rate, and chance of being added to cart together with a text link to the most popular collection that serves as a view all to the most popular products.
Figures
Figures should show campaign videos and imagery in a manner that is harmonized with all marketing channels. Caption can be below or overlayed and should detail all products shown in the image or video, increasing average order value.
Products
Products should show variants like size, clearly marking those sold out, and swatches communicating scarcity, demand, and urgency in a similar manner. Product imagery should have branded off-white background.
Sources
Simon
The Science of Design.
The Psychology of Thinking.
Bounded Rationality.
Complexity.
Mokyr
Sustained Growth.
Technological Progress.
Useful Knowledge.
Kahneman
Cognitive Ease.
Judgement under Uncertainty.
Prospect Theory.
Loss Aversion.
Thaler
Choice Architecture.
Intelligent Defaults.
Smart Disclosure.
Norman
User Experience.
Cognitive Engineering.
Emotional Design.
Beauty.
Ive
Human Interface Guidelines.
Craft.
Care.
Trust.