Pajamas

# Pajamas — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by GitLab. "Pajamas" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Pajamas
**Owner:** GitLab
**Official documentation:** https://design.gitlab.com/
**Visual character:** DevOps-lifecycle pragmatism: pipeline greens and reds carry real meaning, GitLab Sans keeps 14px UI legible across a sprawling product.

---

## Summary

DevOps-platform design system covering planning, source, CI/CD, and security in one surface.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand Purple | `#7759c2` | `--gl-color-purple-500` | GitLab brand accent |
| Action Blue | `#1f75cb` | `--gl-color-blue-500` | Primary actions and links |
| Text | `#28272d` | `--gl-text-color-default` | Primary text |
| Subtle Text | `#737278` | `--gl-text-color-subtle` | Secondary text |
| White | `#ffffff` | `--gl-background-color-default` | Surfaces |
| Gray 10 | `#fbfafd` | `--gl-color-gray-10` | Subtle background |
| Border | `#dcdcde` | `--gl-border-color-default` | Borders |
| Danger Red | `#dd2b0e` | `--gl-color-red-500` | Errors and failed pipelines |
| Success Green | `#108548` | `--gl-color-green-500` | Success and passed pipelines |
| Warning Orange | `#ab6100` | `--gl-color-orange-500` | Warnings |

## Typography

- **Body:** GitLab Sans — weights 400, 500, 600, 700 — `'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- **Mono:** GitLab Mono — weights 400 — `'GitLab Mono', 'JetBrains Mono', 'Menlo', monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `28px` | `36px` |
| heading-2 | `21px` | `28px` |
| heading-3 | `16px` | `24px` |
| body | `14px` | `20px` |
| sm | `12px` | `16px` |

## Spacing

Base unit: `8px (with 4px half-steps)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| base | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 1px 2px rgba(31,30,36,0.24)` |
| md | `0 2px 8px rgba(31,30,36,0.16), 0 0 2px rgba(31,30,36,0.16)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms ease` |

## Quick start (CSS)

```css
/* Pajamas — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://design.gitlab.com/ */

:root {
  /* Color */
  --gl-color-purple-500: #7759c2; /* GitLab brand accent */
  --gl-color-blue-500: #1f75cb; /* Primary actions and links */
  --gl-text-color-default: #28272d; /* Primary text */
  --gl-text-color-subtle: #737278; /* Secondary text */
  --gl-background-color-default: #ffffff; /* Surfaces */
  --gl-color-gray-10: #fbfafd; /* Subtle background */
  --gl-border-color-default: #dcdcde; /* Borders */
  --gl-color-red-500: #dd2b0e; /* Errors and failed pipelines */
  --gl-color-green-500: #108548; /* Success and passed pipelines */
  --gl-color-orange-500: #ab6100; /* Warnings */

  /* Typography */
  --font-body: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'GitLab Mono', 'JetBrains Mono', 'Menlo', monospace;

  /* Type scale */
  --text-heading-1: 28px /* line-height 36px */;
  --text-heading-2: 21px /* line-height 28px */;
  --text-heading-3: 16px /* line-height 24px */;
  --text-body: 14px /* line-height 20px */;
  --text-sm: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-small: 4px;
  --radius-base: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(31,30,36,0.24);
  --shadow-md: 0 2px 8px rgba(31,30,36,0.16), 0 0 2px rgba(31,30,36,0.16);

  /* Motion */
  --motion-default: 200ms ease;
}
```

## Origin

Pajamas is GitLab's design system, open-sourced in 2019 alongside GitLab's broader open-core philosophy. It powers the GitLab.com web app and self-hosted instances — the entire DevOps lifecycle in a single product surface.

## Governance

GitLab's central UX team owns Pajamas; the entire design-system development happens in the open through public issues, merge requests, and the same monthly release cadence as the rest of GitLab. Anyone can propose changes; the team reviews against documented criteria.

## Known for

- End-to-end devops coverage — the system documents patterns for issues, merge requests, pipelines, security scanning, and analytics in a coherent surface.
- Open governance taken seriously — every design decision is debated in public issues, every component proposal goes through the same MR review as code, and the team's working agreements are themselves public.
- Documentation as a product — the design.gitlab.com site is itself an example of how a documentation surface should be built.

## Underrated

- The handbook-driven culture spills into design — Pajamas's principles, content guidelines, and contribution process are documented at unusual depth.
- The empty-state and onboarding patterns for technical features (set up CI, configure security scanning) are useful references for any product asking users to do complex first-time setup.

## Watch out for

- Pajamas is built for GitLab's specific surface — repos, pipelines, issues. Patterns assume that kind of long-tail technical user; consumer products need translation.
- Visual identity is GitLab-orange-heavy; the brand is the surface's identity, not yours to lift.

## Components worth studying

- **Pipeline Visualization** — Branching pipeline graph showing stages, jobs, and status — the canonical reference for any DAG-style workflow visualization.
- **Merge Request UI** — The full code-review surface — diff viewer, threaded comments, approval state, CI status. A pattern reference for any review-flow product.
- **Filtered Search** — Composable search-bar with token-style filters (author:foo label:bar) — the reference for query-builder-style search input.

## When to choose Pajamas

Pick Pajamas as a study reference if you're building developer tooling that spans planning + execution + observability. The open governance model is itself the lesson — adopt the discipline, not just the components.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Pajamas by GitLab — DevOps-platform design system covering planning, source, CI/CD, and security in one surface. Character: DevOps-lifecycle pragmatism: pipeline greens and reds carry real meaning, GitLab Sans keeps 14px UI legible across a sprawling product. Use a primary colour near #7759c2, the typeface "GitLab Sans" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px (with 4px half-steps) base. Lean into what it's known for: End-to-end devops coverage — the system documents patterns for issues, merge requests, pipelines, security scanning, and analytics in a coherent surface. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Pajamas design system](https://design.gitlab.com/)
- [GitLab UI on GitLab](https://gitlab.com/gitlab-org/gitlab-ui)
- [GitLab handbook](https://handbook.gitlab.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/gitlab-pajamas) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._