What is GitLab's primary brand color?

GitLab's load-bearing structural color is near-black "#171321" — frequency 294, split across text (145), border (142), and bg (7). It carries headlines, body ink, hairline rules, and the primary CTA fill. The chromatic structural token is purple "#7759c2" — frequency 98, split evenly across text (49) and border (49). It runs link rests and divider rules but never fills a button. The warm sunrise gradient ("#ffc2a0", "#ff9a55", "#ff7a2f", "#c65a2e") is a single-region atmospheric inside the hero orb, not a system token. The page ships zero chromatic CTAs.

Does GitLab's marketing site have a dark mode?

No — the public marketing canvas is light-only. The page floor is pure "#ffffff" (524 occurrences, the dominant color). Surface inversion happens inside individual feature-cards — the "end-to-end DevOps process" card and the security-card hit "#1f1c2e" near-black backgrounds with "#ffffff" text to show product-screenshot mockups in their native dark theme. The GitLab product itself ships a dark theme inside the in-app surfaces shown in those mockups, but it is not represented in this DESIGN.md, which captures the public light marketing experience.

What typography does GitLab use, and what should I use if GitLab Sans isn't available?

GitLab runs GitLab Sans as the single sans family across every display and body tier. The hero hits "96px" at weight 660 with "-2.88px" letter-spacing — a custom variable-weight cut that sits between semibold (600) and bold (700). H3 card titles run "40px" at weight 660 with "-0.8px" tracking; sub-display "32px" at weight 400 with "-0.64px"; body large "18px" at weight 400; body medium "16px" at weight 400; small "14px" at weight 400 with "22px" leading. GitLab Sans is published as a custom-licensed family. The closest free fallback is Inter at weights 400/600 with "-1.5%" tracking on display, or Geist at the equivalent weights for a similar geometric register.

What is GitLab's shape and elevation language?

A two-tier radius dialect plus support pills. Button "4px" (25 occurrences, the page's dominant value) carries the primary and secondary CTAs and the industry chips. Card "16px" (20 occurrences) covers feature-cards, the customer-logo backdrop, and the dark code-surface panel. Avatar "50%" (5 occurrences) handles industry-icon circles. Pill "999px" (5 occurrences) sits on the eyebrow tags above feature sections. Depth comes from canvas inversion — feature cards switch from "#ffffff" to "#1f1c2e" (17 occurrences as bg) — rather than drop shadows. No elevation tiers, no soft-edge floating surfaces.

What's the orange-to-coral gradient for, and where can I use it?

The warm sunrise gradient lives only inside the hero orb illustration as a single atmospheric moment — composed of "#ffc2a0" (peach), "#ff9a55" (orange), "#ff7a2f" (coral), and "#c65a2e" (burnt sienna) bleeding through a circular glow. It is the page's only chromatic atmosphere and is strictly scoped to the hero region. Using it on feature-cards, CTA buttons, or section backgrounds would break the brand's procurement-formal register — the rest of the page reads as ink-on-paper with purple hairlines, and a tangerine fill button would land as a different brand entirely.

Can I use this DESIGN.md to build my own React DevSecOps landing?

Yes — the file is structured to be fed into Claude, Cursor, or any AI tool that reads design tokens. The agent will reproduce GitLab's restraint: white canvas, near-black ink, purple-as-hairline structural color "#7759c2", achromatic CTA painting "#171321" on "#ffffff", GitLab Sans display at weight 660 with aggressive negative tracking, and the two-tier 4px/16px radius dialect. Reference the tokens directly inside Tailwind config or CSS variables — every color, type style, radius, and spacing value is a quoted scalar. The 17 component definitions cover the top nav, primary and secondary buttons, feature-cards (both light and dark variants), the customer-logo strip, the industry-chip, the email input, and the hero orb container.

GitLab Design System

GitLab's design system as a DESIGN.md file.

About GitLab DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source about.gitlab.com

Developer Tools & IDEs

GitLab's marketing canvas is the courthouse register of DevSecOps — a pure "#ffffff" page floor with near-black "#171321" ink and a structural purple "#7759c2" that runs every hairline border, link rest, and divider rule. Where most developer platforms reach for a saturated brand voltage on the primary CTA, GitLab paints "Get free trial" in white text on the same "#171321" ink that holds the headline, giving the page zero chromatic action surfaces. The single warm atmospheric is a sunrise gradient — "#ffc2a0" through "#ff9a55", "#ff7a2f", and "#c65a2e" — scoped exclusively to the hero orb illustration. Outside that one band the page is monochrome ink-on-paper with purple structural rules, a register closer to a financial-services prospectus than a typical SaaS landing page.

This page packages the surface into one DESIGN.md file written to the Google Labs spec. Inside: 18 color tokens grouped into canvas, ink, purple structural, the sunrise-gradient stops, plus support tokens for the dark-card surface ("#1f1c2e") and pale lavender wash ("#f6f3fe"); 11 typography tiers covering GitLab Sans from "96px" hero weight 660 with "-2.88px" tracking down to "14px" body weight 400; a five-step radius scale running 4 / 16 / 28 / "999px" pill / 50% circle; an eight-step spacing scale anchored at the 8px base unit (73 occurrences) and topping out at "96px" for section padding; and 17 component definitions covering the top nav, primary and secondary CTAs, feature cards, the dark code surface, customer logo strip, industry chip, and the email-capture text input.

Feed the file to Claude, Cursor, or Copilot and the agent reproduces GitLab's procurement-formal restraint — achromatic CTA, purple-as-hairline, weight-660 display, two-tier radius dialect, single warm atmospheric — rather than a generic SaaS landing with a tangerine fill button and lavender gradient backgrounds. Or reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or a shadcn theme registry. GitLab is worth studying because it threads a narrow needle. The page reads as enterprise-serious without going corporate-gray, with a chromatic budget of one purple structural rule and one warm hero gradient. Nothing else on the surface carries color.

What makes it distinct

Achromatic CTA strategyprimary button paints #171321 on #ffffff at 47px height and 4px radius; the page ships zero chromatic action buttons
Purple as hairline voltage#7759c2 holds 98 occurrences split evenly across text (49) and border (49), never as a fill
Single warm atmosphericthe orange-to-coral gradient (#ffc2a0 → #ff9a55 → #ff7a2f → #c65a2e) lives only inside the hero orb illustration
Weight 660 as display signatureGitLab Sans hits a custom variable cut at 660 across hero, h2, and h3, not the standard 700 semibold
Two-tier radius dialect4px for buttons and chips (25 occurrences), 16px for feature-cards (20 occurrences)

Live at about.gitlab.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

about.gitlab.com

Explore GitLab

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

GitLab design system FAQ

Common questions about GitLab's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

GitLab — official site

The live source — see the achromatic CTA, the purple hairline rules, and the sunrise hero orb in their native habitat.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use GitLab in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→