What is a design system?

A design system is the primary resource that a user will produce using Theme Builder. It represents the collection of decisions that the user will make that will help achieve their vision for the look and feel of an application. Each decision that is made will result in a variety of CSS variables being updated and persisted in order to capture the decision. For example, a designer may begin a design system by selecting the colors, fonts, bevels and border styles (and more!) that are shared amongst an existing product family of their organization or they could blaze a fresh trail as they bring a brand new project to life. They may also include additional accessibility overlays to support users with specific types of impairments. This is all part of a design system.

As they say, "the proof of the pudding is in the eating". So once an author is satisfied with their design system, they'll want to try it out in their own environment. The design system can be exported from Theme Builder as CSS or JSON. This may then be imported into other design tools like Figma or into component libraries or even directly into application repositories. Once an application or component library has been enabled to consume a Theme Builder design system, future updates (perhaps adding a sub theme or addming a new impairment overlay) should be relatively trivial.