diff --git a/packages/cfpb-atomic-component/src/cfpb-atomic-component.less b/packages/cfpb-atomic-component/src/cfpb-atomic-component.less
new file mode 100644
index 0000000000..5a9a455c50
--- /dev/null
+++ b/packages/cfpb-atomic-component/src/cfpb-atomic-component.less
@@ -0,0 +1,7 @@
+/* ==========================================================================
+   Design System
+   Atomic component utilities
+   ========================================================================== */
+
+// Import utilities.
+@import (less) 'utilities/transition/transition.less';
diff --git a/packages/cfpb-atomic-component/src/utilities/transition/transition.less b/packages/cfpb-atomic-component/src/utilities/transition/transition.less
new file mode 100644
index 0000000000..8f81485f8c
--- /dev/null
+++ b/packages/cfpb-atomic-component/src/utilities/transition/transition.less
@@ -0,0 +1,95 @@
+// Import external dependencies
+@import (reference) '@cfpb/cfpb-core/src/vars.less';
+
+/* ==========================================================================
+   Utility classes for transitions.
+
+   Adds transitions utilty classes for transform, opacity,
+   and for the removing the transition duration.
+   ========================================================================== */
+
+.u-no-animation {
+  transition-duration: 0s !important;
+}
+
+//
+// Utility classes for moving an element using transform translate values.
+//
+
+.u-move-transition {
+  transition: transform 0.25s ease-out;
+}
+
+.u-move-to-origin {
+  transform: translate3d(0, 0, 0);
+}
+
+.u-move-left {
+  transform: translate3d(-100%, 0, 0);
+}
+
+// TODO: Look into adding a mixin for movement multiples.
+.u-move-left-2x {
+  transform: translate3d(-200%, 0, 0);
+}
+
+.u-move-left-3x {
+  transform: translate3d(-300%, 0, 0);
+}
+
+.u-move-right {
+  transform: translate3d(100%, 0, 0);
+}
+
+.u-move-up {
+  transform: translate3d(0, -100%, 0);
+}
+
+//
+// Utility classes for setting an element's opacity.
+//
+
+.u-alpha-transition {
+  transition: opacity 0.25s linear;
+}
+
+.u-alpha-100 {
+  opacity: 1;
+}
+
+.u-alpha-0 {
+  opacity: 0;
+}
+
+//
+// Utility classes for setting an element's height.
+//
+
+.u-max-height-transition {
+  overflow: hidden;
+  contain: paint;
+
+  // Duration is set here, but it is actually overridden in the JavaScript.
+  transition: max-height 0.2s ease-out;
+}
+
+/*
+.u-max-height-default {
+  This class is just keep for documentation completeness.
+  The actual max-height is set in the JavaScript,
+  so that we know what the actual height of the content is for easing purposes.
+}
+*/
+
+.u-max-height-zero {
+  max-height: 0 !important;
+}
+
+.u-max-height-summary {
+  /* The value set here should show 4 lines of text at our standard 16px
+     base font size. The calculation comes from the following:
+     88px = 16 * 5.5em.
+     5.5em = base-line-height (22px) * 4 / base-font-size (16px)
+  */
+  max-height: 88px !important;
+}