Design Systems

This video is from our Getting Started w/ Cornerstone Series.

What Are Web Design Systems

A web design system is a comprehensive collection of guidelines, principles, and assets that are systematically organized to facilitate the creation, maintenance, and evolution of your website. They serve as a centralized resource, providing a common language and framework for designers, developers, and other stakeholders involved in the creation or management process of the website.

Within the Cornerstone Builder, there are four key definitions that we will briefly explain below. The video at the top goes into more detail about each one including examples.

Templates

Managed instance by instance. Each instance is fully independent and is not connected to any other instances of the same name.

Components

Managed globally. Every instance is connected to every other instance so a change in one will change them all.

Components + Parameters

Managed globally. Every instance is connected to every other instance so a change in one will change them all. In addition, each instance can have its own custom fields (Parameters) that are managed on an instance by instance basis allowing you to separate global controls from instance controls. Sometimes referred to as Hybrid Components.

Components + Parameters w/ Pre-Fab Enabled

The same as above but pulling through baseline content.

Note: If a Parameter has an "initial" value set, then all Components will continue to use that initial value. So if you change the initial value in the Parameters of a Component, all uses of that Component that were using the initial value will also change. Additionally, if you have changed a Component's Parameter away from the initial value, that changed value will stay changed.

Which One Should I Use

Cornerstone allows you to go very deep in the structure of your very own design systems thanks to Components and Parameters. Alternatively, you can keep things simple by just using Templates. The ultimate type of design system you use will depend heavily upon your preferences, needs, and end-product goals.

If you are looking for help getting started with the most advanced Cornerstone Design Systems, we encourage you to check out Personify. We’ve done all the heavy lifting by including four custom websites, over 200 Custom Elements powered by Components and Parameters, over 90 expertly designed templates, and more.

Summary

By establishing and maintaining a design system, you can streamline design and development processes, foster collaboration among teams, reduce inconsistencies, and ultimately deliver better, more cohesive websites.