Navigating Pajamas

Our design system is broken down into the following sections:

Foundations

Foundational items communicate the opinionated way in which basic visual design attributes, elements, and concepts come together to create a distinct GitLab personality that’s expressed in the UI. For example, color, typography, and iconography.

Components

A component is a UI element that serves a singular purpose or function. Two or more simple components can combine to form a composite component that still has a single function. For example, an avatar, button, or combobox.

Patterns

A pattern combines components and/or content elements into a repeatable, consistent group that has a shared purpose, content association, or both. For example, filtering, forms, or navigation.

Objects

An object is a conceptual building block or concept that defines how we think about something independent of its visual representation or interaction model. For example, a job, merge request, or repository.

Data visualization

A data visualization pulls insights from a data set into a narrative, allowing a user to explore data and discover insights.

Content

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

Usability and interaction

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