Home
DESIGN.mdStar on GitHub

GitLab

Ship faster. With trust. The AI-native platform for the entire software lifecycle.

Source Code CI/CD Duo AI Merge Requests Security Registry
#1047 Pending main · a3f9c1e
Primary — brand purple
purple#7759C2Brand, active
purple-deep#6E49CBPrimary CTA
purple-dark#380D75Deep accent
purple-pale#F6F3FEHover, fills
Tanuki — the mark
tanuki-red#E24329Mark, brand
tanuki-orange#FC6D26Mark, in-progress
tanuki-light#FCA326Mark highlight
ink#171321Text, dark page
Neutrals
grey#74717ASecondary text
border#D1D0D3Borders
fill#E8E7EBSubtle fills
page-tint#F2F1F5Page background
Status — pipelines
passed#108548Passed, success
running#1F75CBRunning, info
failed#DD2B0EFailed, error
pending#89888DPending, manual
display
Inter · 700
GitLab
52px700
h1
Inter · 700
Ship faster. With trust.
32px700
h2
Inter · 600
AI for the entire software lifecycle
22px600
body-lg
Inter · 400
One platform for source code, CI/CD, security, and AI.
17px400
body-sm
Inter · 400
Automate your delivery from commit to production.
13px400
mono
JetBrains Mono · 500
git push -o ci.variable="DEPLOY=true" origin main
12pxmono
Buttons
Pipeline status
Passed Running Failed Pending
Clone URL
Radius
4px
8px
pill
DO
Use purple #6E49CB for primary actions — purple is the action color
Keep the tanuki three-tone (#E24329 / #FC6D26 / #FCA326) — never recolor or flatten it
Use orange for brand + in-progress; green / blue / red for pipeline status
Set UI/headings in Inter (GitLab Sans), code/SHAs in JetBrains Mono (GitLab Mono)
Lift purple to #8151E6 on the dark purple-black so it stays legible
DON'T
Set the brand purple on dark at #7759C2 — contrast dips; lift it
Use tanuki orange as a primary button — it's brand/accent, not the CTA
Tint dark surfaces neutral-grey — GitLab's dark is purple-black #171321
Color a passed job orange or a running job green — status color is semantic
Fabricate pipeline data — use real stage/job names and a deterministic run