THE EMAIL SYSTEM

FIGMA'S EMAIL DESIGN SYSTEM

A robust and professional system for creating, optimizing and maintaining on-brand custom email designs

1 / 5

Features Pricing Other Products FAQs

Reduce Production Costs by 25%

Reduce production Time by 25-50%

Recover billable hours

Drastically Streamline Development

Easily manage optimization creative

600px optimized for
desktop & mobile scaling

We've created the most optimal single width design layout that is easy to use and highly legible on both desktop and mobile sizes.

Pre-sliced and ready to export

Interactive / clickable elements are designed as "pre-sliced" for easy export to your tool of choice. This is also a massive time saver for each project.

e-Commerce patterns

Because our email design system is based on our eCommerce system you will find tons of commerce specific components. This will give you flexibility and speed in creating specific email flows - like abandoned cart, order confirmation, sales or up-sell emails.

Add some flavor

We've created a unique set of section transition elements as well as vector elements that can be used as dividers.

Starter templates

We've included a page full of starting templates. This will help orient you to what you can begin creating with the system but also serve as ajumpin-off point for any new email or sequence.

design system features

We've thought through this design system to ensure we give designers everything they need to move fast and create amazing work - and left out all of the bloat and functionality you really don't need. It's taken us over a year and a half to get here.

Auto Layout Enabled

Every element is built with Autolayout ensuring an easy design experience.

Light / Dark Mode

Every component is setup with color variables allowing you tomove from light to dark modes with ease.

No Bloat

Unlike saas design systems we don't bloat the number of components - but instead give you all elements you need to make any experience you want.

Variants Galore!

Every component is built with its various states (inactive, active, error, logged in, logged out, etc)

600 px

One dimension to maintain! We've optimized the sizes of all our elements, type and components to work across desktop and scale down for mobile without loosing great usability and readability.

Image Ratio Swapping

Image ratio consistency is hugely important in eCommerce - so we created a unique approach.

Flexible

We've created multiple options and flexibility into all of our core components giving you ultimate design control.

Simple Workflow

We provide our favorite workflow process to ensure a smooth experience building with our system.

this system pays for itself on the first project.

Explore Pricing

Amazing pre-built options yet fully customizable.

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

3 / 5

Move from desktop  to mobile & easily configure to customer needs

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

3 / 5

Swap, adjust and done. Crazy flexible and adaptable components

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

3 / 5

Precisely built components and Auto Layout enabled.

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

5 / 5

Flexible options. No detail too small.

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

3 / 5

Quickly customize using the best UX patterns.
‍

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

4 / 5

Everything you need to design great commerce experiences.

Site redesign, creative direction + digital design system for a custom cabinetry brand.
Designed for Allure Commerce.

2 / 5

Find Hidden Issues

Optimize Quickly

Find Quick Wins

Find UX Friction

Improve Trust

Find A/B Test Ideas

Enable Higher Conversion

More

get back to design

design more.
produce less.

Reduce production time, increase profit, recapture previously unbillable hours, deliver faster and more consistent work, spend less time correcting, less time in QA, less time in development.

Explore Pricing

Options & Pricing

FEATURES

Careful attention to the basic eCommerce architecture you need from product cards to listing pages to checkout and beyond.

Our system is optimized for maximum usability from the start. We've created both desktop and mobile variations and specific patterns optimized for each screen and their various states.
‍

All the components and templates you need to get to design faster.

We've got you covered with complete screen templates and user flows for eCommerce experiences.

Packed with media features like Youtube and Vimeo players

Popular UI elements paired with auto layouts and responsive design settings, state changes and quick swapping component sets.
‍

Build Your Own

In addition pre-made starter components and templates we've created our system to truly be a 'Build your own' experience. Using our extensive library of components you can build virtually any commerce experience on any web platform.

A constantly growing and evolving library of amazing eCommerce UX & UI patterns

Our components provide your design teams with the fastest mode of eCommerce design production available.

Theme your entire system to your brand needs using color variables and type styles.

Adjust the pre-built color variables and type style to theme your system. Swap from light mode, to dark mode - you're in control.

THE SERVICES

Future reasons to love the Cart System

We’ll be incrementally improving and adding to the Cart System adding exciting new commerce patterns, components and user flows for various industries and popular 3rd party tools. And we’d love to hear from our customers as to what they want in future versions.

The best UI components

Popular checkout flows

Checkout for various product types

Popular 3rd party tools

Popular platforms

Various checkout processors

Exciting industry design ideas

PRICING

Individual

SINGLE USE LICENSE

Priced per seat

EXCLUSIVE BETA RELEASE -50% OFF

You work for a brand and want to create more efficient processes for yourself and others while keeping a tight control over the brand presentation and customer experience.
‍

$300 - BUY NOW

EXCLUSIVE BETA RELEASE -50% OFF

brand "Single Use"

You work for a brand and want to create more efficient processes for yourself and others while keeping a tight control over the brand presentation and customer experience.

$2,500 one time

EXCLUSIVE BETA RELEASE -50% OFF

brand "Single Use"

You work for a brand and want to create more efficient processes for yourself and others while keeping a tight control over the brand presentation and customer experience.

$2,500 one time

Other Cart System Products

EXCLUSIVE BETA RELEASE -50% OFF

CART SYSTEM - EMAIL DESIGN SYSTEM

Create and maintain on-brand, custom email designs with precision and speed utilizing our custom email design system. Pre-sliced elements make it easy to export your custom work. Out of the box - packed with accessible type and button sizes, over 80 unique components and custom vector elements and section dividers.

Explore The Email System

FREE WEEK TRIAL - LIMITED TIME

CART SYSTEM - COMPONENTS PLUGIN

Our Figma plugin delivers our amazing collection of eCommerce components directly into your project files. This plugin is perfect for the occasional eCommerce designer, CRO or growth specialist who needs toquickly build out an experience or mockup without the headaches and huge time costs involved.
‍

Explore The Plugin on Gumroad

FAQs

Can we create commercial sites with the Cart System?

The goal of The Cart System is to enable faster, better design for your end client customers while spending less time on repetitive design tasks and the painstaking efforts of creating each element and the various states. Each of our system offerings is subject to our licensing agreement, however, and there are restrictions you should be aware of prior to purchase.

Why not just customize my store within Shopify or another platform?

If you are or have a designer/developer on staff who can make solid, strategic e-Commerce design decisions and execute them well - then you can simply use your platform's builder. However, you will be introducing many potential issues such as: lack of easily accessed, archived design explorations or test ideas, lack of design source of truth for your brand among others.

Which eCommerce platforms is The Cart System for?

The Cart System is first and foremost an agnostic set of UI/UX elements and interactions but we have included and continue to add many platform specific elements for popular e-commerce platforms like Shopify and Adobe Commerce. The components, in general, can be utilized to design on most platforms but keep in mind that some functionality, especially in checkout, varies from platform to platform. As we build the system we will introduce specific UI for other platform options and perhaps standalone systems.

Is The Cart System only for Figma?

Currently the Cart System is built only for Figma, but if there is enough demand we may make it available for other modern design tools as well. Let us know your preference!

Can you create a custom design system for our business?

Yes, our extensive design system experience would allow us to create a custom system for your brand or business. If you are an e-Commerce brand we can leverage The Cart System as the foundation for your specific needs, dramatically reducing he costs involved.
‍
Please get in touch with us: info@artofthecart.com

built by
e-commerce designers for
e-commerce design teams & agencies.

We built The Cart System out of our own need to deliver tighter, more consistent work (and component libraries) to our clients & agency partners who want to get things done quickly but professionally.

And since eCommerce design is incredibly demanding with various states of components, selections, user types and platforms we needed a way to move faster and make sure we deliver all the elements - the ones that often go unaddressed or missed in the process.

So, over a year and a half we created a brand new workflow and design system for ourselves to do just that.

And, it has paid off big time.

We're blasting through wireframes in record time and getting into design much quicker.

System setup for color and typography is a breeze and shaves off many, many hours per project (not to mention frustration).

In the end you can choose to deliver to your clients entire design systems, only the components you used, or just the screens - allowing you and your team to wrap new sales and service opportunities around this new workflow.

We hope you enjoy - and please let us know which features you'd like to see in the future.

sign up for

NEWS & UPDATES

EXCLUSIVE BETA RELEASE -50% OFF

brand "Single Use"

You work for a brand and want to create more efficient processes for yourself and others while keeping a tight control over the brand presentation and customer experience.

$2,500 one time

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.