diff --git a/_config.yml b/_config.yml
index ed925e95e..1dd0dd1c4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -50,10 +50,6 @@ toc:
 collections:
   docs:
     output: true
-#  changelog:
-#    output: false
-#  components:
-#    output: true
 
 defaults:
   - scope:
@@ -71,11 +67,6 @@ defaults:
     values:
       layout: docs
       toc: true
-#  - scope:
-#      type: "components"
-#    values:
-#      layout: component
-
 
 colors:
   blue:
@@ -217,5 +208,5 @@ socials:
     icon: brand/tabler
     title: Tabler
 
-months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
diff --git a/pages/_includes/js/charts-heatmap.html b/pages/_includes/js/charts-heatmap.html
index 5984e03e9..29542f29c 100644
--- a/pages/_includes/js/charts-heatmap.html
+++ b/pages/_includes/js/charts-heatmap.html
@@ -58,7 +58,7 @@
 		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.colors.{{ color[0] }}, {% endfor %}{% endif %}],
 		{% endif %}
 		series: [
-		{% for i in site.months_short limit: 12 %}
+		{% for i in site.monthsshort limit: 12 %}
 			{ name: "{{ i }}", data: generateData() },{% endfor %}
 		],
 		xaxis: {
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index cce9457a2..82966d10c 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,5 +1,15 @@
 //Utilities
 $utilities: (
+  "text-align": (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      left: start,
+      right: end,
+      center: center
+    )
+  ),
   "object": (
     property: object-fit,
     class: object,
@@ -96,13 +106,11 @@ $utilities: (
       0: 0,
     )
   ),
-
   "leading": (
     property: line-height,
     class: leading,
     values: $spacers
   ),
-
   "width": (
     property: width,
     class: w,
@@ -113,4 +121,42 @@ $utilities: (
     class: h,
     values: $size-values
   ),
+
+  //Flow-relative values
+  "padding-right": (
+    responsive: true,
+    property: padding-inline-end,
+    class: pr,
+    values: $spacers
+  ),
+  "padding-left": (
+    responsive: true,
+    property: padding-inline-start,
+    class: pl,
+    values: $spacers
+  ),
+  "margin-right": (
+    responsive: true,
+    property: margin-inline-end,
+    class: mr,
+    values: map-merge($spacers, (auto: auto))
+  ),
+  "margin-left": (
+    responsive: true,
+    property: margin-inline-start,
+    class: ml,
+    values: map-merge($spacers, (auto: auto))
+  ),
+  "negative-margin-right": (
+    responsive: true,
+    property: margin-inline-end,
+    class: mr,
+    values: $negative-spacers
+  ),
+  "negative-margin-left": (
+    responsive: true,
+    property: margin-inline-start,
+    class: ml,
+    values: $negative-spacers
+  ),
 ) !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b6ed1f51e..f6ad05b63 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,10 +1,18 @@
-//ASSETS BASE
+// BASE CONFIG
+$enable-social-colors: true !default;
+$enable-ghost-buttons: true !default;
+$enable-extra-colors: true !default;
+$enable-gradients: false !default;
+$enable-navbar-vertical: true !default;
+$enable-dark-mode: true !default;
+$enable-negative-margins: false !default;
+// ASSETS BASE
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: "Ubuntu" !default;
+$google-font: false !default;
 
-$font-family-sans-serif: $google-font, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default;
+$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
 $font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
@@ -15,7 +23,7 @@ $icon-fonts: () !default;
 $font-size-base: .875rem !default;
 $font-weight-normal: 400 !default;
 $font-weight-bold: 500 !default;
-$body-letter-spacing: -.01em !default;
+$body-letter-spacing: 0 !default;
 
 $line-height-base: (1.5rem/$font-size-base) !default;
 $line-height-sm: (1.25rem/$font-size-base) !default;
@@ -27,6 +35,7 @@ $min-contrast-ratio: 1.5 !default;
 
 $light: #f5f7fb !default;
 $dark: #354052 !default;
+$text: #212b36 !default;
 
 $light-black: rgba($dark, .24) !default;
 $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
@@ -62,7 +71,7 @@ $black: #000000 !default;
 $white: #ffffff !default;
 
 $body-bg: $light !default;
-$body-color: $dark !default;
+$body-color: $text !default;
 
 $text-muted-opacity: .72 !default; //Perfect color for AA
 $text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
@@ -186,6 +195,8 @@ $spacers: (
   6: $spacer * 4.5
 ) !default;
 
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
 $size-spacers: (
   auto: auto,
   px: 1px,
@@ -508,9 +519,3 @@ $payment-sizes: (
   "xl": 4rem
 ) !default;
 
-$enable-social-colors: true !default;
-$enable-ghost-buttons: true !default;
-$enable-extra-colors: true !default;
-$enable-gradients: false !default;
-$enable-navbar-vertical: true !default;
-$enable-dark-mode: true !default;