GitLab

---
version: alpha
name: GitLab-design-analysis
description: GitLab's Pajamas design language is a developer platform built on a warm orange primary and a deep indigo-purple secondary over neutral gray surfaces. The orange `#fc6d26` is the brand heartbeat, the purple `#7759e2` adds depth, and the interface keeps a calm, structured density suited to CI/CD and collaboration. Typography is clean and neutral, letting color carry the brand.

colors:
  primary: "#fc6d26"
  primary_dark: "#e24329"
  secondary: "#7759e2"
  secondary_dark: "#6d4aed"
  navy: "#292961"
  navy_deep: "#1f1e24"
  canvas: "#ffffff"
  surface: "#f0f0f3"
  surface_2: "#fafafa"
  fg_default: "#303030"
  fg_muted: "#525c69"
  border_default: "#dcdcde"
  border_strong: "#c4c4c8"
  link: "#1f75cb"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""GitLab Sans", -apple-system, "Segoe UI", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by GitLab (Pajamas)

## 1. Visual Theme & Atmosphere

Pajamas is a developer-first system with a warm, approachable personality — rare among dev tools. The orange `#fc6d26` primary and deep indigo `#7759e2` secondary sit against quiet gray surfaces, giving the dense CI/CD interface a human warmth. The tone is structured and calm, built for long sessions.

## 2. Color System

- **Brand orange** `#fc6d26` — primary buttons, active nav, brand moments.
- **Indigo** `#7759e2` — secondary actions, gradients, and illustrations.
- **Navy** `#292961` and `#1f1e24` — footers, headers, dark surfaces.
- Neutrals `#ffffff` / `#f0f0f3` / `#fafafa` with hairlines `#dcdcde`; text `#303030`, muted `#525c69`.

## 3. Typography

GitLab Sans (system fallback) with a restrained scale. Body at 14px/1.5, headings 600 weight at modest sizes. The system values clarity and scan speed over display drama — monospace is used extensively for code, shas, and branch names.

## 4. Components & Shape

Buttons are 4px-radius rectangles; primary fills orange, secondary uses an indigo outline. A signature orange-purple gradient appears in the logo and occasional illustration. Tabs, pills, and badges are compact with clear active states. Issues, MRs, and pipelines use colored status pills (open/merged/failed).

## 5. Layout & Spacing

A 4px base grid with 8/12/16/24/32 spacing tokens. The layout is two-tier: a left navigation sidebar and a dense content area with tabbed sub-navigation. Data tables and diffs are the highest-density regions and stay tightly packed.

## 6. Motion

Subtle and quick: sidebar items highlight, dropdowns fade, and status pills update with a brief color transition. Motion is functional and never decorative, keeping focus on the pipeline.