What IBM Carbon does
IBM's Carbon design system has two motion styles. Productive motion is efficient and responsive, staying subtle and out of the way; expressive motion is enthusiastic, vibrant and highly visible. Productive curves are standard cubic-bezier(0.2, 0, 0.38, 0.9), entrance cubic-bezier(0, 0, 0.38, 0.9) and exit cubic-bezier(0.2, 0, 1, 0.9); expressive curves are standard cubic-bezier(0.4, 0.14, 0.3, 1), entrance cubic-bezier(0, 0, 0.3, 1) and exit cubic-bezier(0.4, 0.14, 1, 1). Six duration tokens each carry a job: fast-01 70 ms for button and toggle micro-interactions, fast-02 110 ms for fades, moderate-01 150 ms for small expansions, moderate-02 240 ms for expansions and toasts, slow-01 400 ms for large expansions and important notifications, slow-02 700 ms for background dimming.
IBM Carbon's system, as published
- Productive · Standard
- cubic-bezier(0.2, 0, 0.38, 0.9)
- Productive · Entrance
- cubic-bezier(0, 0, 0.38, 0.9)
- Productive · Exit
- cubic-bezier(0.2, 0, 1, 0.9)
- Expressive · Standard
- cubic-bezier(0.4, 0.14, 0.3, 1)
- Expressive · Entrance
- cubic-bezier(0, 0, 0.3, 1)
- Expressive · Exit
- cubic-bezier(0.4, 0.14, 1, 1)
- Duration Ms · Fast 01
- 70
- Duration Ms · Fast 02
- 110
- Duration Ms · Moderate 01
- 150
- Duration Ms · Moderate 02
- 240
- Duration Ms · Slow 01
- 400
- Duration Ms · Slow 02
- 700
Why it works
Naming two modes stops one mood from leaking into the other: task screens stay fast and out of the way, while a few moments are allowed to show off. Every duration has a named job, so choosing one is a lookup, not a guess.
Best for
Enterprise software, B2B products and data-heavy tools that need quiet UI motion plus a louder mode for launches and key moments
What breaks it
- Expressive motion on routine task screens
- Durations that don't map to a named job
- Using an entrance curve for an exit
Sources
- carbondesignsystem.com: Carbon motion overview: productive and expressive styles, easing curves, duration tokens and their uses
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of IBM Carbon's look comes with it.
The recipe
- Use the recipe's mode: productive for calm and crisp brands, expressive for playful ones, with the matching easing curves.
- Even in productive mode, allow one expressive moment per piece, such as the hero reveal or a launch callout.
- Choose durations by job, not by feel: 70 ms for button and toggle feedback, 110 ms for fades, 150 ms for small expansions, 240 ms for panels and toasts, 400 ms for large expansions, 700 ms for dimming the background.
- Use the entrance curve for things appearing, the exit curve for things leaving, and the standard curve for things that stay and move.
What you'll need
- The customer's motion style keyword
- Which one moment, if any, deserves expressive motion
Recipe as JSON
{
"recipe": {
"mode": {
"by": "style.motion",
"map": {
"calm": "productive",
"crisp": "productive",
"playful": "expressive"
},
"default": "productive"
},
"easing_standard": {
"by": "style.motion",
"map": {
"calm": [
0.2,
0,
0.38,
0.9
],
"crisp": [
0.2,
0,
0.38,
0.9
],
"playful": [
0.4,
0.14,
0.3,
1
]
},
"default": [
0.2,
0,
0.38,
0.9
]
},
"easing_enter": {
"by": "style.motion",
"map": {
"calm": [
0,
0,
0.38,
0.9
],
"crisp": [
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": {
"calm": [
0.2,
0,
1,
0.9
],
"crisp": [
0.2,
0,
1,
0.9
],
"playful": [
0.4,
0.14,
1,
1
]
},
"default": [
0.2,
0,
1,
0.9
]
},
"duration_ms": {
"micro": 70,
"fade": 110,
"small_expand": 150,
"toast": 240,
"large_expand": 400,
"dim": 700
},
"expressive_moments_per_piece": 1
},
"steps": [
"Use the recipe's mode: productive for calm and crisp brands, expressive for playful ones, with the matching easing curves.",
"Even in productive mode, allow one expressive moment per piece, such as the hero reveal or a launch callout.",
"Choose durations by job, not by feel: 70 ms for button and toggle feedback, 110 ms for fades, 150 ms for small expansions, 240 ms for panels and toasts, 400 ms for large expansions, 700 ms for dimming the background.",
"Use the entrance curve for things appearing, the exit curve for things leaving, and the standard curve for things that stay and move."
]
}See it working
- IBM Carbon: Productive and expressive curves side by side with the duration token table
The lesson
Give motion its own foundations page with separate entries for style, easing and duration, so animation choices follow written rules.
The move
The Carbon Design System Motion page, filed under Foundations, opens with the line "Carbon motion brings digital experiences to life, guides users through interactions, and provides consistent movement and timing across experiences." Tabs read Overview, Choreography and Code, and a contents list on the right includes Style, Easing and Duration.
Why it works
- Our readStyle sits ahead of Easing and Duration in the contents list, so the mood of motion is settled before any timing value.
- Our readEasing and Duration get their own entries, and a Code tab sits in the page tabs, so choosing a value can be a lookup rather than a judgment call.
What not to copy
The timing values and choreography belong to IBM's products. Keep a one-line purpose, separate entries for style, easing and duration, and tune the numbers to your product.
