CURATED · OPEN · FREE

GitLab

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

devdevops

↓ Download design system (16 MB)Open in OpenDesign

Visit: https://about.gitlab.com

📦 Browse pack contents →

Identity DNA

DevSecOpsEnterpriseAgentic AIOrchestrationPlatform

An enterprise command center for software delivery

Color

#FC6D26Accent

#171321Ink

#74717AInk soft

#FFFFFFBG

#F2F1F5BG soft

#1F1C2EBG quiet

#E8E7EBMuted

rgba(232, 231, 235, 1)Line

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

Typography

geometric-sans · monospace

display96px · 660
display-lg64px · 660
display-md32px · 660
body16px · 400
body-sm14px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

1px solid #E8E7EB

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.34, 1.56, 0.64, 1)easing

Elastic/overshoot easing for interactive elements (buttons, links) · Standard background-color transitions (0.2s) · Transform-based hover effects (0.3s)

Background color change or transform (overshoot easing) · Immediate feedback via background-color transition

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

Voice & Don'ts

Tone Confident, authoritative, and direct
Headlines Short, punchy, and benefit-driven (e.g., 'Ship faster. With trust.')
CTAs Action-oriented and clear (e.g., 'Try for free', 'Request a demo')

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.
Avoid: Jargon without context
Avoid: Overly formal corporate language
Avoid: Ambiguous or passive phrasing

Inside the pack — real screenshots

GitLab — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko