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.
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.
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
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of GitLab's look comes with it.
palette.ink on light grounds and palette.on night on dark grounds; no other color ever carries sentences.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.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.palette.positive for product-feature highlights and palette.ink muted steps for separating information.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.{
"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."
]
}The lesson
Write the color guide as per-element rules, with a hard ban on color inside sentences.
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.
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.