diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf
new file mode 100644
index 0000000..a1398b3
Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ
diff --git a/assets/fonts/OpenSans-BoldItalic.ttf b/assets/fonts/OpenSans-BoldItalic.ttf
new file mode 100644
index 0000000..307122c
Binary files /dev/null and b/assets/fonts/OpenSans-BoldItalic.ttf differ
diff --git a/assets/fonts/OpenSans-ExtraBold.ttf b/assets/fonts/OpenSans-ExtraBold.ttf
new file mode 100644
index 0000000..08d7185
Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBold.ttf differ
diff --git a/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/assets/fonts/OpenSans-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..c35f57f
Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBoldItalic.ttf differ
diff --git a/assets/fonts/OpenSans-Italic.ttf b/assets/fonts/OpenSans-Italic.ttf
new file mode 100644
index 0000000..790286f
Binary files /dev/null and b/assets/fonts/OpenSans-Italic.ttf differ
diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf
new file mode 100644
index 0000000..d9a9e27
Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ
diff --git a/assets/fonts/OpenSans-LightItalic.ttf b/assets/fonts/OpenSans-LightItalic.ttf
new file mode 100644
index 0000000..77f2e6c
Binary files /dev/null and b/assets/fonts/OpenSans-LightItalic.ttf differ
diff --git a/assets/fonts/OpenSans-Medium.ttf b/assets/fonts/OpenSans-Medium.ttf
new file mode 100644
index 0000000..ba6db9b
Binary files /dev/null and b/assets/fonts/OpenSans-Medium.ttf differ
diff --git a/assets/fonts/OpenSans-MediumItalic.ttf b/assets/fonts/OpenSans-MediumItalic.ttf
new file mode 100644
index 0000000..980ac25
Binary files /dev/null and b/assets/fonts/OpenSans-MediumItalic.ttf differ
diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf
new file mode 100644
index 0000000..1dc226d
Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ
diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf
new file mode 100644
index 0000000..66acb20
Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ
diff --git a/assets/fonts/OpenSans-SemiBoldItalic.ttf b/assets/fonts/OpenSans-SemiBoldItalic.ttf
new file mode 100644
index 0000000..f8c39f9
Binary files /dev/null and b/assets/fonts/OpenSans-SemiBoldItalic.ttf differ
diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css
new file mode 100644
index 0000000..11d7811
--- /dev/null
+++ b/styles/configs/font-faces.css
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url(assets/fonts/OpenSans-Light.ttf);
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url(assets/fonts/OpenSans-Regular.ttf);
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url(assets/fonts/OpenSans-Bold.ttf);
+  font-weight: 700;
+}
diff --git a/styles/configs/style.json b/styles/configs/style.json
index 7b90b6b..9a84369 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -1,349 +1,351 @@
 {
-    "typeScale": [
-        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
-      ],
-      "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
-      "customMedia": [
-        { "s": 20 },
-        { "ns": {
-            "value": 40,
-            "minWidth": true
-          }
-        },
-        { "m": {
-            "value": 40,
-            "minWidth": true
-          }
-        },
-        { "l": {
-          "value": 64,
-          "minWidth": true
-        }
-        },
-        { "xl": {
-            "value": 80,
-            "minWidth": true
-          }
-        }
-      ],
-      "colors": {
-        "black-90": "rgba(0,0,0,.9)",
-        "black-80": "rgba(0,0,0,.8)",
-        "black-70": "rgba(0,0,0,.7)",
-        "black-60": "rgba(0,0,0,.6)",
-        "black-50": "rgba(0,0,0,.5)",
-        "black-40": "rgba(0,0,0,.4)",
-        "black-30": "rgba(0,0,0,.3)",
-        "black-20": "rgba(0,0,0,.2)",
-        "black-10": "rgba(0,0,0,.1)",
-        "black-05": "rgba(0,0,0,.05)",
-        "black-025": "rgba(0,0,0,.025)",
-        "black-0125": "rgba(0,0,0,.0125)",
+  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
+  "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
+  "customMedia": [
+    { "s": 20 },
+    {
+      "ns": {
+        "value": 40,
+        "minWidth": true
+      }
+    },
+    {
+      "m": {
+        "value": 40,
+        "minWidth": true
+      }
+    },
+    {
+      "l": {
+        "value": 64,
+        "minWidth": true
+      }
+    },
+    {
+      "xl": {
+        "value": 80,
+        "minWidth": true
+      }
+    }
+  ],
+  "colors": {
+    "black-90": "rgba(0,0,0,.9)",
+    "black-80": "rgba(0,0,0,.8)",
+    "black-70": "rgba(0,0,0,.7)",
+    "black-60": "rgba(0,0,0,.6)",
+    "black-50": "rgba(0,0,0,.5)",
+    "black-40": "rgba(0,0,0,.4)",
+    "black-30": "rgba(0,0,0,.3)",
+    "black-20": "rgba(0,0,0,.2)",
+    "black-10": "rgba(0,0,0,.1)",
+    "black-05": "rgba(0,0,0,.05)",
+    "black-025": "rgba(0,0,0,.025)",
+    "black-0125": "rgba(0,0,0,.0125)",
 
-        "white-90": "rgba(255,255,255,.9)",
-        "white-80": "rgba(255,255,255,.8)",
-        "white-70": "rgba(255,255,255,.7)",
-        "white-60": "rgba(255,255,255,.6)",
-        "white-50": "rgba(255,255,255,.5)",
-        "white-40": "rgba(255,255,255,.4)",
-        "white-30": "rgba(255,255,255,.3)",
-        "white-20": "rgba(255,255,255,.2)",
-        "white-10": "rgba(255,255,255,.1)",
-        "white-05": "rgba(255,255,255,.05)",
-        "white-025": "rgba(255,255,255,.025)",
-        "white-0125": "rgba(255,255,255,.0125)"
+    "white-90": "rgba(255,255,255,.9)",
+    "white-80": "rgba(255,255,255,.8)",
+    "white-70": "rgba(255,255,255,.7)",
+    "white-60": "rgba(255,255,255,.6)",
+    "white-50": "rgba(255,255,255,.5)",
+    "white-40": "rgba(255,255,255,.4)",
+    "white-30": "rgba(255,255,255,.3)",
+    "white-20": "rgba(255,255,255,.2)",
+    "white-10": "rgba(255,255,255,.1)",
+    "white-05": "rgba(255,255,255,.05)",
+    "white-025": "rgba(255,255,255,.025)",
+    "white-0125": "rgba(255,255,255,.0125)"
+  },
+  "semanticColors": {
+    "background": {
+      "base": "#ffffff",
+      "base--inverted": "#03044e",
+      "action-primary": "#0F3E99",
+      "action-secondary": "#eef3f7",
+      "emphasis": "#f71963",
+      "disabled": "#f2f4f5",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-background": {
+      "action-primary": "#072c75",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "active-background": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#d2defc",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "text": {
+      "action-primary": "#0F3E99",
+      "action-secondary": "#eef3f7",
+      "link": "#0F3E99",
+      "emphasis": "#f71963",
+      "disabled": "#979899",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "visited-text": {
+      "link": "#0c389f"
+    },
+    "hover-text": {
+      "action-primary": "#072c75",
+      "action-secondary": "#dbe9fd",
+      "link": "#0c389f",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0"
+    },
+    "active-text": {
+      "link": "#0c389f",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0"
+    },
+    "border": {
+      "action-primary": "#0F3E99",
+      "action-secondary": "#eef3f7",
+      "emphasis": "#f71963",
+      "disabled": "#e3e4e6",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-border": {
+      "action-primary": "#072c75",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "active-border": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#d2defc",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "on": {
+      "base": "#3f3f40",
+      "base--inverted": "#ffffff",
+      "action-primary": "#ffffff",
+      "action-secondary": "#0F3E99",
+      "emphasis": "#ffffff",
+      "disabled": "#979899",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a",
+      "muted-1": "#ffffff",
+      "muted-2": "#ffffff",
+      "muted-3": "#3f3f40",
+      "muted-4": "#3f3f40",
+      "muted-5": "#3f3f40"
+    },
+    "hover-on": {
+      "action-primary": "#ffffff",
+      "action-secondary": "#0F3E99",
+      "emphasis": "#ffffff",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a"
+    },
+    "active-on": {
+      "action-primary": "#ffffff",
+      "action-secondary": "#0F3E99",
+      "emphasis": "#ffffff",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a"
+    }
+  },
+  "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
+  "borderRadius": [0, 0.125, 0.25, 0.5, 1],
+  "widths": [1, 2, 4, 8, 16],
+  "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
+  "heights": [1, 2, 4, 8, 16],
+  "sizes": [
+    { "name": "small", "value": 2 },
+    { "name": "regular", "value": 2.5 },
+    { "name": "large", "value": 3 }
+  ],
+  "typography": {
+    "measure": [30, 34, 20],
+    "styles": {
+      "heading-1": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "700",
+        "fontSize": "3rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
       },
-      "semanticColors": {
-        "background": {
-          "base": "#ffffff",
-          "base--inverted": "#03044e",
-          "action-primary": "#0F3E99",
-          "action-secondary": "#eef3f7",
-          "emphasis": "#f71963",
-          "disabled": "#f2f4f5",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "hover-background": {
-          "action-primary": "#072c75",
-          "action-secondary": "#dbe9fd",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#e13232",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "active-background": {
-          "action-primary": "#0c389f",
-          "action-secondary": "#d2defc",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "text": {
-          "action-primary": "#0F3E99",
-          "action-secondary": "#eef3f7",
-          "link": "#0F3E99",
-          "emphasis": "#f71963",
-          "disabled": "#979899",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "visited-text": {
-          "link": "#0c389f"
-        },
-        "hover-text": {
-          "action-primary": "#072c75",
-          "action-secondary": "#dbe9fd",
-          "link": "#0c389f",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#e13232",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0"
-        },
-        "active-text": {
-          "link": "#0c389f",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0"
-        },
-        "border": {
-          "action-primary": "#0F3E99",
-          "action-secondary": "#eef3f7",
-          "emphasis": "#f71963",
-          "disabled": "#e3e4e6",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "hover-border": {
-          "action-primary": "#072c75",
-          "action-secondary": "#dbe9fd",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#e13232",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "active-border": {
-          "action-primary": "#0c389f",
-          "action-secondary": "#d2defc",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "on": {
-          "base": "#3f3f40",
-          "base--inverted": "#ffffff",
-          "action-primary": "#ffffff",
-          "action-secondary": "#0F3E99",
-          "emphasis": "#ffffff",
-          "disabled": "#979899",
-          "success": "#ffffff",
-          "success--faded": "#3f3f40",
-          "danger": "#ffffff",
-          "danger--faded": "#3f3f40",
-          "warning": "#ffffff",
-          "warning--faded": "#1a1a1a",
-          "muted-1": "#ffffff",
-          "muted-2": "#ffffff",
-          "muted-3": "#3f3f40",
-          "muted-4": "#3f3f40",
-          "muted-5": "#3f3f40"
-        },
-        "hover-on": {
-          "action-primary": "#ffffff",
-          "action-secondary": "#0F3E99",
-          "emphasis": "#ffffff",
-          "success": "#ffffff",
-          "success--faded": "#3f3f40",
-          "danger": "#ffffff",
-          "danger--faded": "#3f3f40",
-          "warning": "#ffffff",
-          "warning--faded": "#1a1a1a"
-        },
-        "active-on": {
-          "action-primary": "#ffffff",
-          "action-secondary": "#0F3E99",
-          "emphasis": "#ffffff",
-          "success": "#ffffff",
-          "success--faded": "#3f3f40",
-          "danger": "#ffffff",
-          "danger--faded": "#3f3f40",
-          "warning": "#ffffff",
-          "warning--faded": "#1a1a1a"
-        }
+      "heading-2": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "700",
+        "fontSize": "2.25rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
       },
-      "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
-      "borderRadius": [0, 0.125, 0.25, 0.5, 1],
-      "widths": [1, 2, 4, 8, 16],
-      "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
-      "heights": [1, 2, 4, 8, 16],
-      "sizes": [
-        {"name": "small", "value": 2},
-        {"name": "regular", "value": 2.5},
-        {"name": "large", "value": 3}
-      ],
-      "typography":{
-        "measure": [30, 34, 20],
-        "styles": {
-          "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "700",
-            "fontSize": "3rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "700",
-            "fontSize": "2.25rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "700",
-            "fontSize": "1.75rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "normal",
-            "fontSize": "1.5rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "normal",
-            "fontSize": "1.25rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "normal",
-            "fontSize": "1.25rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "normal",
-            "fontSize": "1rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "normal",
-            "fontSize": "0.875rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "normal",
-            "fontSize": "0.75rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          },
-          "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "500",
-            "fontSize": "1rem",
-            "textTransform": "uppercase",
-            "letterSpacing": "0"
-          },
-          "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "500",
-            "fontSize": "0.875rem",
-            "textTransform": "uppercase",
-            "letterSpacing": "0"
-          },
-          "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
-            "fontWeight": "500",
-            "fontSize": "1.25rem",
-            "textTransform": "uppercase",
-            "letterSpacing": "0"
-          },
-          "code": {
-            "fontFamily": "Consolas, monaco, monospace",
-            "fontWeight": "normal",
-            "fontSize": "1rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          }
-        }
+      "heading-3": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "700",
+        "fontSize": "1.75rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
       },
-      "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
+      "heading-4": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "normal",
+        "fontSize": "1.5rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      },
+      "heading-5": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "normal",
+        "fontSize": "1.25rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      },
+      "heading-6": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "normal",
+        "fontSize": "1.25rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      },
+      "body": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "normal",
+        "fontSize": "1rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      },
+      "small": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "normal",
+        "fontSize": "0.875rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      },
+      "mini": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "normal",
+        "fontSize": "0.75rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      },
+      "action": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "500",
+        "fontSize": "1rem",
+        "textTransform": "uppercase",
+        "letterSpacing": "0"
+      },
+      "action--small": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "500",
+        "fontSize": "0.875rem",
+        "textTransform": "uppercase",
+        "letterSpacing": "0"
+      },
+      "action--large": {
+        "fontFamily": "Open Sans, sans-serif",
+        "fontWeight": "500",
+        "fontSize": "1.25rem",
+        "textTransform": "uppercase",
+        "letterSpacing": "0"
+      },
+      "code": {
+        "fontFamily": "Consolas, monaco, monospace",
+        "fontWeight": "normal",
+        "fontSize": "1rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      }
+    }
+  },
+  "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
 }
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 2603758..4d0c281 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -122,7 +122,7 @@
   bottom: -16px;
 }
 .paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products {
-  background-color: #000;
+  background-color: #000000;
 }
 .paginationDotsContainer--m3-carousel-products .paginationDot--isActive {
   height: 1.063rem !important;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 5379403..133654e 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -8,7 +8,7 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
-  background: #000;
+  background: #000000;
   color: #fff;
   margin: 64px 0;
 }
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index fbf91a0..d4dff55 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -40,7 +40,7 @@
     font-size: 18px;
     line-height: 25px;
     text-align: center;
-    color: #000000;
+    color: $color-black;
 
     @media (max-width:767px) {
       font-size: 14px;
@@ -85,7 +85,7 @@
     font-size: 24px;
     line-height: 33px;
     text-align: center;
-    color: #000000;
+    color: $color-black;
 
     @media (max-width:767px) {
       font-size: 18px;
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 71c1d31..c55d345 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -114,7 +114,7 @@
   bottom: -16px;
 
   .paginationDot--m3-carousel-products {
-    background-color: #000;
+    background-color: $color-black;
   }
 
   .paginationDot--isActive {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index d6855f3..1a9d212 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,5 +1,5 @@
 .newsletter {
-  background: #000;
+  background: $color-black;
   color: #fff;
 
   margin: 64px 0;
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index daf3adb..18a0fe6 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -1,4 +1,5 @@
-$color-black: #292929;
+$color-black: #000000;
+$color-black2: #292929;
 
 $color-white: #fff;
 
@@ -14,18 +15,16 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
-	cstm: 400,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1200px
-) !default;
+  xs: 0,
+  cstm: 400,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px) !default;
 
 $z-index: (
-	level1: 5,
-	level2: 10,
-	level3: 15,
-	level4: 20,
-	level5: 25
-) !default;
+  level1: 5,
+  level2: 10,
+  level3: 15,
+  level4: 20,
+  level5: 25) !default;
\ No newline at end of file