GitLab Pajamas

---
name: gitlab-pajamas
description: Apply the GitLab Pajamas visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" GitLab Pajamas, mentions Pajamas, GitLab design system, GitLab UI, or describes purple-tinted neutral grays, #1f75cb confirm-action blue, severity color system (red-orange scale) — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# GitLab Pajamas Design System

GitLab's all-remote design system: a soft-purple-tinted neutral ramp (#3a383f text, #fbfafd subtle bg), #1f75cb confirm blue, semantic constructive/destructive color rules, GitLab Sans (Inter-derived) type at 14px, compact 4px-radius components, and a fully token-driven light/dark pair published as CSS custom properties in GitLab UI.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as GitLab Pajamas.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Pajamas, GitLab design system, GitLab UI, design.gitlab.com), or describes its traits: purple-tinted neutral grays; #1f75cb confirm-action blue; severity color system (red-orange scale); compact 14px developer-tool density; 4px radii and hairline borders; token-complete official dark mode.

## Design tokens

### Color palette

- --gl-background-color-default (neutral-0): `#ffffff` (--color-bg)
- --gl-background-color-subtle (neutral-10) — page wells, table hovers: `#fbfafd` (--color-surface)
- --gl-text-color-default (neutral-800); headings darken to neutral-950 #18171d: `#3a383f` (--color-text)
- --gl-text-color-subtle (neutral-600): `#626168` (--color-text-muted)
- blue-500 — confirm buttons, links, focus ring outer color: `#1f75cb` (--color-accent)
- blue-600 — confirm hover (active blue-700 #2f5ca0): `#2f68b4` (--color-accent-hover)
- --gl-border-color-default (neutral-100); strong border #bfbfc3 (neutral-200): `#dcdcde` (--color-border)
- red-500 — destructive buttons; danger text uses red-700 #a32c12: `#dd2b0e` (--color-danger)
- green-500 — constructive/success (text green-700 #306440): `#108548` (--color-success)
- orange-500 — warning (text orange-700 #894b16): `#ab6100` (--color-warning)
- purple-500 — GitLab brand accent used in marketing and data-viz: `#7b58cf` (--color-brand-purple)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- --gl-background-color-default dark (neutral-950): `#18171d` (--color-bg)
- --gl-background-color-subtle dark (neutral-900): `#28272d` (--color-surface)
- --gl-text-color-default dark (neutral-50); headings lighten to white: `#ececef` (--color-text)
- --gl-text-color-subtle dark (neutral-200): `#bfbfc3` (--color-text-muted)
- blue-300 — confirm action on dark; focus ring moves to blue-400 #428fdc: `#63a6e9` (--color-accent)
- blue-400 — hover step on dark: `#428fdc` (--color-accent-hover)
- --gl-border-color-default dark (neutral-700): `#4c4b51` (--color-border)
- red-200 — danger feedback text on dark: `#fcb5aa` (--color-danger)
- green-200 — success feedback text on dark: `#91d4a8` (--color-success)

### Typography

- Display / headings: Inter (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif) (ideal: GitLab Sans, premium — use Inter as the free substitute)
- Body: Inter (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif) (ideal: GitLab Sans, premium — use Inter as the free substitute)
- Mono / data: JetBrains Mono (fallback: Menlo, Consolas, monospace) (ideal: GitLab Mono, premium — use JetBrains Mono as the free substitute)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.25, letter-spacing 0
- Body: line-height 1.43, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 32, 48, 64 — 8px base grid with 4px half-steps; issue lists, diffs, and boards run compact 32–40px rows, 16px panel padding, and 24px between page sections — dense enough for code review, looser than a terminal.
- Border radius: sm 2px, md 4px, lg 8px, pill 999px — Base radius is 4px on buttons, inputs, and cards; badges and status chips are pills; avatars round fully (projects use 8px 'rounded square' avatars).
- Border treatment: 1px solid #dcdcde — Hairline neutral-100 everywhere: panels, table rows, diff gutters. Strong edges step to neutral-200 #bfbfc3; dark theme uses neutral-700 #4c4b51.

### Shadows

- none: `none` — Default — Pajamas surfaces are flat and bordered; elevation is exceptional
- overlay: `0 4px 12px rgba(5, 5, 6, 0.16)` — Dropdowns/modals via --gl-shadow-color-default rgba(5,5,6,0.16); geometry varies per component

### Layout

- Max content width: 1280px
- App frame: contextual left sidebar (collapsible, #fbfafd) plus breadcrumb top bar
- Content in a centered limited-width container for issues/MRs; full-width for boards and pipelines
- Lists and tables over cards: most objects render as bordered rows with leading status icons
- 16px page gutters; filters and actions align right in a single toolbar row

### Effects

- Semantic status icons (circle-check, circle-x, status-warning) in feedback colors index every list
- Feedback backgrounds use 50-level tints (blue-50 #e9f3fc, green-50 #ecf4ee, red-50 #fcf1ef) behind 700-level text

### Motion

- Easing: ease-in-out; durations 100ms / 200ms / 400ms
- Sidebar collapse, dropdown open, and toast slide at ~200ms; everything else is instant
- Skeleton loaders pulse for async panels
- Motion guidance: purposeful, brief, and skippable under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #fbfafd;
  --color-text: #3a383f;
  --color-text-muted: #626168;
  --color-accent: #1f75cb;
  --color-accent-hover: #2f68b4;
  --color-border: #dcdcde;
  --color-danger: #dd2b0e;
  --color-success: #108548;
  --color-warning: #ab6100;
  --color-brand-purple: #7b58cf;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-overlay: 0 4px 12px rgba(5, 5, 6, 0.16);
  --border-default: 1px solid #dcdcde;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
  --text-base: 14px;
  --leading-heading: 1.25;
  --leading-body: 1.43;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease-in-out;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Left contextual sidebar on subtle #fbfafd: 32px rows, icon + 14px label, active row gets a stronger background and bold text; top bar carries breadcrumbs and search
- **Hero:** In-product 'heroes' are empty states: centered illustration, 600-weight heading, subtle body text, and one confirm-variant button
- **Card:** gl-card: white, 4px radius, 1px #dcdcde border, no shadow; 16px padding with an optional header row; used sparingly — lists are preferred
- **Button (primary):** Confirm variant: #1f75cb fill, white 14px 600 text, 4px radius, 32px tall; hover #2f68b4, active #2f5ca0; focus shows a 2px blue-500 outer ring
- **Button (secondary):** Default variant: white fill, 1px #bfbfc3 border, neutral-800 text; danger variant fills #dd2b0e; 'tertiary' is borderless
- **Form fields:** 14px 600 label above, optional description text, then a white input with 1px #bfbfc3 border, 4px radius, 32px tall; focus ring blue; error text and border in red-500/red-700

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The merge-request widget aesthetic: stacked white panels with hairline #dcdcde borders, status icons in semantic green/orange/red circles, and one #1f75cb 'Merge' confirm button — CI state rendered as calm, bordered lists. Spend boldness here; keep everything else quiet.

## Do

- Use variant semantics — confirm (blue), danger (red), default (neutral) — rather than picking colors per feature
- Prefer bordered lists and tables to card grids; GitLab objects are rows
- Consume --gl-* CSS custom properties so the published dark theme comes free
- Pair feedback 50-tint backgrounds with 700-shade text for badges and alerts

## Don't

- Don't use brand purple for interactive elements — actions are blue, purple is brand/data-viz
- Don't use the retired pre-2018 UI values or hand-picked grays; the purple-tinted neutral ramp is part of the identity
- Don't elevate panels with shadows; Pajamas separates with borders
- Don't render danger text in red-500 on white — Pajamas reserves 500 for fills and uses red-700 for text

## Accessibility notes

- Pajamas targets WCAG 2.2 AA (it tracks 2.2 explicitly in its accessibility docs); text tokens are chosen per-surface — e.g. danger text is red-700 #a32c12 (5.9:1) while red-500 is fill-only
- The dark theme is re-picked, not inverted: actions shift from blue-500 to blue-300 and feedback text to 200-level tints to hold contrast on #18171d
- Focus rings use a two-part outline with --gl-focus-ring-outer-color blue-500 (blue-400 in dark) at 2px

## Reference sites

- Pajamas Design System: https://design.gitlab.com
- GitLab UI (token source): https://gitlab.com/gitlab-org/gitlab-ui
- Pajamas foundations: color: https://design.gitlab.com/foundations/color/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip gitlab-pajamas.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/gitlab-pajamas.json

Settings → Capabilities → Skills → Upload skill → gitlab-pajamas.zip