The purest design systems start from the most basic pieces and principles and then build from the ground up. This kind of system starts with establishing colors, fonts, and smaller components (like buttons and icons) and then uses those smaller pieces to build larger, more complex components (like tables and navigation menus). Done well, these design systems are extremely consistent in their use of patterns and their look & feel. You may be familiar with some of these design systems like Google's Material Design or the Carbon Design System. While these design systems are very custom and consistent, they take a lot of time, money, and effort to put together.

With large companies like Google taking the time and money to develop an extensive design system and make it publicly available, it makes sense that many companies would skip the overhead costs of developing their own and simply adopt an existing, proven system. This usually works best for applications that are being custom built with tools managed by the same company that created the design system. It's not very customizable for various brands, but it's consistent and updated automatically.

In smaller businesses, it's common to see design systems that are built from an existing application or design system in use and then altered to adopt the company's branding. This is what we've done at BYU. To make using Brightspot easier for designers and developers on campus, the Design System was created to display the components and features available.

As sites are being built in Brightspot, it's necessary to make changes in Brightspot that reflect our brand—primarily the colors, logos, fonts, and the web theme. The design system will need to be updated as changes are made in Brightspot (and vice versa), but the tools we've chosen should make those updates automatic for campus designers and developers.

Because BYU's branding is already established at brand.byu.edu, a component library was created in lieu of a "style guide" (which often contains both branding and how to implement it on various components). Component Libraries show the various components in a design system. In this case, our component library shows a demonstration of the different components in Brightspot with the BYU branding already implemented. This site is primarily intended for those developing in Brightspot to see the options available for content display and where they can be found in Brightspot's management dashboard, along with suggested best practices.

Pattern libraries are collections of user interface (UI) designs that can be used by designers to build the designs for digital products. Our pattern library is built in Adobe XD, where it can be automatically updated as needed. It contains all the components from the Component Library, as well as icons, fonts, and colors.

Once you have access to the library, you'll be able to open the library in the XD Assets panel. You can find more information on using Asset Libraries through Adobe's website.

Note that the pattern library uses the university's official web fonts, Public Sans (available for free at https://public-sans.digital.gov/) and Ringside Narrow SSm (licenses can be purchased through natalie_miles@byu.edu). You will need those fonts installed for everything to display properly.

Request access to the pattern library by sending the request with your name and Net ID to uxoit@byu.edu.