---
name: GitLab
description: "Worth including as a benchmark for modern enterprise SaaS design, effectively balancing a bold brand identity with a highly functional, content-heavy interface."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#171321"
  secondary: "#74717A"
  tertiary: "#FC6D26"
  neutral: "#E8E7EB"
  bg-soft: "#F2F1F5"
  bg-quiet: "#1F1C2E"
  muted-soft: "rgba(255, 255, 255, 0.15)"
  line: "rgba(232, 231, 235, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 660
    letterSpacing: "-2.88px"
  display-lg:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 660
    letterSpacing: "-1.92px"
  display-md:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.125
    fontWeight: 660
    letterSpacing: "-0.64px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  body-sm:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

GitLab is an intelligent orchestration platform for DevSecOps, positioning itself as a secure, all-in-one solution for enterprise software delivery.

*An enterprise command center for software delivery*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#171321`)** — uses `ink` token
- **Secondary text (`#74717A`)** — uses `ink-soft` token
- **Accent (`#FC6D26`)** — uses `accent` token
- **Muted (`#E8E7EB`)** — uses `muted` token
- **Borders (`rgba(232, 231, 235, 1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* 4px base grid with standard spatial progression for components and layout

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Filled primary button (black bg, white text) and outlined secondary button (transparent bg, black text)
- **card:** Dark bg (#1F1C2E) with white text, used for feature highlights and status updates
- **chip:** Interactive action chips within the chat widget interface
- **input:** Floating chat input field with a dedicated send icon
- **hero:** Full-width section with a prominent gradient background (pink/orange), large typography, and primary CTA

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```