All terms

CRO Glossary

Design System

A shared library of reusable UI components, patterns, and standards that ensures visual and functional consistency across a product.

A design system is the set of documented components (buttons, forms, modals, typography, color tokens) and rules that designers and engineers use to build interfaces consistently. In the context of experimentation, it matters because it directly affects how fast and how reliably teams can build and ship test variants — a mature design system means a new CTA style or layout variant can be assembled from existing, pre-approved components rather than built from scratch.

Well-governed design systems also reduce the risk that a winning test variant introduces inconsistencies elsewhere in the product, since components are shared and centrally maintained rather than duplicated per page. This is especially relevant for server-side or full-stack experimentation, where variants need to be production-quality rather than throwaway JavaScript overlays.

The flip side is that rigid design systems can slow experimentation velocity if every new test idea requires a formal component request or design review. Teams that experiment heavily often maintain a lightweight 'sandbox' layer within their design system specifically for test variants, so they can iterate quickly without polluting the core library with one-off styles.

Example: a product team wants to test five different button styles for a checkout CTA. Because their design system already defines button size, color, and state tokens, engineers can produce all five variants in an afternoon instead of a multi-day design and build cycle.

Related terms

See this in the wild

ABWatcher watches how top teams apply design system.

Live A/B tests at 1,000+ high-converting brands, with plain-English hypothesis and takeaway.