AI-Ready eCommerce
Design System
Rigby Design System is the shared UI foundation behind the eCommerce projects we build: a Figma library and 70+ production-ready React components covering what an online store needs. Claude reads the same system, so AI designs new views with your components and your brand.
Build a storefront ready for millions of users in days
Rigby Design System covers every atom, molecule, organism and section you need for a production storefront, built once, audited for accessibility, and ready to skin to your brand.
By providing reusable foundations, design tokens and design system components, it helps us speed up both design and development, reduce repetitive work, and create consistent experiences across projects.
The system is built around eCommerce best practices, WCAG accessibility standards, and Baymard guidelines, helping us maintain a consistently high level of usability, accessibility, and overall product quality regardless of the project.
We built the system against WCAG 2.2 and the Baymard Institute guidelines.
Baymard studies how people shop online. Its recommendations come from more than 200,000 hours of usability testing with 18,000 users across 90 leading US and European sites, distilled into over 700 guidelines. 71% of Fortune 500 eCommerce companies work with that research. Your designers inherit choices that were tested on real shoppers.
New pages and features are built from reusable components, speeding up design and development.
Design tokens define the core visual language of the brand. Update the tokens once, and all connected components adapt automatically.
Designers, developers and AI tools work from the same system, keeping implementation aligned with design.
The same system supports multiple eCommerce projects and continuously evolves with every implementation.
Why do you need a Design System and what's inside?
The system acts as a single source of truth for how your storefront looks and behaves. It provides a shared foundation for designing and building consistent, high-quality eCommerce experiences faster, reducing repetitive work and improving collaboration between design and development.
For designers:
- Ready-made sections designed around common eCommerce use cases and best practices
- Flexible foundation for design tokens, colors, typography, spacing and other styles
- Reusable components and patterns
- AI-ready system that allows AI tools to generate and iterate on designs
For developers:
- 70+ React components, documented in Storybook with a live preview
- Built on Radix primitives and Tailwind v4, so the accessibility behaviour comes from libraries your developers trust
- Audited against WCAG 2.2
Production-ready components
Layers, from atoms to full sections
Accessibility audited
Built on open primitives
How is the component library structured?
Our component library follows the Atomic Design methodology, building complex eCommerce experiences from small, reusable elements. Modular structure lets us reuse proven patterns, maintain consistency, and build new eCommerce experiences faster.
The smallest building blocks: buttons, inputs, badges and icons. Every one is token-driven, themeable and WCAG-checked.
Simple combinations of atoms that work together as a functional element: quantity selectors, switch labels and menu items.
More complex components composed of atoms and molecules, such as product cards, navigation, filters, cart items or checkout elements.
Whole page sections including product listings, product carousels, product pages, carts and checkout sections.
Design new screens faster with an AI-ready Design System
Rigby Design System is structured not only for designers and developers, but also for AI. Its consistent architecture allows AI tools to understand the system, reuse existing components, and create new screens.
Clear naming, consistent component architecture and defined patterns make the system easy for AI to understand and navigate.
Colors, typography, spacing and other foundations are controlled through variables. AI can work with existing system values instead of introducing one-off styles.
The library already holds the screens an online store needs. The agent composes a new page from sections your team has approved.
Keep AI designs on-brand with the Rigby Design System Skill for Claude
We packaged the rules of the system as a skill for Claude.
It tells the agent how the library is built and how it expects to be used.
New pages, sections, and variations can be created much faster by prompting AI to work with existing components and patterns.
AI works within the rules of the Design System, reusing its components, styles and patterns. This keeps new designs consistent and reduces manual cleanup.
As the product evolves, new components, patterns, and rules can be added to the Design System, giving AI more context over time.
Add this design system to your project
Rigby Design System powers the eCommerce platforms we build, and it grows with every implementation. We audit what you have, adapt the system to your brand, connect it to your product, and set up the AI workflow around it.
Your designers keep using the system long after the project ends.
Frequently asked questions
How do you apply our brand to the design system?
Your brand lives in variables, so applying it is a change to a handful of values. Colors split into primitives, which hold your raw palette, and tokens, which say what each color is for. Typography is wired the same way, with font family, size, line height and font weight all controlled centrally. Change a brand color once and every connected component follows.
Why do we need a design system?
A design system is a set of ready-made components that every page of your store is built from. Your store stays consistent because every page uses the same buttons, cards and forms. New pages go live faster because your team builds them from existing parts. Fewer things break, because every part was tested on mobile and checked for accessibility before it went into the library. Designers and developers stay in sync, because both work from the same components. Without a design system, someone draws the same product card again on every project, a little different each time, and every new screen goes back through review from the start.
Can AI build a design system?
AI can generate components quickly, and the decisions underneath a design system still come from people. Naming, hierarchy, token structure and accessibility rules are judgment calls, and an agent given no rules produces a library that looks finished and falls apart on the second project. Where AI earns its place is extending a system that already exists, which is the workflow this page describes.
What makes a design system AI-ready?
A design system is AI-ready when its structure is explicit enough for an agent to read it and reuse what is already there. Consistent naming lets the agent find the right component. A defined hierarchy tells it to compose from existing parts. Every visual value stored as a variable means it uses your colors and type.
What is an eCommerce design system?
An eCommerce design system is a centralized set of design tokens, reusable components and page sections that a team uses to build every screen of an eCommerce platform. It covers the parts specific to selling online: the product card, the filter panel, the cart and the checkout step. A general UI library stops at buttons and forms, and an eCommerce design system carries the shopping screens as well.
What is the difference between a UI kit and a design system?
A UI kit is a file of components, and a design system is the set of rules for using them. A kit gives you buttons and cards to copy. A system adds the tokens behind those components, the hierarchy that says which one to reach for, the naming that keeps everything findable, and the documentation that turns all of it into a shared language for designers and developers.
Got a commerce
modernization challenge?
Let's talk
A 30-minute Commerce Future Session - tailored to your stack, your challenges, your roadmap. No pitch. Just perspective. No preparation needed on your side.
“Whether you're exploring migration, struggling with legacy complexity, or just want a second opinion - we're here.”