# GitLab: brand book and build spec

A warm tanuki of three oranges, a signature purple, and copy kept strictly white or Charcoal; one tight, heavy sans derived from Inter; soft orange-purple-pink gradients; and flat linework built from code lines, pills and one curved corner. A voice that's visionary but provable.

From unfairly.ai/brand-guidelines/gitlab, checked 2026-10-29. Unofficial study; not affiliated with GitLab.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Ship-speed made visible. GitLab draws motion everywhere (gradients that blur, graphics running left to right, lines borrowed from code and pipelines) but keeps every word in white or Charcoal, so the brand feels fast without ever being hard to read. Based on: From the published rules: copy only white or Charcoal; gradients 'create a sense of movement'; graphics move left to right; illustration linework from code lines; and the 'Software. Faster.' tagline.

## Purpose

Mission: Unlock every team to ship trusted software at the speed of imagination. (published; https://handbook.gitlab.com/handbook/company/mission/)

Story: GitLab began in 2011 as an open source project with a single commit and has shipped a release every month since (on the 22nd). It was incorporated in 2014, joined Y Combinator and published its handbook in 2015, and listed on Nasdaq in 2021. In 2022 it redrew the tanuki around the DevOps infinity loop to mark its growth into a platform. Today it frames its job as removing the drag between an idea and a customer, for teams of people and AI agents. (observed)

| Value | What it means in the work | Source |
|---|---|---|
| Collaboration | First letter of CREDIT, GitLab's six core values (paraphrase). | published: https://handbook.gitlab.com/handbook/values/ |
| Results for Customers | Results for customers come first (paraphrase). | published: https://handbook.gitlab.com/handbook/values/ |
| Efficiency | Efficiency, with a stated preference for boring solutions (paraphrase). | published: https://handbook.gitlab.com/handbook/values/ |
| Diversity, Inclusion & Belonging | People from every background can thrive and contribute (paraphrase). | published: https://handbook.gitlab.com/handbook/values/ |
| Iteration | Do the smallest thing possible, get feedback quickly; the guide's type repetitions and open icons express it (paraphrase). | published: https://handbook.gitlab.com/handbook/values/ |
| Transparency | Work in the open; the public handbook and monthly release post (paraphrase). | published: https://handbook.gitlab.com/handbook/values/ |

## Fixed and flexible

Never changes:
- The tanuki, never altered and never a mascot
- White or Charcoal copy
- GitLab Sans, left-aligned, sentence case
- The orange-purple palette and its soft gradients

The one thing that varies: How much color and motion: from a white page with one purple link to a full freeform gradient, type repetitions and promptlings for AI stories. The guide sets no level; it limits by asset (one lockup, one radius, one stroke).

## Positioning

- **Statement**: The intelligent orchestration platform where teams and their AI agents ship secure software faster. (observed)
- **Category**: The most comprehensive AI-driven DevSecOps platform (guide); intelligent orchestration platform (homepage) (published)
- **Audience**: Development, security and operations teams across the software lifecycle, from startups to enterprises and the public sector (paraphrase of messaging and solution navigation). (published)
- **Problem**: Drag: handoffs between tools, gates between teams, security as an afterthought and compliance as a tax, which become catastrophic at agent speed (paraphrase). (published)
- **Promise**: Speed and control together: teams ship faster without trading away security (paraphrase of the tagline rationale and mission). (published)
- **Differentiators**: One platform for the whole lifecycle, built in rather than stitched from point solutions.; Context as the moat: a connected data model across planning, code, review, security, deploy and operations.; Governance and security in the core of the platform.; Open source origin, a monthly release since 2011, and 5,500+ code contributors.; Cloud and model choice belong to the customer.
- **Alternatives**: DIY toolchains of DevOps point solutions 'digitally duct taped together'.; Multi-app suites that can also call themselves 'integrated' (the messaging page names Atlassian as the example).

## Messaging

Boilerplate (observed): GitLab is the intelligent orchestration platform where teams and their AI agents ship secure software faster. It began in 2011 as an open source project to help one team of programmers collaborate, and millions now use it to deliver software faster and more efficiently while strengthening security and compliance.

Taglines:
- Software. Faster. (Core tagline; the tagline lockup (stacked or horizontal in an AI-gradient box). A core promise: what teams build, and the advantage GitLab gives)
- Speed with control for agentic software engineering (about.gitlab.com page title)
- Everyone can contribute (The mission line the guide keeps returning to (voice, logomark, photography))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Speed | Ship software faster: the outcome that matters most to software teams. | 177 consecutive monthly releases; a release on the 22nd of every month.; 9th annual Global DevSecOps Survey: 3,266 DevSecOps professionals. | published |
| Trust built in | Security, compliance and governance are part of the platform, not bolted on. | 9th annual Global DevSecOps Survey: 3,266 DevSecOps professionals. | our reading |
| One platform | One application for the whole lifecycle instead of point solutions duct-taped together. | Over 50 million estimated registered users (June 2026). | our reading |
| Everyone can contribute | Open source roots and a community that builds the product with GitLab. | 5,500+ code contributors (numbers as of June 2026).; 177 consecutive monthly releases; a release on the 22nd of every month. | our reading |

They never claim:
- Don't claim 'first' or 'only'.
- Say 'single application' or 'built in', not 'integrated'.
- Keep recommendations accurate, provable and helpful; give data where possible.
- Be honest, even when that means sharing limitations.
- Third parties may use the GitLab name only truthfully, with the TM symbol and proprietorship statement; logo use is generally refused.
- The product-marketing messaging page still says 'The DevOps platform'; current pages say intelligent orchestration platform. Use the current line.

## Voice

Tone words: Visionary, Empathetic, Intentional.

Traits:
- Visionary, but not Sensationalistic (published)
- Technical experts, but not Inaccessible (published)
- Sophisticated, but not Arrogant (published)
- Empathetic, but not Patronizing (published)
- Approachable, but not Overeager (published)
- Intentional, but not Pushy (published)
- Transparent, but not Reckless (published)

- Confident technical experts and category creators, never arrogant or sensationalistic.
- Meet readers where they are; explain without patronizing.
- Purposeful, direct and transparent: plain language, honest even about limitations.
- Contractions to sound human and less formal.
- The tagline's directness is the voice in miniature: say the outcome, skip the complexity.
- Banned words and prefer-rules govern GitLab's own copy. Verbatim customer quotes (the quote carousel) are exempt and are never reworded.

Rules a copy check enforces:
- Sentence case headlines
- Always capitalize the first word after a colon in a title
- Use contractions
- Active voice where possible
- Serial (Oxford) comma by default
- American spelling
- AP Stylebook for anything not covered; GitLab's guide wins on conflict
- Spell out acronyms at first use with the short form in parentheses
- External dates spelled out: November 16, 2023; ISO 2023-11-16 for internal content; no st/nd/rd/th
- 12-hour clock, lowercase a.m./p.m. with a space; event time zone in full; UTC for virtual events
- Spell out zero to nine, numerals from 10; numeral at the start of a headline (5 ways...); commas in 4+ digit numbers; avoid k/M except in tight badges
- Use % not percent, unless the number is spelled out
- Currency as NUMBER ISO-CODE: 10 USD
- No ampersand for 'and' in body copy; sparingly in tight display-ad headlines
- Em dash with a space on each side; en dash for numeric ranges with no spaces
- Job titles lowercase in sentences; capitalized when standalone (lower thirds, name tags, pull-quote attributions)
- Engineering team, Security department: capitalize the function, not the word after
- Gender-neutral they/them unless referring to a specific person
- Interview quotes in present tense (says, explains)
- Hard to prove, so they lack credibility; partners forbid them in joint marketing
- Say "single application / built in / built from the ground up", not "integrated"
- Don't reinforce Git or Git-only SCM when talking about the company; message the platform and multiple stages
- Ad and blog headlines may experiment beyond official messaging as long as they stay truthful and authentic

Never: first, only, integrated, Gitlab (lowercase l), his/her.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| White | #FFFFFF | paper | Primary. The default page and asset ground; headline, body and CTA color on dark grounds; light-mode base fill under the brand gradient. |
| Charcoal | #171321 | ink | Primary. Headlines, body copy, CTAs and buttons on light grounds; solid dark background (night). The wordmark color. Never inside a background gradient. PMS 433 C. |
| Purple 02p | #7759C2 | accent | Primary. Hyperlinks on light grounds; partner lockup base fill on white; allowed one-color tanuki. White text on it passes. |
| Orange 02p | #FC6D26 | accent_secondary | Primary, from the tanuki. Graphical elements, the default background gradient, the orange favicon tanuki. Charcoal text only; never colored copy. |
| Orange 01s | #FDF1DD | surface | Secondary warm tint, Charcoal text. Used here as the light surface role: our reading, the guide names no surface color. |
| Gray 03 | #74717A | ink_muted | Cool gray for hierarchy; the co-branding divider. Used here as muted text: our reading, the guide publishes no muted text color. |
| Orange 01p | #FCA326 | extra | Primary, tanuki. AI gradient start. |
| Orange 03p | #E24329 | extra | Primary, tanuki. White text. |
| Purple 01p | #A989F5 | extra | Primary, signature purple. Links on dark; AI gradient end; default gradient. |
| Purple 01s | #CEB3EF | extra | Secondary light purple. |
| Purple 02s | #5943B6 | extra | Secondary purple, white text. |
| Purple 03s | #2F2A6B | extra | Secondary deep purple, white text. |
| Purple 04s | #232150 | extra | Dark-mode base fill for gradients and illustrations; white text. |
| Teal 01s | #C5F4EC | extra | Positive connotation (product features). |
| Teal 02s | #6FDAC9 | extra | Positive accent. |
| Teal 03s | #10B1B1 | extra | Positive accent; Charcoal text. |
| Gray 01 | #D1D0D3 | extra | Cool gray for hierarchy. |
| Gray 02 | #A2A1A6 | extra | Cool gray for hierarchy. |
| Gray 04 | #45424D | extra | Cool gray for hierarchy. |
| Gray 05 | #2B2838 | extra | Cool gray for hierarchy. |
| Pink 01g | #FFB9C9 | extra | Gradient only: third stop of the default background gradient. |
| Pink 02g | #FF1493 | extra | Gradient only. |
| Pink 03g | #AE126C | extra | Gradient only. |
| Vermillion 01g | #D74026 | extra | Gradient only. |
| Promptling swatches (a) | #FFD066 | extra | Orange 01a shown; the eight 'a' swatches (FFD066, EBA9D8, 0B5E99, 63A6E9, 4F52B4, 9CD880, 0F8A55, FF758C) reproduce the AI-agent promptlings only. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | GitLab Sans | Open (SIL OFL 1.1). GitLab's own face derived from Inter (copyright The Inter Project Authors, portions GitLab B.V. 2022); free download, npm @gitlab/fonts 1.3.1 | Inter | Inter, "Helvetica Neue", Arial, sans-serif |
| body | GitLab Sans | Open (SIL OFL 1.1), npm @gitlab/fonts 1.3.1 | Inter | Inter, "Helvetica Neue", Arial, sans-serif |
| mono | GitLab Mono | Open (SIL OFL 1.1). Derived from JetBrains Mono; npm @gitlab/fonts 1.3.1 | JetBrains Mono | "JetBrains Mono", Menlo, Consolas, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 / closing H2 | --text-display-xl-* | GitLab Sans | 96px | 48px | 1.04 | -2.88px | 660 |
| Section H2 / quote headline | --text-display-l-* | GitLab Sans | 64px | 48px | 1.0625 | -1.92px | 660 |
| Feature card title | --text-title-l-* | GitLab Sans | 32px | 32px | 1.125 | -0.64px | 580 |
| Card title / resource title | --text-title-m-* | GitLab Sans | 24px | 22px | 1.167 | -0.48px | 580 |
| Lead paragraph | --text-lead-* | GitLab Sans | 24px | 22px | 1.33 | -0.48px | 400 |
| Body large / Flex body | --text-body-l-* | GitLab Sans | 18px | 18px | 1.44 | 0px | 400 |
| Hero card title / footer heading | --text-body-bold-* | GitLab Sans | 18px | 18px | 1.556 | 0px | 660 |
| Button label | --text-button-* | GitLab Sans | 18px | 18px | 1.25 | 0px | 660 |
| Body | --text-body-* | GitLab Sans | 16px | 16px | 1.5 | 0px | 400 |
| Small body / card text | --text-body-s-* | GitLab Sans | 14px | 14px | 1.571 | 0px | 400 |
| Stat number | --text-stat-* | GitLab Mono | 64px | 48px | 1.2 | -1.92px | 500 |
| Ordinal | --text-ordinal-* | GitLab Mono | 32px | 32px | 1.2 | 0px | 400 |
| Industry label | --text-label-mono-* | GitLab Mono | 16px | 16px | 1.5 | 0px | 700 |
| Section eyebrow | --text-eyebrow-* | GitLab Mono | 14px | 14px | 1.714 | 0px | 400 |
| Hero card eyebrow | --text-eyebrow-s-* | GitLab Mono | 12px | 12px | 1.5 | 0px | 400 |
| Vertical rail | --text-rail-* | GitLab Mono | 11px | 11px | 1.5 | 2.42px | 400 |

## Layout

Measured on https://design.gitlab.com/brand-introduction/: GitLab's public brand guide (design.gitlab.com, read from its Markdown source in gitlab-org/gitlab-services/design.gitlab.com, branch main) and its embedded images, plus handbook brand pages, fetched 2026-10-29.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 165px | 16px |
| Section padding | 96px | 64px |
| Container max width | 1110px | full |
| Hero text width | max 1111px | full |
| Grid columns | 3 | 1 |
| Gutter | 24px | 16px |
| Card gap | 24px | 24px |
| Navigation height | 69px | 69px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not GitLab's.

Homepage bands, top to bottom (observed):
1. Announcement bar
   - Desktop: 1440x52, y 0, centred 16px/660 white text
   - Phone: 390x72 under the white nav, 2 centred lines
   - Whole bar is a link to /blog/gitlab-orbit-ga/
2. Navigation
   - Desktop: 69px, overlays the hero top
   - Phone: 68px white: Get free trial button, centred tanuki, hamburger
   - Sticky; turns white with a #171321 hairline on scroll
3. Hero
   - Desktop: 976px tall, 3-column hairline grid x 165-1275, headline y 218
   - Phone: 834px, single column, cards stacked
   - Cards stair-step down columns 3 then 2
   - BUILD WITH GITLAB vertical rail at x 32
4. Logo marquee
   - Desktop: 99px, padding 32px 48px, 64px gaps, edge-faded mask
   - Phone: 99px, padding 32px 16px
   - Same ground as hero: hero and marquee read as one dark block
5. Feature cards
   - Desktop: 2295px, padding 96/48/160, 2 x 543px grid, 24px gap
   - Phone: 2961px, 1 column, padding 96/16
   - Pixel-stair #E8E7EB shapes in the gutters
6. Numbered cards
   - Desktop: 787px, padding 120/48/96, 3 x 354px cards
   - Phone: 1311px, stacked
   - Globe image (globe.png, 724x724) top right at x 934 y -126 in the band, clipped by the band; desktop only
7. Industry stat grid
   - Desktop: 1694px, 3-column hairline grid, cards 370x291 in a checkerboard of 4 rows
   - Phone: 961px, swipe row of 337px cards
   - Stats in GitLab Mono 64px 500
8. Quote carousel
   - Desktop: 708px, padding 96/48/120
   - Phone: 940px, padding 64/16/96
   - Gradient // before the headline
9. Resources row
   - Desktop: 323px, 3 x 480px full-bleed cells, padding 64/48
   - Phone: 873px, stacked cells, padding 48/24
   - 10px gradient square eyebrows
10. Closing CTA
   - Desktop: 776px, centred, art strip 267px at the bottom
   - Phone: 505px, stacked full-width buttons, strip 122px
   - Art meets the footer edge with no gap
11. Footer
   - Desktop: 1029px, container 1170px, columns at 203px pitch
   - Phone: 2773px, single column, long lists in 2 CSS columns
   - 1px white rule above the legal lines

## Page anatomy

How GitLab's own landing pages are built, part by part (observed; https://about.gitlab.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Full-width announcement bar above the nav, one centred line on desktop, two centred lines on phone; the whole bar is one link
- text: GitLab Orbit is generally available. Increase agent accuracy and lower token cost
- link: Read the announcement (underlined, 16px/400, followed by a 16px right arrow); on phone the link label is hidden and only the arrow follows the text
- href: /blog/gitlab-orbit-ga/
- ground: background-image JPG stretched 100% 100% over #35333B: dark charcoal grey #2A2930 at left, through purple and pink to orange #FA5E32 at the right edge (asset banner-ground-desktop.jpg 1440x52, banner-ground-phone.jpg 375x72)
- desktop: height 52px, y 0-52; text 16px/20px GitLab Sans 660 #FFFFFF, starts x 300, link at x 938; whole group centred
- phone: height 72px, sits BELOW the white phone nav (y 68-140); text 16px/20px 660 #FFFFFF centred in two lines inside a 334px box (x 28-362, 28px side inset), 40px tall; the label "Read the announcement" is hidden and only the 16px arrow follows "cost" inline on line 2. If your face runs wider, let the box reach the 16px gutter rather than wrapping to 3 lines
- resting state: Visible at load; when the page is scrolled and returned to top it stays collapsed (scrollY 68). Build the unscrolled state.

**Navigation**
- summary: Desktop: transparent dark bar floating over the hero (hero is pulled up under it by -68px): tanuki at left, six menu items, then search, Request a demo, Get free trial, Sign in, language globe at right. Phone: white bar with a small Get free trial button left, tanuki centred, hamburger right.
- ground: Desktop at rest: rgba(23,19,33,0.1) + backdrop-filter blur(10px) over the hero, renders #2B2734; border-bottom 1px transparent. Scrolled (sticky): #FFFFFF with 1px solid #171321 bottom border. Phone: #FFFFFF always.
- height: 69px desktop (y 52-121 under the 52px bar); 68px phone
- border: none visible at rest; 1px #171321 bottom when scrolled
- logo: variant tanuki logomark only, full colour (#E24329/#FC6D26/#FCA326), no wordmark; px 32x32 inside a 48x50 hit area with 8px padding; position desktop x 32 (button x 24), vertically centred; phone centred (button x 171, 48x48); file https://about.gitlab.com/press/press-kit/
- links: count 6; labels Platform, Solutions, Pricing, Resources, Company, Contact us; dropdowns all except Pricing carry a 12px chevron-down 8px after the label; size 16px/24px; weight 400; color #FFFFFF at rest over the hero; hover #D1D0D3; alignment left group starting x 108, items at x 108, 215, 329, 404, 527, 642 (about 24px between label+chevron groups)
- actions:
  - Search: 16px magnifier icon, white, x 885
  - Request a demo: ghost button 18px/22.5px 660 #FFFFFF, padding 11px 16px, radius 4px, x 925 w 170 h 45; hover fill rgba(255,255,255,0.12)
  - Get free trial: solid #FFFFFF fill, #171321 text 18px 660, 1px #FFFFFF border, radius 4px, padding 11px 16px, x 1119 w 141 h 47; hover inverts to transparent fill, white text, 1px white border
  - Sign in: text link 16px/400 #FFFFFF, padding 8px, x 1284
  - Language selector: 16px globe + 16px chevron, #74717A, x 1376-1416; locales /, /de-de/, /es/, /fr-fr/, /it-it/, /ja-jp/, /pt-br/
- sticky: position sticky, z-index 1025; turns white with charcoal text and a #171321 hairline once the page scrolls
- phone: shows Get free trial (solid #171321, white 14px/660 text, padding 8px 12px, radius 4px, 111x36 at x 16 y 16), tanuki centred, 24px hamburger at x 350 y 22; menu full-screen white sheet: close X top right; rows Platform, Solutions, Pricing, Resources, Company, Contact us (16px/400 #171321, 57px row pitch, 1px #E8E7EB dividers, chevrons on all but Pricing); then Sign in (person icon) and Request a demo (speech icon) rows; bottom-pinned Search field (1px border, radius 4px, 46px) and a full-width Get free trial button (#171321, white 18px 660, 46px); cta Get free trial stays visible in the bar at all times

**Hero**
- summary: Dark Charcoal hero with a faint dotted noise field, three-column vertical hairline grid, a two-line 96px white headline across all three columns, a one-column lead and a full-column gradient-glass CTA bar in column 1, and two translucent floating cards stepped down columns 2 and 3; a vertical BUILD WITH GITLAB rail at the left edge; a dark logo marquee closes it.
- desktop: section y 53-1029 (976px tall), margin-top -68px so the nav overlays it; ground #171321 (renders #1D1927); container content x 165-1276 (1111px), a 3-column grid of 349px columns with 32px gaps; the CTA and cards grid uses 3 x 370.3px with no gap; column split 3 equal columns; hairlines at x 165, 535, 905 and 1275; padding 164px top, 64px bottom inside the layout; vertical anchors headline top y 218 (2 lines, bottom 418); lead y 466-530; CTA y 577-649; card 1 (19.5) y 697-818 in column 3; card 2 (BLOG) y 818-964 in column 2; marquee y 1029-1128; text max width headline 1111px (forced break after "trust,"); lead max-width 370px (wraps "Agentic software engineering for / your team"); media no photo or illustration; the cards and grid are the media; cta size 370x72
- phone: order headline, lead, CTA, BLOG card, 19.5 card, logo marquee; alignment left, 17px gutter: a 16px container padding plus a 1px border that is transparent (border 1px solid rgba(0,0,0,0)); draw no visible frame; sizes headline 48px/49.92px -1.44px in 3 lines (y 221-371), lead 22px/29.26px -0.44px (y 395), CTA 356x72 (y 501), BLOG card 356x146 (y 621), 19.5 card 356x118 (y 791), section y 140-974; hidden hairline column grid and the vertical rail are not shown on phone
- at rest: ground section #171321. PLACE THE IMAGE, never draw a recipe: the dot field is a live WebGL canvas, captured at rest as hero-ground-desk.png (2880x1952 = 1440x976 at 2x) and hero-ground-phone.png (780x1668 = 390x834 at 2x). Each capture already contains everything under the hero content: the #171321 ground, the .dither-field radial-gradient glow and its masked dot layer, and the canvas dots. Desktop: an absolute layer inset 0 behind the hairlines and cards (z-index below them), background: #171321 url(hero-ground-desk.png) no-repeat; background-size 1440px 976px (cover at other widths); background-position left top; opacity 1, mix-blend-mode normal, no filter, no extra dot or gradient layers on top. Phone (<=600px): the same with hero-ground-phone.png at 390px 834px, position center top. What it shows: broad irregular dotted formations (dots on a 4px grid) across the top-left, behind and right of the headline, and through the lower centre; clear dark channels between them. Never: redraw the dots with CSS radial-gradients or masks, add a second dot layer, lower its opacity, or tint it. The hairlines and glass cards are still built in CSS on top.; hairlines absolute layer at x 165, top 68px into the section (y 122) to the bottom (906px tall): repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 33.3333%) plus border-right 1px rgba(255,255,255,0.08); lines at x 165, 535, 905, 1275; card 19 5 x 905 y 697 w 370 h 121, column 3; fill rgba(255,255,255,0.1) + backdrop-filter blur(12.5px), computed #2E2B37, renders #35313E; no border, radius 0; padding 24px, gap 24px; label "19.5" GitLab Mono 12px/18px uppercase as gradient text linear-gradient(-90deg, #7759C2 50%, #E53C97 92%, #FC6D26 174%) (reads pink-magenta); title "What's new in GitLab" 18px/28px 660 #FFFFFF; NO visible arrow at rest: the 16px arrow at x 1236 is opacity 0 and only fades in on hover/focus. A resting build shows the label and title only; card blog x 535 y 818 w 370 h 146, column 2, its top edge meets the 19.5 card's bottom edge (stair step); same fill and blur, renders #322F3B; label "BLOG" GitLab Mono 12px/18px uppercase #A2A1A6; title "Scaling Git for the agentic software factory" 18px/28px 660 #FFFFFF (2 lines, 290px); NO visible arrow at rest (the arrow at x 865 is opacity 0 until hover/focus); rail vertical "BUILD WITH GITLAB" at x 32: a 6x6px #FFFFFF square at y 822, 16px gap, then the text from y 844 to 997 in GitLab Mono 11px/16.5px, letter-spacing 2.42px, uppercase, rgba(255,255,255,0.5), set vertically and rotated 180deg so it reads bottom-to-top; absolute, desktop only; cta Try for free: 370x72 at x 165 y 577 (exactly column 1), display flex space-between, padding 24px; text 18px/22px GitLab Sans 580 #FFFFFF; 16px right arrow at right (x 494), visible at rest (opacity 1); this CTA is the only hero box with a resting arrow; background-image linear-gradient(-90deg, rgba(119,89,194,0.3), rgba(229,60,151,0.3) 34%, rgba(252,109,38,0.3)) (orange-brown at left to purple at right), border 1px solid rgba(255,255,255,0.2), border-radius 0, backdrop-filter blur(12.5px); hover adds background-color rgba(255,255,255,0.17), 0.18s ease-out; motion canvas speckle and marquee scroll are animation only; at rest the marquee shows Barclays partly cut at the left edge
- media: hero ground image: hero-ground-desk.png and hero-ground-phone.png, placed per at_rest.ground (captures of the live canvas); hairlines and glass cards are CSS
- type: H1 GitLab Sans 96px/99.84px 660 -2.88px #FFFFFF (phone 48px/49.92px -1.44px); lead 24px/31.92px 400 -0.48px rgba(255,255,255,0.85) (phone 22px/29.26px -0.44px)
- cta: one CTA only (Try for free); no secondary in the hero
- proof: logo marquee directly under the hero on the same Charcoal ground: 99px band, padding 32px 48px (phone 32px 16px), customer logos shown white (the files are dark; apply filter: invert(1) as the site does) 20-29px tall with 64px gaps, edge-faded by mask-image linear-gradient(90deg, transparent, 50% at 10%, opaque 30%-70%, 50% at 90%, transparent); order Barclays, Lockheed Martin, Thales, Ericsson, Deutsche Telekom (T), agoda, NVIDIA, repeating; scrolls continuously (animation only)
- copy:
  - H1 (2 lines desktop, forced break after the comma): "Speed you can trust, / all the way to production"
  - Lead: "Agentic software engineering for your team" (wraps after "for" at 370px)
  - CTA: "Try for free"
  - Card in column 3: label "19.5", title "What's new in GitLab"
  - Card in column 2: label "BLOG", title "Scaling Git for the agentic software factory"
  - Rail: "BUILD WITH GITLAB"

**Feature cards: Ship faster. Stay in control.**
- summary: Light section of product cards: a 64px H2 at left, two half-width cards, one full-width card, then a dark GitLab Flex banner; grey pixel-stair shapes step in from the edges behind the cards.
- ground: #FFFFFF section; the stair layers' 0.85 holes make it render #FCFBFC; pixel-stair layers plus the gap box in #E8E7EB (see pixel_stairs)
- desktop: band y 1128-3423, padding 96px 48px 160px; content x 165-1275 (1110px); h2 "Ship faster. / Stay in control." 64px/68px 660 -1.92px #1A1A1A, 2 lines, y 1224; grid 2 columns 543px + 543px, 24px gap; cards start y 1424; half cards 543x750 each: 1px solid #D1D0D3 border, #FFFFFF fill, radius 0; top media panel 541x400 #171321 with the product SVG centred; body padding 32px; copy column gap 16px plus 16px under the eyebrow (see anatomy); full card 1110x711 at y 2198: media 1108x421 = security gradient art (cover) with the vulnerability report SVG (516x322) bottom-centred; body padding 32px; flex banner 1110x194 at y 3069, 160px below the full card bottom (y 2909; 136px margin + the 24px grid gap): #171321 fill, body padding 24px 48px, gap 64px, copy left (732px) and a white button right (button_flex_on_dark)
- phone: band y 1073-4034, padding 96px 16px; h2 48px/51px -1.44px, wraps "Ship faster. Stay / in control."; grid 1 column 358px, 24px gap; the first card's top edge is at page y 1343, exactly 72px under the H2 bottom (H2 y 1169, 102px tall). Never 48px.; cards 356px wide; media 262px tall; body padding 24px; eyebrow y 1630, title y 1686 (3 lines), description y 1810; card titles stay 32px/36px; flex banner 358x410, copy stacked (eyebrow, title 2 lines, body 6 lines), Discover GitLab Flex button 46px tall below
- anatomy:
  - Card body (desktop padding 32px, phone 24px) is a flex column with gap 16px: eyebrow box 24px tall with margin-bottom 16px, so the title starts 32px below the eyebrow's bottom (eyebrow top + 56px; desktop eyebrow y 1857, title y 1913, description y 2001; full card eyebrow 2652, title 2708, description 2760). Title to description is 16px. Never 24px gaps here. Eyebrow text: "[ AI ORCHESTRATION ]", "[ PLATFORM ]", "[ SECURITY ]" in GitLab Mono 14px/24px uppercase #74717A with square brackets and spaces either side
  - Card title 32px/36px GitLab Sans 580 -0.64px #171321 (2 lines = 72px in half cards, 1 line = 36px in the full card; phone 3 lines = 108px)
  - Description 16px/24px 400 #74717A, 477px wide in half cards
  - Link row: label 18px/20px 580 #171321 + 16px chevron-right, 8px gap, 12px vertical padding, no underline (Learn about GitLab Duo / Explore our platform / Learn more about security)
  - Whole card is the link; hover scales the media image to 1.05
  - Flex banner (copy column is a flex column with gap 8px: eyebrow 24px, 8px, title, 8px, body; eyebrow y 3093, title 3125, body 3161): eyebrow "[ GITLAB FLEX ]" mono 14px #A2A1A6; title 24px/28px 580 -0.48px #FAF9FD; body 18px/26px 400 #A2A1A6; button "Discover GitLab Flex" #FFFFFF fill, 1px #FFFFFF border, #171321 18px 580 text, padding 12px 16px, radius 4px
  - Pixel stairs: two absolute 1440x744 layers (top one starts 96px above the section, bottom one at 1599px into it) filled #E8E7EB and masked with the stair SVGs; they show as stepped grey pixel blocks in the right gutter near the top and the left gutter lower down, behind the cards
- components:
  - feature card (half/full)
  - mono bracket eyebrow
  - chevron text link
  - dark banner card with white button
  - pixel-stair mask
- pixel stairs:
  - Two absolute layers, each a solid #E8E7EB box cut by its stair SVG: background-color #E8E7EB; mask-image: linear-gradient(#000,#000), url(<stair svg>); mask-composite: exclude (-webkit-mask-composite: xor); mask-repeat no-repeat; mask-size 100% 100%, 100% 100%. Use the SVG files unchanged, INCLUDING their <g opacity="0.85">: with exclude, the SVG's 0.85 shapes leave the 'holes' at 15% grey, which is exactly the measured #FCFBFC ground above the top stair and below the bottom stair (sampled 2026-10-29: #FCFBFC in the holes, #E8E7EB in the stair band). Never strip the 0.85. Inline the SVGs as data: URIs (mask-image from file:// is blocked by CORS in Chromium). z-index below the cards, pointer-events none.
  - Desktop: top layer 1440x744 at section top -96px (page y 1032-1776), mask-position 50% 100%, file pixel-stair-mask-top-desktop.svg; bottom layer 1440x744 at 1599px into the section (page y 2727-3471, runs 48px past the band into the next one under it), mask-position 50% 0%, file pixel-stair-mask-bottom-desktop.svg. Both span the full 1440px width, left 0.
  - The band BETWEEN the layers is solid #E8E7EB: add a third absolute #E8E7EB box covering the gap exactly, desktop from 648px to 1599px into the section (page y 1776-2727; the top layer's bottom edge to the bottom layer's top edge), phone from 341px to 2538px into the section. Its straight top and bottom edges coincide with the layers' fully grey edges, so no straight edge is visible. Measured on the live page with the cards hidden: one continuous grey diagonal band, stepped only at its upper-right and lower-left stair edges.
  - Phone: top layer 390x341 at the section top (0px), file pixel-stair-mask-top-phone.svg, mask-position 50% 100%; bottom layer 390x423 flush with the section bottom, file pixel-stair-mask-bottom-phone.svg, mask-position 50% 0%.
  - Never: a full-section plain #E8E7EB rectangle, a horizontal change of ground colour, or any layer narrower than the viewport. Every visible grey/white boundary is a stair step from the SVG; if you see a straight edge longer than one step (about 48px desktop) the layers or the gap box are misplaced.
- copy:
  - H2: "Ship faster. / Stay in control." (#1A1A1A, measured; the only #1A1A1A text on the page, every other dark text is #171321)
  - Card 1 (half): eyebrow "[ AI ORCHESTRATION ]"; title "Define how teams and AI agents work together" (2 lines); description "Teams orchestrate, agents execute, turning issues into merge requests, remediating vulnerabilities, and reviewing code, all inside the guardrails you set." (3 lines); link "Learn about GitLab Duo"
  - Card 2 (half): eyebrow "[ PLATFORM ]"; title "Your end-to-end delivery process in one place" (2 lines); description "Planning, source control, and CI/CD in one platform. Projects, releases, and code share one data plane, so your team and agents work from a single source of truth." (3 lines); link "Explore our platform"
  - Card 3 (full): eyebrow "[ SECURITY ]"; title "Be proactive with security built in, not bolted on" (1 line); description "Scanning, policies, and approvals run inside the pipeline, not beside it. Findings land in the merge request, and the audit evidence writes itself as the change moves." (2 lines); link "Learn more about security"
  - GitLab Flex banner: eyebrow "[ GITLAB FLEX ]" (mono 14px/24px #A2A1A6); title "Commit once, adjust anytime with flexible pricing" (24px/28px 580 #FAF9FD, 1 line desktop, 2 phone); body "Organizations that need pricing flexibility can make one annual commitment and steer their spend across seat-based licenses and usage-based credits without re-procurement." (18px/26px 400 #A2A1A6, 3 lines at 732px, 6 at phone); button "Discover GitLab Flex". GitLab Flex is a pricing model: one annual commitment spread across seat licences and usage credits.
- copy prov: observed, verbatim, https://about.gitlab.com/ (2026-10-29)

**One control plane (numbered cards)**
- summary: Charcoal band: 64px white H2 and grey lead at left, a wireframe globe drawn in thin grey lines at the top right, three outlined numbered cards in a row, then a mono eyebrow with a white button.
- ground: #171321
- desktop: band y 3423-4210, padding 120px 48px 96px; h2 "One control plane" 64px/68px 660 -1.92px #FFFFFF at y 3542; lead 24px/31.92px 400 -0.48px #A2A1A6, max 785px, y 3634; cards 3 x 354x243 with 24px gaps at y 3763: inner border 1px solid #45424D, fill #171321, padding 24px, gap 32px; globe PLACE THE IMAGE globe.png, a capture of the canvas on https://about.gitlab.com/ (1448x1448 = 724x724 at 2x, transparent background), a capture of the live 2D canvas at rest. Absolute in the section, left 934px, top -126px (page box x 934-1658, y 3297-4021), width 724px, height 724px, opacity 1, mix-blend-mode normal, no filter, z-index below the copy and cards. The section has overflow: hidden, so it is clipped at the band top (y 3423) and the right viewport edge (x 1440). Desktop only; hidden on phone (the canvas is 0x0 there). Never draw the globe with SVG ellipses or great circles, never outside the dark band.; footer row y 4069: "// MIGRATE TODAY" + "Talk to sales" button, gap 28px
- phone: band y 4034-5345, padding 96px 16px 64px; h2 48px/51px, 2 lines ("One control / plane"); lead 18px/23.94px -0.36px #A2A1A6; cards stacked 358x239 with 24px gaps; globe not shown; footer row eyebrow left, Talk to sales right on one row
- anatomy:
  - Card head row: ordinal in GitLab Mono 32px/400 at left, 16px arrow (#FFFFFF) at right
  - Ordinals: "01" gradient text linear-gradient(90deg, #FC6D26, #E53C97); "02" solid #B5B6B8; "03" gradient text linear-gradient(90deg, #E53C97, #7759C2)
  - Card title 24px/28px 580 -0.48px #F7F7F5 (phone 22px/24px)
  - Card text 14px/22px 400 #A2A1A6
  - "// MIGRATE TODAY" GitLab Mono 14px/24px uppercase, letter-spacing 1.2px, rgba(255,255,255,0.8)
  - "Talk to sales" secondary button: #FFFFFF fill, #171321 text 18px/22.5px 660, padding 11px 16px, radius 4px, 139x45; hover fill #E8E7EB
  - Globe: the captured image globe.png placed per desktop.globe. It shows a dense web of many thin grey great-circle arcs at irregular tilts, some arcs drawn as chains of small square dots, and 3-5px square nodes in about #45424D scattered on the arcs. Do not redraw or simplify it.
- components:
  - numbered card
  - gradient ordinal
  - mono // eyebrow
  - secondary button
- copy:
  - H2: "One control plane"
  - Lead (2 lines at 785px): "GitLab is the intelligent orchestration platform for teams that won't compromise on speed or control as they scale agentic software engineering."
  - 01 "One source of context": "Every project, issue, and pipeline in one place. Agents work from the same source your team gates, no exceptions."
  - 02 "Security and governance": "Policies, approvals, and scanning apply to human and agent changes alike. The same gates, no exceptions."
  - 03 "Traceability you can audit": "Every agent action shows up in the audit trail. No black box, no guessing what changed or who approved it."
  - Footer row: "// MIGRATE TODAY" + "Talk to sales"
- copy prov: observed, verbatim, https://about.gitlab.com/ (2026-10-29)

**Built to meet your industry's demands (industry stat grid)**
- summary: Charcoal band with a centred 64px H2 and lead, then a 3-column hairline grid where six translucent stat cards sit in a staggered checkerboard over faint pixel-stair shapes.
- ground: #171321; pixel stairs rgba(255,255,255,0.07)
- desktop: band y 4211-5905. Intro block padding 96px 48px 48px, total 368px: H2 at y 4307 (136px, 2 lines), H2 margin-bottom 24px, lead at y 4467 (64px, 2 lines, ends 4531), 48px bottom padding. Then the grid field starts at y 4578 (4211+368); h2 "Built to meet your / industry's demands" 64px/68px 660 -1.92px #F7F7F5 centred, 922px max; lead 24px/31.92px -0.48px #A2A1A6 centred, 922px; grid grid field y 4578-5903: border-top 1px solid rgba(255,255,255,0.1) (the full-width top rule, at y 4578), padding 64px 0 96px. Column hairlines x 165-1275: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 1px, transparent 1px 33.3333%) + border-right 1px rgba(255,255,255,0.1); the hairline layer starts 31px ABOVE the top rule (y 4547) and runs to 5903; cards 370x291 each, rows 291px starting y 4643 (64px below the top rule, never 40px): row 1 Financial services (col 1, y 4643); row 2 Public sector (col 2), Telecommunications (col 3) at y 4934; row 3 Automotive (col 1, y 5225); row 4 Education (col 2), Aerospace (col 3) at y 5516, ending 5807; then 96px empty grid band to the bottom (5903)
- phone: band y 5345-6306 (961px). Intro padding 96px 16px 48px: H2 y 5441 (153px, 3 lines), 24px margin, lead y 5618 (176px, 6 lines), 48px bottom padding. Grid field from y 5842 (border-top rule), padding 96px 0 96px: cards y 5938-6208, then 96px to the band bottom; h2 48px/51px centred, 3 lines; lead 22px/29.26px -0.44px centred, 6 lines (176px); cards one horizontal swipe row: cards 337x270 (max 352px) at x 16, 369, 721 (16px gap), first card fully visible, next peeking at the right edge; hairlines only at the container's left and right
- anatomy:
  - Card fill rgba(255,255,255,0.15) + backdrop-filter blur(14px), computed #3A3642, renders #3C3945; radius 0; no border
  - Header strip: label "[ FINANCIAL SERVICES ]" GitLab Mono 16px/24px 700 uppercase #FFFFFF in brackets, padding 24px, 72px tall, bottom border 1px rgba(255,255,255,0.2)
  - Stat: GitLab Mono 64px 500 -1.92px #FFFFFF (1M, 13x, 6x, 99%, 60%, 80x); phone 48px -1.44px
  - Stat label 14px/22px 400 #FFFFFF (developer hours saved per year, etc.)
  - Customer logo shown white (filter: brightness(0) invert(1) on the dark files, none on Deakin), 32px tall, max 140px wide, 24px under the label (Barclays, CACI, Deutsche Telekom T, JLR, Deakin University, Lockheed Martin)
  - Hover/focus reveals a summary paragraph 14px/22px #D1D0D3 in place of the stat: animation only, the resting state shows the stat
  - Pixel stairs: two full-width layers filled rgba(255,255,255,0.07) with the exclude recipe from the feature section (mask-image linear-gradient(#000,#000), url(svg); mask-composite exclude; mask-size cover). Desktop: top layer 1440x662 at 368px into the band (page y 4579-5241), desktop top stair SVG, mask-position 50% 100%; bottom layer 1440x662 directly under it at 1030px into the band (y 5241-5903), desktop bottom stair SVG, mask-position 50% 0%. Phone: 390x231 at 497px and 728px into the band (page y 5842 and 6073), using the DESKTOP top and bottom stair SVGs (not the phone ones), mask-size cover. Never draw vertical side slabs: the stairs reach the viewport edges as steps, and nothing straight-edged sits beside the grid. Keep the SVGs' 0.85 group opacity here too; the two layers touch, so no gap box is needed.
- components:
  - industry stat card
  - hairline column grid
  - pixel-stair mask (dark variant)
- copy:
  - H2: "Built to meet your / industry's demands" (curly apostrophe)
  - Lead (2 lines, centred, 922px): "Every industry faces unique security, compliance, and delivery requirements. GitLab adapts to your regulatory environment while maintaining the velocity your teams need."
- cards copy:
  - Row 1, col 1: [ FINANCIAL SERVICES ] / 1M / "developer hours saved per year" / Barclays logo
  - Row 2, col 2: [ PUBLIC SECTOR ] / 13x / "faster security scanning" / CACI logo
  - Row 2, col 3: [ TELECOMMUNICATIONS ] / 6x / "faster time to market" / Deutsche Telekom T
  - Row 3, col 1: [ AUTOMOTIVE ] / 99% / "shorter feedback loops" / JLR mark
  - Row 4, col 2: [ EDUCATION ] / 60% / "reduction in manual tasks" / Deakin University logo
  - Row 4, col 3: [ AEROSPACE ] / 80x / "faster CI pipeline builds" / Lockheed Martin logo
  - Each label sits 8px under its stat (stat 84px box, label 22px). These six labels are the only stat labels: never replace one with link text or "See how ..." copy; a stat without its label is wrong.
  - Phone: same cards and labels, in the order above, in the swipe row.
- copy prov: observed, verbatim, https://about.gitlab.com/ (2026-10-29)

**Customer quote carousel**
- summary: Charcoal band with a large 64px quote headline led by a gradient "//", a grey support quote and an attribution block with the customer logo at right; a 1 / 6 counter and two round arrow buttons sit top right.
- ground: #171321
- desktop: band y 5904-6612, padding 96px 48px 120px; content x 165-1275; controls counter "1 / 6" GitLab Mono 14px/32px -0.28px #A5A3A3 at x 1120 y 6003; two 40x40 circle buttons (border 1px #45424D, radius 120px, white 16px chevrons) at x 1185 and 1235; headline y 6058, 64px/68px 660 -1.92px #F7F7F5, about 982px wide, 3 lines; support 24px/31.92px 400 -0.48px #A5A3A3, ~880px wide, y 6331, in curly quotes; attribution right-aligned to the content edge (x 1275) and TOP-aligned with the support quote: the footer row is display flex, align-items flex-start, support at left, attribution at right, both tops at the same y (6332 on slide 1). The attribution box is only as wide as its content (164px for HackerOne/Mitch Trale, x 1111-1275; 316px for the longest role). Inside it, top to bottom: logo 32px tall (max 180px wide), 8px gap, name 18px/28px 660 #F7F7F5, role 16px/24px 400 #F7F7F5. Never bottom-align it, never give the row a min-height.
- phone: band y 6305-7245, padding 64px 16px 96px; controls counter + two 40px buttons right-aligned at the top; headline 48px/51px -1.44px, 7 lines; support 22px/29.26px; attribution stacked below the support quote, left-aligned
- anatomy:
  - "//" mark: same size as the headline, gradient text linear-gradient(90deg, #FC6D26, #E53C97 50%, #7759C2), 24px right margin
  - Resting state is slide 1 (HackerOne); slide changes are animation only
- components:
  - quote slide
  - round arrow button
  - gradient // mark
- slides:
  - Every slide: a gradient "//" then the headline, then the support line. All six headlines and all six supports are verbatim customer words (re-read from the live page 2026-10-29): set every support inside curly quotes exactly as given, including slide 5's leading ellipsis. Quote marks are only for verbatim words: if you ever have to shorten or paraphrase a line, drop the quote marks and never present it as the customer speaking. Never use "Read how ..." or link copy in place of the quote.
  - Slide 1 (resting state), HackerOne, Mitch Trale, Head of Infrastructure. Headline (verbatim, 3 lines desktop / 7 phone): "GitLab is helping us catch security flaws early, and it's integrated into the developer's flow." Support (verbatim, re-read from the live page 2026-10-29 (3 lines desktop / 4 phone)): “An engineer can push code, get immediate feedback from cascading audit steps, and see if there's a vulnerability built in there.”
  - Slide 2, Lockheed Martin, Alan Hohn, Director, Software Strategy. Headline (verbatim, 4 lines): "We were able to quadruple the number of builds per night, ultimately improving build success from 60% to 90%." Support (verbatim): "As a result, the customer is receiving new capabilities sooner and with better quality."
  - Slide 3, Ericsson, Daniel Costa Soares, Head of Software Automation and Support. Headline (verbatim, 3 lines): "The faster deployment capabilities GitLab enables directly contribute to our business growth." Support (verbatim, re-read from the live page 2026-10-29): “Communications service providers choose us because we can deliver innovation at the speed their markets demand.”
  - Slide 4, Barclays, Chris Hutchison, Director, Enterprise Toolchain. Headline (verbatim, 3 lines): "By integrating AI into the developer workflow, our teams are writing better code, faster." Support (verbatim, re-read from the live page 2026-10-29): “Our developers are experiencing meaningful productivity gains, freeing them up to focus on higher-value problem solving.”
  - Slide 5, Nasdaq, Stephen Cooper, Sr Director of Software Engineering. Headline (verbatim, 2 lines): "GitLab is helping Nasdaq achieve its vision of becoming 100% cloud" (no full stop). Support (verbatim, re-read from the live page 2026-10-29): “...by operating at DevOps speed and getting projects out to the cloud quickly, reliably, and with quality.”
  - Slide 6, Siemens, Fabio Huser, Software Architect. Headline (verbatim, 3 lines): "With GitLab CI/CD, we are able to complete 1.5 million builds every month." Support (verbatim, re-read from the live page 2026-10-29): “Using GitLab, our teams can work on the same project and share code within minutes.”
- slides prov: observed https://about.gitlab.com/ (2026-10-29); all headlines and supports verbatim

**Latest from GitLab (resources row)**
- summary: Full-bleed three-column row of text-only resource links on Charcoal, divided by 1px #45424D rules, each with a tiny gradient square eyebrow.
- ground: #171321; top border 1px #45424D
- desktop: band y 6612-6935 (323px); grid 3 x 480px full-bleed, border-right 1px #45424D between; cell padding 64px 48px; eyebrow y 6676, title y 6724; hover cell fill rgba(255,255,255,0.08)
- phone: band y 7246-8119; grid 1 column, cells stacked with 1px #45424D bottom borders; cell padding 48px 24px
- anatomy:
  - Eyebrow: 10x10 square filled linear-gradient(#FC6D26, #E53C97 50%, #7759C2) + 8px gap + label in GitLab Mono 14px/24px uppercase #A2A1A6 (WHAT'S NEW, BLOG, BLOG)
  - Title 24px/28px 580 -0.48px #F7F7F5, 383px wide
  - Description 14px/22px 400 #A2A1A6
  - Visually hidden H2 "Latest from GitLab"
- components:
  - resource cell
  - gradient square eyebrow
- copy:
  - Cell 1: eyebrow "WHAT'S NEW"; title "GitLab 19.5: Connect agents, secure secrets, and route reviews" (2 lines desktop); description "Connect any MCP-compatible agent to GitLab, keep secrets under your existing permissions, and get every merge request to the right reviewer, faster." (3 lines)
  - Cell 2: eyebrow "BLOG"; title "When code is abundant" (1 line); description "Why GitLab's CEO believes the winners in the agentic software era will be the ones who solve for trust, not just speed." (3 lines)
  - Cell 3: eyebrow "BLOG"; title "Open weight models, now on GitLab" (1 line); description "Pick the right model for each job. Balance quality, speed, and cost, all within your guardrails." (2 lines)
  - Title to description gap 24px (title y 6725, description 28px later on 1-line titles: y 6777)
- copy prov: observed, verbatim, https://about.gitlab.com/ (2026-10-29)

**Closing CTA: Own what's next**
- summary: White band, centred mono eyebrow, a 96px Charcoal headline and two buttons, with the product UI art rising out of a full-width gradient pixel strip at the bottom edge that runs straight into the footer.
- ground: #FFFFFF; bottom art panel #EAEAEA under the gradient pixel PNG
- desktop: band y 6935-7711 (776px); copy padding 120px 48px 51px; eyebrow "// START BUILDING FASTER TODAY" GitLab Mono 14px/40px -0.28px uppercase #171321 centred, y 7054; headline "Own what's next" 96px/99.84px 660 -2.88px #171321 centred, y 7110; buttons y 7242, centred pair: "Get your free trial" primary 184x47 + "Contact sales" tertiary 170x47, 24px apart; art backdrop strip 1440x267 at the band bottom (y 7444-7711): orange/pink/purple gradient pixel PNG on #EAEAEA; product UI SVG 782x369 centred (x 329) sitting on the strip and rising 102px above it, flush with the footer
- phone: band y 8119-8625; copy padding 64px 16px 14px; headline 48px/49.92px -1.44px, one line; buttons stacked full width (358px): primary 47px, then tertiary 45px; art strip 390x122, product UI 364x172 centred
- anatomy:
  - Primary button: #171321 fill, 1px #171321 border, #FFFFFF text 18px/22.5px 660, padding 11px 16px, radius 4px; hover inverts to #FFFFFF fill with #171321 text and border
  - Tertiary "Contact sales": no fill, #171321 18px 660 text + 16px chevron-right, NO visible underline at rest (its underline colour is transparent; offset 2px). Never underline it permanently
  - The product UI is a stylised Duo Agent Platform window (Agents list behind an Activity/Details panel) in Charcoal with orange accents
- components:
  - primary button
  - tertiary chevron button
  - gradient pixel strip

**Footer**
- summary: Charcoal footer: white GitLab logo with ® at left, five link columns, then social icons over a white hairline and two legal lines.
- ground: #171321 (footer.be-nav-footer, padding 40px 16px)
- anatomy:
  - Container 1170px (x 135-1305); logo row: full white GitLab logo (tanuki + wordmark) 134x32 at x 140, y +41, followed by a ® at 18px
  - Columns (desktop, headings at x 331, 534, 737, 941, 1144, 160px wide, 203px pitch): headings 18px/28px 660 #FFFFFF; links 14px/16.8px 400 #FFFFFF; hover stays white (no underline)
  - Column 1: Pricing: View plans, Why Premium?, Why Ultimate? | Contact Us: Contact sales, Support portal, Customer portal, Status, Terms of use, Privacy statement, Cookie Preferences
  - Column 2: Platform: Explore the platform, Duo Agent Platform, CI/CD, Orbit, Secrets Management, Why GitLab | Topics: CI/CD, GitOps, DevOps, Version Control, DevSecOps, Cloud Native, AI for Coding, Agentic AI
  - Column 3: Solutions: DevOps modernization, Security modernization, AI modernization, Financial services, Public sector, Telecommunications, Automotive, Education, Aerospace, Enterprise, Small business, Startups, GitOps, Software composition analysis, Value stream management, All solutions
  - Column 4: Resources: Install, Quick start guides, Docs, University, Demo Series, Demo Hub, Services, Blog, Community, Customers, Partners, Events, Newsletter, What's new, All resources
  - Column 5: Company: About, Jobs, Press, Handbook, Leadership, Investor relations, Trust Center, AI Transparency Center, Sustainability, Diversity, inclusion and belonging (DIB), Modern Slavery Transparency Statement
  - Social row at y +848: X (Twitter, 18x20), Facebook, YouTube, LinkedIn (24x20), white, about 15px apart, starting x 136; then a 1px solid #FFFFFF rule across the 1168px container
  - Legal: "Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license" (14px/21.8px #FFFFFF) and "© 2026 GitLab Inc." (14px/21px #FFFFFF)
  - No street address or phone number is published in the footer
- phone: Single column with 33px gutter: logo, then Pricing, Contact Us, Platform, Topics as one-column lists; Solutions, Resources and Company split into two CSS columns (column-count 2, 179px pitch); then "Language: English" selector (globe icon, 16px, chevron), social icons, white rule, the two legal lines. Footer runs 2773px tall.
- spacing:
  - Measured offsets from the footer top (desktop): every column starts its first heading at +41.
  - Heading (28px tall) to first link: first link top is 49px below the heading top (21px clear space).
  - Link rows: 40px pitch (17px text + 23px). A link that wraps to 2 lines in the 160px column (Software composition analysis, Value stream management, Diversity...) is 34px tall and the next row starts 52-57px below it.
  - Group to group in one column: the next heading top is 43px below the last link top (26px clear space). Column 1: Pricing +41, links +90/+130/+170, Contact Us +213, links +262 ... Cookie Preferences +502. Column 2: Platform +41, Why GitLab +290, Topics +333, Agentic AI +662.
  - Longest column (Solutions) ends at +731; social row at +848; legal lines at +929 and +959; footer about 1023px.
  - Phone: one column at x 33; heading to first link 49px; 40px row pitch; group gap 35px from last link top to next heading top within the same list block, 65px between blocks (Contact Us last link to Platform). Solutions, Resources and Company split into two CSS columns at x 33 and 212.
  - Never pad the lists looser than this: no extra margins on headings beyond the 21px and 26px above.

**On dark grounds**
- secondary button: #FFFFFF fill, #171321 text 18px 660, radius 4px, padding 11px 16px; hover #E8E7EB (Talk to sales, Discover GitLab Flex); in the nav over the hero, the ghost variant is white text, no fill, hover rgba(255,255,255,0.12)
- link: #FFFFFF, no underline; chevron/arrow icons white
- muted text: #A2A1A6 (body), #A5A3A3 (quote support), rgba(255,255,255,0.85) for the hero lead
- hairline: solid 1px #45424D, or 1px rgba(255,255,255,0.08-0.2) for grids and card headers
- logo variant: full-colour tanuki in the nav; full-colour tanuki + white wordmark in the footer; customer logos render white through CSS filters (most supplied files are Charcoal or black; see each slot caption)

## Components

- **button primary on light** (observed): fill #171321, text #FFFFFF, border 1px solid #171321, radius 4, padding 11px 16px, height 47, example Get your free trial (184x47), text style 18px/22.5px GitLab Sans 660, ring px 1, ring #171321, padding x 16, font size 18, weight 660, face body
  - hover (observed): fill #FFFFFF, text #171321, border 1px solid #171321, transition background-color 0.3s cubic-bezier(0.7,0,0.3,1)
- **button primary on dark** (observed): fill #FFFFFF, text #171321, border 1px solid #FFFFFF, radius 4, padding 11px 16px, height 47, example Get free trial (nav, 141x47), text style 18px/22.5px GitLab Sans 660, ring px 1, ring #FFFFFF, padding x 16, font size 18, weight 660, face body
  - hover (observed): fill transparent, text #FFFFFF, border 1px solid #FFFFFF
- **button secondary on dark** (observed): fill #FFFFFF, text #171321, border none, radius 4, padding 11px 16px, height 45, example Talk to sales (139x45), text style 18px/22.5px GitLab Sans 660, padding x 16, font size 18, weight 660, face body. Two white buttons on dark, both true, each in its own place: Talk to sales (numbered-cards band) is this one: 660, line 22.5px, padding 11px 16px, no border, 45px. Discover GitLab Flex (Flex banner) is button_flex_on_dark: 580, line 20px, padding 12px 16px, 1px #FFFFFF border, 46px. Re-measured 2026-10-29.
  - hover (observed): fill #E8E7EB
- **button flex on dark** (observed): fill #FFFFFF, text #171321, text style 18px/20px GitLab Sans 580, border 1px solid #FFFFFF, ring px 1, ring #FFFFFF, radius 4, height 46, padding x 16, padding 12px 16px, font size 18, weight 580, face body, example Discover GitLab Flex (208x46 desktop, 310x46 phone full width of the banner copy)
  - hover (observed): fill #E8E7EB
- **button ghost on dark** (observed): fill none, text #FFFFFF, radius 4, padding 11px 16px, example Request a demo (nav, 170x45), text style 18px/22.5px GitLab Sans 660, height 45, padding x 16, font size 18, weight 660, face body
  - hover (observed): fill rgba(255,255,255,0.12)
- **button tertiary** (observed): fill none, text #171321, decoration no visible underline at rest: the computed text-decoration-line is underline but text-decoration-color is rgba(0,0,0,0) (re-measured 2026-10-29), so it renders as plain text + chevron. Never draw a resting underline, radius 4, padding 11px 16px, example Contact sales (170x47 desktop, 358x45 phone), text style 18px/22.5px GitLab Sans 660 + 16px chevron-right, height 47, padding x 16, font size 18, weight 660, face body
- **hero cta bar** (observed): size 370x72 (one column), fill linear-gradient(-90deg, rgba(119,89,194,0.3), rgba(229,60,151,0.3) 34%, rgba(252,109,38,0.3)), border 1px solid rgba(255,255,255,0.2), radius 0, blur backdrop-filter blur(12.5px), padding 24px, text #FFFFFF, text style 18px/22px GitLab Sans 580, label left, 16px arrow right
  - hover (observed): background color rgba(255,255,255,0.17) under the gradient, transition 0.18s ease-out
- **hero glass card** (observed): size 370 wide, 121-146 tall, fill rgba(255,255,255,0.1) + blur(12.5px), radius 0, padding 24px, gap 24px, eyebrow GitLab Mono 12px uppercase (#A2A1A6 or gradient text), title 18px/28px 660 #FFFFFF; no arrow at rest (a 16px arrow is opacity 0 and fades in on hover/focus only)
  - hover (observed): fill rgba(255,255,255,0.17)
- **feature card** (observed): border 1px solid #D1D0D3, fill #FFFFFF, radius 0, media #171321 panel 541x400 (356x262 phone); the product SVG is centred with max-width 68% of the panel and object-fit contain, never wider: desktop AI UI 368x276, platform tiles 267x267, security UI 516x322 flush to the panel bottom; phone AI UI 242x182, tiles 205x205, security UI 242x151 flush bottom, body padding 32px (24 phone), link 18px 580 #171321 + chevron, no underline
  - hover (observed): media image transform scale(1.05)
- **numbered card** (observed): border 1px solid #45424D, fill #171321, radius 0, padding 24px, gap 32px, ordinal GitLab Mono 32px, gradient or #B5B6B8
- **industry card** (observed): fill rgba(255,255,255,0.15) + blur(14px), radius 0, header 72px, mono 16px 700 uppercase in brackets, bottom rule 1px rgba(255,255,255,0.2), stat GitLab Mono 64px 500
  - hover (observed): content summary paragraph 14px #D1D0D3 replaces the stat (animation only)
- **resource cell** (observed): padding 64px 48px (48px 24px phone), divider 1px #45424D, eyebrow 10px gradient square + mono 14px
  - hover (observed): fill rgba(255,255,255,0.08)
- **round arrow button** (observed): size 40x40, border 1px solid #45424D, radius 20, icon 16px white chevron, shape circle: 40x40 with radius 20px (the site writes border-radius 120px, which renders the same circle)
- **nav link** (observed): text #FFFFFF, chevron 12px, text style 16px/24px GitLab Sans 400 over the hero
  - hover (observed): color #D1D0D3, transition color 0.2s
- **footer link** (observed): text #FFFFFF, pitch 40px row pitch for one-line links (17px text + 23px); a link that wraps to 2 lines (34px) takes 52-57px, text style 14px/16.8px GitLab Sans 400
  - hover (observed): color #FFFFFF, decoration none

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| interactive | cubic-bezier(0.70, 0.00, 0.30, 1.00) |  | Standard ease in and out: logo stroke reveal, type-repetition slides, most layer reveals. Values are the guide's Flow (After Effects) plugin input | published |
| expressive | cubic-bezier(0.30, 0.80, 0.70, 1.20) |  | Overshoot and snap back for expressive moments. Flow plugin input | published |
| icon-reveal |  | 650ms | Icons animate in swiftly at 0.65s; the icon's design dictates the reveal | published |
| lower-third | linear opacity | 1000ms | Lower thirds fade 0 to 100% over 1s, hold 4-5s, fade out over 1s | published |
| drift |  |  | Subtle drifts of 2-5% scale or position to avoid dead frames; in place of large drifts, move-ins or zooms use snap edits | published |

## Icon tokens

Grid 8px grid, stroke 1px at 24px, 2px at 96px; linework only (published).
| Name | Size | Use |
|---|---|---|
| small | 24px |  |
| large | 96px |  |

## Signature moves

### Soft freeform gradient ground

Where: backgrounds of core brand assets (hero banners, slides, social); the guide's own intro banner is one.
Do: default: white base fill with Orange 02p #FC6D26, Purple 01p #A989F5 and Pink 01g #FFB9C9 blurred softly into one another, often under 30% opacity. Max 3 colors besides the base; Purple or Orange always in it; dark mode uses Purple 04s #232150 as the base. Built as an Illustrator freeform gradient, layered radial gradients in Figma, or a complex linear gradient. Type and logo sit on the part with enough contrast (the white area). One gradient ground per asset.
Don't: use Charcoal or gray in a background gradient, go heavy on one color, or saturate it: colors should feel soft.
Example: "Software. Faster.".

### The AI gradient

Where: content about AI and GitLab Duo, and the stroke around the horizontal tagline lockup.
Do: a linear gradient from Orange 01p #FCA326 to Purple 01p #A989F5. On the horizontal "Software. Faster." lockup it is a thin stroked box around logo and tagline, signalling that AI runs through the product. One tagline lockup per asset.
Don't: use the AI gradient on content that isn't about AI, or set copy in orange: copy stays white or Charcoal.
Example: "Software. Faster.", with "Faster." set as underline.

### Type repetitions

Where: moments of emphasis: one word or a short phrase in a hero, a slide, a video.
Do: set the word in GitLab Sans Bold; copy it, cut off the bottom 1/4 from the baseline, and stack the cut copy 2-4 times above the original; the gap between repetitions is 3/4 of the removed slice. Same weight and color throughout; repetitions may drop opacity. In motion the lines slide up behind masks one at a time, opacity 0 to 100 on the Interactive ease. Reserved for emphasis, not every headline.
Don't: mix weights or colors between repetitions, or use it on long phrases.
Example: "Iterate".

### One curved corner

Where: containers for copy or images, photo crops, icons and illustration shapes.
Do: square shapes get a single curved corner at the bottom right, radius 25-30% of the square's width (from the tanuki's curves). When all corners curve, the radius is 5-10%, echoing a browser window. Foundational shapes: radius about 10-20% of a side. One radius applied consistently across an asset.
Don't: mix radii in one asset, or round a CTA button into a label pill (labels are not buttons).
Example: "A container with one soft corner".

## Messaging: rules

The guide's one line is the tagline "Software. Faster.": the period makes a pause between what teams build and the advantage GitLab gives. The handbook adds the mission (ship trusted software at the speed of imagination), a messaging page with value-proposition lengths, and words to avoid.

Why it works: A two-word promise fits every format, from a lockup to a booth, and maps to all three personality traits.

- Use the tagline lockup once per asset; skip it if the headline already says "Software. Faster."
- Message the platform, not Git: GitLab is a product and a platform
- No 'first' or 'only'; say 'single application' or 'built in', not 'integrated'
- Headlines can experiment beyond official messaging if they stay truthful

Sources: https://design.gitlab.com/brand-logo/branded-lockups/, https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/, https://handbook.gitlab.com/handbook/company/mission/

## Voice: rules

Three traits, each with a published is/is-not table: Visionary (inspirational, not sensationalistic), Empathetic (approachable, not overeager) and Intentional (clear, not pushy). Style follows AP with GitLab overrides: sentence case, serial comma, contractions, American English.

Why it works: Pairing each trait with the excess it must avoid keeps confident expertise from tipping into arrogance or hype.

|  |  |
|---|---|
| Traits | Visionary, Empathetic, Intentional |
| Case | sentence case; capitalize after a colon in titles |
| Commas | serial (Oxford) |
| Spelling | American English |
| Dates | November 16, 2023 (external), 2023-11-16 (internal) |
| Time | 6:00 a.m., UTC for virtual events |

- Give clear examples and data; keep recommendations provable
- Meet readers where they are; explain but don't patronize
- Use plain language and be honest, even about limitations
- Sentence case for headlines, titles and subheads
- Active voice, contractions, serial comma, American English
- Don't sensationalize
- Don't assume the reader knows the technology
- Don't be pushy
- Don't use his/her (use they)

Do and don't:
- Do: "GitLab Duo features do not use your content to train models.". Intentional: plain, provable, transparent (the guide's own example).
- Don't: "The first and only AI platform you'll ever need.". 'First' and 'only' are hard to prove, so they're banned.

Real examples, to look at on GitLab's own pages (not for reuse):
- The three traits as pills in Orange 01p, Teal 02s and Purple 01p: https://design.gitlab.com/brand-messaging/brand-voice/

Sources: https://design.gitlab.com/brand-messaging/brand-voice/, https://design.gitlab.com/brand-messaging/style-formatting/, https://handbook.gitlab.com/handbook/marketing/brand-experience/content-style-guide/

## Logo: rules

The core logo is the full-color tanuki logomark beside the GitLab wordmark, horizontal. The tanuki, redrawn in 2022 around the DevOps infinity loop, can stand alone once the core logo has given context; the wordmark never stands alone. Placement defaults to a left corner, top or bottom.

Why it works: Putting DevOps inside the mark lets the logo carry the product story, and a single unaltered tanuki builds recognition.

|  |  |
|---|---|
| Clear space | x = height of the lowercase a |
| Minimum | 20px digital; 0.4 in / 11mm print |
| Max | 20% of frame height (scaled from 1080px) |
| Variations | full color; white; Charcoal; tanuki also Orange 02p, Purple 01p, Purple 02p |
| Placement | left corner by default |

- Clear space: x on all sides, where x is the height of the wordmark's lowercase a
- Minimum size 20px digital, 0.4 in (11mm) print; no more than 20% of the frame height
- Full color by default; white or Charcoal one-color when single-color or brand is established
- Tanuki alone may also be Orange 02p, Purple 01p or Purple 02p, occasionally (e.g. orange favicon)
- Left-aligned corner placement by default; centered only when the logo is the focus (video end slates); right only case by case
- Co-brand: logos equal in size, a Gray 03 divider as tall as the GitLab logo
- Partner lockup: max twice the core logo's height, in a corner parallel or perpendicular to it
- Don't apply a stroke, outline or keyline
- Don't recolor any part
- Don't rearrange, rotate, flip or distort
- Don't add drop shadows or effects
- Don't use it as a frame for imagery
- Don't use it in a line of text
- Don't create tanuki mascots
- Don't use the wordmark without the tanuki

Do and don't:
- Do: "GitLab". Full color or Charcoal wordmark with the tanuki, left corner.
- Don't: "GitLab". Do not recolor any part of the logo.

Real examples, to look at on GitLab's own pages (not for reuse):
- Anatomy: logomark plus wordmark make the core logo: https://design.gitlab.com/brand-logo/core-logo/
- Clear space equals the lowercase a: https://design.gitlab.com/brand-logo/core-logo/
- Nine incorrect uses, from stroke to logo-in-a-sentence: https://design.gitlab.com/brand-logo/core-logo/
- The tanuki built around the DevOps loop: https://design.gitlab.com/brand-logo/logomark/
- Tagline lockups: stacked, and horizontal in an AI-gradient box: https://design.gitlab.com/brand-logo/branded-lockups/
- Co-branding with a Gray 03 divider: https://design.gitlab.com/brand-logo/branded-lockups/

Sources: https://design.gitlab.com/brand-logo/core-logo/, https://design.gitlab.com/brand-logo/logomark/, https://design.gitlab.com/brand-logo/branded-lockups/, https://about.gitlab.com/press/press-kit/, https://handbook.gitlab.com/handbook/marketing/brand-experience/brand-creative/

## Color: rules

Primary: White, Charcoal, three tanuki oranges and two purples (Purple 01p is the signature). Secondary adds tints, deep purples, teals and cool grays. Gradient-only pinks and a vermillion feed complex backgrounds. Copy is only ever white or Charcoal; color lives in gradients, graphics, links and small data points.

Why it works: Keeping words black or white lets the warm tanuki oranges and the purple carry identity in graphics without hurting legibility.

|  |  |
|---|---|
| Default gradient | Orange 02p + Purple 01p + Pink 01g on white |
| Dark base | Purple 04s #232150 |
| Contrast | 4.5:1 text, 3:1 large text |

- Backgrounds: gradients, or solid white, Charcoal or purple
- Headlines, body, CTAs and buttons in white or Charcoal only
- Links: Purple 01p on dark, Purple 02p on light
- Teals mean positive; pink is reserved for gradients; grays set hierarchy
- Text contrast 4.5:1 preferred, 3:1 for large text (WCAG 2.1 AA)
- Approved pairs: Charcoal on Orange 01p, Orange 02p, Purple 01p, Purple 01s, Teals, White, Orange 01s; white on Orange 03p, Charcoal, Purple 02p, 02s, 03s, 04s
- Simple gradients: one color family, one or two tones apart, linear
- AI gradient (Orange 01p to Purple 01p) only for AI and GitLab Duo content
- Complex gradients: max 3 colors plus base, soft (often under 30% opacity), Purple or Orange always in, no Charcoal or gray
- Don't set sentences or large copy in any color but white or Charcoal
- Don't put Charcoal or gray in a background gradient
- Don't use the promptling 'a' swatches anywhere but promptlings

Not published: color proportions or ratios; a muted text color or a surface color.

Do and don't:
- Do: "Learn more". CTAs and buttons in Charcoal or white, GitLab Sans SemiBold (the guide's own button sample).
- Don't: "Learn more about GitLab Duo". Orange copy: only white or Charcoal may set sentences.
- Do: "Software. Faster.". White on Purple 04s, an approved pairing and the dark-mode base.
- Don't: "Software. Faster.". White on Orange 01p is not an approved pairing; Orange 01p takes Charcoal.

Real examples, to look at on GitLab's own pages (not for reuse):
- Approved text and ground pairings: https://design.gitlab.com/brand-design/color/
- The default freeform background gradient: https://design.gitlab.com/brand-design/color/
- One-step and two-step simple gradients: https://design.gitlab.com/brand-design/color/

Sources: https://design.gitlab.com/brand-design/color/, https://design.gitlab.com/brand-design/visual-design-promptlings/

## Typography: rules

One family does everything: GitLab Sans, a tall-x-height derivative of Inter, mostly in Bold and Regular, SemiBold for buttons. GitLab Mono, from JetBrains Mono, appears sparingly for labels, stats and code. Copy is left-aligned in sentence case, and a stacked 'type repetition' marks emphasis.

Why it works: Tight, heavy headlines read as confident and technical; Mono quietly points back to code without becoming a second voice.

|  |  |
|---|---|
| Headline | Bold 700, 1.05, -0.045em |
| Subhead | Regular 400, 1.10, -0.02em |
| Body | Regular 400, 1.35, 0 |
| Button | SemiBold 600 |
| Mono | Regular 400 only |
| Video lower third | Inter SemiBold 60px name / Regular 40px title |

- Headlines: Sans Bold, 105% leading, -45 tracking (-4.5%)
- Subheads and intro/outro paragraphs: Sans Regular, 110% leading, -20 tracking (-2%), optical kerning
- Body: Sans Regular, 135% leading, 0 tracking, auto kerning
- CTAs and buttons: Sans SemiBold
- Left-align all copy; sentence case; ligatures on; hyphenation off
- One size per block of copy; solid fills except in motion graphics
- Mono: Regular only, short elements; stats in infographics can be enlarged in Mono
- Where GitLab Sans isn't available (e.g. Google apps), use Inter
- Don't justify, center or right-align copy
- Don't set all caps
- Don't use GitLab Mono for long text or inside a Sans paragraph
- Don't outline text outside motion graphics

Do and don't:
- Do: "Remediating vulnerabilities with GitLab's security insights and AI". Sentence case, Bold, left-aligned (the guide's example).
- Don't: "Remediating Vulnerabilities with GitLab's Security Insights and AI". Title case: the guide's don't.

Real examples, to look at on GitLab's own pages (not for reuse):
- Type hierarchy with leading and tracking: https://design.gitlab.com/brand-design/typography/
- Type repetition construction: https://design.gitlab.com/brand-design/typography/
- Type repetitions in use: https://design.gitlab.com/brand-design/typography/

Sources: https://design.gitlab.com/brand-design/typography/, https://design.gitlab.com/brand-design/visual-design-diagrams-infographics/, https://design.gitlab.com/brand-design/motion/

## Graphic elements: rules

A kit of product-derived graphics: foundational shapes cut from the tanuki's geometry, the DevOps loop, pill labels, code lines, curved containers, pipelines with nodes, and commit and plus symbols as accents. Everything is flat and front-facing, with one stroke weight and one corner radius per asset, moving left to right.

Why it works: Every shape points back to the product, so even an abstract layout reads as software delivery.

|  |  |
|---|---|
| Shape radius | 10-20% of a side |
| One curved corner | 25-30% of width |
| All corners | 5-10% |
| Label | pill, max 3 words |

- Front-facing, no 3D depth or shadows; reduce detail as graphics scale down
- One stroke weight and one corner radius per asset; capped line ends
- Graphics move left to right for forward motion
- Foundational shapes: corner radius about 10-20% of a side
- Curved containers: one bottom-right curve at 25-30% of width, or 5-10% on all corners
- Labels: full pill, 3 words or fewer, optional icon; never a CTA
- Code lines: left-aligned with indents and varied lengths; don't mix bar and stroke styles
- DevOps loop: top overlaps bottom; pipelines curve at corners and may end in a node
- Don't use a label as a button
- Don't mix rounded-bar and stroke code lines
- Don't add shadows or 3D

Real examples, to look at on GitLab's own pages (not for reuse):
- Foundational shapes from the tanuki's geometry: https://design.gitlab.com/brand-design/visual-design-core-elements/
- Curved containers on badges, a speaker card and a web page: https://design.gitlab.com/brand-design/visual-design-core-elements/
- Pill labels: https://design.gitlab.com/brand-design/visual-design-core-elements/
- Pipelines with nodes: https://design.gitlab.com/brand-design/visual-design-core-elements/
- The DevOps loop: https://design.gitlab.com/brand-design/visual-design-core-elements/

Sources: https://design.gitlab.com/brand-design/visual-design-core-elements/

## Iconography: rules

Marketing icons are open linework on an 8px grid in two sizes, 24px with a 1px stroke and 96px with a 2px stroke, each with one rounded corner and deliberate line breaks. A software development lifecycle set covers each stage. Product UI uses a separate icon set.

|  |  |
|---|---|
| Grid | 8px |
| Sizes | 24px / 96px |
| Stroke | 1px / 2px |
| Radius | 3px / 12px |
| Breaks | 3px / 7px |
| Caps, joins | butt caps, miter joins |

- 24px: 1px stroke, 3px corner radius, 3px line breaks
- 96px: 2px stroke, 12px corner radius, 7px line breaks
- White or Charcoal linework by default
- Leave line breaks so no icon is fully enclosed
- In diagrams, icons sit in a circle with 25% padding
- Larger than an icon? Use an illustration
- Don't use marketing icons inside the product UI
- Don't close every shape
- Don't fill icons solid as the default

Real examples, to look at on GitLab's own pages (not for reuse):
- Construction of the 24px and 96px icons: https://design.gitlab.com/brand-design/visual-design-brand-icons-and-patterns/
- Software development lifecycle icons: https://design.gitlab.com/brand-design/visual-design-brand-icons-and-patterns/
- Patterns with icons, accents and grids: https://design.gitlab.com/brand-design/visual-design-brand-icons-and-patterns/

Sources: https://design.gitlab.com/brand-design/visual-design-brand-icons-and-patterns/, https://design.gitlab.com/brand-design/visual-design-diagrams-infographics/

## Illustration: rules

Illustrations extend the icon system: thin linework from code lines, solid shapes for weight, dashed lines for iteration, and color from the palette, on white or Purple 04s. Promptlings, colorful cubes with a glowing orange core, stand for GitLab Duo's AI agents. Diagrams and infographics use the same parts with lots of negative space.

Why it works: Building illustration out of icons and code lines keeps storytelling tied to the product rather than to characters.

|  |  |
|---|---|
| Stroke | 2px digital, 15px large print |
| Grounds | White or Purple 04s |
| Promptlings | 6 colors, 4 expressions, 6 poses |

- Single stroke weight: about 2px digital, 15px large print
- Corners mix angles and curves: 25-30% single curve, 5-10% all corners
- A container shape can ground the scene; the illustration breaks out of it
- Always pair with copy
- Promptlings: base gradient light to dark, left to right; the inner cube is always orange
- Diagrams: icons in circles with 25% padding; lines break before touching an icon
- Don't create tanuki mascots
- Don't use promptling swatches outside promptlings
- Don't clutter diagrams

Real examples, to look at on GitLab's own pages (not for reuse):
- Illustration on light and Purple 04s grounds: https://design.gitlab.com/brand-design/visual-design-brand-illustrations/
- Illustration banner: https://design.gitlab.com/brand-design/visual-design-brand-illustrations/
- A diagram, light and dark: https://design.gitlab.com/brand-design/visual-design-diagrams-infographics/
- Promptlings, the AI agents of GitLab Duo: https://design.gitlab.com/brand-design/visual-design-promptlings/
- Promptling expressions and emotes: https://design.gitlab.com/brand-design/visual-design-promptlings/

Sources: https://design.gitlab.com/brand-design/visual-design-brand-illustrations/, https://design.gitlab.com/brand-design/visual-design-diagrams-infographics/, https://design.gitlab.com/brand-design/visual-design-promptlings/

## Photography: rules

Real people, objects and landscapes, authentic and positive. Three subjects: heroic customer portraits (eye level, neutral ground, soft light), top-down metaphors (texture, pattern, paths), and top-down or over-the-shoulder collaboration. Photos can carry light graphic overlays, white or Charcoal text, or contained and masked crops.

|  |  |
|---|---|
| Portraits | eye level, neutral ground, soft light |
| Metaphors | top-down, texture or paths |
| Collaboration | top-down or over the shoulder |
| Overlays | graphics or text, not both |

- Diverse backgrounds, ages, body types, races and genders
- Brand colors in or around the photo; Brand Design can tint
- Portraits: eye level, neutral background, soft natural light, shallow depth of field
- Text overlays: white or Charcoal on the least detailed area; never with graphic overlays on one image
- Contained crops: circles or curved containers for headshots
- AI-generated images need Brand approval and must follow these rules
- Don't heavily edited or unnatural hues
- Don't visual inaccuracies
- Don't cinematic or fantasy looks
- Don't staged, 'acting' scenes
- Don't irrelevant ways of working

Real examples, to look at on GitLab's own pages (not for reuse):
- Customer portrait samples: https://design.gitlab.com/brand-design/photography/
- Top-down metaphor photos: https://design.gitlab.com/brand-design/photography/
- Collaboration from above: https://design.gitlab.com/brand-design/photography/
- Contained crops: https://design.gitlab.com/brand-design/photography/
- Text overlays: https://design.gitlab.com/brand-design/photography/

Sources: https://design.gitlab.com/brand-design/photography/, https://handbook.gitlab.com/handbook/marketing/brand-experience/brand-creative/

## Motion: rules

Sleek and clean, lots of negative space, frames split into rows and columns. Two published eases (Interactive and Expressive), stroke reveals for lines and the logo, snap edits and subtle drifts for type, slowly evolving blurred gradients, and the DevOps loop as the only transition mask.

|  |  |
|---|---|
| Interactive | cubic-bezier(0.70, 0, 0.30, 1) |
| Expressive | cubic-bezier(0.30, 0.80, 0.70, 1.20) |
| Icons | 0.65s |
| Lower thirds | 1s in, 4-5s hold, 1s out |

- Interactive ease: 0.70, 0.00, 0.30, 1.00; Expressive: 0.30, 0.80, 0.70, 1.20 (Flow plugin)
- Icons reveal in 0.65s
- Logo: trace (stroke) reveal on the Interactive ease only
- Drifts: 2-5% scale or position; use snap edits instead of big zooms
- Lower thirds: fade in 1s, hold 4-5s, fade out 1s; white on dark, Charcoal on light
- Gradient backgrounds: 3-5 colors, desaturated, subtle turbulence
- Transitions: straight cuts or the DevOps loop; never the tanuki as a mask
- Don't fade, slide in or scale the logo to reveal it
- Don't move diagonally
- Don't overuse gradient motion

Real examples, to look at on GitLab's own pages (not for reuse):
- Interactive and Expressive easing curves: https://design.gitlab.com/brand-design/motion/
- Gradient masked into text: https://design.gitlab.com/brand-design/motion/
- Lower third specs: https://design.gitlab.com/brand-design/motion/

Sources: https://design.gitlab.com/brand-design/motion/

## Interface and layout: rules

The guide publishes composition principles, not a grid: generous negative space, logo in a left corner, copy left-aligned, graphics flowing left to right, gradients behind and one emphasis device (type repetition or tagline lockup) per asset. Web page measurements come from the homepage step.

- Keep plenty of negative space; don't clutter
- Logo left-aligned at a top or bottom corner; copy is the focus
- Max one tagline lockup per asset
- Infographics: clear GitLab header, CTA in the footer, top-to-bottom flow

Not published: a grid, margins or spacing scale.

Sources: https://design.gitlab.com/brand-logo/core-logo/, https://design.gitlab.com/brand-design/motion/, https://design.gitlab.com/brand-design/visual-design-diagrams-infographics/

## Rules: rules

- Copy is white or Charcoal; color goes to graphics, gradients and links
- GitLab Sans Bold headlines, left-aligned, sentence case
- Full-color core logo, left corner, clear space of one lowercase a
- One stroke weight and one corner radius per asset
- AI gradient only for AI content
- Don't recolor, outline or alter the tanuki
- Don't create tanuki mascots
- Don't center, justify or all-caps copy
- Don't use Charcoal or gray in background gradients
- Don't claim 'first' or 'only'

Sources: https://design.gitlab.com/brand-design/color/, https://design.gitlab.com/brand-design/typography/, https://design.gitlab.com/brand-logo/core-logo/, https://design.gitlab.com/brand-logo/logomark/, https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/

## Campaigns

### The 2022 logo and look: DevOps at the center of GitLab (2022)

Announced April 27, 2022 by co-founder Sid Sijbrandij alongside the 'One DevOps Platform' message: the tanuki was redrawn to sit at the center of the DevOps infinity loop. Framed as an iteration, not a step change, in line with GitLab's values. Since then the tanuki is never customized.

How the system shows: The logomark construction drawing in the guide shows the loop inside the tanuki; the DevOps loop became a core element, a video transition mask and the hero motif of the guide's own banner.
Why it works: The product story lives inside the mark, so the logo itself argues 'one platform for the whole loop'.
Channels: identity system, web, blog. Source: https://about.gitlab.com/blog/devops-is-at-the-center-of-gitlab/

### Software. Faster. tagline lockup

The core promise set as a lockup with the core logo, stacked or horizontal; the horizontal version sits in a box stroked with the AI gradient to say AI runs through the product. The guide maps the tagline to all three traits.

How the system shows: GitLab Sans, the full-color core logo, and the Orange 01p to Purple 01p AI gradient stroke; one lockup per asset.
Why it works: Two words and a period make the pause the guide describes: what you build, then the advantage.
Channels: tagline, lockup, ads, events. Source: https://design.gitlab.com/brand-logo/branded-lockups/

### Global DevSecOps Survey and Report (9th annual) (2026)

Annual survey, this year of 3,266 DevSecOps professionals, on how AI will redefine DevSecOps in 2026 and beyond. The guide cites the survey page as an example of Visionary content.

How the system shows: Infographic rules apply: stats enlarged in GitLab Mono, a clear GitLab header and a CTA footer.
Why it works: Visionary through data: the guide asks for provable claims, and the survey supplies them every year.
Channels: research report, web, PR. Source: https://about.gitlab.com/developer-survey/

## Applications

| Format | What | Source |
|---|---|---|
| certification badges | GitLab certification badges (Associate, Specialist, Professional) as small dark and purple tiles with a curved bottom-right corner. | https://design.gitlab.com/brand-design/visual-design-core-elements/ |
| social / speaker card | Purple 03s card: core logo top left, Mono date label, Bold white headline, portrait in a one-curved-corner container, name in a light purple and title in Mono. | https://design.gitlab.com/brand-design/visual-design-core-elements/ |
| web page | White page with tanuki top left, Charcoal 'Get free trial' button, Bold sentence-case headline, Charcoal CTA plus a text link with arrow, and an illustration of labels, code lines and a gradient shield. | https://design.gitlab.com/brand-design/visual-design-core-elements/ |
| video | Lower thirds in white on dark (Inter SemiBold 60px name, Regular 40px title), DevOps-loop transitions, trace logo reveals. | https://design.gitlab.com/brand-design/motion/ |
| diagrams and infographics | Product diagrams on light or dark grounds with circled icons; long vertical infographics with GitLab header and CTA footer. | https://design.gitlab.com/brand-design/visual-design-diagrams-infographics/ |
| partner collateral | Partner lockup in purple gradients with the partner logo below, plus co-branded lockups for approved partnerships and events. | https://design.gitlab.com/brand-logo/branded-lockups/ |
| self-serve templates | Branded Canva templates for digital ads and promotional assets, with Brand review before use. | https://handbook.gitlab.com/handbook/marketing/brand-experience/brand-creative/ |
| events and swag | Booths, signage, event social posts and merch go through Brand Design issue templates; one-color logos for swag; the Team Expressions Tanuki Tabs (2024) let groups express themselves without altering the logo. | https://handbook.gitlab.com/handbook/marketing/brand-experience/brand-creative/ |
| AI marketing | Promptlings shown free-floating or in stacked grids with emote icons to depict GitLab Duo agents planning, coding and analyzing. | https://design.gitlab.com/brand-design/visual-design-promptlings/ |

## By format

How our engine applies GitLab's system to each format. This is our recipe built from their rules, not something GitLab publishes. Level = how much color and gradient the format carries (0 plain, 5 full gradient and promptlings). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way about.gitlab.com is built (kit.spec.page, homepage voice): Charcoal #171321 hero with the dot field, 3-column hairline grid and two glass cards; 96px GitLab Sans 660 sentence-case headline; one gradient-glass CTA bar; white monochrome logo marquee; light card section, dark bands, white closing CTA; tanuki top left; copy only white, Charcoal or the measured greys; 4px-radius buttons, square cards | which sections and how many cards; the guide's lighter default (white page, Charcoal or white SemiBold buttons, purple links, soft orange-purple-pink gradient behind the hero) for pages that are not homepage-style |
| Deck | 3 | Logo in a left corner, Bold sentence-case headlines, white or Purple 04s grounds, one stroke weight and radius throughout | type repetitions on the opening slide; masked-crop photos |
| Proposal page | 1 | White ground, Charcoal copy, provable numbers only, Charcoal CTA | one curved-corner container for the buyer's logo or photo |
| Ad | 3 | Core logo left corner, white or Charcoal headline, tagline lockup unless the headline says it | AI gradient if the ad is about AI |
| Social post | 4 | Gradient or Purple 03s/04s ground, white Bold headline, Mono label | promptlings for AI topics, portraits in curved containers |
| Email | 1 | White, Charcoal type, one Charcoal button, purple links | a small gradient header |
| Error message | 0 | Plain language, Charcoal on white, honest about the limitation | none |

## Checks before anything ships

- **Logo hidden**: Cover the tanuki. It should still read as GitLab: white or Charcoal type in a tight Bold sans, a soft orange-purple gradient or purple field, and flat linework with one curved corner.
- **Swap test**: Put another DevOps vendor's logo on it. If the orange-purple warmth, the code-line graphics and the plain, provable copy don't feel out of place, it's generic, and it goes back.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is GitLab's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Color proportions or ratios: not published.
- A muted text color and a surface color: not published (Gray 03 and Orange 01s are our reading).
- A layout grid, margins and spacing scale: not published.
- A pixel type scale (sizes per role): not published; only leading, tracking and weights.
- Button radius, height and padding: not published (the typography image shows small-radius rectangles).
- Durations for the Interactive and Expressive eases: not published; only the curves and the 0.65s icon reveal.
- Print values disagree between pages: Orange 01p is PMS 143 C on Color but 141 C on Promptlings; Orange 02p is CMYK 0,60,80,5 on Color but 0,75,80,10 on Promptlings; Orange 01a lists Charcoal's PMS (433 C / 4280 U). Check with GitLab before print.
- The guide names the complex-gradient color 'Vermillion 01g' and the promptling one 'Vermilion 01a', same hex #D74026.
- Positioning wording varies: the guide says 'most comprehensive AI-driven DevSecOps platform', the product-marketing messaging page still says 'The DevOps platform', and about.gitlab.com says 'intelligent orchestration platform'.
- Headlines: none recorded here; the homepage anatomy step covers them.
- The tagline's launch date: not published.
- The design.gitlab.com site is behind a bot check; the guide was read from its Markdown source and images, not the rendered pages.

Logos and reference images belong to GitLab. Look at them on GitLab's own pages; don't reuse them.