Motion System: IBM Carbon Design System
Category: Enterprise / Design System Purposeful, disciplined motion that communicates clarity and precision — never decorative, always functional.
Motion Philosophy
IBM Carbon draws a hard line between two motion modes: productive and expressive. Productive motion is the default state of most enterprise UI — fast, linear, and nearly invisible. Its job is to reduce cognitive load, not to delight. When a user is processing orders, managing infrastructure, or navigating a data table, motion should confirm actions and guide attention without ever drawing attention to itself.
Expressive motion is reserved for moments that warrant emphasis: onboarding, marketing surfaces, large state transitions that benefit from narrative weight. Even then, IBM's expressive motion is conservative by industry standards — 400ms is considered slow, not cinematic. This reflects IBM's philosophy that enterprise products are tools, not performances. Every millisecond of animation is time a user is not working.
IBM does not use spring physics. Spring-based easing is unpredictable in duration, which conflicts with Carbon's commitment to consistent, predictable interfaces. All easing in Carbon uses cubic-bezier curves with defined endpoints. The standard easing cubic-bezier(0.2, 0, 0.38, 0.9) is IBM's workhorse — a fast-start, eased-end curve that moves confidently without bouncing. Linear easing appears more than in most design systems, particularly for continuous animations like progress indicators, where asymmetric easing would feel wrong.
Duration Scale
| Token | Value | Use |
|---|---|---|
| instant | 0ms | State changes with no visual transition |
| fast-01 | 70ms | Micro-interactions, hover on small elements |
| fast-02 | 110ms | Productive motion — dropdowns, tooltips, toggles |
| moderate-01 | 150ms | Modal open/close, panel expand (productive) |
| moderate-02 | 240ms | Larger panel transitions, search expansion |
| slow-01 | 400ms | Expressive motion — page heroes, onboarding |
| slow-02 | 700ms | Complex expressive sequences (use sparingly) |
Easing
| Token | Curve | Use |
|---|---|---|
| standard | cubic-bezier(0.2, 0, 0.38, 0.9) | Default — elements entering, opening, responding |
| entrance | cubic-bezier(0, 0, 0.38, 0.9) | Elements entering the screen from off-canvas |
| exit | cubic-bezier(0.2, 0, 1, 0.9) | Elements leaving the screen or closing |
| linear | cubic-bezier(0, 0, 1, 1) | Progress bars, loaders, continuous rotation |
IBM explicitly avoids
ease-in-outbounce variants. No overshoot, no spring.
Spring Configs (Framer Motion / react-spring)
IBM Carbon does not use spring physics. Spring easing is non-deterministic in duration, which conflicts with Carbon's design values of precision and predictability. Use the cubic-bezier tokens above for all motion.
If you are building on top of Carbon with Framer Motion and must configure a spring for a non-Carbon interactive element, use extreme overdamping to approximate a cubic-bezier feel:
- Overdamped (closest to Carbon standard): stiffness: 400, damping: 60, mass: 1
- No spring use case in Carbon core — defer to duration/easing tokens above
Stagger Patterns
- List items (productive): 20ms between each item (max 5 items staggered; beyond that, no stagger)
- Data table rows: No stagger — rows load simultaneously to avoid perceived slowness in dense tables
- Cards in grid (expressive): 40ms between each card, max 6 cards
- Nav items (side nav): No stagger — nav must feel instant and reliable
Enter / Exit Patterns
Fade + Slide (default productive)
enter: opacity 0→1, translateY 8px→0, duration: fast-02 (110ms), ease: standard
exit: opacity 1→0, translateY 0→-4px, duration: fast-02 (110ms), ease: exit
Panel / Flyout
enter: translateX -100%→0 (left panel) or translateX 100%→0 (right panel), duration: moderate-01 (150ms), ease: standard
exit: translateX 0→-100% or 0→100%, duration: moderate-01 (150ms), ease: exit
Modal
enter: opacity 0→1, scale 0.98→1, duration: moderate-01 (150ms), ease: standard
exit: opacity 1→0, scale 1→0.98, duration: fast-02 (110ms), ease: exit
Tooltip / Popover
enter: opacity 0→1, duration: fast-01 (70ms), ease: linear (no transform)
exit: opacity 1→0, duration: fast-01 (70ms), ease: linear
Notification / Toast (expressive)
enter: opacity 0→1, translateY -8px→0, duration: moderate-02 (240ms), ease: standard
exit: opacity 1→0, translateY 0→-8px, duration: fast-02 (110ms), ease: exit
Interaction States
- Hover: Background color shift over 70ms linear. No scale transforms. No brightness changes. Color is the only signal.
- Press/Active: Immediate background darkening, 0ms — press feedback must feel instantaneous in enterprise contexts.
- Focus: Focus ring appears with 0ms delay, no animation. Carbon prioritizes keyboard accessibility over aesthetic ring transitions.
- Loading: Skeleton screens use a linear shimmer animation at 2000ms loop (linear easing, continuous). Spinner uses a 1000ms linear rotation loop. No pulse/breathe animations.
Rules
- Never animate for decoration. Every motion must serve a functional purpose: directing attention, confirming state, or smoothing a layout shift.
- Productive contexts (dashboards, data tables, forms) default to the fast-01/fast-02 range. Expressive use of slow-01 or slow-02 requires deliberate justification.
- Do not use spring physics or bounce easing. IBM Carbon is built on predictability; elastic motion undermines user confidence in enterprise workflows.
- Always implement
prefers-reduced-motion— set all durations to 0ms or use opacity-only transitions with 70ms max duration when the user has requested reduced motion. - Never stagger more than 6 elements, and never stagger items in data-dense components (tables, lists over 10 items). Perceived performance matters more than choreography.