Design system structure

Our design system is broken down into the following sections:


Foundations represent perceptual patterns. These are less tangible aspects of the design system. Together they create a certain aesthetic for the product. Examples include colors, typography, and icons.


Components are the reusable building blocks of the interface. Examples include buttons, tabs, and input fields.


Regions are areas of the application that are formed by combining multiple components. Examples of this include the global header and contextual sidebar.


Content includes documentation relating to our writing style. This includes the tone and voice of the brand, as well as common grammar guidelines.


Usability guidelines include documentation that affects the ease-of-use for different types of users. This includes accessibility and internationalization.


Our resources section contains relevant and useful links that aide in the creation of our design system, as well as GitLab design as a whole.