What is Vega?

Vega is Heartland’s Design System.

A Design System is a collection of reusable design components, built with a central methodology to bring unity to designs within a brand.

With these elements, designers and developers can reuse the basic pieces to be able to create a consistent voice and brand identity, using these building blocks to create more elaborate designs.

While it has many similarities with a Design Library, which is a collection of assets which can be reused manually by individual designers, a Design System is more than that. A Design System provides a set of standards which should be adhered to create a central identity.

The real difference between a library and a Design System, is that the latter is not simply a set of tools, but encompasses the documentation and standards that align with the aforementioned assets.

Atomic Design

Vega follows the principles of Brad Frost’s Atomic Design. In this approach we break apart elements of web design into sets and subsets of hierarchical principles. Vega makes use of the following pieces:

  • Atoms - Atoms are the smallest units of the design. Examples of these include colors, fonts, icons, spacing, and more.
  • Molecules - Molecules are simple collections of atoms which start creating something a little more complex. An example of a molecule would be a button on a web page. It is a composite of several items- the shape, the color, some text, and various other properties, such as spacing of the text from the border, and possibly various different states (e.g. default, hovered, focused, pressed).
  • Organisms - Organisms are even more elaborate, where various molecules are put together to create a responsive object, such as a three-panel carousel, which may contain a frame, text, a button, and has many different actions which will occur when interacting with it.
  • Templates - Templates are fully constructed collections of organisms, which may be used and reused in different places. An example of a template might be a fully constructed web form, or shopping cart.
  • Pages - Pages are what they sound like; they are full web pages which may include any collection of templates, or extra organisms in them. These are fully-built designs which may be reproduced and modified for different purposes

Design Tokens

Design tokens are individual sources of information which enable construction and maintenance of Vega. These are constructed of basic sets of values which can be communicated between tools such as Figma and to development teams who construct Web Components, using tools such as Stencil, and Tailwind CSS.

Design Tokens contain a wide range of information which is passed between different systems and users. These include everything from color information, typically in both Hex and RGB value, opacity, to animations (using Bezier coordinates). For more elaborate molecules and organisms, more detailed information will be included. The detail is especially important when passing information between Figma and backend developers who use this data for creating working web components which can become available to front-end developers.

A Single Source of Truth

When designers and developers need to use elements from Vega, they can come to this website as a central repository of all information regarding the use of Vega. Within this there are various guides, including a set of principles by which components and elements should be used.

Designers will find access to not only the individual tokens for design purposes (colors, typography, iconography, spacing, etc.), but also to a set of best practices for using these elements. Access will be provided to existing components and styles within Figma. Methods will also be provided for submitting new designs into the Vega system.

Developers will be provided with access to the source code, both on the website, but also through Storybook.