All brand kits
GitLab brand kit

What GitLab does

#FFFFFF#171321#FCA326#FC6D26#E24329#A989F5#7759C2#FDF1DD#CEB3EF#5943B6#2F2A6B#232150

GitLab's brand guidelines on design.gitlab.com split the palette into primaries (White #FFFFFF, Charcoal #171321, three oranges #FCA326, #FC6D26, #E24329 and two purples #A989F5, #7759C2), secondaries used as accents (tints and deep purples down to #232150, teals #C5F4EC to #10B1B1) and five cool grays, with pinks reserved for gradients. Headlines, body copy and CTAs are only ever white or Charcoal; links are Purple 01p on dark and Purple 02p on light; complex gradients use at most three colors on a white base (Purple 04s base in dark mode) and must include purple or orange. Type is GitLab Sans (Inter as fallback) with GitLab Mono for labels and stats: headlines Bold at 105% leading and -4.5% tracking, subheads Regular at 110% and -2%, body Regular at 135% and 0, CTAs SemiBold, all sentence case and left-aligned, never all caps. The logo needs clear space equal to the x-height of the wordmark's a, a 20px digital or 0.4 in print minimum, and should take no more than 20% of the frame height; nine misuses are listed. The voice is three traits, visionary, empathetic and intentional, each with we-are and we-are-not pairs.

GitLab's system, as published

Palette · Primary
White #FFFFFF, Charcoal #171321, Orange 01p #FCA326, Orange 02p #FC6D26, Orange 03p #E24329, Purple 01p #A989F5, Purple 02p #7759C2
Palette · Secondary (Accents)
Orange 01s #FDF1DD, Purple 01s #CEB3EF, Purple 02s #5943B6, Purple 03s #2F2A6B, Purple 04s #232150, Teal 01s #C5F4EC, Teal 02s #6FDAC9, Teal 03s #10B1B1
Palette · Neutrals (Cool Grays)
#D1D0D3, #A2A1A6, #74717A, #45424D, #2B2838
Palette · Gradient Only
Pink 01g #FFB9C9, Pink 02g #FF1493, Pink 03g #AE126C, Vermillion 01g #D74026
Palette · Copy And Ctas
white or Charcoal only
Palette · Links
Purple 01p on dark, Purple 02p on light
Palette · Backgrounds
gradients, white, Charcoal or purple
Palette · Teal
product features (positive connotation)
Palette · Grays
differentiate information and set hierarchy
Palette · Gradients
max 3 colors plus base; base white (light) or Purple 04s (dark); must include purple or orange; no Charcoal or gray in complex gradients; soft tones may need opacity under 30%
Palette · AI Gradient
linear, Orange 01p to Purple 01p, reserved for AI and GitLab Duo
Palette · Contrast
4.5:1 text and UI, 3:1 large text
Typography · Primary
GitLab Sans (Bold, Regular; SemiBold for CTAs); fallback Inter
Typography · Secondary
GitLab Mono, Regular only: labels, code, callouts, select taglines, statistics
Typography · Headlines
Bold, leading 105%, tracking -45 (-4.5%)
Typography · Subheads / Intro / Outro
Regular, leading 110%, tracking -20 (-2%), optical kerning
Typography · Body
Regular, leading 135%, tracking 0, auto kerning
Typography · Rules
sentence case, left-aligned, ligatures on, hyphenation off, no all caps, no justified/centered/right copy
Typography · Type Repetition
one Bold word duplicated 2-4 times above itself with the bottom quarter cropped, gaps at 3/4 of the cropped portion
Typography · Sizes
no fixed sizes published
Logo · Clear Space
x-height (the height of the a in the wordmark) all around; the diagram caption says the width of the a
Logo · Minimum Size
20px digital, 0.4 in (11mm) print
Logo · Scale
logo or logomark no more than 20% of the frame height
Logo · Color
full color is default; one-color white or Charcoal for single-color production or where awareness is established
Logo · Misuse
no stroke, no recoloring, no transforming or scaling parts, no rearranging, no drop shadows or effects, no rotation, no distortion, not a frame for imagery, not inside a line of text
Voice · Visionary
is inspirational, technical expert, sophisticated, innovative; is not sensationalistic, inaccessible, arrogant, impractical
Voice · Empathetic
is collaborative, approachable, inclusive, thoughtful; is not deferential, overeager, patronizing, insensitive
Voice · Intentional
is clear, focused, reliable, transparent; is not pushy, inflexible, rigid, reckless
Messaging · Positioning Goal
recognized as the most comprehensive AI-driven DevSecOps platform
Messaging · Headlines
sentence case by default; start with a numeral when the headline begins with a number; capitalize after a colon
Messaging · Mechanics
serial comma, active voice, contractions encouraged, numerals from 10 up, American English by default

Why it works

Restricting all copy to the two neutral inks keeps text legible on any ground, so two vivid accents and gradients can do the expressive work without fighting the words. Pairing each voice trait with what it must not become gives writers a guardrail, not just an adjective.

Best for

Developer tools, technical B2B platforms, open-source and community-led companies, brands with two accent colors and a need to look expert without sounding arrogant

What breaks it

  • Setting sentences in an accent color
  • Gradients with four or more stops, or with ink and neutral steps in them
  • All-caps headlines or centered body copy
  • Mono running text
  • Voice that reads as arrogant or patronizing while trying to sound expert or friendly

Sources

  • design.gitlab.com: Primary, secondary, neutral and gradient-only palettes with hexes; copy, CTA, link and background rules; gradient rules
  • design.gitlab.com: GitLab Sans and Mono, weights, leading and tracking per level, casing and alignment rules, type repetition
  • design.gitlab.com: Clear space, minimum sizes, 20% frame rule, color versions, misuse list
  • design.gitlab.com: Visionary, empathetic and intentional traits with we-are and we-are-not pairs
  • design.gitlab.com: Headline casing, numerals, punctuation and voice mechanics for marketing copy
  • design.gitlab.com: Purpose of the guidelines and the positioning goal

Steal it for your brand

The same system, written in your colors, type and shapes. Nothing of GitLab's look comes with it.

The recipe

  1. Set every headline, paragraph and button label in palette.ink on light grounds and palette.on night on dark grounds; no other color ever carries sentences.
  2. Use palette.accent and palette.accent secondary as the two expressive anchors for graphics, rules, illustrations and gradients; links take palette.accent secondary on light and palette.accent on night on dark.
  3. Build gradients from at most three stops on a palette.paper base (or palette.night in dark mode), always including one of the two anchors, never the ink or neutral steps; keep palette.highlight gradient-only.
  4. Reserve palette.positive for product-feature highlights and palette.ink muted steps for separating information.
  5. Set body text at params.base px px times typography.body.scale; set headlines in the display face with leading at 1.05 and tracking at -4.5%, subheads at 1.1 and -2%, body at 1.35 and 0; buttons one weight step heavier than body; mono only for labels and stats.
  6. Write everything in sentence case, left-aligned, never all caps or justified.
  7. Give the customer's logo clear space equal to its wordmark x-height, keep it at or under a fifth of the frame height, and never below 20px.
  8. Rewrite copy against the three traits and check each line against the never list; lead with the positioning claim, then proof, then the next step.

What you'll need

  • Two accent colors in the customer's palette (one may be derived)
  • A dark ground color for dark mode, or permission to use ink
  • A mono face for labels and statistics, or the body face as a stand-in
  • The customer's logo with a one-color version
  • The positioning claim the customer wants to own
Recipe as JSON
{
  "recipe": {
    "palette_roles": [
      {
        "role": "{palette.paper}",
        "share": 0.45,
        "job": "Default ground in light mode and the base under every gradient"
      },
      {
        "role": "{palette.ink}",
        "share": 0.2,
        "job": "All headlines, body copy and CTA fills on light grounds; also a full dark ground"
      },
      {
        "role": "{palette.accent}",
        "share": 0.1,
        "job": "Primary accent for graphics and gradient stops; never for sentences"
      },
      {
        "role": "{palette.accent_secondary}",
        "share": 0.08,
        "job": "Second primary accent; links on light grounds and the other gradient anchor"
      },
      {
        "role": "{palette.night}",
        "share": 0.07,
        "job": "Deep ground for dark mode and the base of dark gradients"
      },
      {
        "role": "{palette.ink_muted}",
        "share": 0.05,
        "job": "Cool neutral steps that separate information and set hierarchy"
      },
      {
        "role": "{palette.positive}",
        "share": 0.03,
        "job": "Product-feature highlights, read as a positive signal"
      },
      {
        "role": "{palette.highlight}",
        "share": 0.02,
        "job": "Gradient-only stop; never a flat fill or a text color"
      },
      {
        "role": "{palette.accent_on_night}",
        "share": 0,
        "job": "Links on dark grounds"
      }
    ],
    "copy_colors": [
      "{palette.ink}",
      "{palette.on_night}"
    ],
    "gradient_rules": {
      "max_stops": 3,
      "base_light": "{palette.paper}",
      "base_dark": "{palette.night}",
      "must_include": [
        "{palette.accent}",
        "{palette.accent_secondary}"
      ],
      "never_include": [
        "{palette.ink}",
        "{palette.ink_muted}"
      ],
      "soft_tone_opacity_max": 0.3
    },
    "contrast_min": {
      "text": 4.5,
      "large_text": 3
    },
    "type_scale": {
      "base_px": "{params.base_px}",
      "body_scale": "{typography.body.scale}",
      "size_rule": "no fixed sizes: choose sizes per layout but keep one size per block of copy; tighten leading and tracking as size rises",
      "levels": [
        {
          "level": "headline",
          "face": "display",
          "weight": "{typography.display.weight}",
          "line_height": 1.05,
          "tracking_em": -0.045
        },
        {
          "level": "subhead",
          "face": "body",
          "weight": "{typography.body.weight}",
          "line_height": 1.1,
          "tracking_em": -0.02
        },
        {
          "level": "body",
          "size_ratio": 1,
          "face": "body",
          "weight": "{typography.body.weight}",
          "line_height": 1.35,
          "tracking_em": 0
        },
        {
          "level": "cta",
          "face": "body",
          "weight_step": "one step heavier than body"
        },
        {
          "level": "label_and_stat",
          "face": "mono",
          "weight": "{typography.mono.weight}"
        }
      ],
      "casing": "sentence case everywhere; never all caps",
      "alignment": "left-aligned copy; no justified, centered or right-aligned text unless the language requires it",
      "mono_rule": "mono only for labels, code, callouts and statistics; never mixed into running text",
      "emphasis_device": {
        "copies_min": 2,
        "copies_max": 4,
        "crop_from_baseline": 0.25,
        "gap_of_crop": 0.75
      }
    },
    "logo_rules": {
      "clear_space": "the x-height of the customer's wordmark on every side",
      "frame_height_max": 0.2,
      "min_size_px": 20,
      "min_size_print_mm": 11,
      "default_version": "full color; one-color {palette.ink} or {palette.on_night} only for single-color production or where the brand is already known",
      "misuse": [
        "No stroke or outline",
        "No recoloring of any part",
        "No scaling, moving or rearranging parts",
        "No shadows or effects",
        "No rotation or distortion",
        "Never a frame or mask for imagery",
        "Never set inside a line of text"
      ]
    },
    "voice_rules": [
      {
        "id": "visionary",
        "kind": "guidance",
        "text": "Sound visionary: inspiring, technically expert, sophisticated, innovative; never sensational, inaccessible, arrogant or impractical"
      },
      {
        "id": "empathetic",
        "kind": "guidance",
        "text": "Sound empathetic: collaborative, approachable, inclusive, thoughtful; never deferential, overeager, patronizing or insensitive"
      },
      {
        "id": "intentional",
        "kind": "guidance",
        "text": "Sound intentional: clear, focused, reliable, transparent; never pushy, inflexible, rigid or reckless"
      },
      {
        "id": "expert-readers",
        "kind": "guidance",
        "text": "For expert readers, add value with data and concrete examples, and make every recommendation provable"
      },
      {
        "id": "newcomers",
        "kind": "guidance",
        "text": "For newcomers, assume no technical background and explain without condescending"
      },
      {
        "id": "product-news",
        "kind": "guidance",
        "text": "For product news, give what the reader needs in plain language and be honest about limits"
      },
      {
        "id": "active-voice",
        "kind": "guidance",
        "text": "Prefer active voice; use passive only as a deliberate choice; contractions are welcome"
      },
      {
        "id": "numerals",
        "kind": "guidance",
        "text": "Spell out zero to nine, use numerals from 10 up, and start a headline with a numeral when it opens with a count"
      },
      {
        "id": "gender-neutral",
        "kind": "prefer",
        "term": "they",
        "over": [
          "he or she",
          "he/she"
        ]
      },
      {
        "id": "no-ampersand-in-copy",
        "kind": "avoid",
        "terms": [
          "&"
        ],
        "instead": "and",
        "why": "ampersands belong only in official names and tight display headlines"
      },
      {
        "id": "headline-case",
        "kind": "headline_case",
        "value": "sentence"
      }
    ],
    "messaging_hierarchy": {
      "order": [
        "positioning claim the company wants to own",
        "the voice trait that leads for this audience",
        "proof: data, examples, release evidence",
        "the next step"
      ],
      "headline_rules": [
        "sentence case",
        "lead with a numeral when the headline is a count",
        "capitalize the first word after a colon"
      ],
      "accent_text_rule": "no color other than the two inks inside sentences or long copy",
      "ai_signal": "reserve one specific two-stop accent gradient for AI features only"
    }
  },
  "fallbacks": {
    "palette.night": "{palette.ink}",
    "palette.accent_secondary": "{palette.accent}",
    "palette.accent_on_night": "{palette.accent_secondary}",
    "palette.highlight": "{palette.accent}",
    "palette.positive": "{palette.accent_secondary}",
    "palette.on_night": "{palette.paper}",
    "palette.ink_muted": "{palette.ink}",
    "typography.body.scale": 1,
    "typography.mono.weight": "{typography.body.weight}"
  },
  "steps": [
    "Set every headline, paragraph and button label in {palette.ink} on light grounds and {palette.on_night} on dark grounds; no other color ever carries sentences.",
    "Use {palette.accent} and {palette.accent_secondary} as the two expressive anchors for graphics, rules, illustrations and gradients; links take {palette.accent_secondary} on light and {palette.accent_on_night} on dark.",
    "Build gradients from at most three stops on a {palette.paper} base (or {palette.night} in dark mode), always including one of the two anchors, never the ink or neutral steps; keep {palette.highlight} gradient-only.",
    "Reserve {palette.positive} for product-feature highlights and {palette.ink_muted} steps for separating information.",
    "Set body text at {params.base_px} px times {typography.body.scale}; set headlines in the display face with leading at 1.05 and tracking at -4.5%, subheads at 1.1 and -2%, body at 1.35 and 0; buttons one weight step heavier than body; mono only for labels and stats.",
    "Write everything in sentence case, left-aligned, never all caps or justified.",
    "Give the customer's logo clear space equal to its wordmark x-height, keep it at or under a fifth of the frame height, and never below 20px.",
    "Rewrite copy against the three traits and check each line against the never list; lead with the positioning claim, then proof, then the next step."
  ]
}

See it working

  • GitLab: The role split between two inks for copy and the accent and gradient palette
  • GitLab: Headline, subhead and body leading and tracking, and the type-repetition emphasis device
  • GitLab: X-height clear space, minimum size, the 20% frame rule and the misuse grid
  • GitLab: Three voice traits, each with what it is and what it is not

The lesson

Write the color guide as per-element rules, with a hard ban on color inside sentences.

The move

The Color page lists rules by element: backgrounds can be gradients or solid white, charcoal or purple; headlines, body copy and calls to action use white or charcoal; hyperlinks use Purple 01p on dark, 02p on light. A closing line bans other colors in sentences or large bodies of copy.

Why it works

  • Our readNaming a color for each element (headline, CTA, link) lets a designer decide without asking, which a palette alone does not.
  • Our readLimiting copy to two inks keeps text readable on any gradient, so accent colors can stay loud.
  • Our readThe accessibility line ("Small titles and data points" may use color sparingly, with a 1.4.3 contrast minimum) states when the exception applies and what test it must pass.

What not to copy

Don't copy the purple and orange palette. Keep the element-by-element rules, the no-color-in-sentences rule and print-ready values beside each swatch.

More from GitLab

More brand kits