diff --git a/packages/utils/docs/customization.md b/packages/utils/docs/customization.md
index 579f096f4a1..6610526b1d1 100644
--- a/packages/utils/docs/customization.md
+++ b/packages/utils/docs/customization.md
@@ -62,6 +62,97 @@ This is equivalent to `aspect-ratio: 16 / 9;`. The box's preferred aspect ratio
 
 
 
+### `.k-columns-1`
+
+This is equivalent to `columns: 1;`. Element's content is displayed into 1 column.
+
+
+
+
+### `.k-columns-2`
+
+This is equivalent to `columns: 2;`. Element's content is broken into 2 columns.
+
+
+
+
+### `.k-columns-3`
+
+This is equivalent to `columns: 3;`. Element's content is broken into 3 columns.
+
+
+
+
+### `.k-columns-4`
+
+This is equivalent to `columns: 4;`. Element's content is broken into 4 columns.
+
+
+
+
+### `.k-columns-5`
+
+This is equivalent to `columns: 5;`. Element's content is broken into 5 columns.
+
+
+
+
+### `.k-columns-6`
+
+This is equivalent to `columns: 6;`. Element's content is broken into 6 columns.
+
+
+
+
+### `.k-columns-7`
+
+This is equivalent to `columns: 7;`. Element's content is broken into 7 columns.
+
+
+
+
+### `.k-columns-8`
+
+This is equivalent to `columns: 8;`. Element's content is broken into 8 columns.
+
+
+
+
+### `.k-columns-9`
+
+This is equivalent to `columns: 9;`. Element's content is broken into 9 columns.
+
+
+
+
+### `.k-columns-10`
+
+This is equivalent to `columns: 10;`. Element's content is broken into 10 columns.
+
+
+
+
+### `.k-columns-11`
+
+This is equivalent to `columns: 11;`. Element's content is broken into 11 columns.
+
+
+
+
+### `.k-columns-12`
+
+This is equivalent to `columns: 12;`. Element's content is broken into 12 columns.
+
+
+
+
+### `.k-columns-auto`
+
+This is equivalent to `columns: auto;`.The number of columns is determined by other CSS properties, such as column-width.
+
+
+
+
 ### `.k-d-none`
 
 This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
@@ -447,65 +538,65 @@ This is equivalent to `pointer-events: auto;`. The element behaves as it would i
 
 
 
-### `.k-pos-static`
+### `.k-pos-top`
 
-This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
+This is equivalent to `top: 0;`.
 
 
 
 
-### `.k-pos-relative`
+### `.k-pos-right`
 
-This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
+This is equivalent to `right: 0;`.
 
 
 
 
-### `.k-pos-absolute`
+### `.k-pos-bottom`
 
-This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
+This is equivalent to `bottom: 0;`.
 
 
 
 
-### `.k-pos-fixed`
+### `.k-pos-left`
 
-This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
+This is equivalent to `left: 0;`.
 
 
 
 
-### `.k-pos-sticky`
+### `.k-pos-static`
 
-This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
+This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
 
 
 
 
-### `.k-pos-top`
+### `.k-pos-relative`
 
-This is equivalent to `top: 0;`.
+This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
 
 
 
 
-### `.k-pos-right`
+### `.k-pos-absolute`
 
-This is equivalent to `right: 0;`.
+This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
 
 
 
 
-### `.k-pos-bottom`
+### `.k-pos-fixed`
 
-This is equivalent to `bottom: 0;`.
+This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
 
 
 
 
-### `.k-pos-left`
+### `.k-pos-sticky`
 
-This is equivalent to `left: 0;`.
+This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
 
 
 
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
index 8dca9a7161e..4314aa679a9 100644
--- a/packages/utils/scss/_variables.scss
+++ b/packages/utils/scss/_variables.scss
@@ -102,14 +102,32 @@ $kendo-utils: (
         video: k-string-unquote("16 / 9")
     ),
     "container": (),
-    "columns": (),
+    "columns": (
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        6: 6,
+        7: 7,
+        8: 8,
+        9: 9,
+        10: 10,
+        11: 11,
+        12: 12,
+        auto: auto
+    ),
     "break-after": (),
     "break-before": (),
     "break-inside": (),
     "box-decoration-break": (),
-    "box-sizing": (),
+    "box-sizing": (
+        border: border-box,
+        content: content-box
+    ),
     "display": (
         none,
+        contents,
         block,
         inline,
         inline-block,
@@ -119,6 +137,8 @@ $kendo-utils: (
         inline-grid,
         table,
         inline-table,
+        table-row,
+        table-cell,
         list-item
     ),
     "float": (
@@ -133,26 +153,37 @@ $kendo-utils: (
         none
     ),
     "isolation": (),
-    "object-fit": (),
-    "object-position": (),
+    "object-fit": (
+        contain,
+        cover,
+        fill,
+        scale-down,
+        initial,
+        none
+    ),
+    "object-position": (
+        center: center,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+        top-left: top left,
+        top-right: top right,
+        bottom-left: bottom left,
+        bottom-right: bottom right
+    ),
     "overflow": (
         auto: auto,
         hidden: hidden,
         visible: visible,
         scroll: scroll,
-        clip: clip,
-        x-auto: auto,
-        x-hidden: hidden,
-        x-visible: visible,
-        x-scroll: scroll,
-        x-clip: clip,
-        y-auto: auto,
-        y-hidden: hidden,
-        y-visible: visible,
-        y-scroll: scroll,
-        y-clip: clip
+        clip: clip
     ),
     "overscroll": (),
+    "placement": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        -1: -1px
+    )),
     "position": (
         static,
         relative,
@@ -166,8 +197,9 @@ $kendo-utils: (
         -1: -1px
     ),
     "visibility": (
-        visible,
-        hidden
+        visible: visible,
+        invisible: hidden,
+        collapse: collapse
     ),
     "zindex": (
         0: 0,
@@ -267,6 +299,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-column-end": (
@@ -283,6 +328,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-column-span": (
@@ -315,6 +373,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-row-end": (
@@ -331,6 +402,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-row-span": (
@@ -352,6 +436,7 @@ $kendo-utils: (
     "grid-auto-flow": (
         row: row,
         col: column,
+        dense: dense,
         row-dense: row dense,
         col-dense: column dense,
         unset: unset
@@ -511,7 +596,8 @@ $kendo-utils: (
     ),
 
     // Spacing
-    "margin": k-map-merge( $kendo-spacing, (
+    "margin": k-map-merge( $kendo-spacing,
+        k-map-negate( $kendo-spacing), (
         // sass-lint:disable-block indentation
         // TODO: remove this extension once we fix docs
         xs: k-map-get( $kendo-spacing, 1 ),
@@ -520,7 +606,8 @@ $kendo-utils: (
         lg: k-map-get( $kendo-spacing, 4 ),
         xl: k-map-get( $kendo-spacing, 6 ),
         thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
-        hair: k-map-get( $kendo-spacing, 1px )
+        hair: k-map-get( $kendo-spacing, 1px ),
+        auto: auto
     )),
     "padding": k-map-merge( $kendo-spacing, (
         // sass-lint:disable-block indentation
@@ -601,13 +688,19 @@ $kendo-utils: (
     "font-variant-numeric": (),
     "letter-spacing": (),
     "line-height": (),
-    "list-style-type": (),
+    "list-style-type": (
+        none,
+        disc,
+        decimal
+    ),
     "list-style-position": (),
     "text-align": (
         left,
         right,
         center,
-        justify
+        justify,
+        start,
+        end
     ),
     "text-color": k-map-merge( $kendo-theme-colors, (
         // sass-lint:disable-block indentation
@@ -617,7 +710,12 @@ $kendo-utils: (
         "black": black,
         "white": white
     )),
-    "text-decoration": (),
+    "text-decoration": (
+        underline: underline,
+        overline: overline,
+        line-through: line-through,
+        no-underline: none
+    ),
     "text-decoration-width": (),
     "text-decoration-style": (),
     "text-decoration-color": (),
@@ -633,7 +731,16 @@ $kendo-utils: (
         ellipsis: ellipsis
     ),
     "text-indent": (),
-    "vertical-align": (),
+    "vertical-align": (
+        baseline,
+        top,
+        middle,
+        bottom,
+        text-top,
+        text-bottom,
+        sub,
+        super
+    ),
     "white-space": (
         normal,
         nowrap,
@@ -645,6 +752,12 @@ $kendo-utils: (
     "word-break": (),
 
     // Background
+    "background-clip": (
+        border: border-box,
+        padding: padding-box,
+        content: content-box,
+        text: text
+    ),
     "background-color": k-map-merge( $kendo-theme-colors, (
         // sass-lint:disable-block indentation
         "inherit": inherit,
@@ -666,6 +779,10 @@ $kendo-utils: (
         dashed,
         dotted,
         double,
+        // groove,
+        // ridge,
+        inset,
+        outset,
         hidden,
         none
     ),
@@ -690,13 +807,20 @@ $kendo-utils: (
         dashed,
         dotted,
         double,
-        groove,
-        ridge,
+        // groove,
+        // ridge,
         inset,
         outset,
         none
     ),
-    "outline-color": (),
+    "outline-color": k-map-merge( $kendo-theme-colors, (
+        // sass-lint:disable-block indentation
+        "inherit": inherit,
+        "current": currentColor,
+        "transparent": transparent,
+        "black": black,
+        "white": white
+    )),
     "outline-offset": (
         0: 0,
         1: 1px,
@@ -706,8 +830,32 @@ $kendo-utils: (
     ),
 
     // Effects
+    "box-shadow": (),
+    "box-shadow-color": (),
+    "opacity": (
+        // sass-lint:disable-block leading-zero
+        0: 0,
+        5: 0.05,
+        10: 0.1,
+        20: 0.2,
+        30: 0.3,
+        40: 0.4,
+        50: 0.5,
+        60: 0.6,
+        70: 0.7,
+        80: 0.8,
+        90: 0.9,
+        100: 1
+    ),
 
     // Filter
+    "backdrop-blur": (
+        DEFAULT: blur(8px),
+        none: blur(0),
+        sm: blur(4px),
+        md: blur(6px),
+        lg: blur(12px)
+    ),
 
     // Table
     "border-collapse": (
@@ -874,5 +1022,13 @@ $kendo-utils: (
         scroll: scroll-position,
         contents: contents,
         transform: transform
+    ),
+    "fill-stroke": (
+        none: none,
+        inherit: inherit,
+        current: currentColor,
+        "transparent": transparent,
+        "black": black,
+        "white": white
     )
 ) !default;
diff --git a/packages/utils/scss/background/_background-clip.scss b/packages/utils/scss/background/_background-clip.scss
new file mode 100644
index 00000000000..8562988731a
--- /dev/null
+++ b/packages/utils/scss/background/_background-clip.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--background--background-clip() {
+
+    // Background color utility classes
+    $kendo-utils-background-clip: k-map-get( $kendo-utils, "background-clip" ) !default;
+    @include generate-utils( bg-clip, background-clip, $kendo-utils-background-clip );
+
+}
diff --git a/packages/utils/scss/background/index.import.scss b/packages/utils/scss/background/index.import.scss
index 5c03103eef9..313ff2f0a96 100644
--- a/packages/utils/scss/background/index.import.scss
+++ b/packages/utils/scss/background/index.import.scss
@@ -1,6 +1,8 @@
+@import "./_background-clip.scss";
 @import "./_background-color.scss";
 
 
 @mixin kendo-utils--background() {
+    @include kendo-utils--background--background-clip();
     @include kendo-utils--background--background-color();
 }
diff --git a/packages/utils/scss/effects/_opacity.scss b/packages/utils/scss/effects/_opacity.scss
new file mode 100644
index 00000000000..5f2048e766c
--- /dev/null
+++ b/packages/utils/scss/effects/_opacity.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--effects--opacity() {
+
+    // opacity utility classes
+    $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
+    @include generate-utils( opacity, opacity, $kendo-utils-opacity );
+
+}
diff --git a/packages/utils/scss/effects/index.import.scss b/packages/utils/scss/effects/index.import.scss
new file mode 100644
index 00000000000..8557dc7e9e9
--- /dev/null
+++ b/packages/utils/scss/effects/index.import.scss
@@ -0,0 +1,7 @@
+// box shadow
+// box shadow color
+@import "./_opacity.scss";
+
+@mixin kendo-utils--effects() {
+    @include kendo-utils--effects--opacity();
+}
diff --git a/packages/utils/scss/filter/_backdrop.scss b/packages/utils/scss/filter/_backdrop.scss
new file mode 100644
index 00000000000..f18697555cd
--- /dev/null
+++ b/packages/utils/scss/filter/_backdrop.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--filter--backdrop() {
+
+    // backdrop utility classes
+    $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
+    @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );
+
+}
diff --git a/packages/utils/scss/filter/index.import.scss b/packages/utils/scss/filter/index.import.scss
new file mode 100644
index 00000000000..c20309d0c60
--- /dev/null
+++ b/packages/utils/scss/filter/index.import.scss
@@ -0,0 +1,5 @@
+@import "./_backdrop.scss";
+
+@mixin kendo-utils--filter() {
+    @include kendo-utils--filter--backdrop();
+}
diff --git a/packages/utils/scss/index.import.scss b/packages/utils/scss/index.import.scss
index ab661719c54..03cdc3d1a68 100644
--- a/packages/utils/scss/index.import.scss
+++ b/packages/utils/scss/index.import.scss
@@ -10,12 +10,13 @@
 @import "./typography/index.import.scss";
 @import "./background/index.import.scss";
 @import "./border/index.import.scss";
-// effects
-// filter
+@import "./effects/index.import.scss";
+@import "./filter/index.import.scss";
 @import "./table/index.import.scss";
 // transition
 @import "./transform/index.import.scss";
 @import "./interactivity/index.import.scss";
+@import "./svg/index.import.scss";
 
 
 // Mixin for all styles
@@ -28,7 +29,10 @@
     @include kendo-utils--typography();
     @include kendo-utils--background();
     @include kendo-utils--border();
+    @include kendo-utils--effects();
+    @include kendo-utils--filter();
     @include kendo-utils--table();
     @include kendo-utils--transform();
     @include kendo-utils--interactivity();
+    @include kendo-utils--svg();
 }
diff --git a/packages/utils/scss/layout/_box-sizing.scss b/packages/utils/scss/layout/_box-sizing.scss
new file mode 100644
index 00000000000..3b8419a047d
--- /dev/null
+++ b/packages/utils/scss/layout/_box-sizing.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--layout--box-sizing() {
+
+    // box-sizing utility classes
+    $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
+    @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );
+
+}
diff --git a/packages/utils/scss/layout/_columns.scss b/packages/utils/scss/layout/_columns.scss
new file mode 100644
index 00000000000..f5fc98916ee
--- /dev/null
+++ b/packages/utils/scss/layout/_columns.scss
@@ -0,0 +1,74 @@
+// Columns documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/columns.
+
+/// This is equivalent to `columns: 1;`. Element's content is displayed into 1 column.
+/// @name .k-columns-1
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 2;`. Element's content is broken into 2 columns.
+/// @name .k-columns-2
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 3;`. Element's content is broken into 3 columns.
+/// @name .k-columns-3
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 4;`. Element's content is broken into 4 columns.
+/// @name .k-columns-4
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 5;`. Element's content is broken into 5 columns.
+/// @name .k-columns-5
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 6;`. Element's content is broken into 6 columns.
+/// @name .k-columns-6
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 7;`. Element's content is broken into 7 columns.
+/// @name .k-columns-7
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 8;`. Element's content is broken into 8 columns.
+/// @name .k-columns-8
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 9;`. Element's content is broken into 9 columns.
+/// @name .k-columns-9
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 10;`. Element's content is broken into 10 columns.
+/// @name .k-columns-10
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 11;`. Element's content is broken into 11 columns.
+/// @name .k-columns-11
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 12;`. Element's content is broken into 12 columns.
+/// @name .k-columns-12
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: auto;`.The number of columns is determined by other CSS properties, such as column-width.
+/// @name .k-columns-auto
+/// @group columns
+/// @contextType css
+
+@mixin kendo-utils--layout--columns() {
+
+    // columns utility classes
+    $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
+    @include generate-utils( columns, columns, $kendo-utils-columns );
+
+}
diff --git a/packages/utils/scss/layout/_display.scss b/packages/utils/scss/layout/_display.scss
index 935351270df..04f9be612ac 100644
--- a/packages/utils/scss/layout/_display.scss
+++ b/packages/utils/scss/layout/_display.scss
@@ -53,6 +53,8 @@
 /// @group display
 /// @contextType css
 
+// TODO tables' parts
+
 @mixin kendo-utils--layout--display() {
 
     // Display utility classes
diff --git a/packages/utils/scss/layout/_object-fit.scss b/packages/utils/scss/layout/_object-fit.scss
new file mode 100644
index 00000000000..1e8f6ef1231
--- /dev/null
+++ b/packages/utils/scss/layout/_object-fit.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--layout--object-fit() {
+
+    // object-fit utility classes
+    $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
+    @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );
+
+}
diff --git a/packages/utils/scss/layout/_object-position.scss b/packages/utils/scss/layout/_object-position.scss
new file mode 100644
index 00000000000..92f2e814b01
--- /dev/null
+++ b/packages/utils/scss/layout/_object-position.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--layout--object-position() {
+
+    // object-position utility classes
+    $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
+    @include generate-utils( object-position, object-position, $kendo-utils-object-position );
+
+}
diff --git a/packages/utils/scss/layout/_overflow.scss b/packages/utils/scss/layout/_overflow.scss
index 4dd05a4f161..c87ac1f6868 100644
--- a/packages/utils/scss/layout/_overflow.scss
+++ b/packages/utils/scss/layout/_overflow.scss
@@ -78,5 +78,6 @@
     // Overflow utility classes
     $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
     @include generate-utils( overflow, overflow, $kendo-utils-overflow );
-
+    @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
+    @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
 }
diff --git a/packages/utils/scss/layout/_placement.scss b/packages/utils/scss/layout/_placement.scss
new file mode 100644
index 00000000000..4f8f2cb5cbc
--- /dev/null
+++ b/packages/utils/scss/layout/_placement.scss
@@ -0,0 +1,110 @@
+// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
+
+
+// TODO: inset docs
+
+
+/// This is equivalent to `top: 0;`.
+/// @name .k-pos-top
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `right: 0;`.
+/// @name .k-pos-right
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0;`.
+/// @name .k-pos-bottom
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `left: 0;`.
+/// @name .k-pos-left
+/// @group position
+/// @contextType css
+
+@mixin kendo-utils--layout--placement() {
+    // Top / right / bottom / left
+    $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
+    @include generate-utils( top, top, $kendo-utils-placement );
+    @include generate-utils( right, right, $kendo-utils-placement );
+    @include generate-utils( bottom, bottom, $kendo-utils-placement );
+    @include generate-utils( left, left, $kendo-utils-placement );
+
+
+    // Position length utility classes
+    @each $side in (top, right, bottom, left) {
+        .#{$kendo-prefix}#{$side},
+        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
+
+    // Inset utility classes
+    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
+    @include generate-utils( inset, inset, $kendo-utils-inset );
+    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
+    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
+    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}top-start,
+    .#{$kendo-prefix}pos-top-start {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}top-end,
+    .#{$kendo-prefix}pos-top-end {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}bottom-start,
+    .#{$kendo-prefix}pos-bottom-start {
+        bottom: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}bottom-end,
+    .#{$kendo-prefix}pos-bottom-end {
+        bottom: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}top-center,
+    .#{$kendo-prefix}pos-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .#{$kendo-prefix}middle-left,
+    .#{$kendo-prefix}middle-start,
+    .#{$kendo-prefix}pos-middle-start {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-center {
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-right,
+    .#{$kendo-prefix}middle-end,
+    .#{$kendo-prefix}pos-middle-end {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}bottom-center,
+    .#{$kendo-prefix}pos-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+}
diff --git a/packages/utils/scss/layout/_position.scss b/packages/utils/scss/layout/_position.scss
index 584c523336b..37f99e2985f 100644
--- a/packages/utils/scss/layout/_position.scss
+++ b/packages/utils/scss/layout/_position.scss
@@ -25,30 +25,6 @@
 /// @group position
 /// @contextType css
 
-
-// TODO: inset docs
-
-
-/// This is equivalent to `top: 0;`.
-/// @name .k-pos-top
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `right: 0;`.
-/// @name .k-pos-right
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `bottom: 0;`.
-/// @name .k-pos-bottom
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `left: 0;`.
-/// @name .k-pos-left
-/// @group position
-/// @contextType css
-
 @mixin kendo-utils--layout--position() {
 
     // Position utility classes
@@ -68,84 +44,4 @@
     .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
     .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
 
-
-    // Inset utility classes
-    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
-    @include generate-utils( inset, inset, $kendo-utils-inset );
-    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
-    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
-    @include generate-utils( top, top, $kendo-utils-inset );
-    @include generate-utils( right, right, $kendo-utils-inset );
-    @include generate-utils( bottom, bottom, $kendo-utils-inset );
-    @include generate-utils( left, left, $kendo-utils-inset );
-    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
-    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
-    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
-
-
-    // Legacy aliases
-    .#{$kendo-prefix}top-start,
-    .#{$kendo-prefix}pos-top-start {
-        top: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}top-end,
-    .#{$kendo-prefix}pos-top-end {
-        top: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}bottom-start,
-    .#{$kendo-prefix}pos-bottom-start {
-        bottom: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}bottom-end,
-    .#{$kendo-prefix}pos-bottom-end {
-        bottom: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}top-center,
-    .#{$kendo-prefix}pos-top-center {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .#{$kendo-prefix}middle-left,
-    .#{$kendo-prefix}middle-start,
-    .#{$kendo-prefix}pos-middle-start {
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-center {
-        top: 50%;
-        left: 50%;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-right,
-    .#{$kendo-prefix}middle-end,
-    .#{$kendo-prefix}pos-middle-end {
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}bottom-center,
-    .#{$kendo-prefix}pos-bottom-center {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-
-    // Position length utility classes
-    @each $side in (top, right, bottom, left) {
-        .#{$kendo-prefix}#{$side},
-        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
-    }
-
 }
diff --git a/packages/utils/scss/layout/index.import.scss b/packages/utils/scss/layout/index.import.scss
index a5f8ea130b7..915b4d649b9 100644
--- a/packages/utils/scss/layout/index.import.scss
+++ b/packages/utils/scss/layout/index.import.scss
@@ -1,8 +1,13 @@
 @import "./_aspect-ratio.scss";
+@import "./_box-sizing.scss";
 @import "./_clear.scss";
+@import "./_columns.scss";
 @import "./_display.scss";
 @import "./_float.scss";
+@import "./_object-fit.scss";
+@import "./_object-position.scss";
 @import "./_overflow.scss";
+@import "./_placement.scss";
 @import "./_position.scss";
 @import "./_visibility.scss";
 @import "./_zindex.scss";
@@ -10,10 +15,15 @@
 
 @mixin kendo-utils--layout() {
     @include kendo-utils--layout--aspect-ratio();
+    @include kendo-utils--layout--box-sizing();
     @include kendo-utils--layout--clear();
+    @include kendo-utils--layout--columns();
     @include kendo-utils--layout--display();
     @include kendo-utils--layout--float();
+    @include kendo-utils--layout--object-fit();
+    @include kendo-utils--layout--object-position();
     @include kendo-utils--layout--overflow();
+    @include kendo-utils--layout--placement();
     @include kendo-utils--layout--position();
     @include kendo-utils--layout--visibility();
     @include kendo-utils--layout--zindex();
diff --git a/packages/utils/scss/svg/_fill.scss b/packages/utils/scss/svg/_fill.scss
new file mode 100644
index 00000000000..8e721aaab8d
--- /dev/null
+++ b/packages/utils/scss/svg/_fill.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--svg--fill() {
+
+    // fill utility classes
+    $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( fill, fill, $kendo-utils-fill );
+
+}
diff --git a/packages/utils/scss/svg/_stroke.scss b/packages/utils/scss/svg/_stroke.scss
new file mode 100644
index 00000000000..826b3ebd179
--- /dev/null
+++ b/packages/utils/scss/svg/_stroke.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--svg--stroke() {
+
+    // stroke utility classes
+    $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( stroke, stroke, $kendo-utils-stroke );
+
+}
diff --git a/packages/utils/scss/svg/index.import.scss b/packages/utils/scss/svg/index.import.scss
new file mode 100644
index 00000000000..e389f571617
--- /dev/null
+++ b/packages/utils/scss/svg/index.import.scss
@@ -0,0 +1,7 @@
+@import "./_fill.scss";
+@import "./_stroke.scss";
+
+@mixin kendo-utils--svg() {
+    @include kendo-utils--svg--fill();
+    @include kendo-utils--svg--stroke();
+}
diff --git a/packages/utils/scss/typography/_list-style.scss b/packages/utils/scss/typography/_list-style.scss
new file mode 100644
index 00000000000..cd52bc50097
--- /dev/null
+++ b/packages/utils/scss/typography/_list-style.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--typography--list-style-type() {
+
+    // list-style-type utility classes
+    $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
+    @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
+
+}
diff --git a/packages/utils/scss/typography/_text-decoration.scss b/packages/utils/scss/typography/_text-decoration.scss
new file mode 100644
index 00000000000..8da40ca83e7
--- /dev/null
+++ b/packages/utils/scss/typography/_text-decoration.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--typography--text-decoration() {
+
+    // text-decoration utility classes
+    $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
+    @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
+
+}
diff --git a/packages/utils/scss/typography/_vertical-align.scss b/packages/utils/scss/typography/_vertical-align.scss
new file mode 100644
index 00000000000..409943f323e
--- /dev/null
+++ b/packages/utils/scss/typography/_vertical-align.scss
@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--typography--vertical-align() {
+
+    // vertical-align utility classes
+    $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
+    @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
+
+}
diff --git a/packages/utils/scss/typography/index.import.scss b/packages/utils/scss/typography/index.import.scss
index f4a592dd409..e023df9da46 100644
--- a/packages/utils/scss/typography/index.import.scss
+++ b/packages/utils/scss/typography/index.import.scss
@@ -6,14 +6,14 @@
 // font variant
 // letter spacing
 // line height
-// list style
+@import "./_list-style.scss";
 @import "./_text-align.scss";
 @import "./_text-color.scss";
-// text decoration
+@import "./_text-decoration.scss";
 @import "./_text-overflow.scss";
 @import "./_text-transform.scss";
 // text indent
-// vertical align
+@import "./_vertical-align.scss";
 @import "./_white-space.scss";
 
 
@@ -21,9 +21,12 @@
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
+    @include kendo-utils--typography--list-style-type();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-decoration();
     @include kendo-utils--typography--text-overflow();
     @include kendo-utils--typography--text-transform();
+    @include kendo-utils--typography--vertical-align();
     @include kendo-utils--typography--white-space();
 }