What IBM does
IBM's 2x Grid, documented in the Carbon design system, uses an 8 px mini unit. Columns go 4 at small (320 px), 8 at medium (672 px) and 16 at large (1056 px), x-large (1312 px) and max (1584 px). Each column has 16 px padding; page margin is 0 at small, 16 px at medium to x-large and 24 px at max. When gutters are on, each box's margin matches its padding for a total gutter of 32 px. Images and boxes use the aspect ratios 1:1, 2:1, 2:3, 3:2, 4:3 and 16:9.
IBM's system, as published
- Mini Unit Px
- 8
- Breakpoints · Sm · Px
- 320
- Breakpoints · Sm · Columns
- 4
- Breakpoints · Sm · Margin Px
- 0
- Breakpoints · Md · Px
- 672
- Breakpoints · Md · Columns
- 8
- Breakpoints · Md · Margin Px
- 16
- Breakpoints · Lg · Px
- 1056
- Breakpoints · Lg · Columns
- 16
- Breakpoints · Lg · Margin Px
- 16
- Breakpoints · Xlg · Px
- 1312
- Breakpoints · Xlg · Columns
- 16
- Breakpoints · Xlg · Margin Px
- 16
- Breakpoints · Max · Px
- 1584
- Breakpoints · Max · Columns
- 16
- Breakpoints · Max · Margin Px
- 24
- Column Padding Px
- 16
- Gutter Px
- 32
- Aspect Ratios
- 1:1, 2:1, 2:3, 3:2, 4:3, 16:9
Why it works
Because columns, padding and image ratios all derive from one unit that doubles, text and images line up across breakpoints without case-by-case fixes. Dense pages stay orderly.
Best for
Enterprise, data and technical brands; reports, documentation, dashboards and dense multi-column pages
What breaks it
- Spacing values off the doubling scale
- Odd column spans that break the halving
- Free-form image crops
Sources
- carbondesignsystem.com: Carbon 2x Grid overview: breakpoints, columns, padding, margins, mini unit, aspect ratios
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of IBM's look comes with it.
The recipe
- Take the recipe's unit_px and express every space as a multiple of it, doubling from one step to the next.
- Lay 4 columns on phones, 8 on tablets and 16 on desktop, with two units of padding inside each column.
- Hang headings, body and images on the same column edges; spans should be halves, quarters or eighths of the row.
- Crop every image and box to one of the listed aspect ratios.
- Mark boxes with
palette.surfacefills orpalette.borderrules atstyle.border widthpx, rounded tostyle.radius.
What you'll need
- Nothing beyond the brand kit
Recipe as JSON
{
"recipe": {
"unit_px": {
"by": "style.density",
"map": {
"airy": 10,
"balanced": 8,
"dense": 8
},
"default": 8
},
"columns": {
"phone": 4,
"tablet": 8,
"desktop": 16
},
"column_padding_units": 2,
"gutter_units": 4,
"margin_units": {
"phone": 0,
"tablet": 2,
"desktop": 3
},
"spacing_scale_units": [
1,
2,
4,
8,
16
],
"aspect_ratios": [
[
1,
1
],
[
2,
1
],
[
2,
3
],
[
3,
2
],
[
4,
3
],
[
16,
9
]
],
"box_radius_px": "{style.radius}",
"box_fill": "{palette.surface}",
"rule": "{palette.border}",
"rule_px": "{style.border_width}"
},
"fallbacks": {
"palette.border": "{palette.ink_muted}",
"style.border_width": 1,
"palette.surface": "{palette.paper}",
"palette.ink_muted": "{palette.ink}",
"style.radius": 0
},
"steps": [
"Take the recipe's unit_px and express every space as a multiple of it, doubling from one step to the next.",
"Lay 4 columns on phones, 8 on tablets and 16 on desktop, with two units of padding inside each column.",
"Hang headings, body and images on the same column edges; spans should be halves, quarters or eighths of the row.",
"Crop every image and box to one of the listed aspect ratios.",
"Mark boxes with {palette.surface} fills or {palette.border} rules at {style.border_width}px, rounded to {style.radius}."
]
}See it working
- IBM: Breakpoint table, column counts and aspect ratios of the 2x Grid
The lesson
Derive every size from one doubling unit so layouts stay aligned without per-page fixes.
The move
IBM's Carbon page "2x Grid" states that the grid "provides the geometric foundation for typography, layouts, icons, and illustrations, ensuring structure and consistency." In the sidebar the page sits under Foundations, tabs read Overview, Guidelines and Code, and a right rail lists Mini unit, 2x Grid fundamentals, Grid behaviors and Grid influencers beside a dark grid diagram.
Why it works
- Our readOne sentence names everything the grid governs, so a designer sees it covers type and icons as well as columns.
- Our readListing Mini unit right after Overview in the page outline signals the whole system starts from one small number.
- Our readSplitting Overview, Guidelines and Code gives designers and engineers their own way into the same rule.
What not to copy
Don't adopt IBM's exact column count as your own rule. Keep the discipline: choose one base unit, make columns, padding and image ratios multiples of it, and document it in one place.
