diff --git a/README.md b/README.md
index 637403dba..607b6a218 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,6 @@ To use React UI in your app:
    import '@react-ui-org/react-ui/src/lib/theme.scss';
    import '@react-ui-org/react-ui/src/lib/foundation.scss';
    import '@react-ui-org/react-ui/src/lib/helpers.scss';
-   import '@react-ui-org/react-ui/src/lib/utilities.scss';
    ```
 
 6. Finally, use React UI **components** just like you are used to:
diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
index 302c91cf5..6773896af 100644
--- a/src/demo/pages/DemoContainer.jsx
+++ b/src/demo/pages/DemoContainer.jsx
@@ -53,9 +53,6 @@ import {
   Swatch,
 } from '../components';
 
-// React UI utility CSS classes
-import '../../lib/utilities.scss';
-
 import navigationTree from './navigation';
 
 const logger = (event) => console.log(event.target.value); // eslint-disable-line no-console
diff --git a/src/lib/foundation.scss b/src/lib/foundation.scss
index e4e3633a4..c2bcdf29b 100644
--- a/src/lib/foundation.scss
+++ b/src/lib/foundation.scss
@@ -1,4 +1,4 @@
-// Basic themeable CSS layer to prepare ground for components.
+// Mandatory themeable CSS layer to prepare ground for components.
 // Structured according to ITCSS methodology, ie. most importantly in ascending specificity.
 
 //
diff --git a/src/lib/helpers.scss b/src/lib/helpers.scss
index efe917a29..465a5bbdf 100644
--- a/src/lib/helpers.scss
+++ b/src/lib/helpers.scss
@@ -1,24 +1,22 @@
-// General purpose helpers for common situations. Unlike utilities, helpers usually cover more CSS
-// properties than one. And unlike with utilities, using `!important` is not allowed here.
+// Optional layer with helper CSS classes to easily adjust visual details.
+// Structured according to ITCSS methodology, ie. most importantly in ascending specificity.
+// This file should be imported as the very last of your stylesheets.
 
-$_spin-count: 4;
-$_spin-duration: 2.2s;
-$_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
+//
+// 1. Helpers
+// ==========
+//
+// General purpose helpers for common situations. They can compose multiple CSS rules to do a bit
+// more complicated tasks.
 
-@keyframes spin {
-  0% {
-    transform: rotate(0 * 360deg);
-  }
+@import 'styles/helpers/animation';
 
-  100% {
-    transform: rotate($_spin-count * 360deg);
-  }
-}
+//
+// 2. Utilities
+// ============
+//
+// Utility classes to tweak small details like typography, margins or padding. They do just one
+// thing: they set a single CSS rule and use the otherwise disallowed `!important` to enforce it.
+// Also they are often responsive (can be adjusted for individual breakpoints).
 
-:global(.animation-spin-clockwise) {
-  animation: spin $_spin-duration $_spin-easing infinite;
-}
-
-:global(.animation-spin-counterclockwise) {
-  animation: spin $_spin-duration $_spin-easing infinite reverse;
-}
+@import 'styles/utilities';
diff --git a/src/lib/utilities.scss b/src/lib/styles/_utilities.scss
similarity index 62%
rename from src/lib/utilities.scss
rename to src/lib/styles/_utilities.scss
index e0dc9c318..4812b0f90 100644
--- a/src/lib/utilities.scss
+++ b/src/lib/styles/_utilities.scss
@@ -1,9 +1,7 @@
-// Responsive utility classes to tweak small details like typography, margins or padding.
-
-@import 'styles/settings/breakpoints';
-@import 'styles/settings/utilities';
-@import 'styles/tools/breakpoints';
-@import 'styles/tools/utilities';
+@import 'settings/breakpoints';
+@import 'settings/utilities';
+@import 'tools/breakpoints';
+@import 'tools/utilities';
 
 @each $breakpoint in map-keys($breakpoint-values) {
   @include breakpoint-up($breakpoint) {
diff --git a/src/lib/styles/helpers/_animation.scss b/src/lib/styles/helpers/_animation.scss
new file mode 100644
index 000000000..5bd5bfaf1
--- /dev/null
+++ b/src/lib/styles/helpers/_animation.scss
@@ -0,0 +1,21 @@
+$_spin-count: 4;
+$_spin-duration: 2.2s;
+$_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
+
+@keyframes spin {
+  0% {
+    transform: rotate(0 * 360deg);
+  }
+
+  100% {
+    transform: rotate($_spin-count * 360deg);
+  }
+}
+
+:global(.animation-spin-clockwise) {
+  animation: spin $_spin-duration $_spin-easing infinite;
+}
+
+:global(.animation-spin-counterclockwise) {
+  animation: spin $_spin-duration $_spin-easing infinite reverse;
+}