diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css
index a8db803e7..4925f2a84 100644
--- a/packages/raystack/components/accordion/accordion.module.css
+++ b/packages/raystack/components/accordion/accordion.module.css
@@ -9,6 +9,7 @@
 
 .accordion-trigger {
   display: flex;
+  /* Todo: var does not exist for 36px */
   min-height: 36px;
   padding: 0 var(--rs-space-4);
   justify-content: space-between;
@@ -25,6 +26,7 @@
   line-height: var(--rs-line-height-regular);
   letter-spacing: var(--rs-letter-spacing-regular);
 }
+
 .accordion-item:not(:first-child) .accordion-trigger {
   border-top: none;
 }
@@ -76,4 +78,4 @@
   align-self: stretch;
   padding: var(--rs-space-5) var(--rs-space-4);
   border-top: 0px;
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/announcement-bar/announcement-bar.module.css b/packages/raystack/components/announcement-bar/announcement-bar.module.css
index 6bf97133f..177787cc0 100644
--- a/packages/raystack/components/announcement-bar/announcement-bar.module.css
+++ b/packages/raystack/components/announcement-bar/announcement-bar.module.css
@@ -1,6 +1,6 @@
 .announcement-bar {
   width: 100%;
-  min-height: 40px;
+  min-height: var(--rs-space-10);
   padding: var(--rs-space-3) var(--rs-space-7);
 }
 
@@ -36,8 +36,8 @@
 
 .icon,
 .icon > svg {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: var(--rs-space-5);
+  min-width: var(--rs-space-5);
 }
 
 .action-btn {
diff --git a/packages/raystack/components/badge/badge.module.css b/packages/raystack/components/badge/badge.module.css
index 63c46ee4f..c049e8b34 100644
--- a/packages/raystack/components/badge/badge.module.css
+++ b/packages/raystack/components/badge/badge.module.css
@@ -15,6 +15,7 @@
   font-size: var(--rs-font-size-micro);
   line-height: var(--rs-line-height-micro);
   letter-spacing: var(--rs-letter-spacing-micro);
+  /* Todo: var does not exist for 18px */
   height: 18px;
 }
 
@@ -22,6 +23,7 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
+  /* Todo: var does not exist for 22px */
   height: 22px;
 }
 
@@ -29,7 +31,7 @@
   font-size: var(--rs-font-size-regular);
   line-height: var(--rs-line-height-regular);
   letter-spacing: var(--rs-letter-spacing-regular);
-  height: 28px;
+  height: var(--rs-space-8);
 }
 
 /* Variants */
@@ -72,22 +74,25 @@
 }
 
 .badge-micro .icon {
+  /* Todo: var does not exist for 10px */
   width: 10px;
   height: 10px;
 }
 
 .badge-small .icon {
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
 
 .badge-regular .icon {
+  /* Todo: var does not exist for 14px */
   width: 14px;
   height: 14px;
 }
 
 .sr-only {
   position: absolute;
+  /* Todo: var does not exist for 1px */
   width: 1px;
   height: 1px;
   padding: 0;
@@ -96,4 +101,4 @@
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
index 3fde77f6d..ee6a208b0 100644
--- a/packages/raystack/components/button/button.module.css
+++ b/packages/raystack/components/button/button.module.css
@@ -17,8 +17,10 @@
 }
 
 .button:focus-visible {
+  /* Todo: var does not exist for 1px */
   outline: 1px solid var(--rs-color-border-accent-emphasis);
 }
+
 .button:focus {
   outline: none;
 }
@@ -245,9 +247,10 @@
 }
 
 .loader {
-  border: 2px solid var(--rs-color-background-base-primary);
-  border-top: 2px solid var(--rs-color-foreground-base-primary);
+  border: var(--rs-space-1) solid var(--rs-color-background-base-primary);
+  border-top: var(--rs-space-1) solid var(--rs-color-foreground-base-primary);
   border-radius: 50%;
+  /* Todo: var does not exist for 10px */
   width: 10px;
   height: 10px;
   animation: spin 1s linear infinite;
@@ -597,4 +600,4 @@
 .button-text-success:disabled:hover,
 .button-text-success.button-loading:hover {
   color: var(--rs-color-foreground-success-primary);
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/calendar/calendar.module.css b/packages/raystack/components/calendar/calendar.module.css
index aa6d33a8e..04778e744 100644
--- a/packages/raystack/components/calendar/calendar.module.css
+++ b/packages/raystack/components/calendar/calendar.module.css
@@ -3,11 +3,12 @@
   border-radius: var(--rs-radius-4);
   background: var(--rs-color-background-base-primary);
   width: fit-content;
+  /* Todo: var does not exist for 346px */
   min-height: 346px;
 }
 
 .captionLabel,
-.dropdowns > span,
+.dropdowns>span,
 .dropdown_trigger {
   font-weight: var(--rs-font-weight-medium);
   font-size: var(--rs-font-size-mini);
@@ -26,6 +27,7 @@
 .navButton {
   position: absolute;
   top: 0;
+  /* Todo: var does not exist for 0px */
   border: 0px;
   color: var(--rs-color-foreground-base-primary);
   background: var(--rs-color-background-base-primary);
@@ -82,7 +84,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid transparent;
+  border: var(--rs-space-1) solid transparent;
   margin-bottom: var(--rs-space-1);
 }
 
@@ -91,7 +93,7 @@
   height: var(--rs-space-10, 40px);
   flex-shrink: 0;
   border-radius: var(--rs-radius-5);
-  border: 1px solid var(--rs-color-border-accent-emphasis-hover);
+  border: var(--rs-space-1) solid var(--rs-color-border-accent-emphasis-hover);
   background-color: transparent;
 }
 
@@ -170,7 +172,7 @@
 
 .calendarPopover {
   padding: var(--rs-space-3) !important;
-  /* border: none !important; */
+  /* Todo: var does not exist for 0.5px */
   border: 0.5px solid var(--rs-color-border-base-primary) !important;
   min-width: max-content;
   width: fit-content;
@@ -250,7 +252,7 @@
 
 .dayInfo {
   position: absolute;
-  top: -2px;
+  top: calc(-1 * var(--rs-space-1));
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -290,4 +292,4 @@
 
 .datePickerInput {
   text-align: left;
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css
index be770f299..8e45174e0 100644
--- a/packages/raystack/components/callout/callout.module.css
+++ b/packages/raystack/components/callout/callout.module.css
@@ -1,5 +1,6 @@
 .callout {
   position: relative;
+  /* Todo: var does not exist for 318px */
   width: 318px;
   padding: var(--rs-space-3);
   border-radius: var(--rs-radius-2);
@@ -8,6 +9,7 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
+  /* Todo: var does not exist for 0.5px */
   border: 0.5px solid transparent;
 }
 
@@ -16,7 +18,7 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  gap: 40px;
+  gap: var(--rs-space-10);
 }
 
 .messageContainer {
@@ -30,8 +32,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
   flex-shrink: 0;
   color: currentColor;
 }
@@ -80,8 +82,9 @@
 }
 
 .callout-success {
+  /* Todo: var does not exist for 318px */
   width: 318px;
-  gap: 40px;
+  gap: var(--rs-space-10);
   background: var(--rs-color-background-success-primary);
   color: var(--rs-color-foreground-success-primary);
 }
@@ -113,6 +116,7 @@
 
 .callout-outline.callout-grey {
   background: var(--rs-color-background-neutral-primary);
+  /* Todo: var does not exist for 0.5px */
   border: 0.5px solid var(--rs-color-border-base-primary);
 }
 
@@ -239,4 +243,4 @@
   background: var(--rs-color-background-base-primary);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css
index c82110553..a672938cd 100644
--- a/packages/raystack/components/checkbox/checkbox.module.css
+++ b/packages/raystack/components/checkbox/checkbox.module.css
@@ -68,4 +68,4 @@
 .icon {
   width: var(--rs-space-5);
   height: var(--rs-space-5);
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index 76bed9e30..dcb0e501b 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -111,8 +111,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
 
 .dismiss-button {
@@ -124,4 +124,4 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/code-block/code.module.css b/packages/raystack/components/code-block/code.module.css
index 243c2cb3a..14e82949d 100644
--- a/packages/raystack/components/code-block/code.module.css
+++ b/packages/raystack/components/code-block/code.module.css
@@ -91,11 +91,11 @@
 }
 
 .theme :global(.token.important) {
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
 }
 
 .theme :global(.token.bold) {
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
 }
 
 .theme :global(.token.italic) {
diff --git a/packages/raystack/components/color-picker/color-picker.module.css b/packages/raystack/components/color-picker/color-picker.module.css
index e76183151..659100637 100644
--- a/packages/raystack/components/color-picker/color-picker.module.css
+++ b/packages/raystack/components/color-picker/color-picker.module.css
@@ -6,46 +6,47 @@
   user-select: none;
   align-items: center;
 }
+
 .sliderControl {
   display: flex;
   align-items: center;
   width: 100%;
 }
+
 .sliderRange {
   position: absolute;
   height: 100%;
   border-radius: var(--rs-radius-full);
   background: transparent;
 }
+
 .sliderTrack {
   position: relative;
-  height: 12px;
+  height: var(--rs-space-4);
   width: 100%;
   flex-grow: 1;
   border-radius: var(--rs-radius-3);
 }
+
 .hueTrack {
-  background: linear-gradient(
-    90deg,
-    #ff0000,
-    #ffff00,
-    #00ff00,
-    #00ffff,
-    #0000ff,
-    #ff00ff,
-    #ff0000
-  );
+  background: linear-gradient(90deg,
+      #ff0000,
+      #ffff00,
+      #00ff00,
+      #00ffff,
+      #0000ff,
+      #ff00ff,
+      #ff0000);
 }
 
 .sliderThumb {
   position: absolute;
   display: block;
-  height: 12px;
-  width: 12px;
+  height: var(--rs-space-4);
+  width: var(--rs-space-4);
   border-radius: var(--rs-radius-full);
   border: 3px solid var(--rs-color-foreground-base-emphasis);
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.02))
-    drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.06));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.02)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.06));
 }
 
 .sliderThumb:focus-visible {
@@ -58,21 +59,20 @@
 }
 
 .alphaTrack {
-  --track-checker-size: 12px;
+  --track-checker-size: var(--rs-space-4);
   background-image:
     linear-gradient(45deg, #ddd 25%, transparent 25%),
     linear-gradient(-45deg, #ddd 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #ddd 75%),
     linear-gradient(-45deg, transparent 75%, #ddd 75%);
-  background-size: var(--track-checker-size, 8px)
-    var(--track-checker-size, 12px);
+  background-size: var(--track-checker-size, 8px) var(--track-checker-size, 12px);
   background-position:
     0 0,
     0 calc(var(--track-checker-size, 12px) / 2),
-    calc(var(--track-checker-size, 12px) / 2)
-    calc(var(--track-checker-size, 12px) / -2),
+    calc(var(--track-checker-size, 12px) / 2) calc(var(--track-checker-size, 12px) / -2),
     calc(var(--track-checker-size, 12px) / -2) 0px;
 }
+
 .alphaTrackGradient {
   position: absolute;
   inset: 0;
diff --git a/packages/raystack/components/combobox/combobox.module.css b/packages/raystack/components/combobox/combobox.module.css
index 9d9dfaaa7..84a9c30e8 100644
--- a/packages/raystack/components/combobox/combobox.module.css
+++ b/packages/raystack/components/combobox/combobox.module.css
@@ -11,6 +11,7 @@
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-soft);
   border: 1px solid var(--rs-color-border-base-primary);
+  /* Todo: var does not exist for 320px */
   max-height: 320px;
   min-width: var(--anchor-width);
   overflow: auto;
@@ -28,8 +29,8 @@
 }
 
 .itemIcon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
 }
 
 .menuitem {
@@ -49,6 +50,7 @@
   cursor: pointer;
   background: var(--rs-color-background-base-primary-hover);
 }
+
 .menuitem[data-disabled] {
   opacity: 0.6;
   pointer-events: none;
@@ -57,6 +59,7 @@
 .list:empty {
   padding: 0;
 }
+
 .content:has(.list:empty) {
   border: none;
 }
@@ -68,7 +71,8 @@
 }
 
 .separator {
+  /* Todo: var does not exist for 1px */
   height: 1px;
   margin: var(--rs-space-2) calc(var(--rs-space-3) * -1);
   background: var(--rs-color-border-base-primary);
-}
+}
\ No newline at end of file
diff --git a/packages/raystack/components/command/command.module.css b/packages/raystack/components/command/command.module.css
index 67356c8ef..d24a5f199 100644
--- a/packages/raystack/components/command/command.module.css
+++ b/packages/raystack/components/command/command.module.css
@@ -11,7 +11,7 @@
 }
 
 .inputWrapper {
-  padding: 0 12px;
+  padding: 0 var(--rs-space-4);
   border-bottom: 1px solid var(--rs-color-border-base-secondary);
 }
 
@@ -26,7 +26,7 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-mini);
   width: 100%;
-  border-radius: var(--rs-space-2);
+  border-radius: var(--rs-radius-2);
   outline: none;
   border: none;
   color: var(--rs-color-foreground-base-primary);
diff --git a/packages/raystack/components/container/container.module.css b/packages/raystack/components/container/container.module.css
index 1af12e560..ae163339d 100644
--- a/packages/raystack/components/container/container.module.css
+++ b/packages/raystack/components/container/container.module.css
@@ -14,14 +14,17 @@
 }
 
 .container-small {
+  /* Todo: var does not exist for 430px */
   max-width: 430px;
 }
 
 .container-medium {
+  /* Todo: var does not exist for 715px */
   max-width: 715px;
 }
 
 .container-large {
+  /* Todo: var does not exist for 1145px */
   max-width: 1145px;
 }
 
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 7a26f64fc..2bec0978f 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -8,10 +8,12 @@
 
 .display-popover-content {
   padding: 0px;
+  /* Todo: var does not exist for 300px */
   min-width: 300px;
 }
 
 .display-popover-properties-container {
+  /* Todo: var does not exist for 160px */
   --select-width: 160px;
   padding: var(--rs-space-5);
   border-bottom: 1px solid var(--rs-color-border-base-primary);
@@ -37,8 +39,8 @@
 }
 
 .display-popover-sort-icon {
-  height: 20px;
-  width: 20px;
+  height: var(--rs-space-6);
+  width: var(--rs-space-6);
 }
 
 .flex-1 {
@@ -141,7 +143,7 @@
   display: flex;
   align-items: center;
   background: var(--rs-color-background-base-secondary);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   padding: var(--rs-space-3);
 }
 
@@ -152,7 +154,7 @@
   display: flex;
   align-items: center;
   background: var(--rs-color-background-base-secondary);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   padding: var(--rs-space-3);
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: 0 1px 0 0 var(--rs-color-border-base-primary);
@@ -176,4 +178,4 @@
   z-index: 1;
   background: var(--rs-color-background-base-secondary);
   box-shadow: 0 1px 0 0 var(--rs-color-border-base-primary);
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index 7cf020e82..9660ed4f7 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -41,7 +41,7 @@
   inset: 0;
   position: absolute;
   border-radius: inherit;
-  background-color: rgb(0 0 0 / 0.05);
+  background-color: var(--rs-color-overlay-black-a1);
 }
 
 .dialogContent.showNestedAnimation[data-starting-style],
diff --git a/packages/raystack/components/empty-state/empty-state.module.css b/packages/raystack/components/empty-state/empty-state.module.css
index 078e62ff1..05e43f400 100644
--- a/packages/raystack/components/empty-state/empty-state.module.css
+++ b/packages/raystack/components/empty-state/empty-state.module.css
@@ -12,8 +12,8 @@
 }
 
 .icon {
-  height: 32px;
-  width: 32px;
+  height: var(--rs-space-9);
+  width: var(--rs-space-9);
   padding: var(--rs-space-3);
   box-sizing: content-box;
   border: 1px solid var(--rs-color-border-base-primary);
diff --git a/packages/raystack/components/filter-chip/filter-chip.module.css b/packages/raystack/components/filter-chip/filter-chip.module.css
index aa512c378..f09c38685 100644
--- a/packages/raystack/components/filter-chip/filter-chip.module.css
+++ b/packages/raystack/components/filter-chip/filter-chip.module.css
@@ -3,7 +3,7 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
-  height: 24px;
+  height: var(--rs-space-7);
   background: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   text-wrap: nowrap;
@@ -44,8 +44,8 @@
 
 /* Control height of Select items */
 .chip [role="option"] {
-  min-height: 24px !important;
-  height: 24px !important;
+  min-height: var(--rs-space-7) !important;
+  height: var(--rs-space-7) !important;
 }
 
 /* Style for select triggers */
@@ -68,8 +68,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 16px;
-  letter-spacing: 0.4px;
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
 }
 
 .removeIconContainer {
@@ -91,8 +91,8 @@
   cursor: pointer;
   color: var(--rs-color-foreground-base-primary);
   transition: color 0.2s ease-in-out;
-  width: 12px !important;
-  height: 12px !important;
+  width: var(--rs-space-4) !important;
+  height: var(--rs-space-4) !important;
 }
 
 .removeIcon:hover {
@@ -135,10 +135,10 @@ button.selectValue:hover {
 .leadingIcon {
   display: flex;
   align-items: center;
-  width: 12px;
-  height: 12px;
-  max-width: 12px;
-  max-height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
+  max-width: var(--rs-space-4);
+  max-height: var(--rs-space-4);
 }
 
 .inputFieldWrapper {
@@ -156,8 +156,8 @@ button.selectValue:hover {
 
 /* Match height of InputField when FilterChip variant is text */
 .chip[data-variant="text"] .inputField {
-  height: 24px;
-  min-height: 24px;
+  height: var(--rs-space-7);
+  min-height: var(--rs-space-7);
 }
 
 .inputFieldWrapper input {
@@ -167,7 +167,7 @@ button.selectValue:hover {
 
 .dateFieldWrapper {
   padding: 0 var(--rs-space-2);
-  min-width: 120px;
+  min-width: var(--rs-space-17);
 }
 
 .dateField {
@@ -184,8 +184,8 @@ button.selectValue:hover {
 
 /* match height of the DatePicker when FilterChip variant is text */
 .chip[data-variant="text"] .dateField {
-  height: 24px;
-  min-height: 24px;
+  height: var(--rs-space-7);
+  min-height: var(--rs-space-7);
 }
 
 .dateField input {
diff --git a/packages/raystack/components/headline/headline.module.css b/packages/raystack/components/headline/headline.module.css
index 2038c23fc..378824705 100644
--- a/packages/raystack/components/headline/headline.module.css
+++ b/packages/raystack/components/headline/headline.module.css
@@ -31,16 +31,16 @@
 
 /* Deprecated Headline Size */
 .headline-small {
-  font-size: 24px;
-  line-height: 32px;
+  font-size: var(--rs-font-size-t2);
+  line-height: var(--rs-line-height-t2);
 }
 .headline-medium {
-  font-size: 28px;
-  line-height: 36px;
+  font-size: var(--rs-font-size-t3);
+  line-height: var(--rs-line-height-t3);
 }
 .headline-large {
-  font-size: 32px;
-  line-height: 40px;
+  font-size: var(--rs-font-size-t4);
+  line-height: var(--rs-line-height-t4);
 }
 
 .headline-align-left {
diff --git a/packages/raystack/components/indicator/indicator.module.css b/packages/raystack/components/indicator/indicator.module.css
index 42cce2118..c98e3ae53 100644
--- a/packages/raystack/components/indicator/indicator.module.css
+++ b/packages/raystack/components/indicator/indicator.module.css
@@ -44,7 +44,7 @@
 }
 
 .indicator-variant-warning {
-  background-color: var(--rs-attention-9);
+  background-color: var(--rs-color-background-attention-emphasis);
   color: var(--rs-color-foreground-attention-emphasis);
 }
 
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
index 52b5eac63..64e4e802d 100644
--- a/packages/raystack/components/input-field/input-field.module.css
+++ b/packages/raystack/components/input-field/input-field.module.css
@@ -69,8 +69,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
   color: var(--rs-color-foreground-base-secondary);
   pointer-events: none;
   margin-left: var(--rs-space-3);
@@ -81,8 +81,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
   color: var(--rs-color-foreground-base-secondary);
   pointer-events: none;
   margin-right: var(--rs-space-3);
@@ -99,7 +99,7 @@
   background: transparent;
   font-weight: var(--rs-font-weight-regular);
   font-size: var(--rs-font-size-small);
-  line-height: 32px;
+  line-height: var(--rs-line-height-t2);
   letter-spacing: var(--rs-letter-spacing-small);
   outline: none;
   box-sizing: border-box;
@@ -180,7 +180,7 @@
   gap: var(--rs-space-2);
   align-items: center;
   width: 100%;
-  min-height: 32px;
+  min-height: var(--rs-space-9);
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -195,7 +195,7 @@
 
 .has-chips .input-field {
   padding: 6px 0;
-  min-width: 80px;
+  min-width: var(--rs-space-15);
   width: auto;
   flex: 1;
   line-height: normal;
@@ -203,35 +203,35 @@
 
 /* Size variants */
 .size-large {
-  min-height: 32px;
+  min-height: var(--rs-space-9);
 }
 
 .size-large .input-field {
-  height: 32px;
+  height: var(--rs-space-9);
 }
 
 .size-small {
-  min-height: 24px;
+  min-height: var(--rs-space-7);
 }
 
 .size-small .input-field {
-  height: 24px;
-  line-height: 24px;
+  height: var(--rs-space-7);
+  line-height: var(--rs-line-height-large);
 }
 
 .size-small .chip-input-container {
-  min-height: 24px;
+  min-height: var(--rs-space-7);
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .size-large .chip-input-container {
-  min-height: 32px;
+  min-height: var(--rs-space-9);
 }
 
 .chip-overflow {
   color: var(--rs-color-foreground-base-primary);
-  font-size: 12px;
+  font-size: var(--rs-font-size-small);
   border-radius: var(--rs-radius-2);
 }
 
@@ -286,8 +286,8 @@
   display: flex;
   align-items: center;
   margin-left: var(--rs-space-2);
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
 
 .variant-borderless {
diff --git a/packages/raystack/components/menu/menu.module.css b/packages/raystack/components/menu/menu.module.css
index 6480a722b..26c2f191b 100644
--- a/packages/raystack/components/menu/menu.module.css
+++ b/packages/raystack/components/menu/menu.module.css
@@ -8,7 +8,7 @@
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
   box-sizing: border-box;
-  min-width: 80px;
+  min-width: var(--rs-space-15);
 
   padding: var(--rs-space-2);
   background-color: var(--rs-color-background-base-primary);
diff --git a/packages/raystack/components/meter/meter.module.css b/packages/raystack/components/meter/meter.module.css
index abd501237..9d105c5be 100644
--- a/packages/raystack/components/meter/meter.module.css
+++ b/packages/raystack/components/meter/meter.module.css
@@ -33,7 +33,7 @@
 .track {
   position: relative;
   width: 100%;
-  height: 4px;
+  height: var(--rs-space-2);
   overflow: clip;
   border-radius: 1px;
   background-color: var(--rs-color-background-neutral-secondary);
@@ -53,11 +53,11 @@
 }
 
 .circularSvg {
-  --rs-meter-track-size: 4px;
-  --rs-meter-radius: calc((72px - var(--rs-meter-track-size) * 2) / 2);
+  --rs-meter-track-size: var(--rs-space-2);
+  --rs-meter-radius: calc((var(--rs-space-14) - var(--rs-meter-track-size) * 2) / 2);
   --rs-meter-circumference: calc(2 * 3.14159265 * var(--rs-meter-radius));
-  width: 72px;
-  height: 72px;
+  width: var(--rs-space-14);
+  height: var(--rs-space-14);
   aspect-ratio: 1;
   transform: rotate(-90deg);
 }
diff --git a/packages/raystack/components/popover/popover.module.css b/packages/raystack/components/popover/popover.module.css
index 8da7a13ee..f8f82a330 100644
--- a/packages/raystack/components/popover/popover.module.css
+++ b/packages/raystack/components/popover/popover.module.css
@@ -8,7 +8,7 @@
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
   box-sizing: border-box;
-  min-width: 120px;
+  min-width: var(--rs-space-17);
   max-width: 18rem;
   padding: var(--rs-space-3);
   background-color: var(--rs-color-background-base-primary);
@@ -22,7 +22,7 @@
 @keyframes slideUpAndFade {
   from {
     opacity: 0;
-    transform: translateY(2px);
+    transform: translateY(var(--rs-space-1));
   }
   to {
     opacity: 1;
diff --git a/packages/raystack/components/preview-card/preview-card.module.css b/packages/raystack/components/preview-card/preview-card.module.css
index 04a5ce504..0ae32d8cf 100644
--- a/packages/raystack/components/preview-card/preview-card.module.css
+++ b/packages/raystack/components/preview-card/preview-card.module.css
@@ -18,10 +18,7 @@
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   border: 0.5px solid var(--rs-color-border-base-primary);
-  box-shadow:
-    0 1px 1px 0 rgba(0, 0, 0, 0.07),
-    0 2px 5px 0 rgba(0, 0, 0, 0.07),
-    0 3px 8px 0 rgba(0, 0, 0, 0.07);
+  box-shadow: var(--rs-shadow-lifted);
   color: var(--rs-color-foreground-base-primary);
   transform-origin: var(--transform-origin);
 
diff --git a/packages/raystack/components/progress/progress.module.css b/packages/raystack/components/progress/progress.module.css
index 324d5a0ae..dbd92e823 100644
--- a/packages/raystack/components/progress/progress.module.css
+++ b/packages/raystack/components/progress/progress.module.css
@@ -33,7 +33,7 @@
 .track {
   position: relative;
   width: 100%;
-  height: 4px;
+  height: var(--rs-space-2);
   overflow: clip;
   border-radius: 1px;
   background-color: var(--rs-color-background-neutral-secondary);
@@ -53,11 +53,11 @@
 }
 
 .circularSvg {
-  --rs-progress-track-size: 4px;
-  --rs-progress-radius: calc((72px - var(--rs-progress-track-size) * 2) / 2);
+  --rs-progress-track-size: var(--rs-space-2);
+  --rs-progress-radius: calc((var(--rs-space-14) - var(--rs-progress-track-size) * 2) / 2);
   --rs-progress-circumference: calc(2 * 3.14159265 * var(--rs-progress-radius));
-  width: 72px;
-  height: 72px;
+  width: var(--rs-space-14);
+  height: var(--rs-space-14);
   aspect-ratio: 1;
   transform: rotate(-90deg);
 }
diff --git a/packages/raystack/components/scroll-area/scroll-area.module.css b/packages/raystack/components/scroll-area/scroll-area.module.css
index 39be70a82..be0c4ac66 100644
--- a/packages/raystack/components/scroll-area/scroll-area.module.css
+++ b/packages/raystack/components/scroll-area/scroll-area.module.css
@@ -1,5 +1,5 @@
 :root {
-  --rs-scrollbar-size-default: 4px;
+  --rs-scrollbar-size-default: var(--rs-space-2);
   --rs-scrollbar-size-hover: 6px;
 }
 
diff --git a/packages/raystack/components/search/search.module.css b/packages/raystack/components/search/search.module.css
index 3ef5501a4..99f3d5ba2 100644
--- a/packages/raystack/components/search/search.module.css
+++ b/packages/raystack/components/search/search.module.css
@@ -27,6 +27,6 @@
 }
 
 .clearButton svg {
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 3c0f72367..4675f9af4 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -84,7 +84,7 @@
 
 .trigger-small {
   padding: var(--rs-space-2);
-  min-height: 24px;
+  min-height: var(--rs-space-7);
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -102,7 +102,7 @@
 
 .trigger-medium {
   padding: var(--rs-space-3);
-  min-height: 32px;
+  min-height: var(--rs-space-9);
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -148,8 +148,8 @@
 }
 
 .triggerIcon {
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
   margin-left: var(--rs-space-3);
   flex-shrink: 0;
   color: var(--rs-color-foreground-base-secondary);
@@ -164,7 +164,7 @@
 
 .content[data-variant="text"] .menuitem {
   padding: var(--rs-space-1) var(--rs-space-2);
-  min-height: 24px !important;
+  min-height: var(--rs-space-7) !important;
   font-size: var(--rs-font-size-small);
 }
 
@@ -199,18 +199,18 @@
 }
 
 .itemIcon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
 }
 
 .trigger-small .valueContent .itemIcon svg {
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
 
 .trigger-small .triggerIcon {
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
   margin-left: var(--rs-space-2);
   flex-shrink: 0;
 }
diff --git a/packages/raystack/components/separator/separator.module.css b/packages/raystack/components/separator/separator.module.css
index d3757f252..46151aa0e 100644
--- a/packages/raystack/components/separator/separator.module.css
+++ b/packages/raystack/components/separator/separator.module.css
@@ -19,12 +19,12 @@
 
 .separator-small[data-orientation="horizontal"] {
   height: 1px;
-  width: 20px;
+  width: var(--rs-space-6);
 }
 
 .separator-small[data-orientation="vertical"] {
   width: 1px;
-  height: 20px;
+  height: var(--rs-space-6);
 }
 
 .separator-half[data-orientation="horizontal"] {
@@ -45,4 +45,4 @@
 .separator-full[data-orientation="vertical"] {
   width: 1px;
   height: 100%;
-} 
\ No newline at end of file
+} 
diff --git a/packages/raystack/components/slider/slider.module.css b/packages/raystack/components/slider/slider.module.css
index 8cc1665c3..40b98b19b 100644
--- a/packages/raystack/components/slider/slider.module.css
+++ b/packages/raystack/components/slider/slider.module.css
@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  min-width: 80px;
+  min-width: var(--rs-space-15);
   height: var(--rs-space-8);
   touch-action: none;
   user-select: none;
@@ -58,8 +58,8 @@
 }
 
 .thumbLarge {
-  width: 24px;
-  height: 20px;
+  width: var(--rs-space-7);
+  height: var(--rs-space-6);
   position: relative;
   background-color: var(--rs-color-background-base-primary);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
@@ -79,8 +79,8 @@
 }
 
 .thumbSmall {
-  width: 8px;
-  height: 16px;
+  width: var(--rs-space-3);
+  height: var(--rs-space-5);
   border-radius: var(--rs-radius-full);
   background-color: var(--rs-color-background-base-primary);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css
index 9b1827901..d0d8f10bd 100644
--- a/packages/raystack/components/switch/switch.module.css
+++ b/packages/raystack/components/switch/switch.module.css
@@ -13,12 +13,12 @@
 
 .switch.large {
   width: 34px;
-  height: 20px;
+  height: var(--rs-space-6);
 }
 
 .switch.small {
   width: 26px;
-  height: 16px;
+  height: var(--rs-space-5);
 }
 
 .switch:not([data-disabled]):hover {
@@ -45,26 +45,26 @@
 .thumb {
   position: absolute;
   left: 0;
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
   background: var(--rs-color-foreground-base-emphasis);
   border-radius: var(--rs-radius-full);
-  transform: translateX(2px);
+  transform: translateX(var(--rs-space-1));
   transition: transform 200ms ease-in-out;
   will-change: transform;
 }
 
 /* Small switch thumb sizing */
 .switch.small .thumb {
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
 
 .switch[data-checked] .thumb {
-  transform: translateX(16px);
+  transform: translateX(var(--rs-space-5));
 }
 
 /* Small switch thumb positioning */
 .switch.small[data-checked] .thumb {
-  transform: translateX(12px);
+  transform: translateX(var(--rs-space-4));
 }
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
index 3b892532a..8fac9f0b6 100644
--- a/packages/raystack/components/text-area/text-area.module.css
+++ b/packages/raystack/components/text-area/text-area.module.css
@@ -25,8 +25,8 @@
   display: flex;
   align-items: center;
   margin-left: var(--rs-space-2);
-  width: 12px;
-  height: 12px;
+  width: var(--rs-space-4);
+  height: var(--rs-space-4);
 }
 
 .optional {
@@ -54,7 +54,7 @@
   outline: none;
   height: auto;
   width: 100%;
-  min-height: 64px;
+  min-height: var(--rs-space-13);
   background-color: var(--rs-color-background-base-primary);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   border-radius: var(--rs-radius-2);
diff --git a/packages/raystack/components/text/text.module.css b/packages/raystack/components/text/text.module.css
index 26d4af8f8..461dc61bd 100644
--- a/packages/raystack/components/text/text.module.css
+++ b/packages/raystack/components/text/text.module.css
@@ -62,7 +62,7 @@
   letter-spacing: var(--rs-letter-spacing-regular);
 }
 .text-7 {
-  font-size: 20px;
+  font-size: var(--rs-font-size-t1);
   line-height: var(--rs-line-height-large);
   letter-spacing: var(--rs-letter-spacing-large);
 }
@@ -72,13 +72,13 @@
   letter-spacing: var(--rs-letter-spacing-large);
 }
 .text-9 {
-  font-size: 24px;
-  line-height: 32px;
+  font-size: var(--rs-font-size-t2);
+  line-height: var(--rs-line-height-t2);
   letter-spacing: var(--rs-letter-spacing-large);
 }
 .text-10 {
-  font-size: 28px;
-  line-height: 36px;
+  font-size: var(--rs-font-size-t3);
+  line-height: var(--rs-line-height-t3);
   letter-spacing: var(--rs-letter-spacing-large);
 }
 
diff --git a/packages/raystack/components/tooltip/tooltip.module.css b/packages/raystack/components/tooltip/tooltip.module.css
index 7029ab080..98ec2e079 100644
--- a/packages/raystack/components/tooltip/tooltip.module.css
+++ b/packages/raystack/components/tooltip/tooltip.module.css
@@ -98,54 +98,63 @@
 @keyframes slideUpAndFade {
   from {
     opacity: 0;
-    transform: translateY(2px);
+    transform: translateY(var(--rs-space-1));
   }
 }
 @keyframes slideRightAndFade {
   from {
     opacity: 0;
-    transform: translateX(-2px);
+    transform: translateX(calc(-1 * var(--rs-space-1)));
   }
 }
 
 @keyframes slideDownAndFade {
   from {
     opacity: 0;
-    transform: translateY(-2px);
+    transform: translateY(calc(-1 * var(--rs-space-1)));
   }
 }
 
 @keyframes slideLeftAndFade {
   from {
     opacity: 0;
-    transform: translateX(2px);
+    transform: translateX(var(--rs-space-1));
   }
 }
 
 @keyframes slideDownRightAndFade {
   from {
     opacity: 0;
-    transform: translate(-2px, -2px);
+    transform: translate(
+      calc(-1 * var(--rs-space-1)),
+      calc(-1 * var(--rs-space-1))
+    );
   }
 }
 
 @keyframes slideDownLeftAndFade {
   from {
     opacity: 0;
-    transform: translate(2px, -2px);
+    transform: translate(
+      var(--rs-space-1),
+      calc(-1 * var(--rs-space-1))
+    );
   }
 }
 
 @keyframes slideUpRightAndFade {
   from {
     opacity: 0;
-    transform: translate(-2px, 2px);
+    transform: translate(
+      calc(-1 * var(--rs-space-1)),
+      var(--rs-space-1)
+    );
   }
 }
 
 @keyframes slideUpLeftAndFade {
   from {
     opacity: 0;
-    transform: translate(2px, 2px);
+    transform: translate(var(--rs-space-1), var(--rs-space-1));
   }
 }