diff --git a/src/assets/font/Nunito-VariableFont.ttf b/src/assets/font/Nunito-VariableFont.ttf
new file mode 100644
index 0000000..6bc8144
Binary files /dev/null and b/src/assets/font/Nunito-VariableFont.ttf differ
diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index 03e7587..871a793 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -41,6 +41,10 @@ body {
     --iqser-blue-5: #c5d3eb;
     --iqser-pink-1: #f125de;
     --iqser-helpmode-primary: green;
+    --iqser-button-radius: 17px;
+    --iqser-button-font-size: 13px;
+    --iqser-button-height: 34px;
+    --iqser-font-family: 'Inter, sans-serif';
 }
 
 @mixin configureLight($args...) {
diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index 9d68a97..c202028 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -1,8 +1,8 @@
 .mat-button,
 .mat-flat-button {
-    border-radius: 17px !important;
-    font-size: 13px !important;
-    height: 34px;
+    border-radius: var(--iqser-button-radius) !important;
+    font-size: var(--iqser-button-font-size) !important;
+    height: var(--iqser-button-height);
     display: flex !important;
     align-items: center;
 
diff --git a/src/assets/styles/common-controls.scss b/src/assets/styles/common-controls.scss
index 71ea0a7..0782653 100644
--- a/src/assets/styles/common-controls.scss
+++ b/src/assets/styles/common-controls.scss
@@ -6,7 +6,7 @@
         cursor: pointer;
         color: var(--iqser-accent);
         background: var(--iqser-white);
-        font-family: Inter, sans-serif;
+        font-family: var(--iqser-font-family);
         font-size: 13px;
         line-height: 14px;
         padding: 10px 14px;
diff --git a/src/assets/styles/common-fonts.scss b/src/assets/styles/common-fonts.scss
index dcc2676..72cdb73 100644
--- a/src/assets/styles/common-fonts.scss
+++ b/src/assets/styles/common-fonts.scss
@@ -1,5 +1,3 @@
-/* inter-regular - latin */
-
 @font-face {
     font-family: 'OpenSans Extrabold';
     src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
@@ -34,3 +32,33 @@
     font-weight: 700;
     src: url('../font/Inter-VariableFont.ttf') format('truetype');
 }
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 300;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 400;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 500;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 600;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 700;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss
index 0e3f2e3..faf3afe 100644
--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@@ -98,7 +98,7 @@ form .iqser-input-group:not(first-of-type) {
         padding-left: 11px;
         padding-right: 11px;
         border: 1px solid var(--iqser-inputs-outline);
-        font-family: Inter, sans-serif;
+        font-family: var(--iqser-font-family);
         font-size: 13px;
         background-color: var(--iqser-background);
         color: var(--iqser-text);
diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss
index 4b9a192..01f97fb 100644
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@@ -5,7 +5,7 @@ body {
     margin: 0;
     padding: 0;
     height: 100vh;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--iqser-font-family);
     color: var(--iqser-text);
     background-color: var(--iqser-background);
     font-size: 13px;
@@ -14,7 +14,7 @@ body {
     overflow: hidden;
 }
 
-redaction-root {
+body > *:first-child {
     display: flex;
     overflow: hidden;
 
diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss
index 273711f..09bb8ba 100644
--- a/src/assets/styles/common-texts.scss
+++ b/src/assets/styles/common-texts.scss
@@ -51,7 +51,7 @@ a {
 }
 
 pre {
-    font-family: Inter, sans-serif;
+    font-family: var(--iqser-font-family);
     color: var(--iqser-text);
 }
 
diff --git a/src/assets/styles/common-toasts.scss b/src/assets/styles/common-toasts.scss
index 1e2a306..9f48749 100644
--- a/src/assets/styles/common-toasts.scss
+++ b/src/assets/styles/common-toasts.scss
@@ -5,7 +5,7 @@ $toast-width: 400px;
     padding: 11px 16px;
     border-radius: 8px;
     background-image: none;
-    font-family: Inter, sans-serif;
+    font-family: var(--iqser-font-family);
     font-size: 13px;
     line-height: 18px;
     width: $toast-width;
diff --git a/src/assets/styles/common-utilities.scss b/src/assets/styles/common-utilities.scss
index 2cd2fa1..955c96b 100644
--- a/src/assets/styles/common-utilities.scss
+++ b/src/assets/styles/common-utilities.scss
@@ -25,6 +25,16 @@ $sides: (top, bottom, left, right);
     }
 }
 
+@each $space in $values {
+    .m-#{$space} {
+        margin: #{$space}px !important;
+    }
+
+    .p-#{$space} {
+        padding: #{$space}px !important;
+    }
+}
+
 /* flex-${n} */
 
 @for $n from 1 through 5 {