GitLab Brand Design System Deep-Dive

1. Brand Overview

GitLab’s brand feels unapologetically product-first. The whole visual language is designed for developers and enterprise buyers who want clarity, control, and a sense of technical rigor. There’s no fluff here — the system is clean, dark-accented, and typography-led. It doesn’t try to be “fun” in the way startup brands often do. Instead, it leans on minimalism, contrast, and a restrained palette.

The core vibe: confident, focused, and a little austere. The primary brand color isn’t a loud orange (despite the fox logo heritage) — it’s a deep near-black (#171321). That choice says “serious platform”. It pairs with white for maximum contrast, and a single controlled accent purple (#7759c2) for brand highlights. Secondary neutrals cover the range from near-black to mid-grey, with very few saturated “web colors” bleeding in. Links and hover states bring in a bright blue (#0000ee / #1883fd on hover) — a functional, not decorative, choice.

The typography reinforces this discipline. It’s a custom “GitLab Sans” with a fallback stack that keeps system compatibility: Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial. Weights are heavy where hierarchy matters (660 is the go-to), otherwise a steady 400 for body. The type scale is tight and functional — no oversized hero headlines spilling over the viewport.

Spacing is based on an 8px grid, with a few oddball values for specific components (11px is surprisingly common). Corners are slightly rounded (4px for most UI, 12–16px for cards), with occasional full circles (100px) for avatars or media. Shadows are rare and subtle, used mainly for cards and overlays, not as a core depth language.

In short: GitLab’s design system is an engineer’s brand system. Every pixel feels intentional, every color tightly controlled. It’s a system that says “this is a serious tool for serious work” — but still with enough visual polish to feel like a modern SaaS product.

2. Color System

2.1 Primary Colors

Primary: #171321 (rgb(23, 19, 33)) — This is the anchor. It’s used for headers, navigation, and primary text in dark contexts. Psychologically, it’s closer to a very dark purple than pure black, which makes it feel less harsh. It’s stable, grounded, and pairs well with both white and the accent purple.

Secondary is actually the same #171321 — there’s no separate secondary hue. This reinforces the minimal palette philosophy.

Accent Purple: #7759c2 — Used in logo details, privacy notice links, and some buttons. It’s a mid-tone purple that plays well against the dark primary without screaming for attention.

Competitors like GitHub lean on pure black/white with green/blue accents. GitLab’s purple accent is more distinctive in the devtools space.

2.2 Complete Palette

2.3 Color Relationships

The system is high-contrast by default. #171321 on #ffffff is well above WCAG AAA requirements. Even the accent purple #7759c2 on white is accessible for most text sizes. Links (#0000ee) are the classic default blue — instantly recognizable, though not brand-unique.

In dark contexts, white on #171321 is crisp, with purple accents providing a softer contrast than pure blue. Hover states often switch to #1883fd (rgb(24, 131, 253)), which is brighter and signals interactivity.

There’s no separate dark/light mode — the palette works in both, but the site chooses mode per section.

2.4 Usage Guide

• Primary surfaces: #171321 background with white or purple text.
• Secondary surfaces: White background with near-black text.
• Links: Always #0000ee default, #1883fd on hover.
• Accents: Purple only for brand/logo-related elements or special CTAs.
• Avoid: Introducing unapproved hues. The system breaks if you throw in random reds or greens (except the one green border for success).
• Borders: Use light grey on light surfaces, semi-transparent white on dark.

3. Typography

3.1 Font Families

Primary typeface: GitLab Sans — custom.
Fallbacks: Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial.
No Google Fonts or Adobe Fonts used — likely self-hosted.

Weights in play: 400 (regular), 600, 660 (semi-bold+), 700 (bold).

3.2 Type Scale

Here’s the complete extracted set:

3.3 Hierarchy

GitLab runs a tight scale. The jump from 64px to 50px to 40px keeps headers proportionate without overwhelming content. Mid-sizes (24–20px) handle subheadings and UI labels. Body text is 16px with generous 1.5 line height. Captions drop to 14–12px, but never smaller — respecting readability.

The heavy 660 weight for headings means they can afford smaller sizes without losing emphasis. Buttons use the same typeface and weights, making them feel integrated with the content.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid — but with some off-grid values for specific UI.

4.2 Layout

Breakpoints are dense — from 400px up to 1400px, with many micro-breakpoints (425px, 426px, 530px…). This suggests fine-tuned responsive adjustments rather than a rigid 3-tier system.

Likely container max-widths adjust around 1170px–1280px for desktop.

5. Visual Elements

Border Radius

4px is the workhorse. Larger radii are reserved for big components, 100px for perfectly round.

Shadows

Shadows are minimal:

• rgba(209, 208, 210, 0.5) 0px 8px 50px -16px — Cards
• rgba(0, 0, 0, 0.1) 0px -8px 20px 0px — Overlays
• Rare decorative shadows for specific components.

Borders

Borders are hairline (1px), color-coded for context. On dark surfaces, borders are semi-transparent white (rgba(255,255,255,0.1)).

6. Components

6.1 Buttons

Secondary Button (light background):

• Default:

  • BG: #ffffff
  • Text: #171321
  • Padding: 11px 16px
  • Radius: 4px
  • Border: none

• Hover:

  • Text: #1883fd
  • BG: #ffffff
  • Border: 1px solid #d1d0d3
  • Shadow: rgba(0,0,0,0.12) 0px 8px 32px
  • Transform: translate(8px)

• Active:

  • Outline: 2px solid #101010
  • Text: #ffffff
  • BG: #2c6415
  • Border: 1px solid rgba(162, 192, 169, 0.5)

• Focus:

  • Outline: 2px solid -webkit-focus-ring-color
  • BG: #fafafa
  • Text: #122124

Primary Button (dark background):

• Default:

  • BG: #171321
  • Text: #ffffff
  • Border: 1px solid #171321

• Hover: same as secondary hover (inverts to white bg, blue text).

6.2 Links

Variants:

1. Blue link: #0000ee → hover #1883fd
2. Grey link: #74717a → hover #1883fd
3. Dark link: #171321 → hover #1883fd
4. White link: #ffffff → hover #1883fd
5. Purple link: #7759c2 → hover #1883fd
6. Light purple link: #a989f5 → hover #1883fd

No underlines by default, except maybe on focus.

6.3 Forms

Text input:

• Default:

  • BG: white
  • Border: none
  • Padding: 1px 2px

• Focus:

  • Border: 1px solid #000000
  • Box-shadow: #2196f3 0px 0px 1px
  • BG: #1eaedb
  • Text: white

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #171321;
  --color-white: #ffffff;
  --color-purple: #7759c2;
  --color-grey-light: #a2a1a6;
  --color-black: #000000;
  --color-grey-mid: #74717a;
  --color-blue-link: #0000ee;
  --color-grey-dark: #555555;
  --color-blue-hover: #005fcc;
  --color-hover-grey-1: #68656e;
  --color-hover-grey-2: #65626b;
  --color-border-light: #d1d0d3;
  --color-border-green: #32ae88;

  /* Typography */
  --font-family-primary: "GitLab Sans", Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-heavy: 660;
  --font-weight-bold: 700;

  /* Spacing (px) */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13.008px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-82: 82px;
  --space-96: 96px;
  --space-118: 118px;
  --space-120: 120px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 100px;

  /* Shadows */
  --shadow-card: rgba(209, 208, 210, 0.5) 0px 8px 50px -16px;
}

8. AI Coding Assistant Prompt

# GitLab Design System Specification

You are a GitLab design expert. Build UIs matching their visual language exactly.

## Brand Context
GitLab’s design system is minimal, high-contrast, and typography-led. It uses a deep near-black primary, white backgrounds, and a single purple accent. Spacing is strict 8px grid with occasional exceptions. UI is serious, functional, and avoids unnecessary decoration.

## Color Palette
- Primary: #171321 — Navigation backgrounds, primary text on light
- White: #ffffff — Backgrounds, text on dark
- Brand Purple: #7759c2 — Logo, brand accents
- Grey Light: #a2a1a6 — Secondary text, dividers
- Black: #000000 — Body text, icons
- Grey Mid: #74717a — Muted UI text
- Link Blue: #0000ee — Inline links
- Grey Dark: #555555 — Icons
- Hover Blue: #005fcc — Link hover/focus
- Hover Grey 1: #68656e — Hover backgrounds
- Hover Grey 2: #65626b — Hover backgrounds
- Border Light: #d1d0d3 — Input/button borders
- Border Green: #32ae88 — Success borders

## Typography
Font: "GitLab Sans", Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1    | 64px | 660    | 1.06        | Page titles |
| H2    | 50px | 660    | 1.04        | Section titles |
| H3    | 40px | 660    | 1.05        | Subsections |
| Body  | 16px | 400    | 1.50        | Paragraphs |
| Button| 18px | 660    | 1.25        | Primary/secondary |
| Caption| 14px| 400    | 1.57        | Meta text |

## Spacing & Grid
Base: 8px grid  
Scale: 1, 2, 4, 5, 6, 8, 10, 11, 12, 13.008, 16, 20, 24, 32, 48, 64, 82, 96, 118, 120px  
Buttons: padding 11px 16px  
Cards: padding 16–32px

## Border Radius
- none: 0px — tables
- sm: 2px — small controls
- md: 4px — buttons, inputs
- lg: 12px — cards
- xl: 16px — larger cards
- full: 100px — avatars, circular buttons

## Shadows & Depth
- Card: rgba(209, 208, 210, 0.5) 0px 8px 50px -16px
- Minimal use — prefer borders for separation

## Components

### Primary Button
Default:
```css
background: #171321;
color: #fff;
padding: 11px 16px;
border: 1px solid #171321;
border-radius: 4px;
font-weight: 660;
font-size: 18px;
```
Hover:
```css
background: #fff;
color: #1883fd;
border: 1px solid #d1d0d3;
box-shadow: rgba(0,0,0,0.12) 0px 8px 32px;
transform: translate(8px);
```
Focus:
```css
outline: 2px solid -webkit-focus-ring-color;
```
Active:
```css
background: #2c6415;
color: #fff;
border: 1px solid rgba(162, 192, 169, 0.5);
```

### Secondary Button
Same as primary but default background white, text #171321, no border.

### Navigation Links
Default: color varies (blue, grey, dark, white)  
Hover: always `#1883fd`, no underline.

### Input Fields
Default:
```css
background: #fff;
color: #000;
border: none;
padding: 1px 2px;
```
Focus:
```css
border: 1px solid #000;
box-shadow: #2196f3 0px 0px 1px;
background: #1eaedb;
color: #fff;
```

### Cards
Background: white  
Radius: 12–16px  
Shadow: card shadow above  
Padding: 16–32px

## Layout & Responsive Rules
- Max width: ~1170–1280px desktop
- Padding: 16px mobile, 32px desktop
- Breakpoints: 400px, 425px, 530px, 576px, 768px, 1024px, 1200px, 1400px

## Interaction Rules
- State changes: 150ms ease
- Focus rings visible and 2px
- Hover transforms only on buttons

## DO
- Use only defined palette
- Maintain 8px grid
- Use GitLab Sans across all UI
- Keep hover/active states consistent
- Maintain high contrast for text

## DON'T
- Add new colors
- Mix sharp and rounded corners inconsistently
- Remove focus outlines
- Use heavy shadows

## Code Examples

Primary Button:
```css
.btn-primary { background:#171321; color:#fff; padding:11px 16px; border-radius:4px; font-weight:660; font-size:18px; }
.btn-primary:hover { background:#fff; color:#1883fd; border:1px solid #d1d0d3; box-shadow:rgba(0,0,0,0.12) 0px 8px 32px; }
```

Card:
```css
.card { background:#fff; border-radius:12px; padding:16px; box-shadow:rgba(209,208,210,0.5) 0px 8px 50px -16px; }
```

Input:
```css
.input { background:#fff; color:#000; border:none; padding:1px 2px; }
.input:focus { border:1px solid #000; box-shadow:#2196f3 0px 0px 1px; background:#1eaedb; color:#fff; }
```

9. Summary

TL;DR — GitLab’s design system is disciplined, minimal, and serious. The palette is tight, typography consistent, and spacing grid strict. It’s a system built for clarity and trust, not playfulness.

Brand Keywords:

• developer-serious
• high-contrast
• minimal-functional
• purple-accented