Gitlab hero border pattern left svg Gitlab hero border pattern right svg

Pajamas Design System

What is the Pajamas Design System?

Located at design.gitlab.com, the goal of Pajamas is to be the single source of truth for the robust library of UI components that we use to build the GitLab product, including usage and implementation guidelines.

As a fully implemented design system, Pajamas includes:

Why is Pajamas important?

Pajamas enables anyone to contribute towards GitLab. It allows Product, Engineering, UX Design, and Contributors to work together more seamlessly and improve our product faster.

It’s efficient.

It creates a cohesive product.

It helps GitLab communicate.

Who can contribute?

Everyone can contribute! Pajamas is a living system, meaning it continually evolves to support new UI components and also deprecate outdated components. For this evolution to be scalable, we encourage everyone to contribute ideas, designs, code, and bug reports.

External contributions can be particularly valuable, because GitLab Contributors have experiences and insights we may not have considered.

We have specific rules around design review.

When do we add a new component to Pajamas?

Not every component used in the GitLab product must be codified as part of the design system, because sometimes we create components that are relevant for only a specific use case in a distinct product area.

To learn more about when to add a new component to Pajamas, read our component lifecycle documentation.

What is the component development lifecycle?

The goal of this process is to make it easy to: submit new designs (including documentation), propose changes to existing designs, and translate component designs into built components.

To learn more about the stages of the component lifecycle, read our component lifecycle documentation.

Beautifying the GitLab UI

A design system is only valuable if it’s used consistently throughout the product it supports. Because Pajamas is a new design system, we have to catch up the existing product to using “single source of truth” Pajamas components.

To ramp up implementation, we commit to ensuring that:

How do we measure success?

There are two avenues of success in relation to a design system: adoption and goal achievement. Providing metrics for both adoption and goal achievement provides the organization with a tangible way to measure the overall success of a design system over time.

Adoption

The value of a design system is only fully realized when the organization ships product that uses its parts. A commitment to adopt is essential to ensuring that the design system achieves the goals highlighted in this document.

To measure adoption, we:

Goal Achievement

As design system adoption increases, we are able to measure the success of our goals, which can be evaluated regularly at major adoption milestones (0%, 25%, 50%, 75%, 100%).