# GitLab · Design system migration spec

> Source: https://about.gitlab.com  ·  Curated by OpenDesign  ·  en

> Worth including as a benchmark for modern enterprise SaaS design, effectively balancing a bold brand identity with a highly functional, content-heavy interface.

## 1. Identity DNA

GitLab's design system operates as an enterprise command center for software delivery, translating complex orchestration into a clean, legible interface. The system is built on the principle of high-contrast clarity, where every visual decision serves the goal of reducing cognitive load in a developer-focused environment.

**One-liner:** GitLab is an intelligent orchestration platform for DevSecOps, positioning itself as a secure, all-in-one solution for enterprise software delivery.
**Keywords:** DevSecOps · Enterprise · Agentic AI · Orchestration · Platform
**Analogy:** An enterprise command center for software delivery

## 2. Color

The color system is defined by its stark restraint: a foundation of ink black and white, activated by a vibrant orange accent used with deliberate economy. This creates a professional, high-contrast canvas where color signals action and status without visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F1F5` | card background |
| `--bg-quiet` | `#1F1C2E` | quiet area |
| `--ink` | `#171321` | body text |
| `--ink-soft` | `#74717A` | secondary text |
| `--muted` | `#E8E7EB` | placeholder |
| `--muted-soft` | `rgba(255, 255, 255, 0.15)` | weak hint |
| `--accent` | `#FC6D26` | single accent |
| `--line` | `rgba(232, 231, 235, 1)` | divider |

**Color principle:** Clean, high-contrast UI with a striking orange accent on a predominantly light background, utilizing dark surfaces for emphasis.

The principle is one of functional contrast, where the orange accent is a strategic tool for interaction, not a decorative element.

## 3. Typography

Typography is handled with a geometric sans-serif that communicates modernity and precision, avoiding any playful or rounded qualities. Headings are set at a high weight to establish a clear hierarchy, while body text maintains a consistent, readable line-height.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 660 | -2.88px | Hero headline |
| display-lg | 64px | 1.0 | 660 | -1.92px | Section headings |
| display-md | 32px | 1.125 | 660 | -0.64px | Card titles |
| body | 16px | 1.5 | 400 | 0 | Default text |
| body-sm | 14px | 1.5 | 400 | 0 | Helper text |

**Type rules:**
- Tight letter-spacing on large display sizes for a bold, modern feel
- High font weight (660) for headings to establish strong visual hierarchy
- Consistent line-height of 1.5 for body text to maintain readability

## 4. Spacing

A strict 4px base grid establishes a rhythmic foundation, ensuring all components and spacing progressions are mathematically harmonious.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with standard spatial progression for components and layout

## 5. Surfaces

Depth is conveyed through a carefully layered shadow system on a predominantly light background, with subtle opacity reductions for larger offsets. Feature highlights and key content are isolated on dark surfaces, using a single-pixel border for crisp definition.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 3px 7px 0px rgba(0, 0, 0, 0.05)
  - 0px 13px 13px 0px rgba(0, 0, 0, 0.04)
  - 0px 29px 17px 0px rgba(0, 0, 0, 0.03)
- **Borders:** 1px solid #E8E7EB

## 6. Layout

The layout skeleton is a multi-column grid centered within a flexible container, designed to accommodate varied content blocks. It provides a structured framework that can expand to full-width sections, like the hero, without breaking the underlying rhythm.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Multi-column grid layout with a centered container and flexible content blocks

## 7. Motion & Interaction

Motion is purposeful and restrained, with discrete patterns for different feedback types. Interactive elements like buttons employ an elastic easing curve for a tactile response, while state changes use smooth, timed transitions.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.34, 1.56, 0.64, 1)`
- **Patterns:**
  - Elastic/overshoot easing for interactive elements (buttons, links)
  - Standard background-color transitions (0.2s)
  - Transform-based hover effects (0.3s)

- **Hover:** Background color change or transform (overshoot easing)
- **Click:** Immediate feedback via background-color transition
- **Transition:** Smooth color and background-color transitions with varied durations (0.2s to 0.3s)
- **Keyboard:** Standard focus indicators for interactive elements

## 8. Voice & Don'ts

The editorial voice is confident and direct, matching the interface's authority. It favors short, benefit-driven headlines and clear, action-oriented calls to action, avoiding jargon and passive phrasing.

- **Tone:** Confident, authoritative, and direct
- **Headline style:** Short, punchy, and benefit-driven (e.g., 'Ship faster. With trust.')
- **CTA style:** Action-oriented and clear (e.g., 'Try for free', 'Request a demo')
- **Avoid:** Jargon without context / Overly formal corporate language / Ambiguous or passive phrasing

### Don'ts
- ❌ Don't use low-contrast text — screenshot shows a stark black (#171321) on white (#FFFFFF) for maximum readability.
- ❌ Don't use playful or rounded typography — screenshot shows a structured, geometric sans-serif system.
- ❌ Don't rely on a single color for all states — screenshot shows an orange (#FC6D26) accent used sparingly alongside black and white.
- ❌ Don't use excessive drop shadows — screenshot shows only very subtle, layered box shadows on cards and popups.
- ❌ Don't use a rigid grid for everything — screenshot shows a flexible grid that accommodates a full-width hero section.
- ❌ Don't use a light background for feature highlights — screenshot shows dark (#1F1C2E) surfaces to create visual contrast and focus.

The system deliberately avoids low-contrast text, playful typography, and the overuse of its own orange accent, prioritizing function and clarity over decorative expression.

## System Prompt (paste into AI tool)

```
GitLab's visual system is a clean, enterprise-grade SaaS aesthetic defined by high-contrast typography and a striking orange (#FC6D26) accent. It uses a geometric sans-serif (GitLab Sans) for a modern, developer-focused feel, set against a primary white (#FFFFFF) background with dark (#1F1C2E) feature cards for emphasis. The layout relies on a strict 4px base grid and generous spacing to maintain professional clarity. Key hex colors are #171321 for ink, #74717A for muted text, and #F2F1F5 for soft backgrounds. Critical donts include: never use low-contrast text, avoid playful typography, and never overuse the orange accent color. The system prioritizes bold, benefit-driven headlines and clear, action-oriented CTAs.
```