What GitLab does
GitLab's Pajamas design system sets four square illustration frames: large 288 x 288 px for feature promotion, medium 144 x 144 px for empty and error states, small (spot) 72 x 72 px for banners and limited space, and extra small 36 x 36 px for elements combined into a larger composition or connecting UI elements. Small reusable components can stand alone or be part of a larger illustration. The principles are be simple, be optimistic, be helpful, with a less-is-more, light and airy feel: obvious but not comprehensive, letting the surrounding content carry the message. Illustrations render through the GlIllustration component, which adapts to color mode.
GitLab's system, as published
- Frames Px · Large
- 288
- Frames Px · Medium
- 144
- Frames Px · Small
- 72
- Frames Px · Extra Small
- 36
- Uses · Large
- feature promotion
- Uses · Medium
- empty and error states
- Uses · Small
- banners, limited space
- Uses · Extra Small
- parts of a larger composition, connecting UI
- Principles
- simple, optimistic, helpful
Why it works
Fixed square frames mean any illustration drops into any slot of its size and lines up with its neighbours. Small parts reused across larger scenes keep the set consistent and quick to extend.
Best for
Product UIs and documentation with many empty states, banners and feature promos; teams that need a reusable illustration kit
What breaks it
- Off-scale frames that break alignment
- Packing detail into small and extra-small frames
- Illustrations that try to explain everything without the copy
Sources
- design.gitlab.com: Pajamas illustration page: sizes, uses, principles, reuse model
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
- Set the small frame to the recipe's small_frame_px (larger for airy brands, smaller for dense) and derive the rest by doubling and halving; every frame is square.
- Assign by slot: large for feature promotion, medium for empty and error states, small for banners, extra small only inside a larger composition.
- Draw each object once at extra small and build larger scenes from those parts, filled
palette.accentandpalette.accent secondaryonpalette.paper, linedpalette.ink. - Keep it light and obvious, not comprehensive: let the heading and copy beside it carry the message.
- Leave empty space inside the frame rather than resizing the frame to fit the drawing.
What you'll need
- The list of slots that need illustration and their sizes
Recipe as JSON
{
"recipe": {
"frames": {
"large": {
"ratio_to_small": 4,
"use": "feature promotion"
},
"medium": {
"ratio_to_small": 2,
"use": "empty and error states"
},
"small": {
"ratio_to_small": 1,
"use": "banners and tight space"
},
"extra_small": {
"ratio_to_small": 0.5,
"use": "part of a larger composition"
}
},
"small_frame_px": {
"by": "style.density",
"map": {
"airy": 80,
"balanced": 72,
"dense": 64
},
"default": 72
},
"aspect": 1,
"fill": "{palette.accent}",
"fill_support": "{palette.accent_secondary}",
"line": "{palette.ink}",
"ground": "{palette.paper}",
"detail_by_frame": {
"large": "full scene",
"medium": "one object plus context",
"small": "one object",
"extra_small": "one shape"
}
},
"fallbacks": {
"palette.accent_secondary": "{palette.accent_dark}",
"palette.accent_dark": "{palette.ink}"
},
"steps": [
"Set the small frame to the recipe's small_frame_px (larger for airy brands, smaller for dense) and derive the rest by doubling and halving; every frame is square.",
"Assign by slot: large for feature promotion, medium for empty and error states, small for banners, extra small only inside a larger composition.",
"Draw each object once at extra small and build larger scenes from those parts, filled {palette.accent} and {palette.accent_secondary} on {palette.paper}, lined {palette.ink}.",
"Keep it light and obvious, not comprehensive: let the heading and copy beside it carry the message.",
"Leave empty space inside the frame rather than resizing the frame to fit the drawing."
]
}See it working
- GitLab: The four illustration sizes and how small components reuse in larger scenes
The lesson
Fix illustration frames to a halving size scale so any drawing drops into any slot and lines up.
The move
The directory is a grid of cards, each with a dark-outlined icon on a pale lavender circle, a file name such as add-user-sm, cloud-check-sm or devops-sm, and copy, link and open buttons below. Teal and orange accent single details like a check mark or a gear. In the bottom row, larger circles with sparkles flank a small one.
Why it works
- Our readEach icon sits on the same lavender circle with the same dark outline, so a mixed set of users, clouds and charts reads as one family.
- Our readFile names carrying the size suffix let a team find the right variant by name, without opening a design file.
- Vendor claimGitLab's Pajamas system sets four square frames: 288, 144, 72 and 36 px, each for a defined use such as empty states or banners. (source)
What not to copy
Don't copy GitLab's lavender-and-teal palette or its mascot detail. Keep the system: square frames that halve at each step, a use written next to each size, and small parts reused inside larger scenes.
