Why'd we create a design system?

The benefit of a design system is being able to rapidly design and develop websites and applications that are consistently styled and functional. The speed of development comes from the reusable components; since the system has been defined ahead of time, repeatable code can be created once that is then reused across all applications. From a design perspective, more time can be spent prototyping and user testing, rather than pushing pixels.

The design team set out to write the visual guidelines (colors, typography, layout) as well as spec out UI and chart components (our design system was unique in that it was made specifically for data products). We had to take into special consideration a color palette that could work well with data visualizations, particularly when it comes to accessibility standards. Our typography rules are also directed toward common dashboard practices.

Check out Arc here (new site to come): http://opensrc.axisgroup.com/arc-design/
* This is still the MVP of the design system; a future release is in flight.

(In case you're wondering what a design system is...)

A design system is a framework for designing and developing solutions at scale according to a unified set of design guidelines and principles. Typically, the phrase "design system" refers specifically to the user interfaces of digital products like websites and software applications. Design systems are composed of two facets: design guidelines and reusable software components.

‍Design guidelines are predetermined rules on how interfaces using a system should look and function. These rules cover stylistic choices, such as typography, color, and layout, as well as functional choices, such as the behavior of interactive components like buttons and dropdown menus.

‍Reusable software components are pieces of code that reflect the rules of the system. On the style side, this may include code that implements the typography, color, and layout schemes into applications. On the functional side, the code include pre-built widgets for the components defined in guidelines. Examples would include ready to use buttons, dropdowns, and charts.