What IBM does
IBM's 2x Grid divides any surface into 2, 4, 8, 16 or 32 columns on an 8 px mini unit for product and web (scaled by viewing distance in print, from a 2 mm unit for handheld pieces to 64 mm for street-distance signage), spaces elements at 1x, 2x, 3x, 4x, 6x, 8x, 10x and 12x the unit, and crops images and containers to 16:9, 4:3, 3:2, 2:1 or 1:1 measured from the column width. UI icons are drawn on a 32 x 32 px grid with 2 px padding, a 2 px stroke and 2 px corner radius, square caps, rounded exteriors with 90 degree interiors and 45 degree or 15 degree-step angles, all borrowed from IBM Plex; at 24, 20 and 16 px the stroke steps down to 1.5, 1.25 and 1 px, and icons are one solid color at 4.5:1 contrast. Line-style illustration snaps to a 4 px grid with at most four clearly different line weights, prefers 15 to 90 degree angles in 15 degree steps and circle-segment curves, keeps lines opaque, and runs gradients along the stroke; pictograms use a 0.72 px stroke (1.44 px when expressive). Photography is reportage, portraiture and still life shot at eye level or aerial, in natural light, everything in sharp focus, with no color washes, grading, overlays or golden-hour warmth. Motion comes in two styles, productive and expressive, with published cubic-bezier curves and six duration tokens from 70 ms to 700 ms, and the brand bans cartoonish overshoot and bounce.
IBM's system, as published
- Grid Divisions
- 2, 4, 8, 16, 32, 64 columns (1, 2, 4, 8, 16 for columns and rows)
- Mini Unit Product Web
- 8 px
- Mini Unit Print By Distance
- 2 mm (0-0.5 m, 6 pt caption), 4 mm (12 pt), 8 mm (24 pt), 16 mm (48 pt), 32 mm (96 pt), 64 mm (192 pt)
- Mini Unit Video 1920x1080
- 7.5 px, snap to 30 px increments, 8 columns (16 optional)
- Spacing Multiples
- 1x, 2x, 3x, 4x, 6x, 8x, 10x, 12x the base unit
- Aspect Ratios
- 16:9, 4:3, 3:2, 2:1, 1:1, width measured to the columns
- Carbon Breakpoints
- sm 320 px 4 cols / md 672 px 8 cols / lg 1056 px 16 cols / xlg 1312 px 16 cols / max 1584 px 16 cols
- Carbon Margin Padding Gutter
- margin 0 / 16 / 16 / 16 / 24 px by breakpoint; box padding 16 px; total gutter 32 px
- Carbon Fixed Sizing Scale
- 8, 16, 24, 32, 48, 64, 80 px
- Ui Icon Grid
- 32 x 32 px, 2 px padding, key shapes
- Ui Icon Specs
- 32 px: 2 px stroke, 2 px padding, 28 px live area, 2 px radius; 24 px: 1.5 / 1.5 / 21 / 1.5; 20 px: 1.25 / 1.25 / 17.5 / 1.25 (pairs with 16 pt type); 16 px: 1 / 1 / 14 / 1 (pairs with 14 pt type)
- Ui Icon Style
- rounded exteriors, 90 degree interiors, distinctive point on tips, slab characteristics, square caps, square arrow tips, straight-on perspective
- Ui Icon Angles
- 45 degrees for even anti-aliasing, otherwise 15 degree increments
- Ui Icon Radius Rule
- 2 px, increased in multiples of two when the metaphor needs it
- Ui Icon Color
- solid monochrome, 4.5:1 contrast, same color as paired text
- Touch Target
- 44 px minimum
- Pictogram Stroke
- 0.72 px productive, 1.44 px expressive, on a 32 x 32 px grid with 1 px minimum padding
- Illustration Line Grid
- 4 px at all canvas sizes, snap to grid
- Illustration Line Weights
- no more than four per illustration, not too similar; spacing between lines >= the line weight
- Illustration Angles
- 15, 30, 45, 60, 75, 90 degrees preferred
- Illustration Color
- opaque lines, gradients follow the stroke; monochromatic, analogous (2-3 hues) or complementary as accents; 3:1 minimum contrast for meaning
- Illustration Styles
- line, flat, isometric (plus hybrid UI)
- Photo Types
- reportage (working world), portraiture (progress partners), still life (exhibiting excellence)
- Photo Perspective
- eye level or aerial
- Photo Lighting
- natural light; avoid overly warm, glowing, golden-hour images
- Photo Focus
- everything in sharp focus
- Photo Effects
- no color washes, grading, overlays, added glare
- Easing Standard
- productive cubic-bezier(0.2, 0, 0.38, 0.9); expressive cubic-bezier(0.4, 0.14, 0.3, 1)
- Easing Entrance
- productive cubic-bezier(0, 0, 0.38, 0.9); expressive cubic-bezier(0, 0, 0.3, 1)
- Easing Exit
- productive cubic-bezier(0.2, 0, 1, 0.9); expressive cubic-bezier(0.4, 0.14, 1, 1)
- Durations
- fast-01 70 ms (button, toggle), fast-02 110 ms (fade), moderate-01 150 ms (small expansion), moderate-02 240 ms (expansion, toast), slow-01 400 ms (large expansion, important notification), slow-02 700 ms (background dimming)
- Animation Rules
- at least 24 fps; one axis at a time for type and camera; no cartoonish overshoots and bounces; draw strokes from zero weight rather than crossfading; animate between swatches, not opacity
Why it works
One rule, divide space by two on an 8 px unit, decides grid, image crops, icon canvases and illustration snapping, so every part of a piece lines up with every other. Motion and imagery are held to the same restraint: two motion speeds, no overshoot, and photos left ungraded and in sharp focus.
Best for
Enterprise software, technical and data products, consultancies, research and engineering firms, regulated industries, any brand that wants to read as precise, factual and engineered rather than playful
What breaks it
- Mixing stroke weights inside one icon
- Spacing values off the 8 px unit
- Photo filters, tints, glow, soft focus or warm sunset grading
- Stock clichés that stand in for an idea
- Bouncy or overshooting motion and multi-axis type reveals
- Transparency or multiply effects in illustrations
Sources
- ibm.com: 2x Grid: divisions of two, mini unit by viewing distance, 8 px for product and web, spacing multiples, aspect ratios, video grid
- ibm.com: UI icon construction: 32 px grid, 2 px padding, key shapes, 2 px stroke, 2 px corners, square caps, 45 and 15 degree angles
- ibm.com: UI icon sizes 16/20/24/32 px with stroke, padding, live area and radius per size; color and 44 px touch targets
- ibm.com: Pictograms: 32 px grid, 0.72 px stroke, 1.44 px expressive stroke
- ibm.com: Illustration principles (engineered, clear, nimble, diverse, delightful) and the line, flat and isometric styles
- ibm.com: Line style: 4 px grid, four line weights maximum, spacing, angles, circular curves, opaque lines, gradients along the stroke
- ibm.com: Illustration color schemes, 3:1 contrast, aspect ratios, 2x Grid framing and focal points
- ibm.com: Photo types: reportage, portraiture, still life
- ibm.com: Photo perspective, framing on the 2x Grid, aspect ratios, natural light, deep focus, no effects or filters
- ibm.com: Productive and expressive motion and their tone
- ibm.com: Animation craft: 24 fps minimum, single-axis moves, no overshoot or bounce, stroke weight draws, type reveal order
- ibm.com: Layout point of view: essential, dynamic (asymmetric balance), engineered (everything aligned to the grid)
- carbondesignsystem.com: Carbon motion: standard, entrance and exit cubic-bezier curves for productive and expressive; six duration tokens
- carbondesignsystem.com: Carbon 2x Grid in UI: breakpoints, columns, margins, 16 px padding, 32 px gutter, fixed sizing scale
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
- Set the base unit to 8 px and build the page on halves: pick 1, 2, 4, 8 or 16 columns (4 below 672 px, 8 to 1056 px, 16 above), 16 px box padding, a 32 px gutter, and keep that division for the whole piece.
- Space everything with 1, 2, 3, 4, 6, 8, 10 or 12 units only; separate sections by the recipe's section_gap_units.
- Size every image, illustration and card by the columns it spans, then set its height from that width at 16:9, 4:3, 3:2, 2:1 or 1:1.
- Set type flush left on the padding edge, leave whole columns empty for asymmetric balance, and where the grid should be felt, draw it as hairlines of
style.border width* 0.5 inpalette.border. - Draw or restyle icons on a 32 unit canvas with 2 units of padding: one stroke of
typography.body.weight/ 200 units, square caps and arrow tips, rounded outside corners of 2 units, sharp inside corners, 45 degree diagonals and other angles in 15 degree steps, no perspective. - Export icons at 16, 20, 24 and 32 px with the stroke scaled to one sixteenth of the size; color them
palette.inkto match their text at 4.5:1 againstpalette.paper, center them on the text line, and give any clickable one a 44 px target. - Draw illustrations as line art snapped to a 4 px grid: up to four clearly different weights, gaps at least as wide as the line, angles in 15 degree steps, circle segments for curves, opaque
palette.inklines withpalette.accentas the lead and gradients running along the stroke topalette.accent dark. - Use real photographs of people working, portraits at eye level and product still lifes; keep them in natural light and sharp all the way through, crop to the shared ratios with the subject on a half or quarter line, and add no grade, wash, overlay or tint.
- Animate with the recipe's easing curves and durations: micro states at the micro duration, transitions at the transition duration, large panels at 400 ms, backdrop dimming at 700 ms.
- Move one axis at a time, never overshoot or bounce, draw lines in by growing the stroke from zero, change color by stepping between palette roles rather than fading opacity, and reveal text left to right, top to bottom.
What you'll need
- The customer's photographs of real people, places and product
- Body text size and weight
- Which moments deserve expressive motion (launch, primary action, alerts)
Recipe as JSON
{
"recipe": {
"icon_style": {
"canvas_units": 32,
"padding_units": 2,
"stroke_units_at_32": "{typography.body.weight} / 200",
"stroke_to_size_ratio": 0.0625,
"sizes_px": [
16,
20,
24,
32
],
"corner_radius_units": 2,
"corner_radius_step_units": 2,
"exterior_corners": "rounded",
"interior_corners": "sharp",
"linecap": "square",
"arrow_tips": "square",
"primary_angle_deg": 45,
"angle_step_deg": 15,
"perspective": "straight-on",
"fill": "none",
"color": "{palette.ink}",
"color_secondary": "{palette.ink_muted}",
"min_contrast": 4.5,
"align_to_text": "center",
"touch_target_px": 44,
"pictogram_stroke_units_at_32": 0.72,
"pictogram_stroke_units_expressive": 1.44
},
"illustration_style": {
"style": "line",
"grid_px": 4,
"max_line_weights": 4,
"line_weight_units": [
1,
2,
4,
8
],
"min_gap_to_weight_ratio": 1,
"angles_deg": [
15,
30,
45,
60,
75,
90
],
"curves": "quarter, half and full circles first; free curves only when the idea needs them",
"nested_corners": "equal spacing, radius grows by the spacing each ring",
"stroke": "{palette.ink}",
"stroke_accent": "{palette.accent}",
"gradient_along_stroke": [
"{palette.accent}",
"{palette.accent_dark}"
],
"line_opacity": 1,
"max_hues": 3,
"min_contrast": 3,
"background": "{palette.paper}",
"aspect_ratios": [
"16:9",
"4:3",
"3:2",
"2:1",
"1:1"
],
"composition": "split the canvas in halves; one half literal, the other what happens behind it"
},
"photo_treatment": {
"grade": "none",
"saturation": 1,
"contrast": 1,
"overlay": "none",
"color_wash": "none",
"lighting": "natural",
"warmth_shift": 0,
"focus": "deep",
"viewpoints": [
"eye level",
"aerial"
],
"subjects": [
"reportage of real work",
"portraits of people at equal stature",
"still life of the product"
],
"aspect_ratios": [
"16:9",
"4:3",
"3:2",
"2:1",
"1:1"
],
"focal_point": "on a half or quarter division of the frame",
"radius_px": 0,
"frame_border": "none"
},
"motion": {
"style": {
"by": "style.motion",
"map": {
"crisp": "productive",
"calm": "productive",
"playful": "expressive"
},
"default": "productive"
},
"easing_standard": {
"by": "style.motion",
"map": {
"crisp": [
0.2,
0,
0.38,
0.9
],
"calm": [
0.2,
0,
0.38,
0.9
],
"playful": [
0.4,
0.14,
0.3,
1
]
},
"default": [
0.2,
0,
0.38,
0.9
]
},
"easing_entrance": {
"by": "style.motion",
"map": {
"crisp": [
0,
0,
0.38,
0.9
],
"calm": [
0,
0,
0.38,
0.9
],
"playful": [
0,
0,
0.3,
1
]
},
"default": [
0,
0,
0.38,
0.9
]
},
"easing_exit": {
"by": "style.motion",
"map": {
"crisp": [
0.2,
0,
1,
0.9
],
"calm": [
0.2,
0,
1,
0.9
],
"playful": [
0.4,
0.14,
1,
1
]
},
"default": [
0.2,
0,
1,
0.9
]
},
"micro_ms": {
"by": "style.motion",
"map": {
"crisp": 70,
"calm": 110,
"playful": 110
},
"default": 70
},
"transition_ms": {
"by": "style.motion",
"map": {
"crisp": 150,
"calm": 240,
"playful": 240
},
"default": 150
},
"large_ms": 400,
"dim_ms": 700,
"overshoot": 0,
"axes_per_move": 1,
"min_fps": 24,
"stroke_draw_from_weight": 0,
"reveal_order": "left to right, top to bottom",
"expressive_moments": "page open, primary action, alerts; everything else productive"
},
"layout_move": {
"base_unit_px": 8,
"divisions": [
1,
2,
4,
8,
16
],
"columns_by_breakpoint": {
"320": 4,
"672": 8,
"1056": 16,
"1312": 16,
"1584": 16
},
"margin_px_by_breakpoint": {
"320": 0,
"672": 16,
"1056": 16,
"1312": 16,
"1584": 24
},
"box_padding_px": 16,
"gutter_px": 32,
"spacing_multiples": [
1,
2,
3,
4,
6,
8,
10,
12
],
"section_gap_units": {
"by": "style.density",
"map": {
"airy": 12,
"balanced": 8,
"dense": 6
},
"default": 8
},
"aspect_ratios": [
"16:9",
"4:3",
"3:2",
"2:1",
"1:1"
],
"height_from": "column width",
"type_alignment": "left edge of box padding, flush left, ragged right",
"balance": "asymmetric; leave whole columns empty as negative space",
"grid_reveal_rule": "{style.border_width} * 0.5",
"grid_reveal_color": "{palette.border}"
}
},
"fallbacks": {
"palette.ink_muted": "{palette.ink}",
"palette.accent_dark": "{palette.ink}",
"palette.border": "{palette.ink_muted}",
"style.border_width": 1
},
"steps": [
"Set the base unit to 8 px and build the page on halves: pick 1, 2, 4, 8 or 16 columns (4 below 672 px, 8 to 1056 px, 16 above), 16 px box padding, a 32 px gutter, and keep that division for the whole piece.",
"Space everything with 1, 2, 3, 4, 6, 8, 10 or 12 units only; separate sections by the recipe's section_gap_units.",
"Size every image, illustration and card by the columns it spans, then set its height from that width at 16:9, 4:3, 3:2, 2:1 or 1:1.",
"Set type flush left on the padding edge, leave whole columns empty for asymmetric balance, and where the grid should be felt, draw it as hairlines of {style.border_width} * 0.5 in {palette.border}.",
"Draw or restyle icons on a 32 unit canvas with 2 units of padding: one stroke of {typography.body.weight} / 200 units, square caps and arrow tips, rounded outside corners of 2 units, sharp inside corners, 45 degree diagonals and other angles in 15 degree steps, no perspective.",
"Export icons at 16, 20, 24 and 32 px with the stroke scaled to one sixteenth of the size; color them {palette.ink} to match their text at 4.5:1 against {palette.paper}, center them on the text line, and give any clickable one a 44 px target.",
"Draw illustrations as line art snapped to a 4 px grid: up to four clearly different weights, gaps at least as wide as the line, angles in 15 degree steps, circle segments for curves, opaque {palette.ink} lines with {palette.accent} as the lead and gradients running along the stroke to {palette.accent_dark}.",
"Use real photographs of people working, portraits at eye level and product still lifes; keep them in natural light and sharp all the way through, crop to the shared ratios with the subject on a half or quarter line, and add no grade, wash, overlay or tint.",
"Animate with the recipe's easing curves and durations: micro states at the micro duration, transitions at the transition duration, large panels at 400 ms, backdrop dimming at 700 ms.",
"Move one axis at a time, never overshoot or bounce, draw lines in by growing the stroke from zero, change color by stepping between palette roles rather than fading opacity, and reveal text left to right, top to bottom."
]
}See it working
- IBM: The divisions-of-two grid, the mini unit table and the spacing multiples
- IBM: Icon construction on the 32 px grid with square caps and 2 px corners
- IBM: Line-style illustrations snapped to the 4 px grid
- IBM: Do and don't photo pairs for perspective, light, focus and effects
- IBM Carbon: Productive and expressive easing curves and the duration tokens
The lesson
Pick one multiplication rule and apply it to every visual decision, so parts made by different teams still line up.
The move
The page "2x Grid" says the grid is the framework for all the visual elements and typography, whatever the device or medium. A list below the intro runs "Divisions of two", "Constructing the 2x Grid", "Base unit", "Spatial relationships", "2x Grid in UI" and "2x Grid for video". The sidebar puts photography, icons and animation under the same system.
Why it works
- Our readOne rule (halve the space on an 8 px unit) is easy to remember and check, which suits a system many people use.
- Our readListing video next to UI shows the rule is meant to cover more than screens.
- Our readPlain light-weight type on black and gray makes the document look as strictly ordered as the grid it describes.
What not to copy
The 8 px base and halving suit IBM's scale, so pick your own base unit. Keep a single divisibility rule that reaches icons, crops and layout alike.
