diff --git a/src/theme/_fill-color.scss b/src/theme/_fill-color.scss
new file mode 100644
index 0000000..0ab68bf
--- /dev/null
+++ b/src/theme/_fill-color.scss
@@ -0,0 +1,32 @@
+@use './variables/colors' as T;
+
+$fill-colors: (
+  primary: T.$color-primary,
+  primary-dark-translucent: T.$color-primary-dark-translucent,
+  secondary: T.$color-secondary,
+  dark: T.$color-dark,
+  dark-translucency: T.$color-dark-translucency,
+  white: T.$color-white,
+  ultra-light: T.$color-ultra-light,
+  neutral-light-lavender: T.$color-neutral-light-lavender,
+  light-blue-hint: T.$color-light-blue-hint,
+  soft-white-blue: T.$color-soft-white-blue,
+  green: T.$color-green,
+  cherry: T.$color-cherry,
+  grey-dark: T.$color-grey-dark,
+  grey: T.$color-grey,
+  grey-light: T.$color-grey-light,
+  grey-ultra-light: T.$color-grey-ultra-light,
+  error: T.$color-error,
+  success: T.$color-success,
+  warning: T.$color-warning,
+  info: T.$color-info,
+  focus: T.$color-focus,
+  transparent: T.$color-transparent
+);
+
+@each $name, $color in $fill-colors {
+  .fill-#{$name} {
+    fill: $color;
+  }
+}
diff --git a/src/theme/_index.scss b/src/theme/_index.scss
index bfc6d2c..46340b6 100644
--- a/src/theme/_index.scss
+++ b/src/theme/_index.scss
@@ -1,6 +1,6 @@
 @forward './variables/animations';
-@forward './variables/borderRadius';
-@forward './variables/boxShadows';
+@forward './variables/border-radius';
+@forward './variables/box-shadows';
 @forward './variables/breakpoints';
 @forward './variables/colors';
 @forward './variables/fonts';
diff --git a/src/theme/_opacity.scss b/src/theme/_opacity.scss
new file mode 100644
index 0000000..1b61762
--- /dev/null
+++ b/src/theme/_opacity.scss
@@ -0,0 +1,5 @@
+@for $i from 0 through 20 {
+  .opacity-#{5 * $i} {
+    opacity: $i * 0.05;
+  }
+}
diff --git a/src/theme/_shadow.scss b/src/theme/_shadow.scss
new file mode 100644
index 0000000..b6d263c
--- /dev/null
+++ b/src/theme/_shadow.scss
@@ -0,0 +1,39 @@
+.shadow {
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.shadow-md {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-lg {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-xl {
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-2xl {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.shadow-inner {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+.shadow-none {
+  box-shadow: none;
+}
diff --git a/src/theme/_size.scss b/src/theme/_size.scss
new file mode 100644
index 0000000..43f5a7a
--- /dev/null
+++ b/src/theme/_size.scss
@@ -0,0 +1,30 @@
+@use './variables/spacings' as T;
+
+$sizes: (
+  96: T.$spacing-96,
+  60: T.$spacing-60,
+  48: T.$spacing-48,
+  40: T.$spacing-40,
+  36: T.$spacing-36,
+  32: T.$spacing-32,
+  28: T.$spacing-28,
+  24: T.$spacing-24,
+  20: T.$spacing-20,
+  16: T.$spacing-16,
+  12: T.$spacing-12,
+  8: T.$spacing-8,
+  6: T.$spacing-6,
+  4: T.$spacing-4,
+  2: T.$spacing-2,
+  1: T.$spacing-1,
+  0: T.$spacing-0
+);
+
+@each $name, $value in $sizes {
+  .size-#{$name} {
+    width: $value;
+    min-width: $value;
+    height: $value;
+    min-height: $value;
+  }
+}
diff --git a/src/theme/_z-index.scss b/src/theme/_z-index.scss
new file mode 100644
index 0000000..860957d
--- /dev/null
+++ b/src/theme/_z-index.scss
@@ -0,0 +1,18 @@
+@use './variables/zIndex' as T;
+
+$z-indexes: (
+  z-bottom-bar: T.$z-index-bottom-bar,
+  z-header: T.$z-index-header,
+  z-overlay: T.$z-index-overlay,
+  z-modal: T.$z-index-modal,
+  z-always-on-top: T.$z-index-always-on-top,
+  z-sidebar: T.$z-index-sidebar,
+  z-elevation: T.$z-index-elevation,
+  z-base: T.$z-index-base
+);
+
+@each $name, $value in $z-indexes {
+  .#{$name} {
+    z-index: $value;
+  }
+}
diff --git a/src/theme/align/align-content.scss b/src/theme/align/_align-content.scss
similarity index 63%
rename from src/theme/align/align-content.scss
rename to src/theme/align/_align-content.scss
index 3446903..7b934bd 100644
--- a/src/theme/align/align-content.scss
+++ b/src/theme/align/_align-content.scss
@@ -1,35 +1,35 @@
-.content-normal {
+.ac-normal {
   align-content: normal;
 }
 
-.content-center {
+.ac-center {
   align-content: center;
 }
 
-.content-start {
+.ac-start {
   align-content: flex-start;
 }
 
-.content-end {
+.ac-end {
   align-content: flex-end;
 }
 
-.content-between {
+.ac-between {
   align-content: space-between;
 }
 
-.content-around {
+.ac-around {
   align-content: space-around;
 }
 
-.content-evenly {
+.ac-evenly {
   align-content: space-evenly;
 }
 
-.content-baseline {
+.ac-baseline {
   align-content: baseline;
 }
 
-.content-stretch {
+.ac-stretch {
   align-content: stretch;
 }
diff --git a/src/theme/align/_align-items.scss b/src/theme/align/_align-items.scss
index 2dd009c..da40dab 100644
--- a/src/theme/align/_align-items.scss
+++ b/src/theme/align/_align-items.scss
@@ -1,19 +1,19 @@
-.items-start {
+.ai-start {
   align-items: flex-start;
 }
 
-.items-end {
+.ai-end {
   align-items: flex-end;
 }
 
-.items-center {
+.ai-center {
   align-items: center;
 }
 
-.items-baseline {
+.ai-baseline {
   align-items: baseline;
 }
 
-.items-stretch {
+.ai-stretch {
   align-items: stretch;
 }
diff --git a/src/theme/align/_align-self.scss b/src/theme/align/_align-self.scss
index e183529..6773594 100644
--- a/src/theme/align/_align-self.scss
+++ b/src/theme/align/_align-self.scss
@@ -1,23 +1,23 @@
-.self-auto {
+.as-auto {
   align-self: auto;
 }
 
-.self-start {
+.as-start {
   align-self: flex-start;
 }
 
-.self-end {
+.as-end {
   align-self: flex-end;
 }
 
-.self-center {
+.as-center {
   align-self: center;
 }
 
-.self-stretch {
+.as-stretch {
   align-self: stretch;
 }
 
-.self-baseline {
+.as-baseline {
   align-self: baseline;
 }
diff --git a/src/theme/background/_bg-utilities.scss b/src/theme/background/_bg-utilities.scss
new file mode 100644
index 0000000..4b7d9aa
--- /dev/null
+++ b/src/theme/background/_bg-utilities.scss
@@ -0,0 +1,109 @@
+// background-attachment
+
+.bg-fixed {
+  background-attachment: fixed;
+}
+
+.bg-local {
+  background-attachment: local;
+}
+
+.bg-scroll {
+  background-attachment: scroll;
+}
+
+// background-clip
+
+.bg-clip-border {
+  background-clip: border-box;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-clip-content {
+  background-clip: content-box;
+}
+
+.bg-clip-text {
+  background-clip: text;
+}
+
+// background-position
+
+.bg-bottom {
+  background-position: bottom;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-left {
+  background-position: left;
+}
+
+.bg-left-bottom {
+  background-position: left bottom;
+}
+
+.bg-left-top {
+  background-position: left top;
+}
+
+.bg-right {
+  background-position: right;
+}
+
+.bg-right-bottom {
+  background-position: right bottom;
+}
+
+.bg-right-top {
+  background-position: right top;
+}
+
+.bg-top {
+  background-position: top;
+}
+
+// background-repeat
+
+.bg-repeat {
+  background-repeat: repeat;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.bg-repeat-x {
+  background-repeat: repeat-x;
+}
+
+.bg-repeat-y {
+  background-repeat: repeat-y;
+}
+
+.bg-repeat-round {
+  background-repeat: round;
+}
+
+.bg-repeat-space {
+  background-repeat: space;
+}
+
+// background-size
+
+.bg-auto {
+  background-size: auto;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-contain {
+  background-size: contain;
+}
diff --git a/src/theme/border/_border.scss b/src/theme/border/_border.scss
new file mode 100644
index 0000000..991390e
--- /dev/null
+++ b/src/theme/border/_border.scss
@@ -0,0 +1,21 @@
+@use '../variables/colors' as T;
+
+.border-none {
+  border: 0;
+}
+
+.border-error {
+  border: 1.5px solid T.$color-error;
+}
+
+.border-white {
+  border: 2px solid T.$color-white;
+}
+
+.border-secondary {
+  border: 1.5px solid T.$color-secondary;
+}
+
+.border-grey-light {
+  border: 1px solid T.$color-grey-light;
+}
diff --git a/src/theme/border/_rounded.scss b/src/theme/border/_rounded.scss
new file mode 100644
index 0000000..e865777
--- /dev/null
+++ b/src/theme/border/_rounded.scss
@@ -0,0 +1,58 @@
+@use '../variables/border-radius' as T;
+
+$rounded: (
+  circle: T.$border-radius-circle,
+  60: T.$border-radius-60,
+  32: T.$border-radius-32,
+  24: T.$border-radius-24,
+  20: T.$border-radius-20,
+  16: T.$border-radius-16,
+  12: T.$border-radius-12,
+  8: T.$border-radius-8,
+  6: T.$border-radius-6,
+  4: T.$border-radius-4,
+  2: T.$border-radius-2,
+  0: T.$border-radius-0
+);
+
+@each $name, $size in $rounded {
+  .rounded-#{$name} {
+    border-radius: $size;
+  }
+
+  .rounded-tl-#{$name} {
+    border-top-left-radius: $size;
+  }
+
+  .rounded-tr-#{$name} {
+    border-top-right-radius: $size;
+  }
+
+  .rounded-br-#{$name} {
+    border-bottom-right-radius: $size;
+  }
+
+  .rounded-bl-#{$name} {
+    border-bottom-left-radius: $size;
+  }
+
+  .rounded-t-#{$name} {
+    border-top-left-radius: $size;
+    border-top-right-radius: $size;
+  }
+
+  .rounded-r-#{$name} {
+    border-top-right-radius: $size;
+    border-bottom-right-radius: $size;
+  }
+
+  .rounded-b-#{$name} {
+    border-bottom-left-radius: $size;
+    border-bottom-right-radius: $size;
+  }
+
+  .rounded-l-#{$name} {
+    border-top-left-radius: $size;
+    border-bottom-left-radius: $size;
+  }
+}
diff --git a/src/theme/justify/_justify-content.scss b/src/theme/justify/_justify-content.scss
index e5d7b85..a9177dc 100644
--- a/src/theme/justify/_justify-content.scss
+++ b/src/theme/justify/_justify-content.scss
@@ -1,31 +1,31 @@
-.justify-normal {
+.jc-normal {
   justify-content: normal;
 }
 
-.justify-start {
+.jc-start {
   justify-content: flex-start;
 }
 
-.justify-end {
+.jc-end {
   justify-content: flex-end;
 }
 
-.justify-center {
+.jc-center {
   justify-content: center;
 }
 
-.justify-between {
+.jc-between {
   justify-content: space-between;
 }
 
-.justify-around {
+.jc-around {
   justify-content: space-around;
 }
 
-.justify-evenly {
+.jc-evenly {
   justify-content: space-evenly;
 }
 
-.justify-stretch {
+.jc-stretch {
   justify-content: stretch;
 }
diff --git a/src/theme/justify/_justify-items.scss b/src/theme/justify/_justify-items.scss
index 736a265..f0b18d9 100644
--- a/src/theme/justify/_justify-items.scss
+++ b/src/theme/justify/_justify-items.scss
@@ -1,15 +1,15 @@
-.justify-items-start {
+.ji-start {
   justify-items: start;
 }
 
-.justify-items-end {
+.ji-end {
   justify-items: end;
 }
 
-.justify-items-center {
+.ji-center {
   justify-items: center;
 }
 
-.justify-items-stretch {
+.ji-stretch {
   justify-items: stretch;
 }
diff --git a/src/theme/justify/_justify-self.scss b/src/theme/justify/_justify-self.scss
index dda0416..5987b07 100644
--- a/src/theme/justify/_justify-self.scss
+++ b/src/theme/justify/_justify-self.scss
@@ -1,19 +1,19 @@
-.justify-self-auto {
+.js-auto {
   justify-self: auto;
 }
 
-.justify-self-start {
+.js-start {
   justify-self: start;
 }
 
-.justify-self-end {
+.js-end {
   justify-self: end;
 }
 
-.justify-self-center {
+.js-center {
   justify-self: center;
 }
 
-.justify-self-stretch {
+.js-stretch {
   justify-self: stretch;
 }
diff --git a/src/theme/main.scss b/src/theme/main.scss
index b33a7c6..090e081 100644
--- a/src/theme/main.scss
+++ b/src/theme/main.scss
@@ -32,11 +32,16 @@
 @use './text/text-color';
 @use './text/font-weight';
 @use './text/font-size';
-@use './text/text-others';
 @use './text/text-align';
+@use './text/text-utilities';
 
 // background
 @use './background/bg-color';
+@use './background/bg-utilities';
+
+// border
+@use './border/rounded';
+@use './border/border';
 
 // line
 @use './line/line-clamp';
@@ -48,8 +53,18 @@
 @use './utilities/width';
 @use './utilities/height';
 @use './utilities/list';
+@use './utilities/backdrop-blur';
+@use './utilities/backdrop-opacity';
+@use './utilities/cursor';
+@use './utilities/scroll';
+@use './utilities/overflow';
 
 // others
 @use './spacing';
 @use './columns';
 @use './place-content';
+@use './shadow';
+@use './opacity';
+@use './fill-color';
+@use './size';
+@use './z-index';
diff --git a/src/theme/text/_text-others.scss b/src/theme/text/_text-others.scss
deleted file mode 100644
index e5684ae..0000000
--- a/src/theme/text/_text-others.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// font-style
-
-.italic {
-  font-style: italic;
-}
-
-.text-normal {
-  font-style: normal;
-}
diff --git a/src/theme/text/_text-utilities.scss b/src/theme/text/_text-utilities.scss
new file mode 100644
index 0000000..eaeb2c4
--- /dev/null
+++ b/src/theme/text/_text-utilities.scss
@@ -0,0 +1,172 @@
+// font-style
+
+.italic {
+  font-style: italic;
+}
+
+.text-normal {
+  font-style: normal;
+}
+
+// text-decoration
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.overline {
+  text-decoration-line: overline;
+}
+
+.line-through {
+  text-decoration-line: line-through;
+}
+
+.no-underline {
+  text-decoration-line: none;
+}
+
+// text-decoration-style
+
+.decoration-solid {
+  text-decoration-style: solid;
+}
+
+.decoration-double {
+  text-decoration-style: double;
+}
+
+.decoration-dotted {
+  text-decoration-style: dotted;
+}
+
+.decoration-dashed {
+  text-decoration-style: dashed;
+}
+
+.decoration-wavy {
+  text-decoration-style: wavy;
+}
+
+// text-underline-offset
+
+.underline-offset-auto {
+  text-underline-offset: auto;
+}
+
+.underline-offset-0 {
+  text-underline-offset: 0;
+}
+
+.underline-offset-1 {
+  text-underline-offset: 1px;
+}
+
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
+.underline-offset-4 {
+  text-underline-offset: 4px;
+}
+
+.underline-offset-8 {
+  text-underline-offset: 8px;
+}
+
+// text-transform
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.normal-case {
+  text-transform: none;
+}
+
+// text truncate
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.text-clip {
+  text-overflow: clip;
+}
+
+// text-wrap
+
+.text-wrap {
+  text-wrap: wrap;
+}
+
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+.text-pretty {
+  text-wrap: pretty;
+}
+
+// white-space
+
+.whitespace-normal {
+  white-space: normal;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre {
+  white-space: pre;
+}
+
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.whitespace-break-spaces {
+  white-space: break-spaces;
+}
+
+// word break
+
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.break-keep {
+  word-break: keep-all;
+}
diff --git a/src/theme/utilities/_backdrop-blur.scss b/src/theme/utilities/_backdrop-blur.scss
new file mode 100644
index 0000000..73b49eb
--- /dev/null
+++ b/src/theme/utilities/_backdrop-blur.scss
@@ -0,0 +1,16 @@
+$backdrop-blurs: (
+  none: 0,
+  sm: 4px,
+  md: 8px,
+  lg: 12px,
+  xl: 16px,
+  2xl: 24px,
+  3xl: 40px,
+  4xl: 64px
+);
+
+@each $name, $size in $backdrop-blurs {
+  .backdrop-blur-#{$name} {
+    backdrop-filter: blur($size);
+  }
+}
diff --git a/src/theme/utilities/_backdrop-opacity.scss b/src/theme/utilities/_backdrop-opacity.scss
new file mode 100644
index 0000000..6c998b3
--- /dev/null
+++ b/src/theme/utilities/_backdrop-opacity.scss
@@ -0,0 +1,5 @@
+@for $i from 0 through 20 {
+  .backdrop-opacity-#{5 * $i} {
+    backdrop-filter: opacity($i * 0.05);
+  }
+}
diff --git a/src/theme/utilities/_cursor.scss b/src/theme/utilities/_cursor.scss
new file mode 100644
index 0000000..96161da
--- /dev/null
+++ b/src/theme/utilities/_cursor.scss
@@ -0,0 +1,143 @@
+.cursor-auto {
+  cursor: auto;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-wait {
+  cursor: wait;
+}
+
+.cursor-text {
+  cursor: text;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+.cursor-help {
+  cursor: help;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-none {
+  cursor: none;
+}
+
+.cursor-context-menu {
+  cursor: context-menu;
+}
+
+.cursor-progress {
+  cursor: progress;
+}
+
+.cursor-cell {
+  cursor: cell;
+}
+
+.cursor-crosshair {
+  cursor: crosshair;
+}
+
+.cursor-vertical-text {
+  cursor: vertical-text;
+}
+
+.cursor-alias {
+  cursor: alias;
+}
+
+.cursor-copy {
+  cursor: copy;
+}
+
+.cursor-no-drop {
+  cursor: no-drop;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}
+
+.cursor-all-scroll {
+  cursor: all-scroll;
+}
+
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
+.cursor-row-resize {
+  cursor: row-resize;
+}
+
+.cursor-n-resize {
+  cursor: n-resize;
+}
+
+.cursor-e-resize {
+  cursor: e-resize;
+}
+
+.cursor-s-resize {
+  cursor: s-resize;
+}
+
+.cursor-w-resize {
+  cursor: w-resize;
+}
+
+.cursor-ne-resize {
+  cursor: ne-resize;
+}
+
+.cursor-nw-resize {
+  cursor: nw-resize;
+}
+
+.cursor-se-resize {
+  cursor: se-resize;
+}
+
+.cursor-sw-resize {
+  cursor: sw-resize;
+}
+
+.cursor-ew-resize {
+  cursor: ew-resize;
+}
+
+.cursor-ns-resize {
+  cursor: ns-resize;
+}
+
+.cursor-nesw-resize {
+  cursor: nesw-resize;
+}
+
+.cursor-nwse-resize {
+  cursor: nwse-resize;
+}
+
+.cursor-zoom-in {
+  cursor: zoom-in;
+}
+
+.cursor-zoom-out {
+  cursor: zoom-out;
+}
diff --git a/src/theme/utilities/_order.scss b/src/theme/utilities/_order.scss
index b616733..ebd7ef8 100644
--- a/src/theme/utilities/_order.scss
+++ b/src/theme/utilities/_order.scss
@@ -15,3 +15,21 @@
 .order-none {
   order: 0;
 }
+
+// user-select
+
+.select-none {
+  user-select: none;
+}
+
+.select-text {
+  user-select: text;
+}
+
+.select-all {
+  user-select: all;
+}
+
+.select-auto {
+  user-select: auto;
+}
diff --git a/src/theme/utilities/_others.scss b/src/theme/utilities/_others.scss
new file mode 100644
index 0000000..9a5a2d2
--- /dev/null
+++ b/src/theme/utilities/_others.scss
@@ -0,0 +1,103 @@
+// caption-side
+
+.caption-top {
+  caption-side: top;
+}
+
+.caption-bottom {
+  caption-side: bottom;
+}
+
+// appearance
+
+.appearance-none {
+  appearance: none;
+}
+
+// resize
+
+.resize-none {
+  resize: none;
+}
+
+.resize-y {
+  resize: vertical;
+}
+
+.resize-x {
+  resize: horizontal;
+}
+
+.resize {
+  resize: both;
+}
+
+// aspect-ratio
+
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+// position
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+// object-position
+
+.object-bottom {
+  object-position: bottom;
+}
+
+.object-center {
+  object-position: center;
+}
+
+.object-left {
+  object-position: left;
+}
+
+.object-left-bottom {
+  object-position: left bottom;
+}
+
+.object-left-top {
+  object-position: left top;
+}
+
+.object-right {
+  object-position: right;
+}
+
+.object-right-bottom {
+  object-position: right bottom;
+}
+
+.object-right-top {
+  object-position: right top;
+}
+
+.object-top {
+  object-position: top;
+}
diff --git a/src/theme/utilities/_overflow.scss b/src/theme/utilities/_overflow.scss
new file mode 100644
index 0000000..24fcd8e
--- /dev/null
+++ b/src/theme/utilities/_overflow.scss
@@ -0,0 +1,55 @@
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-clip {
+  overflow: clip;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-clip {
+  overflow-x: clip;
+}
+
+.overflow-y-clip {
+  overflow-y: clip;
+}
+
+.overflow-x-visible {
+  overflow-x: visible;
+}
+
+.overflow-y-visible {
+  overflow-y: visible;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
diff --git a/src/theme/utilities/_scroll.scss b/src/theme/utilities/_scroll.scss
new file mode 100644
index 0000000..5f9b183
--- /dev/null
+++ b/src/theme/utilities/_scroll.scss
@@ -0,0 +1,69 @@
+// scroll-snap-align
+
+.snap-start {
+  scroll-snap-align: start;
+}
+
+.snap-end {
+  scroll-snap-align: end;
+}
+
+.snap-center {
+  scroll-snap-align: center;
+}
+
+.snap-align-none {
+  scroll-snap-align: none;
+}
+
+// scroll-snap-stop
+
+.snap-normal {
+  scroll-snap-stop: normal;
+}
+
+.snap-always {
+  scroll-snap-stop: always;
+}
+
+// touch-action
+
+.touch-auto {
+  touch-action: auto;
+}
+
+.touch-none {
+  touch-action: none;
+}
+
+.touch-pan-x {
+  touch-action: pan-x;
+}
+
+.touch-pan-left {
+  touch-action: pan-left;
+}
+
+.touch-pan-right {
+  touch-action: pan-right;
+}
+
+.touch-pan-y {
+  touch-action: pan-y;
+}
+
+.touch-pan-up {
+  touch-action: pan-up;
+}
+
+.touch-pan-down {
+  touch-action: pan-down;
+}
+
+.touch-pinch-zoom {
+  touch-action: pinch-zoom;
+}
+
+.touch-manipulation {
+  touch-action: manipulation;
+}
diff --git a/src/theme/variables/_borderRadius.scss b/src/theme/variables/_border-radius.scss
similarity index 84%
rename from src/theme/variables/_borderRadius.scss
rename to src/theme/variables/_border-radius.scss
index 622683c..d2cdb8f 100644
--- a/src/theme/variables/_borderRadius.scss
+++ b/src/theme/variables/_border-radius.scss
@@ -1,6 +1,7 @@
 $border-radius-circle: 50%;
 $border-radius-60: 60px;
 $border-radius-32: 32px;
+$border-radius-24: 24px;
 $border-radius-20: 20px;
 $border-radius-16: 16px;
 $border-radius-12: 12px;
@@ -8,4 +9,4 @@ $border-radius-8: 8px;
 $border-radius-6: 6px;
 $border-radius-4: 4px;
 $border-radius-2: 2px;
-$border-radius-none: 0;
+$border-radius-0: 0;
diff --git a/src/theme/variables/_boxShadows.scss b/src/theme/variables/_box-shadows.scss
similarity index 100%
rename from src/theme/variables/_boxShadows.scss
rename to src/theme/variables/_box-shadows.scss