diff --git a/packages/css/src/accordionitem/accordionitem.css b/packages/css/src/accordionitem/accordionitem.css
index 8b2035e9..81c1771b 100644
--- a/packages/css/src/accordionitem/accordionitem.css
+++ b/packages/css/src/accordionitem/accordionitem.css
@@ -3,12 +3,12 @@
   border: 1px solid var(--mdGreyColor60);
   color: var(--mdGreyColor);
   font-family: 'Open sans';
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   transition: all 0.2s linear;
 }
 
 .md-accordion-item.md-accordion-item--rounded {
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 .md-accordion-item.md-accordion-item--secondary {
@@ -52,7 +52,7 @@
   padding: 1.5em 1.8em;
   cursor: pointer;
   text-align: left;
-  line-height: 24px;
+  line-height: 1.5rem;
 }
 
 .md-accordion-item__header:focus {
@@ -67,9 +67,9 @@
 
 .md-accordion-item__header .md-accordion-item__header-icon {
   position: relative;
-  width: 12px;
-  height: 12px;
-  min-width: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
+  min-width: 0.75rem;
 }
 .md-accordion-item__header .md-accordion-item__header-icon:before,
 .md-accordion-item__header .md-accordion-item__header-icon:after {
@@ -82,7 +82,7 @@
 .md-accordion-item__header .md-accordion-item__header-icon:before {
   top: 0;
   left: 50%;
-  width: 2px;
+  width: 0.125rem;
   height: 100%;
   margin-left: -1px;
 }
@@ -91,7 +91,7 @@
   top: 50%;
   left: 0;
   width: 100%;
-  height: 2px;
+  height: 0.125rem;
   margin-top: -1px;
 }
 .md-accordion-item__header--expanded .md-accordion-item__header-icon:before {
@@ -102,7 +102,7 @@
 }
 
 .md-accordion-item__header-label {
-  font-size: 20px;
+  font-size: 1.25rem;
   margin-left: 1em;
 }
 .md-accordion-item__header:hover .md-accordion-item__header-label {
@@ -111,26 +111,26 @@
 
 /* CONTENT */
 .md-accordion-item__content {
-  padding: 0 1.8em;
+  padding: 0 1.8rem;
   max-height: 0;
   overflow: hidden;
   transition: all 0.15s linear;
 }
 .md-accordion-item__content--expanded {
   max-height: 5000px;
-  padding: 1em 1.8em 1.5em 1.8em;
+  padding: 1rem 1.8rem 1.5rem 1.8rem;
   transition: all 0.15s linear;
 }
 
 .md-accordion-item__close-button {
   display: flex;
-  gap: 1em;
+  gap: 1rem;
   padding: 0;
   background: none;
   border: 0;
-  margin: 2em 0 0 -0.2em;
+  margin: 2rem 0 0 -0.2rem;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .md-accordion-item__close-button:hover {
@@ -143,8 +143,8 @@
 }
 
 .md-accordion-item__close-button__icon {
-  height: 20px;
-  width: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 /* DISABLED */
diff --git a/packages/css/src/button/button.css b/packages/css/src/button/button.css
index ca2eb712..07f15865 100644
--- a/packages/css/src/button/button.css
+++ b/packages/css/src/button/button.css
@@ -78,11 +78,11 @@
   background-color: #ffffff;
   border: 2px solid var(--mdPrimaryColor);
   color: var(--mdPrimaryColor);
-  padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
+  padding: 0.75rem 1.5rem;
 }
 
 .md-button--small.md-button--secondary {
-  padding: calc(0.4rem - 2px) calc(0.8rem - 2px);
+  padding: 0.5rem 0.75rem;
 }
 
 .md-button--secondary:hover:enabled {
@@ -116,11 +116,11 @@
   border: none;
   border-radius: 0.43rem;
   color: var(--mdPrimaryColor);
-  padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
+  padding: 0.75rem 1.5rem;
 }
 
 .md-button--small.md-button--tertiary {
-  padding: calc(0.4rem - 2px) calc(0.8rem - 2px);
+  padding: 0.5rem 0.75rem;
 }
 
 .md-button--tertiary:hover:enabled {
diff --git a/packages/css/src/chips/chips.css b/packages/css/src/chips/chips.css
index 118050fe..29ffe184 100644
--- a/packages/css/src/chips/chips.css
+++ b/packages/css/src/chips/chips.css
@@ -5,12 +5,12 @@
   outline: 1px solid var(--mdPrimaryColor);
   outline-offset: -1px;
   border: none;
-  border-radius: 10em;
+  border-radius: 10rem;
   color: var(--mdPrimaryColor);
   font-weight: 400;
   font-family: 'Open sans';
   font-size: 1rem;
-  line-height: 22px;
+  line-height: 1.375rem;
   padding: 0.5rem 1rem;
   cursor: pointer;
   text-align: left;
@@ -59,9 +59,9 @@
 
 .md-chip__left-icon {
   display: flex;
-  width: 16px;
-  height: 16px;
-  margin-right: 0.66em;
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.66rem;
 }
 
 .md-chip__label {
@@ -70,7 +70,7 @@
 
 .md-chip__right-icon {
   display: flex;
-  width: 16px;
-  height: 16px;
-  margin-left: 0.8em;
+  width: 1rem;
+  height: 1rem;
+  margin-left: 0.8rem;
 }
diff --git a/packages/css/src/filelist/filelist.css b/packages/css/src/filelist/filelist.css
index a13f0184..732d00b2 100644
--- a/packages/css/src/filelist/filelist.css
+++ b/packages/css/src/filelist/filelist.css
@@ -1,14 +1,14 @@
 .md-filelist {
   display: flex;
   flex-direction: column;
-  gap: 0.5em;
+  gap: 0.5rem;
 }
 
 .md-filelist__file {
   display: flex;
   justify-content: space-between;
   border: 1px solid var(--mdPrimaryColor);
-  padding: 0.8em 1.1em;
+  padding: 0.8rem 1.1rem;
   font-family: 'Open sans';
   background-color: #fff;
   transition: background 0.2s linear;
@@ -21,36 +21,36 @@
 
 .md-filelist__file-label {
   display: flex;
-  gap: 1em;
-  font-size: 16px;
+  gap: 1rem;
+  font-size: 1rem;
 }
 
 .md-filelist__file-icon {
-  width: 32px;
+  width: 2rem;
 }
 
 .md-filelist__file-size {
-  font-size: 14px;
-  margin-top: 0.3em;
+  font-size: 0.875rem;
+  margin-top: 0.3rem;
 }
 
 /* File actions */
 .md-filelist__file-actions {
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: 1rem;
 }
 
 .md-filelist__file-actions-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   background-color: transparent;
-  border-radius: 100px;
+  border-radius: 6.25rem;
   border: 0;
-  padding: 0.2em;
+  padding: 0.2rem;
   cursor: pointer;
   transition: background 0.1s linear;
 }
@@ -61,6 +61,6 @@
 }
 
 .md-filelist__file-action-icon {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }
diff --git a/packages/css/src/formElements/autocomplete/autocomplete.css b/packages/css/src/formElements/autocomplete/autocomplete.css
index b5f2edd4..5dd020aa 100644
--- a/packages/css/src/formElements/autocomplete/autocomplete.css
+++ b/packages/css/src/formElements/autocomplete/autocomplete.css
@@ -4,11 +4,11 @@
 }
 
 .md-autocomplete--medium {
-  max-width: 440px;
+  max-width: 27.5rem;
 }
 
 .md-autocomplete--small {
-  max-width: 260px;
+  max-width: 16.25rem;
 }
 
 .md-autocomplete__container {
@@ -20,11 +20,11 @@
   display: flex;
   align-items: flex-end;
   font-weight: 600;
-  padding-bottom: 0.5em;
+  padding-bottom: 0.5rem;
 }
 
 .md-autocomplete__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-autocomplete__input {
@@ -35,11 +35,11 @@
   color: var(--mdGreyColor);
   box-sizing: border-box;
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1em;
+  padding: 1rem;
   border: 1px solid var(--mdGreyColor60);
   text-align: left;
   cursor: pointer;
@@ -52,7 +52,7 @@
 }
 
 .md-autocomplete--small > .md-autocomplete__input {
-  padding: 0.75em;
+  padding: 0.75rem;
 }
 
 .md-autocomplete--disabled .md-autocomplete__input {
@@ -69,31 +69,31 @@
 .md-autocomplete__input-text {
   display: flex;
   flex-grow: 1;
-  padding-right: 1em;
+  padding-right: 1rem;
 }
 
 .md-autocomplete__input.md-autocomplete__input--has-prefix {
-  padding-left: 2.5em;
+  padding-left: 2.5rem;
 }
 
 .md-autocomplete__input--small.md-autocomplete__input--has-prefix {
-  padding-left: 1.8em;
+  padding-left: 1.8rem;
 }
 
 .md-autocomplete__input__prefix {
   position: absolute;
-  top: 1.3em;
-  left: 1em;
-  height: 16px;
-  width: 16px;
+  top: 1.1rem;
+  left: 1rem;
+  height: 1.25rem;
+  width: 1.25rem;
   display: flex;
   color: var(--mdPrimaryColor);
   z-index: 2;
 }
 
 .md-autocomplete--small > .md-autocomplete__input__prefix {
-  top: 1em;
-  left: 1em;
+  top: 1rem;
+  left: 1rem;
 }
 
 .md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled {
@@ -102,19 +102,19 @@
 
 .md-autocomplete__input-icon {
   position: absolute;
-  top: 1.3em;
-  right: 0.9em;
+  top: 1.3rem;
+  right: 0.9rem;
   display: flex;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   rotate: 90deg;
   color: var(--mdGreyColor);
   z-index: 0;
 }
 
 .md-autocomplete--small > .md-autocomplete__input-icon {
-  top: 1em;
-  right: 1em;
+  top: 1rem;
+  right: 1rem;
 }
 
 .md-autocomplete__help-text {
@@ -124,8 +124,8 @@
 }
 
 .md-autocomplete__help-text--open {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -137,19 +137,19 @@
   z-index: -1;
   opacity: 0;
   transition: max-height 0.5s ease-in-out;
-  width: calc(100% - 4px); /* Full width minus border-width */
+  width: 100%;
 }
 
 .md-autocomplete__dropdown-item {
   display: flex;
   align-items: center;
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
   border: 0;
   background-color: #fff;
   width: 100%;
   text-align: left;
-  padding: 0.9em;
+  padding: 0.9rem;
   transition: background-color 0.15s ease-in-out;
   cursor: pointer;
 }
@@ -173,13 +173,13 @@
 .md-autocomplete__dropdown-item-clear {
   display: flex;
   flex-shrink: 0;
-  height: 12px;
-  width: 12px;
+  height: 0.75rem;
+  width: 0.75rem;
   color: var(--mdPrimaryColor);
 }
 
 .md-autocomplete__dropdown-no-results {
-  padding: 0.9em;
+  padding: 0.9rem;
   background-color: #fff;
   font-style: italic;
 }
@@ -189,14 +189,14 @@
   border-left: 2px solid var(--mdPrimaryColor);
   border-right: 2px solid var(--mdPrimaryColor);
   border-top: 2px solid var(--mdPrimaryColor);
-  padding-bottom: calc(1em - 1px);
+  padding-bottom: calc(1rem - 1px);
 }
 .md-autocomplete--open.md-autocomplete--small .md-autocomplete__input {
-  padding-bottom: calc(0.75em - 1px);
+  padding-bottom: calc(0.75rem - 1px);
 }
 
 .md-autocomplete--open .md-autocomplete__dropdown {
-  max-height: 350px;
+  max-height: 21.875rem;
   overflow-y: auto;
   opacity: 1;
   transition: max-height 0.5s ease-in-out;
@@ -223,5 +223,5 @@
 /* Error text */
 .md-autocomplete__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
diff --git a/packages/css/src/formElements/checkbox/checkbox.css b/packages/css/src/formElements/checkbox/checkbox.css
index a3f496f7..75442e2d 100644
--- a/packages/css/src/formElements/checkbox/checkbox.css
+++ b/packages/css/src/formElements/checkbox/checkbox.css
@@ -21,9 +21,9 @@
   border: 1px solid var(--mdGreyColor60);
   content: '';
   cursor: pointer;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
 }
 
 .md-checkbox:focus-within .md-checkbox__label::before,
@@ -39,9 +39,9 @@
 .md-checkbox__input:checked + .md-checkbox__label::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iZTk2NWRkN2EtN2NlNS00MTc0LThjMjEtY2UwNjIzYmFmNTJhIiBkYXRhLW5hbWU9ImNoZWNrbWFyay1ncmVlbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTMgMTAuMDIiPjx0aXRsZT5jaGVja21hcmstZ3JlZW48L3RpdGxlPjxwYXRoIGQ9Ik0xMS4xNCwwLDQuODMsNi4zMWwtMy0zTDAsNS4xOSw0LjgzLDEwLDEzLDEuODZaIiBmaWxsPSIjMDA2MTVjIiAvPjwvc3ZnPg==);
   background-repeat: no-repeat;
-  background-position-y: 2px;
-  background-position-x: 1px;
-  background-size: 18px;
+  background-position-y: 0.125rem;
+  background-position-x: 0.0625rem;
+  background-size: 1.125rem;
 }
 
 .md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
@@ -63,9 +63,9 @@
 
 .md-checkbox__labelText {
   font-size: 1rem;
-  left: 8px;
+  left: 0.5rem;
   position: relative;
-  padding-right: 8px;
+  padding-right: 0.5rem;
 }
 
 .md-checkbox:not(.md-checkbox--disabled):hover .md-checkbox__labelText {
diff --git a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css
index dbfaf14c..85046f8d 100644
--- a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css
+++ b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css
@@ -1,6 +1,6 @@
 .md-checkboxgroup {
   font-family: 'Open sans';
-  font-size: 16px;
+  font-size: 1rem;
   border: none;
   padding: 0;
 }
@@ -12,7 +12,7 @@
 }
 
 .md-checkboxgroup .md-checkboxgroup__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-checkboxgroup .md-checkboxgroup__help-text {
@@ -22,7 +22,7 @@
 }
 
 .md-checkboxgroup .md-checkboxgroup__help-text--open {
-  padding-top: 0.5em;
+  padding-top: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -30,8 +30,8 @@
 .md-checkboxgroup .md-checkboxgroup__options {
   display: flex;
   flex-direction: row;
-  margin: 0.7em 0;
-  gap: 1em;
+  margin: 0.7rem 0;
+  gap: 1rem;
 }
 
 .md-checkboxgroup .md-checkboxgroup__options--vertical {
@@ -45,5 +45,5 @@
 
 .md-checkboxgroup__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
diff --git a/packages/css/src/formElements/fileupload/fileupload.css b/packages/css/src/formElements/fileupload/fileupload.css
index 12251a7c..924ff1b3 100644
--- a/packages/css/src/formElements/fileupload/fileupload.css
+++ b/packages/css/src/formElements/fileupload/fileupload.css
@@ -6,9 +6,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2em;
+  padding: 2rem;
   border: 1px dashed var(--mdGreyColor80);
-  margin-bottom: 4em;
+  margin-bottom: 4rem;
   background-color: #fff;
   transition: background 0.2s linear;
 }
@@ -27,27 +27,27 @@
 }
 
 .md-fileupload__droparea-icon {
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   color: #000;
-  margin-bottom: 1.5em;
+  margin-bottom: 1.5rem;
 }
 
 .md-fileupload__droparea-content {
   font-family: 'Open sans';
-  font-size: 16px;
+  font-size: 1rem;
 }
 .md-fileupload__droparea-content--count {
   text-align: center;
-  margin: 0.5em 0;
-  font-size: 0.888em;
+  margin: 0.5rem 0;
+  font-size: 0.888rem;
   font-style: italic;
 }
 
 .md-fileupload__droparea-content button {
   background: none;
   border: 0;
-  font-size: 16px;
+  font-size: 1rem;
   color: var(--mdPrimaryColor);
   text-decoration: underline;
   padding: 0;
@@ -61,8 +61,8 @@
 
 .md-fileupload__files-wrapper {
   width: 100%;
-  margin: 1.5em 0 0 0;
-  padding: 1.5em 0 0 0;
+  margin: 1.5rem 0 0 0;
+  padding: 1.5rem 0 0 0;
   border-top: 1px solid #000;
 }
 
@@ -72,9 +72,9 @@
 }
 
 .md-fileupload__actions > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-fileupload__button {
-  margin-left: 4px !important;
+  margin-left: 0.25rem !important;
 }
diff --git a/packages/css/src/formElements/input/input.css b/packages/css/src/formElements/input/input.css
index 57ce57b0..088acee0 100644
--- a/packages/css/src/formElements/input/input.css
+++ b/packages/css/src/formElements/input/input.css
@@ -1,6 +1,6 @@
 .md-input__outer-wrapper {
   font-family: 'Open sans';
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .md-input__outer-wrapper--small {
@@ -8,7 +8,7 @@
 }
 
 .md-input {
-  padding: 1em 2em 1em 1em;
+  padding: 1rem 2rem 1rem 1rem;
   max-width: 100%;
   width: 100%;
   background-color: #fff;
@@ -16,12 +16,12 @@
   border: 1px solid var(--mdGreyColor60);
   margin: 1px;
   color: var(--mdGreyColor);
-  font-size: 16px;
+  font-size: 1rem;
   box-sizing: border-box;
 }
 
 .md-input--small {
-  padding: 0.5em 2em 0.5em 1em;
+  padding: 0.5rem 2rem 0.5rem 1rem;
 }
 
 .md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):active,
@@ -52,24 +52,24 @@
 }
 
 .md-input.md-input--has-suffix {
-  padding-right: 5em;
+  padding-right: 5rem;
 }
 
 .md-input--small.md-input--has-suffix {
-  padding-right: 3.5em;
+  padding-right: 3.5rem;
 }
 
 .md-input.md-input--has-prefix {
-  padding-left: 2.5em;
+  padding-left: 2.5rem;
 }
 
 .md-input--small.md-input--has-prefix {
-  padding-left: 1.8em;
+  padding-left: 1.8rem;
 }
 
 .md-input__wrapper {
   position: relative;
-  margin: 0.7em 0 0.3em 0;
+  margin: 0.7rem 0 0.3rem 0;
 }
 
 .md-input__wrapper.md-input__wrapper--small {
@@ -83,7 +83,7 @@
 }
 
 .md-input__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-input__help-button {
@@ -93,7 +93,7 @@
 
 .md-input__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
 
 .md-input__help-text {
@@ -103,17 +103,17 @@
 }
 
 .md-input__help-text--open {
-  padding-top: 0.5em;
+  padding-top: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
 
 .md-input__prefix {
   position: absolute;
-  top: 1.1em;
-  left: 1em;
-  height: 16px;
-  width: 16px;
+  top: 1.1rem;
+  left: 1rem;
+  height: 1.25rem;
+  width: 1.25rem;
   display: flex;
   color: var(--mdPrimaryColor);
 }
@@ -123,35 +123,35 @@
 }
 
 .md-input__wrapper.md-input__wrapper--small .md-input__prefix {
-  top: 0.65em;
-  left: 0.5em;
+  top: 0.65rem;
+  left: 0.5rem;
 }
 
 .md-input__suffix {
   position: absolute;
-  top: 1.05em;
-  right: 0.9em;
+  top: 1.05rem;
+  right: 0.9rem;
   display: flex;
 }
 
 .md-input__suffix > * + * {
-  margin-left: 0.5em;
+  margin-left: 0.5rem;
 }
 
 .md-input__error-icon {
-  width: 20px;
-  height: 20px;
-  margin-left: 0.5em;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: 0.5rem;
   color: var(--mdErrorColor);
 }
 
 .md-input__wrapper.md-input__wrapper--small .md-input__suffix {
-  top: 0.55em;
-  right: 0.7em;
+  top: 0.55rem;
+  right: 0.7rem;
 }
 
 .md-input__wrapper.md-input__wrapper--small .md-input__suffix > * + * {
-  margin-left: 0.3em;
+  margin-left: 0.3rem;
 }
 
 /* Placeholder "hacks" */
diff --git a/packages/css/src/formElements/multiautocomplete/multiautocomplete.css b/packages/css/src/formElements/multiautocomplete/multiautocomplete.css
index fdf0ab64..b80a0b2a 100644
--- a/packages/css/src/formElements/multiautocomplete/multiautocomplete.css
+++ b/packages/css/src/formElements/multiautocomplete/multiautocomplete.css
@@ -20,11 +20,11 @@
   display: flex;
   align-items: flex-end;
   font-weight: 600;
-  padding-bottom: 0.5em;
+  padding-bottom: 0.5rem;
 }
 
 .md-multiautocomplete__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-multiautocomplete__input {
@@ -35,11 +35,11 @@
   color: var(--mdGreyColor);
   box-sizing: border-box;
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1em;
+  padding: 1rem;
   border: 1px solid var(--mdGreyColor60);
   text-align: left;
   cursor: pointer;
@@ -52,7 +52,7 @@
 }
 
 .md-multiautocomplete--small > .md-multiautocomplete__input {
-  padding: 0.75em;
+  padding: 0.75rem;
 }
 
 .md-multiautocomplete--disabled .md-multiautocomplete__input {
@@ -69,31 +69,31 @@
 .md-multiautocomplete__input-text {
   display: flex;
   flex-grow: 1;
-  padding-right: 1em;
+  padding-right: 1rem;
 }
 
 .md-multiautocomplete__input.md-multiautocomplete__input--has-prefix {
-  padding-left: 2.5em;
+  padding-left: 2.5rem;
 }
 
 .md-multiautocomplete__input--small.md-multiautocomplete__input--has-prefix {
-  padding-left: 1.8em;
+  padding-left: 1.8rem;
 }
 
 .md-multiautocomplete__input__prefix {
   position: absolute;
-  top: 1.3em;
-  left: 1em;
-  height: 16px;
-  width: 16px;
+  top: 1.1rem;
+  left: 1rem;
+  height: 1.25rem;
+  width: 1.25rem;
   display: flex;
   color: var(--mdPrimaryColor);
   z-index: 2;
 }
 
 .md-multiautocomplete--small > .md-multiautocomplete__input__prefix {
-  top: 1em;
-  left: 1em;
+  top: 1rem;
+  left: 1rem;
 }
 
 .md-multiautocomplete__input__prefix.md-multiautocomplete__input__prefix--disabled {
@@ -102,23 +102,23 @@
 
 .md-multiautocomplete__input-icon {
   position: absolute;
-  top: 1.3em;
+  top: 1.3rem;
   right: 0.9em;
   display: flex;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   rotate: 90deg;
   color: var(--mdGreyColor);
   z-index: 0;
 }
 
 .md-multiautocomplete--small > .md-multiautocomplete__input-icon {
-  top: 1em;
-  right: 1em;
+  top: 1rem;
+  right: 1rem;
 }
 
 .md-multiautocomplete__button-text {
-  padding-right: 0.5em;
+  padding-right: 0.5rem;
   width: 90%;
   overflow: hidden;
   white-space: nowrap;
@@ -127,11 +127,11 @@
 
 .md-multiautocomplete__button-hasmultiple {
   position: absolute;
-  top: 1.5em;
-  right: 4.5em;
+  top: 1.5rem;
+  right: 4.5rem;
   display: flex;
   z-index: 0;
-  font-size: 0.8em;
+  font-size: 0.8rem;
 }
 
 .md-multiautocomplete__help-text {
@@ -141,8 +141,8 @@
 }
 
 .md-multiautocomplete__help-text--open {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -154,7 +154,7 @@
   z-index: -1;
   opacity: 0;
   transition: max-height 0.5s ease-in-out;
-  width: calc(100% - 4px); /* Full width minus border-width */
+  width: 100%;
 }
 
 .md-multiautocomplete__dropdown-item {
@@ -162,11 +162,11 @@
   align-items: center;
   font-family: 'Open sans';
   border: 0;
-  font-size: 1em;
+  font-size: 1rem;
   background-color: #fff;
   width: 100%;
   text-align: left;
-  padding: 0.9em;
+  padding: 0.9rem;
   transition: background-color 0.15s ease-in-out;
   cursor: pointer;
 }
@@ -190,22 +190,22 @@
 .md-multiautocomplete__dropdown-item-clear {
   display: flex;
   flex-shrink: 0;
-  height: 12px;
-  width: 12px;
+  height: 0.75rem;
+  width: 0.75rem;
   color: var(--mdPrimaryColor);
 }
 
 .md-multiautocomplete__dropdown-no-results {
-  padding: 0.9em;
+  padding: 0.9rem;
   background-color: #fff;
   font-style: italic;
 }
 
 .md-multiautocomplete__chips {
   display: flex;
-  margin-top: 0.7em;
+  margin-top: 0.7rem;
   flex-wrap: wrap;
-  gap: 0.5em;
+  gap: 0.5rem;
 }
 
 /* Open state */
@@ -213,10 +213,10 @@
   border-left: 2px solid var(--mdPrimaryColor);
   border-right: 2px solid var(--mdPrimaryColor);
   border-top: 2px solid var(--mdPrimaryColor);
-  padding-bottom: calc(1em - 1px);
+  padding-bottom: calc(1rem - 1px);
 }
 .md-multiautocomplete--open.md-multiautocomplete--small .md-multiautocomplete__input {
-  padding-bottom: calc(0.75em - 1px);
+  padding-bottom: calc(0.75rem - 1px);
 }
 
 .md-multiautocomplete--open .md-multiautocomplete__dropdown {
@@ -247,5 +247,5 @@
 /* Error text */
 .md-multiautocomplete__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
diff --git a/packages/css/src/formElements/multiselect/multiselect.css b/packages/css/src/formElements/multiselect/multiselect.css
index aecc28cd..b71977d7 100644
--- a/packages/css/src/formElements/multiselect/multiselect.css
+++ b/packages/css/src/formElements/multiselect/multiselect.css
@@ -15,22 +15,22 @@
   display: flex;
   align-items: flex-end;
   font-weight: 600;
-  padding-bottom: 0.5em;
+  padding-bottom: 0.5rem;
 }
 
 .md-multiselect__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-multiselect__button {
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff;
-  padding: 1em;
+  padding: 1rem;
   border: 1px solid var(--mdGreyColor60);
   color: var(--mdGreyColor);
   text-align: left;
@@ -38,7 +38,7 @@
 }
 
 .md-multiselect__button.md-multiselect--small {
-  padding: 0.75em;
+  padding: 0.75rem;
 }
 
 .md-multiselect--disabled .md-multiselect__button {
@@ -55,13 +55,13 @@
   .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
 .md-multiselect:not(.md-multiselect--disabled)
   .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
-  padding: calc(0.75em - 1px);
+  padding: calc(0.75rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
 
 .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus,
 .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
-  padding: calc(1em - 1px);
+  padding: calc(1rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
 
@@ -70,7 +70,7 @@
 }
 
 .md-multiselect__button-text {
-  padding-right: 0.5em;
+  padding-right: 0.5rem;
   width: 90%;
   overflow: hidden;
   white-space: nowrap;
@@ -80,15 +80,15 @@
 .md-multiselect__button-icon {
   display: flex;
   flex-shrink: 0;
-  width: 15px;
-  height: 15px;
+  width: 0.9375rem;
+  height: 0.9375rem;
   rotate: 90deg;
   color: var(--mdGreyColor);
 }
 
 .md-multiselect__button-hasmultiple {
-  margin-right: 1em;
-  font-size: 0.8em;
+  margin-right: 1rem;
+  font-size: 0.8rem;
 }
 
 .md-multiselect__help-text {
@@ -98,8 +98,8 @@
 }
 
 .md-multiselect__help-text--open {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -111,7 +111,7 @@
 .md-multiselect__dropdown {
   position: absolute;
   z-index: -1;
-  width: calc(100% - 4px);
+  width: 100%;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
@@ -122,7 +122,7 @@
   display: flex;
   align-items: center;
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
   border: 0;
   background-color: #fff;
   text-align: left;
@@ -140,7 +140,7 @@
   display: flex;
   flex-shrink: 0;
   flex-grow: 1;
-  padding: 0.75em;
+  padding: 0.75rem;
 }
 
 .md-multiselect__dropdown-item .md-checkbox .md-checkbox__label .md-checkbox__labelText {
@@ -149,10 +149,10 @@
 
 .md-multiselect__dropdown-item .md-checkbox__labelText {
   font-family: 'Open Sans';
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 1.375rem;
   color: var(--mdGreyColor);
 }
 
@@ -179,7 +179,7 @@
 .md-multiselect__dropdown-item-text {
   display: flex;
   flex-grow: 1;
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-multiselect__dropdown-item-checkbox {
@@ -187,8 +187,8 @@
   border: 1px solid var(--mdGreyColor60);
   content: '';
   cursor: pointer;
-  height: 20px;
-  width: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 .md-multiselect__dropdown-item--selected .md-multiselect__dropdown-item-checkbox {
@@ -196,7 +196,7 @@
   background-repeat: no-repeat;
   background-position-y: 2px;
   background-position-x: 1px;
-  background-size: 18px;
+  background-size: 1.125rem;
 }
 
 .md-multiselect__error {
@@ -206,9 +206,9 @@
 
 .md-multiselect__chips {
   display: flex;
-  margin-top: 0.7em;
+  margin-top: 0.7rem;
   flex-wrap: wrap;
-  gap: 0.5em;
+  gap: 0.5rem;
 }
 
 /* Open state */
@@ -216,27 +216,27 @@
   border-top: 2px solid var(--mdPrimaryColor80);
   border-right: 2px solid var(--mdPrimaryColor80);
   border-left: 2px solid var(--mdPrimaryColor80);
-  padding: calc(1em - 1px);
-  padding-bottom: 1em;
+  padding: calc(1rem - 1px);
+  padding-bottom: 1rem;
 }
 
 .md-multiselect--open .md-multiselect__button.md-multiselect--small {
   border-top: 2px solid var(--mdPrimaryColor80);
   border-right: 2px solid var(--mdPrimaryColor80);
   border-left: 2px solid var(--mdPrimaryColor80);
-  padding: calc(0.75em - 1px);
-  padding-bottom: 0.75em;
+  padding: calc(0.75rem - 1px);
+  padding-bottom: 0.75rem;
 }
 
 .md-multiselect__button:not(.md-multiselect__button--open):focus,
 .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
-  padding: calc(1em - 1px);
+  padding: calc(1rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
 
 .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
 .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
-  padding: calc(0.75em - 1px);
+  padding: calc(0.75rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
 
diff --git a/packages/css/src/formElements/radiobutton/radiobutton.css b/packages/css/src/formElements/radiobutton/radiobutton.css
index bb871273..2c50989a 100644
--- a/packages/css/src/formElements/radiobutton/radiobutton.css
+++ b/packages/css/src/formElements/radiobutton/radiobutton.css
@@ -1,6 +1,6 @@
 .md-radiobutton {
   font-family: 'Open sans';
-  font-size: 16px;
+  font-size: 1rem;
   border: none;
   padding: 0;
 }
@@ -48,8 +48,8 @@
 }
 
 .md-radiobutton__selected-dot {
-  width: 0.6em;
-  height: 0.6em;
+  width: 0.6rem;
+  height: 0.6rem;
   display: block;
   background-color: var(--mdPrimaryColor);
   border-radius: 50%;
diff --git a/packages/css/src/formElements/radiogroup/radiogroup.css b/packages/css/src/formElements/radiogroup/radiogroup.css
index fcf5bfd1..9596dfd2 100644
--- a/packages/css/src/formElements/radiogroup/radiogroup.css
+++ b/packages/css/src/formElements/radiogroup/radiogroup.css
@@ -1,6 +1,6 @@
 .md-radiogroup {
   font-family: 'Open sans';
-  font-size: 16px;
+  font-size: 1rem;
   border: none;
   padding: 0;
 }
@@ -12,7 +12,7 @@
 }
 
 .md-radiogroup__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-radiogroup__help-text {
@@ -22,7 +22,7 @@
 }
 
 .md-radiogroup__help-text--open {
-  padding-top: 0.5em;
+  padding-top: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -30,8 +30,8 @@
 .md-radiogroup__options {
   display: flex;
   flex-direction: row;
-  gap: 1em;
-  margin: 0.7em 0;
+  gap: 1rem;
+  margin: 0.7rem 0;
 }
 
 .md-radiogroup__options--vertical {
@@ -47,15 +47,15 @@
 }
 
 .md-radiogroup__options--vertical .md-radiogroup-option {
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 .md-radiogroup__options--vertical .md-radiogroup-option:last-child {
-  margin-bottom: 0.2em;
+  margin-bottom: 0.2rem;
 }
 
 .md-radiogroup__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
 
 /* Disabled */
@@ -77,7 +77,7 @@
     flex-wrap: wrap;
   }
   .md-radiogroup-option {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.5rem;
   }
   .md-radiogroup__help-text {
     width: 100%;
diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css
index bc4fc6a2..37d2b47b 100644
--- a/packages/css/src/formElements/select/select.css
+++ b/packages/css/src/formElements/select/select.css
@@ -19,22 +19,22 @@
   display: flex;
   align-items: flex-end;
   font-weight: 600;
-  padding-bottom: 0.5em;
+  padding-bottom: 0.5rem;
 }
 
 .md-select__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-select__button {
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff;
-  padding: 1em;
+  padding: 1rem;
   border: 1px solid var(--mdGreyColor60);
   color: var(--mdGreyColor);
   text-align: left;
@@ -46,15 +46,15 @@
 }
 
 .md-select__button.md-select__button--small {
-  padding: 0.75em;
+  padding: 0.75rem;
 }
 
 .md-select__button:not(.md-select__button--open):focus.md-select__button--small {
-  padding: calc(0.75em - 1px);
+  padding: calc(0.75rem - 1px);
 }
 .md-select__button.md-select__button--open.md-select__button--small {
-  padding: calc(0.75em - 1px);
-  padding-bottom: 0.75em;
+  padding: calc(0.75rem - 1px);
+  padding-bottom: 0.75rem;
 }
 
 .md-select--disabled .md-select__button {
@@ -70,7 +70,7 @@
 
 .md-select__button:not(.md-select__button--open):focus,
 .md-select__button:not(.md-select__button--open):focus-within {
-  padding: calc(1em - 1px);
+  padding: calc(1rem - 1px);
   border: 2px solid var(--mdPrimaryColor);
 }
 
@@ -82,15 +82,15 @@
 .md-select__button-text {
   display: flex;
   flex-grow: 1;
-  padding-right: 1em;
-  min-height: 1.375em;
+  padding-right: 1rem;
+  min-height: 1.375rem;
 }
 
 .md-select__button-icon {
   display: flex;
   flex-shrink: 0;
-  width: 15px;
-  height: 15px;
+  width: 0.9375rem;
+  height: 0.9375rem;
   rotate: 90deg;
   color: var(--mdGreyColor);
 }
@@ -102,8 +102,8 @@
 }
 
 .md-select__help-text--open {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -115,7 +115,7 @@
   z-index: -1;
   opacity: 0;
   transition: max-height 0.5s ease-in-out;
-  width: calc(100% - 4px); /* Full width minus border-width */
+  width: 100%;
 }
 
 .md-select__dropdown-item {
@@ -124,10 +124,10 @@
   font-family: 'Open sans';
   border: 0;
   background-color: #fff;
-  font-size: 1em;
+  font-size: 1rem;
   width: 100%;
   text-align: left;
-  padding: 0.9em;
+  padding: 0.9rem;
   transition: background-color 0.15s ease-in-out;
   cursor: pointer;
 }
@@ -151,8 +151,8 @@
 .md-select__dropdown-item-clear {
   display: flex;
   flex-shrink: 0;
-  height: 12px;
-  width: 12px;
+  height: 0.75rem;
+  width: 0.75rem;
   color: var(--mdPrimaryColor);
 }
 
@@ -164,8 +164,8 @@
 }
 
 .md-select__button--open {
-  padding: calc(1em - 1px);
-  padding-bottom: 1em;
+  padding: calc(1rem - 1px);
+  padding-bottom: 1rem;
 }
 
 .md-select--open .md-select__dropdown {
@@ -190,5 +190,5 @@
 /* Error text */
 .md-select__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
diff --git a/packages/css/src/formElements/textarea/textarea.css b/packages/css/src/formElements/textarea/textarea.css
index 1e351369..c2570dd7 100644
--- a/packages/css/src/formElements/textarea/textarea.css
+++ b/packages/css/src/formElements/textarea/textarea.css
@@ -1,10 +1,10 @@
 .md-textarea__outer-wrapper {
   font-family: 'Open sans';
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .md-textarea {
-  padding: 1em 2em 1em 1em;
+  padding: 1rem 2rem 1rem 1rem;
   font-family: 'Open sans';
   max-width: 100%;
   width: 100%;
@@ -13,7 +13,7 @@
   border: 1px solid var(--mdGreyColor60);
   margin: 1px;
   color: var(--mdGreyColor);
-  font-size: 16px;
+  font-size: 1rem;
   box-sizing: border-box;
 }
 
@@ -44,7 +44,7 @@
 }
 
 .md-textarea__wrapper {
-  margin: 0.7em 0 0.3em 0;
+  margin: 0.7rem 0 0.3rem 0;
 }
 
 .md-textarea__label {
@@ -54,7 +54,7 @@
 }
 
 .md-textarea__label > * + * {
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .md-textarea__help-button {
@@ -64,7 +64,7 @@
 
 .md-textarea__error {
   color: var(--mdErrorColor);
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
 
 .md-textarea__help-text {
@@ -74,7 +74,7 @@
 }
 
 .md-textarea__help-text--open {
-  padding-top: 0.5em;
+  padding-top: 0.5rem;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
diff --git a/packages/css/src/help/help.css b/packages/css/src/help/help.css
index 26daf83b..de6c54b2 100644
--- a/packages/css/src/help/help.css
+++ b/packages/css/src/help/help.css
@@ -13,9 +13,8 @@
 .md-helpbutton--expanded:not(.md-helpbutton--noarrow):after {
   content: '';
   position: absolute;
-  left: 0.3em;
-  /* right: 0; */
-  bottom: -0.65em;
+  left: 0.3rem;
+  bottom: -0.65rem;
   margin: 0 auto;
   width: 0;
   height: 0;
@@ -34,8 +33,8 @@
 }
 
 .md-helpbutton__icon {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .md-helpbutton--expanded .md-helpbutton__icon,
@@ -47,10 +46,10 @@
 /* HELP TEXT */
 .md-helptext {
   font-family: 'Open sans';
-  font-size: 0.88em;
+  font-size: 0.88rem;
   background-color: var(--mdPrimaryColor);
   color: #fff;
-  padding: 1.7em;
-  border-radius: 0.57em;
+  padding: 1.7rem;
+  border-radius: 0.57rem;
   max-width: 100%;
 }
diff --git a/packages/css/src/iconButton/iconButton.css b/packages/css/src/iconButton/iconButton.css
index 21d6c9ca..4c6a6b5b 100644
--- a/packages/css/src/iconButton/iconButton.css
+++ b/packages/css/src/iconButton/iconButton.css
@@ -2,8 +2,8 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   justify-content: center;
   background-color: var(--mdPrimaryColor);
   color: #ffffff;
@@ -14,8 +14,8 @@
 
 .md-icon-button__icon {
   margin-top: -1px;
-  height: 20px;
-  width: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
   flex-shrink: 0;
 }
 
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
index cf4f524e..c91ef897 100644
--- a/packages/css/src/index.css
+++ b/packages/css/src/index.css
@@ -28,6 +28,15 @@
 @import './formElements/fileupload/fileupload.css';
 @import './utils.css';
 
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
 button {
   font-family: inherit;
   color: #000;
diff --git a/packages/css/src/infoTag/infoTag.css b/packages/css/src/infoTag/infoTag.css
index 0c8db339..05daaf24 100644
--- a/packages/css/src/infoTag/infoTag.css
+++ b/packages/css/src/infoTag/infoTag.css
@@ -6,8 +6,8 @@
   z-index: 2;
   background-color: var(--mdPrimaryColor20);
   color: var(--mdGreyColor);
-  padding: 4px 12px 4px 12px;
-  border-radius: 4px;
+  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
+  border-radius: 0.25rem;
   font-family: 'Open Sans';
   text-align: left;
   white-space: nowrap;
@@ -53,24 +53,24 @@
   overflow: hidden;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
 }
 .md-info-tag:hover .md-info-tag__label {
   max-width: 100%;
-  padding-right: 16px;
+  padding-right: 1rem;
   transition: max-width 0.3s ease-in;
   white-space: nowrap;
 }
 
 .md-info-tag__label--show {
   max-width: 100%;
-  padding-right: 16px;
+  padding-right: 1rem;
   transition: max-width 0.3s ease-in;
   white-space: nowrap;
 }
 
 .md-info-tag__icon {
-  height: 20px;
-  width: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
 }
diff --git a/packages/css/src/link/link.css b/packages/css/src/link/link.css
index be20baa0..f16bd30d 100644
--- a/packages/css/src/link/link.css
+++ b/packages/css/src/link/link.css
@@ -5,7 +5,7 @@
   cursor: pointer;
   font-family: 'Open sans';
   font-weight: 500;
-  font-size: 16px;
+  font-size: 1rem;
   text-decoration: underline;
 }
 
diff --git a/packages/css/src/modal/modal.css b/packages/css/src/modal/modal.css
index 41e50a04..ebfa499a 100644
--- a/packages/css/src/modal/modal.css
+++ b/packages/css/src/modal/modal.css
@@ -32,7 +32,7 @@
 }
 
 .md-modal__inner-wrapper {
-  padding: 0 0 2em 2em;
+  padding: 0 0 2em 2rem;
   background-color: #fff;
   min-width: 325px;
   max-width: 80%;
@@ -48,19 +48,19 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding-top: 1em;
-  font-size: 1.43em;
+  padding-top: 1rem;
+  font-size: 1.43rem;
 }
 
 .md-modal__header-content {
   display: flex;
   align-items: center;
-  gap: 0.5em;
+  gap: 0.5rem;
 }
 
 .md-modal__close-button {
-  padding-right: 2em;
-  padding-left: 2em;
+  padding-right: 2rem;
+  padding-left: 2rem;
   background: transparent;
   border: 0;
   border-radius: 0;
@@ -68,10 +68,10 @@
 }
 
 .md-modal__close-button-icon {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
 .md-modal__content-inner {
-  padding-right: 2em;
+  padding-right: 2rem;
 }
diff --git a/packages/css/src/stepper/stepper.css b/packages/css/src/stepper/stepper.css
index effba842..fb94c91f 100644
--- a/packages/css/src/stepper/stepper.css
+++ b/packages/css/src/stepper/stepper.css
@@ -1,28 +1,28 @@
 .md-stepper__stepper-container {
-  padding-top: 40px;
+  padding-top: 2.5rem;
 }
 
 .md-stepper__stepper-container .md-stepper__stepper-list {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 2rem;
 }
 
 .md-stepper__stepper-container .md-stepper__stepper-list .md-stepper__stepper-list-item .md-stepper__step-title {
   display: flex;
   flex-direction: row;
-  gap: 16px;
+  gap: 1rem;
 }
 .md-stepper__stepper-container .md-stepper__stepper-list .md-stepper__stepper-list-item .md-stepper__step-title h4 {
   font-family: 'SofiaPro-Regular', 'Sofia Pro', 'Open Sans', 'sans-serif' !important;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0em;
+  line-height: 1.5rem;
+  letter-spacing: 0rem;
   text-align: left;
   margin: 0;
 
-  height: 40px;
+  height: 2.5rem;
 
   display: flex;
   align-items: center;
@@ -48,8 +48,8 @@
   .md-stepper__stepper-list-item
   .md-stepper__step-title
   .md-stepper__step-title-badge-outer-border {
-  width: 36px;
-  height: 36px;
+  width: 2.25rem;
+  height: 2.25rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -71,13 +71,13 @@
   .md-stepper__step-title-badge {
   border-radius: 50%;
   font-family: Open Sans;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 1.375rem;
   letter-spacing: 0em;
   text-align: left;
-  width: 28px;
-  height: 28px;
+  width: 1.75rem;
+  height: 1.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -122,12 +122,12 @@
   .md-stepper__stepper-list-item
   .md-stepper__step-content-container
   .md-stepper__step-content-sideline {
-  width: 2px;
+  width: 0.125rem;
   height: auto;
   background-color: var(--mdPrimaryColor);
-  margin-left: 17px;
-  margin-right: 17px;
-  margin-top: 8px;
+  margin-left: 1.0625rem;
+  margin-right: 1.0625rem;
+  margin-top: 0.5rem;
 }
 
 .md-stepper__stepper-container
@@ -143,9 +143,9 @@
   .md-stepper__stepper-list-item
   .md-stepper__step-content-container
   .md-stepper__step-content-children {
-  padding-left: 16px;
-  padding-top: 16px;
-  min-height: 24px;
+  padding-left: 1rem;
+  padding-top: 1rem;
+  min-height: 1.5rem;
 }
 .md-stepper__stepper-container
   .md-stepper__stepper-list
diff --git a/packages/css/src/tabs/tabs.css b/packages/css/src/tabs/tabs.css
index 88eddc89..87727f54 100644
--- a/packages/css/src/tabs/tabs.css
+++ b/packages/css/src/tabs/tabs.css
@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: 24px;
+  gap: 1.5rem;
   padding-inline-start: 0px;
 }
 
@@ -25,7 +25,7 @@
 
   font-size: 1em;
   font-weight: 400;
-  padding: 13px 24px 12px 24px;
+  padding: 0.8125rem 1.5rem 0.75rem 1.5rem;
   border: 0;
   background-color: transparent;
   border-bottom: 1px solid var(--mdGreyColor80);
@@ -49,7 +49,7 @@
 
 .md-tabs-container ul li .md-tabs-button.md-tabs-button--selected {
   font-weight: 600;
-  padding: 13px 24px 9px 24px;
+  padding: 0.8125rem 1.5rem 0.5625rem 1.5rem;
   border-bottom: 4px solid var(--mdPrimaryColor80);
 }
 .md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):hover {
diff --git a/packages/css/src/tile/tile.css b/packages/css/src/tile/tile.css
index 752eb3b5..8b0f44f5 100644
--- a/packages/css/src/tile/tile.css
+++ b/packages/css/src/tile/tile.css
@@ -1,6 +1,6 @@
 /* HORIZONTAL TILES */
 .md-tile {
-  padding: 24px;
+  padding: 1.5rem;
   border: 1px solid var(--mdGreyColor60);
   background-color: var(--mdPrimaryColor10);
   color: var(--mdGreyColor);
@@ -10,24 +10,24 @@
   text-decoration: none;
   font-family: 'Open sans';
   box-sizing: border-box;
-  gap: 1.5em;
+  gap: 1.5rem;
   text-align: start;
-  width: 440px;
-  min-width: 440px;
+  width: 27.5rem;
+  min-width: 27.5rem;
   max-width: 100%;
   transition: all 0.15s ease-in-out;
 }
 
 .md-tile--medium {
-  width: 424px;
-  min-width: 424px;
+  width: 26.5rem;
+  min-width: 26.5rem;
 }
 
 .md-tile--small {
-  width: 320px;
-  min-width: 320px;
-  gap: 1em;
-  padding: 16px;
+  width: 20rem;
+  min-width: 20rem;
+  gap: 1rem;
+  padding: 1rem;
 }
 
 .md-tile--fullWidth {
@@ -74,9 +74,9 @@
 }
 
 .md-tile__content-icon {
-  height: 64px;
-  width: 64px;
-  margin-right: 1em;
+  height: 4rem;
+  width: 4rem;
+  margin-right: 1rem;
   color: var(--mdPrimaryColor80);
 }
 
@@ -85,14 +85,14 @@
 }
 
 .md-tile__content-heading {
-  font-size: 20px;
+  font-size: 1.25rem;
   align-items: flex-start;
   display: flex;
 }
 
 .md-tile__content-description {
-  margin-top: 1em;
-  font-size: 16px;
+  margin-top: 1rem;
+  font-size: 1rem;
 }
 
 .md-tile__arrow {
@@ -106,7 +106,7 @@
 /* VERTICAL TILES */
 .md-tile-vertical {
   display: flex;
-  width: 190px;
+  width: 11.875rem;
   box-sizing: border-box;
   flex-direction: row;
   text-align: center;
@@ -125,11 +125,11 @@
 }
 
 .md-tile-vertical--small {
-  width: 178px;
+  width: 11.125rem;
 }
 
 .md-tile-vertical--large {
-  width: 238px;
+  width: 14.875rem;
 }
 
 .md-tile-vertical--disabled {
@@ -166,15 +166,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 32px;
+  padding: 2rem;
 }
 
 .md-tile-vertical--small .md-tile-vertical__content {
-  padding: 24px;
+  padding: 1.5rem;
 }
 
 .md-tile-vertical--large .md-tile-vertical__content {
-  padding: 48px;
+  padding: 3rem;
 }
 
 .md-tile-vertical__content-text {
@@ -185,10 +185,10 @@
 .md-tile-vertical__content-icon {
   display: flex;
   justify-content: center;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   color: var(--mdPrimaryColor80);
-  width: 128px;
-  height: 128px;
+  width: 8rem;
+  height: 8rem;
 }
 
 .md-tile-vertical--disabled .md-tile-vertical__content-icon {
@@ -196,10 +196,10 @@
 }
 
 .md-tile-vertical__content-heading {
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
 .md-tile-vertical__content-description {
-  margin-top: 1em;
-  font-size: 16px;
+  margin-top: 1rem;
+  font-size: 1rem;
 }
diff --git a/packages/css/src/toggle/toggle.css b/packages/css/src/toggle/toggle.css
index db3f0086..824f0960 100644
--- a/packages/css/src/toggle/toggle.css
+++ b/packages/css/src/toggle/toggle.css
@@ -9,7 +9,7 @@
 
 .md-toggle__wrapper * {
   font-family: 'Open sans';
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .md-toggle__checkbox {
@@ -47,11 +47,11 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-  width: 40px;
-  height: 24px;
+  width: 2.5rem;
+  height: 1.5rem;
   background-color: #fff;
   border: 1px solid var(--mdGreyColor60);
-  border-radius: 100px;
+  border-radius: 6.25rem;
   position: relative;
   transition: background-color 0.2s;
 }
@@ -69,17 +69,17 @@
 }
 
 .md-toggle__label-text {
-  margin-right: 0.5em;
+  margin-right: 0.5rem;
 }
 
 .md-toggle__label .md-toggle__button {
   content: '';
   position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  border-radius: 45px;
+  top: 0.0625rem;
+  left: 0.125rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 2.8125rem;
   transition: all 0.2s ease-in-out;
   background: var(--mdGreyColor60);
   box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
@@ -98,5 +98,5 @@
 .md-toggle__error {
   color: var(--mdErrorColor);
   font-family: 'Open sans';
-  font-size: 0.88em;
+  font-size: 0.88rem;
 }
diff --git a/packages/css/src/tooltip/tooltip.css b/packages/css/src/tooltip/tooltip.css
index 819836e8..556b1614 100644
--- a/packages/css/src/tooltip/tooltip.css
+++ b/packages/css/src/tooltip/tooltip.css
@@ -9,9 +9,9 @@
   position: absolute;
   z-index: 99;
   font-weight: 400;
-  font-size: 14px;
-  border-radius: 8px;
-  padding: 10px;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  padding: 0.625rem;
 }
 
 .md-tooltip--show {
@@ -19,19 +19,19 @@
 }
 
 .md-tooltip--bottom {
-  transform: translate(-35%, 12.8px);
+  transform: translate(-35%, 0.8rem);
 }
 
 .md-tooltip--right {
-  transform: translate(2.3em, -32px);
-} 
+  transform: translate(2.3em, -2rem);
+}
 
 .md-tooltip--left {
-  transform: translate(calc(-100% - 12.8px), -32px);
+  transform: translate(calc(-100% - 0.8rem), -2rem);
 }
 
 .md-tooltip--top {
-  transform: translate(-35%, calc(-100% - 2.3em));
+  transform: translate(-35%, calc(-100% - 2.3rem));
 }
 
 .md-tooltip__child {
@@ -39,5 +39,3 @@
   cursor: pointer;
   width: fit-content;
 }
-
-