{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#FDF1DD", "ink": "#171321", "ink_muted": "#74717A", "accent": "#7759C2", "on_accent": "#FFFFFF", "accent_secondary": "#FC6D26", "night": "#171321", "on_night": "#FFFFFF", "extras": [ { "name": "White", "hex": "#FFFFFF", "role": "Primary. Default background (with Charcoal or purple), headline/body/CTA color on dark grounds, light-mode base fill for gradients", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Light section grounds, text on Charcoal, nav Get free trial fill at rest (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Charcoal", "hex": "#171321", "role": "Primary. Headlines, body copy, CTAs and buttons on light grounds; solid dark background. Never in background gradients", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Every dark band (hero, numbered cards, industries, quotes, resources, footer), primary button fill on white, body text on white (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Orange 01p", "hex": "#FCA326", "role": "Primary (logo). Graphical elements; start of the AI gradient (Orange 01p to Purple 01p). Charcoal text only", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Tanuki logomark (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Orange 02p", "hex": "#FC6D26", "role": "Primary (logo). Graphical elements; in the default background gradient; one-color tanuki exception (e.g. favicons). Charcoal text only", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Orange start of site gradients (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Orange 03p", "hex": "#E24329", "role": "Primary (logo). Graphical elements. White text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Tanuki logomark (with #FC6D26, #FCA326) (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Purple 01p", "hex": "#A989F5", "role": "Primary, the signature purple. Hyperlinks on dark grounds; end of the AI gradient; in the default background gradient; one-color tanuki exception. Charcoal text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Purple 02p", "hex": "#7759C2", "role": "Primary. Hyperlinks on light grounds; partner-lockup base fill on white; one-color tanuki exception. White text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Purple end of site gradients (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Orange 01s", "hex": "#FDF1DD", "role": "Secondary. Light warm tint; Charcoal text. Also the light stop of every promptling gradient", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Purple 01s", "hex": "#CEB3EF", "role": "Secondary. Light purple accent; Charcoal text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Purple 02s", "hex": "#5943B6", "role": "Secondary. Accent; White text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Purple 03s", "hex": "#2F2A6B", "role": "Secondary. Deep purple; White text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Purple 04s", "hex": "#232150", "role": "Secondary. Dark-mode base fill for brand gradients and illustrations; promptling eyes; White text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Teal 01s", "hex": "#C5F4EC", "role": "Secondary. Teals carry a positive connotation (product features); Charcoal text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Teal 02s", "hex": "#6FDAC9", "role": "Secondary. Positive accent; Charcoal text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Teal 03s", "hex": "#10B1B1", "role": "Secondary. Positive accent; Charcoal text", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Gray 01", "hex": "#D1D0D3", "role": "Secondary cool gray: differentiate information, set hierarchy", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Feature card 1px borders, industry summaries, nav link hover (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Gray 02", "hex": "#A2A1A6", "role": "Secondary cool gray: differentiate information, set hierarchy", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Muted body on Charcoal, hero BLOG eyebrow (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Gray 03", "hex": "#74717A", "role": "Secondary cool gray; the divider line in co-branded lockups", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Muted body and mono eyebrows on white cards (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Gray 04", "hex": "#45424D", "role": "Secondary cool gray: differentiate information, set hierarchy", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/", "site_use": "Solid 1px hairlines on Charcoal: numbered card borders, resources dividers, quote arrow rings, wireframe-globe lines (observed https://about.gitlab.com/ (2026-10-29))" }, { "name": "Gray 05", "hex": "#2B2838", "role": "Secondary cool gray: differentiate information, set hierarchy", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Pink 01g", "hex": "#FFB9C9", "role": "Gradient-only. Third color of the default background gradient (with Orange 02p and Purple 01p on a white base)", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Pink 02g", "hex": "#FF1493", "role": "Gradient-only (complex background gradients)", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Pink 03g", "hex": "#AE126C", "role": "Gradient-only (complex background gradients)", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Vermillion 01g", "hex": "#D74026", "role": "Gradient-only (complex background gradients); also Vermilion 01a in the pink promptling", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "name": "Orange 01a", "hex": "#FFD066", "role": "Promptlings only (orange promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Pink 01a", "hex": "#EBA9D8", "role": "Promptlings only (purple promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Navy 01a", "hex": "#0B5E99", "role": "Promptlings only (teal promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Blue 01a", "hex": "#63A6E9", "role": "Promptlings only (blue promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Indigo 01a", "hex": "#4F52B4", "role": "Promptlings only (blue promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Green 01a", "hex": "#9CD880", "role": "Promptlings only (green promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Green 02a", "hex": "#0F8A55", "role": "Promptlings only (green promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Coral 01a", "hex": "#FF758C", "role": "Promptlings only (pink promptling). Never elsewhere", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-promptlings/" }, { "name": "Banner ground (fallback)", "hex": "#35333B", "role": "Announcement bar background-color under its gradient JPG; the JPG runs #2A2930 (left) to #FA5E32 (right)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Banner gradient start (rendered)", "hex": "#2A2930", "role": "Left end of the announcement-bar gradient image as rendered", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Banner gradient end (rendered)", "hex": "#FA5E32", "role": "Right end of the announcement-bar gradient image as rendered (orange; purple-pink in between)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Hero ground (rendered)", "hex": "#1D1927", "role": "Charcoal #171321 hero as rendered under the dot field and the 4.3% white radial glow", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Nav over hero (rendered)", "hex": "#2B2734", "role": "Desktop nav bar at rest as rendered: rgba(23,19,33,0.1) with 10px backdrop blur over the hero", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Hero card (computed)", "hex": "#2E2B37", "role": "Hero floating card: rgba(255,255,255,0.1) on Charcoal; renders #322F3B to #35313E with the blur", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Hero card (rendered)", "hex": "#322F3B", "role": "Hero floating card fill as rendered (BLOG card)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Hero card 19.5 (rendered)", "hex": "#35313E", "role": "Hero 19.5 card fill as rendered (denser dots behind it)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Industry card (computed)", "hex": "#3A3642", "role": "Industry stat card: rgba(255,255,255,0.15) on Charcoal; renders about #3C3945", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Industry card (rendered)", "hex": "#3C3945", "role": "Industry stat card fill as rendered", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Dot field grey", "hex": "#8A8A93", "role": "Hero dot dither: 0.8px dots at 30% alpha on a 4px grid", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Pink gradient stop", "hex": "#E53C97", "role": "Middle stop of every site gradient (orange #FC6D26 to pink #E53C97 to purple #7759C2): hero CTA, eyebrow marks, quote //, ordinals, 19.5 label", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Pixel-stair grey", "hex": "#E8E7EB", "role": "Pixel-stair mask fill on the light feature section; also secondary button hover fill", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Feature section ground (rendered)", "hex": "#FCFBFC", "role": "Light feature-card section ground as rendered (white plus a faint #E8E7EB wash)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Final CTA panel ground", "hex": "#EAEAEA", "role": "background-color of the closing band art panel, under the gradient pixel PNG", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Near-black heading", "hex": "#1A1A1A", "role": "The \"Ship faster. Stay in control.\" H2 on the light section", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Off-white heading", "hex": "#F7F7F5", "role": "H2/H3 and quote headline text on Charcoal sections", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Flex banner title", "hex": "#FAF9FD", "role": "Title in the GitLab Flex banner card", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Quote support grey", "hex": "#A5A3A3", "role": "Quote support paragraph and the 1 / 6 counter", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "name": "Ordinal grey", "hex": "#B5B6B8", "role": "The middle ordinal \"02\" in the numbered cards (01 and 03 are gradient text)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" } ] }, "typography": { "display": { "family": "Inter", "steal_family": "Inter", "weight": 700, "tracking": -0.045, "line_height": 1.05, "fallback_stack": "Inter, \"Helvetica Neue\", Arial, sans-serif", "real": "GitLab Sans (GitLab's own face, derived from Inter; SIL OFL 1.1, npm @gitlab/fonts 1.3.1)", "stand_in": true, "prov": "published", "source": "https://design.gitlab.com/brand-design/typography/", "site": { "weight": 660, "size_px": "96 desktop / 48 phone (H1); 64 / 48 (H2)", "line_height": "1.04 H1 (99.84px at 96), 1.0625 H2 (68px at 64)", "tracking": "-0.03em (-2.88px at 96, -1.92px at 64, -1.44px at 48)", "font_feature_settings": "normal", "font_variation_settings": "normal (weight set via font-weight 660 on the variable face, range 100-900)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" } }, "body": { "family": "Inter", "steal_family": "Inter", "weight": 400, "tracking": 0, "line_height": 1.35, "scale": 1, "fallback_stack": "Inter, \"Helvetica Neue\", Arial, sans-serif", "real": "GitLab Sans", "stand_in": true, "prov": "published", "source": "https://design.gitlab.com/brand-design/typography/", "site": { "weights": "400 body, 580 card titles and link CTAs, 660 buttons and nav CTAs", "sizes_px": "24 lead (22 phone), 18, 16, 14", "line_height": "1.33 lead (31.92px at 24), 1.5 at 16, 1.57 at 14", "tracking": "-0.02em on 24/32px lead and card titles (-0.48px at 24, -0.64px at 32), normal at 18 and below", "font_feature_settings": "normal (no stylistic sets, no ss/cv features on any element)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" } }, "mono": { "family": "JetBrains Mono", "steal_family": "JetBrains Mono", "weight": 400, "fallback_stack": "\"JetBrains Mono\", Menlo, Consolas, monospace", "real": "GitLab Mono (derived from JetBrains Mono; SIL OFL 1.1, npm @gitlab/fonts 1.3.1)", "stand_in": true, "prov": "published", "source": "https://design.gitlab.com/brand-design/typography/", "site": { "weights": "400 eyebrows and ordinals, 500 stat numbers, 700 industry labels", "sizes_px": "11 (rail), 12 (hero card eyebrow), 14 (section eyebrows), 16 (industry labels), 32 (ordinals), 64/48 (stats)", "case": "uppercase for eyebrows and labels", "tracking": "normal; +1.2px on // MIGRATE TODAY, +2.42px on the vertical rail, -0.28px on counters", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" } }, "calibration": "Published type settings (design.gitlab.com typography): headlines GitLab Sans Bold, 105% leading, -45 tracking (-4.5% in Figma); subheaders and intro/outro paragraphs Regular, 110% leading, -20 tracking (-2%), optical kerning; body below 20px Regular, 135% leading, 0 tracking, auto kerning; CTAs and buttons SemiBold (600). Ligatures on, hyphenation off. GitLab Mono only in Regular. Where GitLab Sans isn't available the guide itself names Inter as the substitute, so the Inter stand-in on the public shelf is GitLab's own fallback. No pixel type scale is published; sizes come from the homepage measurement step. Width calibration (observed on about.gitlab.com, 2026-10-29, same browser, same size/weight/tracking): hero line \"Speed you can trust,\" at 96px/660/-2.88px renders 850.2px in GitLab Sans vs 907.5px in Inter (Google Fonts variable) = Inter 6.7% wider; \"all the way to production\" 1016.7 vs 1073.6px (+5.6%); at phone 48px/-1.44px 425.1 vs 453.8px (+6.8%); the 24px/400/-0.48px lead \"Agentic software engineering for\" 328.1 vs 357.3px (+8.9%). To match line width with Inter (public stand-in), tighten tracking by about 0.06em more (-0.09em total on display, -0.078em on the 24px lead) or set Inter at 93.7% of the size. The builder gets the real GitLab Sans and GitLab Mono woff2 files, so the build itself needs no stand-in calibration." }, "style": { "button_shape": "rounded", "button_note": "The guide's typography sample shows rectangular buttons with a small corner radius in Charcoal (filled), outlined, and a text link with a chevron, all SemiBold. Exact radius not published; pills are labels, never buttons", "corners": "one curved corner at bottom right (25-30% of width) on containers; 5-10% when all corners curve", "linework": "single stroke weight per asset, capped ends, front-facing, no 3D or shadows", "motion": "Interactive ease cubic-bezier(0.70, 0, 0.30, 1) for reveals, Expressive cubic-bezier(0.30, 0.80, 0.70, 1.20) overshoot; icons 0.65s; graphics move left to right, never diagonally", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-core-elements/" }, "voice": { "tone": [ "Visionary", "Empathetic", "Intentional" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "title-colon", "kind": "guidance", "text": "Always capitalize the first word after a colon in a title", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "contractions", "kind": "guidance", "text": "Use contractions", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "active-voice", "kind": "guidance", "text": "Active voice where possible", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "oxford-comma", "kind": "guidance", "text": "Serial (Oxford) comma by default", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "ap-style", "kind": "guidance", "text": "AP Stylebook for anything not covered; GitLab's guide wins on conflict", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "acronyms", "kind": "guidance", "text": "Spell out acronyms at first use with the short form in parentheses", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "dates", "kind": "guidance", "text": "External dates spelled out: November 16, 2023; ISO 2023-11-16 for internal content; no st/nd/rd/th", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "times", "kind": "guidance", "text": "12-hour clock, lowercase a.m./p.m. with a space; event time zone in full; UTC for virtual events", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "numbers", "kind": "guidance", "text": "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", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "percent", "kind": "guidance", "text": "Use % not percent, unless the number is spelled out", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "currency", "kind": "guidance", "text": "Currency as NUMBER ISO-CODE: 10 USD", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "ampersand", "kind": "guidance", "text": "No ampersand for 'and' in body copy; sparingly in tight display-ad headlines", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "em-dash", "kind": "guidance", "text": "Em dash with a space on each side; en dash for numeric ranges with no spaces", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "job-titles", "kind": "guidance", "text": "Job titles lowercase in sentences; capitalized when standalone (lower thirds, name tags, pull-quote attributions)", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "teams", "kind": "guidance", "text": "Engineering team, Security department: capitalize the function, not the word after", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "pronouns", "kind": "guidance", "text": "Gender-neutral they/them unless referring to a specific person", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "quotes-tense", "kind": "guidance", "text": "Interview quotes in present tense (says, explains)", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/style-formatting/" }, { "id": "no-first-only", "kind": "ban", "terms": [ "first", "only" ], "text": "Hard to prove, so they lack credibility; partners forbid them in joint marketing", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" }, { "id": "not-integrated", "kind": "prefer", "term": "single application / built in / built from the ground up", "over": [ "integrated" ], "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/", "scope": "GitLab's own copy only. Verbatim customer quotes are exempt from this and every banned-word rule: never edit a customer's words (slide 1's \"integrated into the developer's flow\" and slide 4's \"By integrating AI\" stay as written)." }, { "id": "not-git-only", "kind": "guidance", "text": "Don't reinforce Git or Git-only SCM when talking about the company; message the platform and multiple stages", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" }, { "id": "headline-freedom", "kind": "guidance", "text": "Ad and blog headlines may experiment beyond official messaging as long as they stay truthful and authentic", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" } ], "approved": { "phrases": [ "single application", "built in", "built from the ground up", "everyone can contribute", "Software. Faster." ], "words": [] }, "banned": [ "first", "only", "integrated", "Gitlab (lowercase l)", "his/her" ], "is_not": [ [ "Inspirational", "Sensationalistic" ], [ "Technical experts", "Inaccessible" ], [ "Sophisticated", "Arrogant" ], [ "Innovative", "Impractical" ], [ "Collaborative", "Deferential" ], [ "Approachable", "Overeager" ], [ "Inclusive", "Patronizing" ], [ "Thoughtful", "Insensitive" ], [ "Clear", "Pushy" ], [ "Focused", "Inflexible" ], [ "Reliable", "Rigid" ], [ "Transparent", "Reckless" ] ], "prov": "published", "source": "https://design.gitlab.com/brand-messaging/brand-voice/" }, "spec": { "source": "https://design.gitlab.com/brand-introduction/", "how": "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", "provenance": "published", "motion": [ { "name": "interactive", "easing": "cubic-bezier(0.70, 0.00, 0.30, 1.00)", "use": "Standard ease in and out: logo stroke reveal, type-repetition slides, most layer reveals. Values are the guide's Flow (After Effects) plugin input", "prov": "published", "source": "https://design.gitlab.com/brand-design/motion/" }, { "name": "expressive", "easing": "cubic-bezier(0.30, 0.80, 0.70, 1.20)", "use": "Overshoot and snap back for expressive moments. Flow plugin input", "prov": "published", "source": "https://design.gitlab.com/brand-design/motion/" }, { "name": "icon-reveal", "duration_ms": 650, "use": "Icons animate in swiftly at 0.65s; the icon's design dictates the reveal", "prov": "published", "source": "https://design.gitlab.com/brand-design/motion/" }, { "name": "lower-third", "easing": "linear opacity", "duration_ms": 1000, "use": "Lower thirds fade 0 to 100% over 1s, hold 4-5s, fade out over 1s", "prov": "published", "source": "https://design.gitlab.com/brand-design/motion/" }, { "name": "drift", "use": "Subtle drifts of 2-5% scale or position to avoid dead frames; in place of large drifts, move-ins or zooms use snap edits", "prov": "published", "source": "https://design.gitlab.com/brand-design/motion/" } ], "icons": { "grid": "8px grid", "sizes": [ { "name": "small", "px": 24, "stroke_px": 1, "corner_radius_px": 3, "line_break_px": 3 }, { "name": "large", "px": 96, "stroke_px": 2, "corner_radius_px": 12, "line_break_px": 7 } ], "stroke": "1px at 24px, 2px at 96px; linework only", "caps_joins": "butt caps, miter joins (construction drawing)", "color": "white or Charcoal linework by default", "rule": "one rounded corner per icon where the shape allows; never fully enclosed: open line breaks", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-brand-icons-and-patterns/" }, "signature": [ { "id": "soft-freeform-gradient", "name": "Soft freeform gradient ground", "where": "backgrounds of core brand assets (hero banners, slides, social); the guide's own intro banner is one", "spec": "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)", "once": "one gradient ground per asset", "example": { "ground": "paper", "text": "Software. Faster.", "edge": "gradient", "edge_to": "#CEB3EF" }, "dont_example": { "ground": "paper", "text": "Software. Faster.", "edge": "gradient", "edge_to": "#45424D" }, "dont": "use Charcoal or gray in a background gradient, go heavy on one color, or saturate it: colors should feel soft", "prov": "published", "source": "https://design.gitlab.com/brand-design/color/" }, { "id": "ai-gradient", "name": "The AI gradient", "where": "content about AI and GitLab Duo, and the stroke around the horizontal tagline lockup", "spec": "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", "once": "one tagline lockup per asset", "example": { "ground": "paper", "text": "Software. Faster.", "mark": "Faster.", "mark_style": "underline", "mark_color": "#A989F5", "underline_px": 3, "weight": 400 }, "dont_example": { "ground": "paper", "text": "Software. Faster.", "mark": "Faster.", "mark_style": "color", "mark_color": "#FCA326" }, "dont": "use the AI gradient on content that isn't about AI, or set copy in orange: copy stays white or Charcoal", "prov": "published", "source": "https://design.gitlab.com/brand-logo/branded-lockups/" }, { "id": "type-repetitions", "name": "Type repetitions", "where": "moments of emphasis: one word or a short phrase in a hero, a slide, a video", "spec": "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", "once": "reserved for emphasis, not every headline", "example": { "ground": "night", "text": "Iterate", "weight": 700 }, "dont_example": { "ground": "night", "text": "Iterate", "font": "body", "weight": 400 }, "dont": "mix weights or colors between repetitions, or use it on long phrases", "prov": "published", "source": "https://design.gitlab.com/brand-design/typography/" }, { "id": "one-curved-corner", "name": "One curved corner", "where": "containers for copy or images, photo crops, icons and illustration shapes", "spec": "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", "once": "one radius applied consistently across an asset", "example": { "ground": "#232150", "text": "A container with one soft corner", "weight": 700 }, "dont_example": { "ground": "#232150", "text": "Every corner fully rounded", "weight": 700 }, "dont": "mix radii in one asset, or round a CTA button into a label pill (labels are not buttons)", "prov": "published", "source": "https://design.gitlab.com/brand-design/visual-design-core-elements/" } ], "page": { "source": "https://about.gitlab.com/", "date": "2026-10-29", "prov": "observed", "voices": "Two voices. The homepage (and so any landing page built from this spec) speaks in short product-marketing declaratives: sentence-case headlines with a full stop or comma (\"Ship faster. Stay in control.\"), one-line value statements, numbers as proof, mono technical eyebrows ([ SECURITY ], // MIGRATE TODAY, 19.5). The guide's campaign voice (Visionary/Pragmatic/Inclusive, taglines like \"Software. Faster.\") governs campaigns and brand pieces. A landing page follows the homepage voice and this anatomy; the guide's fixed rules (copy only white or Charcoal, GitLab Sans, the tanuki) still hold. Where the site departs from the guide (site uses light greys #A2A1A6/#74717A for muted copy and a 660 weight rather than Bold 700) the site is how the guide is applied on the web; keep the guide as law elsewhere. Settled for builders (r1): (1) The guide's \"don't centre, don't set all caps\" is for body copy in brand pieces. On this homepage the industry H2 and lead and the whole closing CTA are centred, and every mono eyebrow is uppercase: build them that way; all other copy is left-aligned sentence case. (2) Web headlines are weight 660 (measured); 700 Bold is the guide value for print and campaign pieces. (3) The feature H2 is #1A1A1A (measured); every other dark text is #171321. (4) The globe stays inside its dark band (overflow hidden).", "announcement": { "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." }, "nav": { "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\"" ] }, "sections": [ { "name": "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(); mask-composite: exclude (-webkit-mask-composite: xor); mask-repeat no-repeat; mask-size 100% 100%, 100% 100%. Use the SVG files unchanged, INCLUDING their : 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)" }, { "name": "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)" }, { "name": "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)" }, { "name": "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" }, { "name": "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)" }, { "name": "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." ] }, "dark_ground": { "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)" } }, "bands": [ { "label": "Announcement bar", "ground": "gradient JPG on #35333B", "content": "one-line link: announcement + Read the announcement", "desktop": "1440x52, y 0, centred 16px/660 white text", "phone": "390x72 under the white nav, 2 centred lines", "anatomy": [ "Whole bar is a link to /blog/gitlab-orbit-ga/" ] }, { "label": "Navigation", "ground": "transparent dark over hero (desktop); white (phone)", "content": "tanuki, 6 menus, search, Request a demo, Get free trial, Sign in, language", "desktop": "69px, overlays the hero top", "phone": "68px white: Get free trial button, centred tanuki, hamburger", "anatomy": [ "Sticky; turns white with a #171321 hairline on scroll" ] }, { "label": "Hero", "ground": "#171321 with dot field", "content": "H1, lead, Try for free bar, two glass cards, rail", "desktop": "976px tall, 3-column hairline grid x 165-1275, headline y 218", "phone": "834px, single column, cards stacked", "anatomy": [ "Cards stair-step down columns 3 then 2", "BUILD WITH GITLAB vertical rail at x 32" ] }, { "label": "Logo marquee", "ground": "#171321", "content": "7 white customer logos scrolling", "desktop": "99px, padding 32px 48px, 64px gaps, edge-faded mask", "phone": "99px, padding 32px 16px", "anatomy": [ "Same ground as hero: hero and marquee read as one dark block" ] }, { "label": "Feature cards", "ground": "#FCFBFC (white + faint #E8E7EB)", "content": "H2, 2 half cards, 1 full card, Flex banner", "desktop": "2295px, padding 96/48/160, 2 x 543px grid, 24px gap", "phone": "2961px, 1 column, padding 96/16", "anatomy": [ "Pixel-stair #E8E7EB shapes in the gutters" ] }, { "label": "Numbered cards", "ground": "#171321", "content": "H2, lead, 3 numbered cards, // MIGRATE TODAY + Talk to sales, wireframe globe", "desktop": "787px, padding 120/48/96, 3 x 354px cards", "phone": "1311px, stacked", "anatomy": [ "Globe image (globe.png, 724x724) top right at x 934 y -126 in the band, clipped by the band; desktop only" ] }, { "label": "Industry stat grid", "ground": "#171321", "content": "centred H2 + lead, 6 staggered stat cards", "desktop": "1694px, 3-column hairline grid, cards 370x291 in a checkerboard of 4 rows", "phone": "961px, swipe row of 337px cards", "anatomy": [ "Stats in GitLab Mono 64px 500" ] }, { "label": "Quote carousel", "ground": "#171321", "content": "// quote headline, support quote, logo + name + role, 1 / 6 and arrows", "desktop": "708px, padding 96/48/120", "phone": "940px, padding 64/16/96", "anatomy": [ "Gradient // before the headline" ] }, { "label": "Resources row", "ground": "#171321, 1px #45424D top rule", "content": "3 text links: What's new, Blog, Blog", "desktop": "323px, 3 x 480px full-bleed cells, padding 64/48", "phone": "873px, stacked cells, padding 48/24", "anatomy": [ "10px gradient square eyebrows" ] }, { "label": "Closing CTA", "ground": "#FFFFFF", "content": "// eyebrow, Own what's next, Get your free trial + Contact sales, product UI on gradient pixel strip", "desktop": "776px, centred, art strip 267px at the bottom", "phone": "505px, stacked full-width buttons, strip 122px", "anatomy": [ "Art meets the footer edge with no gap" ] }, { "label": "Footer", "ground": "#171321", "content": "white logo, 5 link columns, social, legal", "desktop": "1029px, container 1170px, columns at 203px pitch", "phone": "2773px, single column, long lists in 2 CSS columns", "anatomy": [ "1px white rule above the legal lines" ] } ], "layout": { "page_margin": { "desktop": 165, "phone": 16 }, "section_padding": { "desktop": 96, "phone": 64 }, "container_max": 1110, "hero_text_max": 1111, "columns": 3, "columns_phone": 1, "gutter": 24, "gutter_phone": 16, "card_gap": 24, "nav_height": 69, "note": "Measured on https://about.gitlab.com/ (2026-10-29) at 1440 and 390. Content column x 165-1275 (1110px; the slp-container is 1170px with ~30px inner margins; hero 1111px). Section padding desktop: 96 top typical (120 on numbered cards and the closing CTA, 160 bottom on feature cards); horizontal 48px outside the 1110 column. Phone: 16px gutter (17px in the hero), 96px top on feature/numbered sections, 64px on quotes and the closing CTA. Hero and industry grids use 3 equal hairline columns (370px). Nav 69px desktop, 68px phone; announcement 52px desktop, 72px phone.", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, "type": [ { "role": "Hero H1 / closing H2", "id": "display-xl", "face": "GitLab Sans", "size": { "desktop": 96, "phone": 48 }, "line_height": 1.04, "tracking_px": -2.88, "weight": 660, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "tracking_phone_px": -1.44 }, { "role": "Section H2 / quote headline", "id": "display-l", "face": "GitLab Sans", "size": { "desktop": 64, "phone": 48 }, "line_height": 1.0625, "tracking_px": -1.92, "weight": 660, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "tracking_phone_px": -1.44 }, { "role": "Feature card title", "id": "title-l", "face": "GitLab Sans", "size": { "desktop": 32, "phone": 32 }, "line_height": 1.125, "tracking_px": -0.64, "weight": 580, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "role": "Card title / resource title", "id": "title-m", "face": "GitLab Sans", "size": { "desktop": 24, "phone": 22 }, "line_height": 1.167, "tracking_px": -0.48, "weight": 580, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "tracking_phone_px": -0.44 }, { "role": "Lead paragraph", "id": "lead", "face": "GitLab Sans", "size": { "desktop": 24, "phone": 22 }, "line_height": 1.33, "tracking_px": -0.48, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "tracking_phone_px": -0.44, "note": "numbered-cards lead drops to 18px/23.94px on phone" }, { "role": "Body large / Flex body", "id": "body-l", "face": "GitLab Sans", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.44, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "role": "Hero card title / footer heading", "id": "body-bold", "face": "GitLab Sans", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.556, "tracking_px": 0, "weight": 660, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "role": "Button label", "id": "button", "face": "GitLab Sans", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.25, "tracking_px": 0, "weight": 660, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "note": "hero CTA and card links use 580; phone nav trial button 14px" }, { "role": "Body", "id": "body", "face": "GitLab Sans", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "role": "Small body / card text", "id": "body-s", "face": "GitLab Sans", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.571, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "note": "footer links 14px/16.8px" }, { "role": "Stat number", "id": "stat", "face": "GitLab Mono", "size": { "desktop": 64, "phone": 48 }, "line_height": 1.2, "tracking_px": -1.92, "weight": 500, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "tracking_phone_px": -1.44 }, { "role": "Ordinal", "id": "ordinal", "face": "GitLab Mono", "size": { "desktop": 32, "phone": 32 }, "line_height": 1.2, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, { "role": "Industry label", "id": "label-mono", "face": "GitLab Mono", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 700, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "note": "uppercase, in [ brackets ]" }, { "role": "Section eyebrow", "id": "eyebrow", "face": "GitLab Mono", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.714, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "note": "uppercase; // eyebrows +1.2px tracking" }, { "role": "Hero card eyebrow", "id": "eyebrow-s", "face": "GitLab Mono", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "note": "uppercase" }, { "role": "Vertical rail", "id": "rail", "face": "GitLab Mono", "size": { "desktop": 11, "phone": 11 }, "line_height": 1.5, "tracking_px": 2.42, "weight": 400, "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "note": "uppercase, rgba(255,255,255,0.5), desktop only" } ], "components": { "button_primary_on_light": { "fill": "#171321", "text": "#FFFFFF", "border": "1px solid #171321", "radius": 4, "padding": "11px 16px", "height": 47, "example": "Get your free trial (184x47)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "fill": "#FFFFFF", "text": "#171321", "border": "1px solid #171321", "transition": "background-color 0.3s cubic-bezier(0.7,0,0.3,1)" }, "prov": "observed", "css": { "background-color": "#FFFFFF", "color": "#171321", "box-shadow": "inset 0 0 0 1px #171321", "transition": "background-color 0.3s cubic-bezier(0.7, 0, 0.3, 1)" } } }, "text_style": "18px/22.5px GitLab Sans 660", "ring_px": 1, "ring": "#171321", "padding_x": 16, "font_size": 18, "weight": 660, "face": "body" }, "button_primary_on_dark": { "fill": "#FFFFFF", "text": "#171321", "border": "1px solid #FFFFFF", "radius": 4, "padding": "11px 16px", "height": 47, "example": "Get free trial (nav, 141x47)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "fill": "transparent", "text": "#FFFFFF", "border": "1px solid #FFFFFF" }, "prov": "observed", "css": { "background-color": "transparent", "color": "#FFFFFF", "box-shadow": "inset 0 0 0 1px #FFFFFF" } } }, "text_style": "18px/22.5px GitLab Sans 660", "ring_px": 1, "ring": "#FFFFFF", "padding_x": 16, "font_size": 18, "weight": 660, "face": "body" }, "button_secondary_on_dark": { "fill": "#FFFFFF", "text": "#171321", "border": "none", "radius": 4, "padding": "11px 16px", "height": 45, "example": "Talk to sales (139x45)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "fill": "#E8E7EB" }, "prov": "observed", "css": { "background-color": "#E8E7EB" } } }, "text_style": "18px/22.5px GitLab Sans 660", "padding_x": 16, "font_size": 18, "weight": 660, "face": "body", "note": "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." }, "button_flex_on_dark": { "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)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "css": { "background-color": "#E8E7EB" }, "measured": { "fill": "#E8E7EB" }, "prov": "observed" } } }, "button_ghost_on_dark": { "fill": "none", "text": "#FFFFFF", "radius": 4, "padding": "11px 16px", "example": "Request a demo (nav, 170x45)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "fill": "rgba(255,255,255,0.12)" }, "prov": "observed", "css": { "background-color": "rgba(255,255,255,0.12)" } } }, "text_style": "18px/22.5px GitLab Sans 660", "height": 45, "padding_x": 16, "font_size": 18, "weight": 660, "face": "body" }, "button_tertiary": { "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)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "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": { "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", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "background_color": "rgba(255,255,255,0.17) under the gradient", "transition": "0.18s ease-out" }, "prov": "observed" } }, "text_style": "18px/22px GitLab Sans 580, label left, 16px arrow right" }, "hero_glass_card": { "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)", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "fill": "rgba(255,255,255,0.17)" }, "prov": "observed" } } }, "feature_card": { "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", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "media_image": "transform scale(1.05)" }, "prov": "observed" } } }, "numbered_card": { "border": "1px solid #45424D", "fill": "#171321", "radius": 0, "padding": "24px", "gap": "32px", "ordinal": "GitLab Mono 32px, gradient or #B5B6B8", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)" }, "industry_card": { "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", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "content": "summary paragraph 14px #D1D0D3 replaces the stat (animation only)" }, "prov": "observed" } } }, "resource_cell": { "padding": "64px 48px (48px 24px phone)", "divider": "1px #45424D", "eyebrow": "10px gradient square + mono 14px", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "fill": "rgba(255,255,255,0.08)" }, "prov": "observed" } } }, "round_arrow_button": { "size": "40x40", "border": "1px solid #45424D", "radius": 20, "icon": "16px white chevron", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "shape": "circle: 40x40 with radius 20px (the site writes border-radius 120px, which renders the same circle)" }, "nav_link": { "text": "#FFFFFF", "chevron": "12px", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "color": "#D1D0D3", "transition": "color 0.2s" }, "prov": "observed" } }, "text_style": "16px/24px GitLab Sans 400 over the hero" }, "footer_link": { "text": "#FFFFFF", "pitch": "40px row pitch for one-line links (17px text + 23px); a link that wraps to 2 lines (34px) takes 52-57px", "prov": "observed", "source": "https://about.gitlab.com/ (2026-10-29)", "states": { "hover": { "measured": { "color": "#FFFFFF", "decoration": "none" }, "prov": "observed" } }, "text_style": "14px/16.8px GitLab Sans 400" } } }, "system": { "fixed": [ "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" ], "flex": "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).", "traits": [ { "is": "Visionary", "not": "Sensationalistic", "text": "Confident technical experts and category creators; inspirational, not sensational (paraphrase).", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" }, { "is": "Technical experts", "not": "Inaccessible", "text": "Share expertise that brings value; provide data where possible (paraphrase).", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" }, { "is": "Sophisticated", "not": "Arrogant", "text": "Visionary pair from the guide's table.", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" }, { "is": "Empathetic", "not": "Patronizing", "text": "Thoughtful, collaborative, inclusive on a global scale; explain but don't patronize (paraphrase).", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" }, { "is": "Approachable", "not": "Overeager", "text": "Empathetic pair from the guide's table.", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" }, { "is": "Intentional", "not": "Pushy", "text": "Purposeful, direct and transparent; clear, not pushy (paraphrase).", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" }, { "is": "Transparent", "not": "Reckless", "text": "Plain language and honesty, even about limitations (paraphrase).", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "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", "flex": "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", "guide_default": { "must": "White page, tanuki logo top left, GitLab Sans Bold sentence-case hero left-aligned, Charcoal or white SemiBold buttons, purple links, copy only in white or Charcoal", "flex": "a soft orange-purple-pink gradient behind the hero, curved-corner media, a Purple 04s or Charcoal band" } }, { "format": "Deck", "level": 3, "must": "Logo in a left corner, Bold sentence-case headlines, white or Purple 04s grounds, one stroke weight and radius throughout", "flex": "type repetitions on the opening slide; masked-crop photos" }, { "format": "Proposal page", "level": 1, "must": "White ground, Charcoal copy, provable numbers only, Charcoal CTA", "flex": "one curved-corner container for the buyer's logo or photo" }, { "format": "Ad", "level": 3, "must": "Core logo left corner, white or Charcoal headline, tagline lockup unless the headline says it", "flex": "AI gradient if the ad is about AI" }, { "format": "Social post", "level": 4, "must": "Gradient or Purple 03s/04s ground, white Bold headline, Mono label", "flex": "promptlings for AI topics, portraits in curved containers" }, { "format": "Email", "level": 1, "must": "White, Charcoal type, one Charcoal button, purple links", "flex": "a small gradient header" }, { "format": "Error message", "level": 0, "must": "Plain language, Charcoal on white, honest about the limitation", "flex": "none" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Learn more", "button": true, "button_fill": "#171321" }, "do_caption": "CTAs and buttons in Charcoal or white, GitLab Sans SemiBold (the guide's own button sample).", "dont": { "ground": "paper", "text": "Learn more about GitLab Duo", "ink": "#FC6D26" }, "dont_caption": "Orange copy: only white or Charcoal may set sentences." }, { "chapter": "color", "do": { "ground": "#232150", "text": "Software. Faster.", "ink": "on_night" }, "do_caption": "White on Purple 04s, an approved pairing and the dark-mode base.", "dont": { "ground": "#FCA326", "text": "Software. Faster.", "ink": "#FFFFFF" }, "dont_caption": "White on Orange 01p is not an approved pairing; Orange 01p takes Charcoal." }, { "chapter": "voice", "do": { "ground": "paper", "text": "GitLab Duo features do not use your content to train models." }, "do_caption": "Intentional: plain, provable, transparent (the guide's own example).", "dont": { "ground": "paper", "text": "The first and only AI platform you'll ever need." }, "dont_caption": "'First' and 'only' are hard to prove, so they're banned." }, { "chapter": "type", "do": { "ground": "paper", "text": "Remediating vulnerabilities with GitLab's security insights and AI", "font": "display", "weight": 700 }, "do_caption": "Sentence case, Bold, left-aligned (the guide's example).", "dont": { "ground": "paper", "text": "Remediating Vulnerabilities with GitLab's Security Insights and AI", "font": "display", "weight": 700 }, "dont_caption": "Title case: the guide's don't." }, { "chapter": "logo", "do": { "ground": "paper", "text": "GitLab", "ink": "ink", "weight": 600 }, "do_caption": "Full color or Charcoal wordmark with the tanuki, left corner.", "dont": { "ground": "paper", "text": "GitLab", "ink": "#FC6D26", "weight": 600 }, "dont_caption": "Do not recolor any part of the logo." } ], "make_it_yours": { "note": "Everything above transfers. These are GitLab's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Unlock every team to ship trusted software at the speed of imagination.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/company/mission/" }, "story": { "text": "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.", "prov": "observed", "source": "https://about.gitlab.com/company/", "source_note": "2026-10-29", "paraphrase": true, "also": [ "https://about.gitlab.com/blog/devops-is-at-the-center-of-gitlab/", "https://handbook.gitlab.com/handbook/company/mission/" ] }, "values": [ { "name": "Collaboration", "means": "First letter of CREDIT, GitLab's six core values (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/values/" }, { "name": "Results for Customers", "means": "Results for customers come first (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/values/" }, { "name": "Efficiency", "means": "Efficiency, with a stated preference for boring solutions (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/values/" }, { "name": "Diversity, Inclusion & Belonging", "means": "People from every background can thrive and contribute (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/values/" }, { "name": "Iteration", "means": "Do the smallest thing possible, get feedback quickly; the guide's type repetitions and open icons express it (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/values/" }, { "name": "Transparency", "means": "Work in the open; the public handbook and monthly release post (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/values/" } ] }, "positioning": { "statement": { "text": "The intelligent orchestration platform where teams and their AI agents ship secure software faster.", "prov": "observed", "source": "https://about.gitlab.com/company/", "source_note": "2026-10-29" }, "category": { "text": "The most comprehensive AI-driven DevSecOps platform (guide); intelligent orchestration platform (homepage)", "prov": "published", "source": "https://design.gitlab.com/brand-introduction/", "also": [ "https://about.gitlab.com/ (2026-10-29): \"the intelligent orchestration platform for teams that won't compromise on speed or control as they scale agentic software engineering\"" ] }, "audience": { "text": "Development, security and operations teams across the software lifecycle, from startups to enterprises and the public sector (paraphrase of messaging and solution navigation).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" }, "problem": { "text": "Drag: handoffs between tools, gates between teams, security as an afterthought and compliance as a tax, which become catastrophic at agent speed (paraphrase).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/company/mission/" }, "promise": { "text": "Speed and control together: teams ship faster without trading away security (paraphrase of the tagline rationale and mission).", "prov": "published", "source": "https://design.gitlab.com/brand-logo/branded-lockups/" }, "differentiators": [ { "text": "One platform for the whole lifecycle, built in rather than stitched from point solutions.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/", "also": [ "https://about.gitlab.com/blog/devops-is-at-the-center-of-gitlab/" ] }, { "text": "Context as the moat: a connected data model across planning, code, review, security, deploy and operations.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/company/mission/" }, { "text": "Governance and security in the core of the platform.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/company/mission/" }, { "text": "Open source origin, a monthly release since 2011, and 5,500+ code contributors.", "prov": "observed", "source": "https://about.gitlab.com/company/", "source_note": "2026-10-29" }, { "text": "Cloud and model choice belong to the customer.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/company/mission/" } ], "alternatives": [ { "text": "DIY toolchains of DevOps point solutions 'digitally duct taped together'.", "prov": "published", "source": "https://about.gitlab.com/blog/devops-is-at-the-center-of-gitlab/" }, { "text": "Multi-app suites that can also call themselves 'integrated' (the messaging page names Atlassian as the example).", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" } ] }, "messaging": { "taglines": [ { "text": "Software. Faster.", "prov": "published", "source": "https://design.gitlab.com/brand-logo/branded-lockups/", "where": "Core tagline; the tagline lockup (stacked or horizontal in an AI-gradient box). A core promise: what teams build, and the advantage GitLab gives" }, { "text": "Speed with control for agentic software engineering", "prov": "observed", "source": "https://about.gitlab.com/", "source_note": "2026-10-29", "where": "about.gitlab.com page title" }, { "text": "Everyone can contribute", "prov": "published", "source": "https://design.gitlab.com/brand-design/photography/", "where": "The mission line the guide keeps returning to (voice, logomark, photography)" } ], "attributes": [ "visionary", "empathetic", "intentional" ], "key_messages": [], "boilerplate": { "text": "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.", "prov": "observed", "source": "https://about.gitlab.com/company/", "source_note": "2026-10-29", "paraphrase": true }, "pillars": [ { "name": "Speed", "claim": "Ship software faster: the outcome that matters most to software teams.", "prov": "published", "source": "https://design.gitlab.com/brand-logo/branded-lockups/", "proof": [ "p-monthly", "p-survey" ] }, { "name": "Trust built in", "claim": "Security, compliance and governance are part of the platform, not bolted on.", "prov": "inferred", "source": "https://handbook.gitlab.com/handbook/company/mission/", "why": "One of the five published mission beliefs and the 'speed with control' homepage title; not published as a named messaging pillar.", "proof": [ "p-survey" ] }, { "name": "One platform", "claim": "One application for the whole lifecycle instead of point solutions duct-taped together.", "prov": "inferred", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/", "why": "Product-marketing messaging (single application, built in) and the 2022 rebrand post; not published as a named pillar.", "proof": [ "p-users" ] }, { "name": "Everyone can contribute", "claim": "Open source roots and a community that builds the product with GitLab.", "prov": "inferred", "source": "https://design.gitlab.com/brand-messaging/brand-voice/", "why": "Mission line cited by the guide as the Empathetic example; the about page counts code contributors.", "proof": [ "p-contributors", "p-monthly" ] } ], "proof_points": [ { "id": "p-contributors", "kind": "stat", "text": "5,500+ code contributors (numbers as of June 2026).", "source": "https://about.gitlab.com/company/", "prov": "observed" }, { "id": "p-team", "kind": "stat", "text": "2,500+ team members, all-remote (June 2026).", "source": "https://about.gitlab.com/company/", "prov": "observed" }, { "id": "p-monthly", "kind": "stat", "text": "177 consecutive monthly releases; a release on the 22nd of every month.", "source": "https://about.gitlab.com/company/", "prov": "observed" }, { "id": "p-users", "kind": "stat", "text": "Over 50 million estimated registered users (June 2026).", "source": "https://about.gitlab.com/company/", "prov": "observed" }, { "id": "p-survey", "kind": "research", "text": "9th annual Global DevSecOps Survey: 3,266 DevSecOps professionals.", "source": "https://about.gitlab.com/developer-survey/", "prov": "observed" }, { "id": "p-public", "kind": "other", "text": "Public on Nasdaq since 2021 (GTLB).", "source": "https://about.gitlab.com/company/", "prov": "observed" } ], "claim_boundaries": [ { "text": "Don't claim 'first' or 'only'.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" }, { "text": "Say 'single application' or 'built in', not 'integrated'.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/" }, { "text": "Keep recommendations accurate, provable and helpful; give data where possible.", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/brand-voice/" }, { "text": "Be honest, even when that means sharing limitations.", "prov": "published", "source": "https://design.gitlab.com/brand-messaging/brand-voice/" }, { "text": "Third parties may use the GitLab name only truthfully, with the TM symbol and proprietorship statement; logo use is generally refused.", "prov": "published", "source": "https://handbook.gitlab.com/handbook/marketing/brand-experience/trademark-guidelines/" }, { "text": "The product-marketing messaging page still says 'The DevOps platform'; current pages say intelligent orchestration platform. Use the current line.", "prov": "observed", "source": "https://handbook.gitlab.com/handbook/marketing/product-and-technical-marketing/product-and-solution-marketing/messaging/", "source_note": "2026-10-29" } ] } } } }