diff --git a/www/css/foundation/base.css b/www/css/foundation/base.css
new file mode 100644
index 00000000..1f58b7f6
--- /dev/null
+++ b/www/css/foundation/base.css
@@ -0,0 +1,36 @@
+body {
+  direction: ltr;
+  text-align: left;
+  font-family: "Inter", sans-serif;
+  color: #fff;
+  background-color: var(--background-color);
+  margin: 0px;
+  padding: 0px;
+  line-height: 1.5;
+  overflow-x: hidden;
+}
+
+body[lang=he] {
+  font-family: "Open Sans Hebrew","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+input {
+  font-family: Inter;
+  outline: none;
+}
+
+div {
+  box-sizing: border-box;
+}
+
+h1, h2, h3, p {
+  margin: 0px;
+}
+
+img {
+  vertical-align: middle;
+}
+
+ul {
+  margin: 0px;
+}
diff --git a/www/css/foundation/typography.css b/www/css/foundation/typography.css
new file mode 100644
index 00000000..14cd9be3
--- /dev/null
+++ b/www/css/foundation/typography.css
@@ -0,0 +1,89 @@
+.text-white { color: #FFF; }
+
+.text-gray { color: #B5BDC2; }
+
+.text-dark-gray { color: #55585A; }
+
+.font-h1 { font-size: 48px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-h1 {
+    font-size: 36px;
+  }
+}
+
+.font-h2 { font-size: 40px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-h2 {
+    font-size: 24px;
+  }
+}
+
+.font-h3 { font-size: 28px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-h3 {
+    font-size: 20px;
+  }
+}
+
+.font-h5 { font-size: 16px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-h5 {
+    font-size: 14px;
+  }
+}
+
+.font-h6 { font-size: 14px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
+
+.font-p1 { font-size: 18px; font-weight: 400; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-p1 {
+    font-size: 16px;
+  }
+}
+
+.font-p2 { font-size: 16px; font-weight: 400; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-p2 {
+    font-size: 14px;
+  }
+}
+
+.font-p3 { font-size: 14px; font-weight: 400; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-p3 {
+    font-size: 12px;
+  }
+}
+
+.font-p4 { font-size: 14px; font-weight: 600; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-p4 {
+    font-size: 12px;
+  }
+}
+
+.font-p5 { font-size: 12x; font-weight: 400; font-family: "Inter", sans-serif; line-height: 20px; letter-spacing: normal; font-style: normal; }
+
+@media only screen and (max-width: 475px) {
+  .font-p5 {
+    font-size: 11px;
+  }
+}
+
+.font-btn-1 { font-size: 18px; }
+
+.font-btn-2 { font-size: 16px; }
+
+.font-link-semibold { font-family: "Inter", sans-serif; font-size: 16px; font-style: normal; font-weight: 600; line-height: 28.8px; letter-spacing: normal; }
+
+.font-link-regular { font-family: "Inter", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28.8px; letter-spacing: normal; }
+
+.font-disclaimer-text { color: #B5BDC2; font-family: "Inter", sans-serif; font-size: 14px; font-style: italic; font-weight: 400; line-height: normal; letter-spacing: normal; }
diff --git a/www/css/foundation/utilities.css b/www/css/foundation/utilities.css
new file mode 100644
index 00000000..19b5c2fd
--- /dev/null
+++ b/www/css/foundation/utilities.css
@@ -0,0 +1,251 @@
+.m-0 { margin: 0; }
+
+.m-1 { margin: 2.5px; }
+
+.m-2 { margin: 5px; }
+
+.m-3 { margin: 10px; }
+
+.m-4 { margin: 15px; }
+
+.m-5 { margin: 30px; }
+
+.m-6 { margin: 60px; }
+
+.m-7 { margin: 100px; }
+
+.m-8 { margin: 150px; }
+
+.m-auto { margin: auto; }
+
+.mx-0 { margin-right: 0; margin-left: 0; }
+
+.mx-1 { margin-right: 2.5px; margin-left: 2.5px; }
+
+.mx-2 { margin-right: 5px; margin-left: 5px; }
+
+.mx-3 { margin-right: 10px; margin-left: 10px; }
+
+.mx-4 { margin-right: 15px; margin-left: 15px; }
+
+.mx-5 { margin-right: 30px; margin-left: 30px; }
+
+.mx-6 { margin-right: 60px; margin-left: 60px; }
+
+.mx-7 { margin-right: 100px; margin-left: 100px; }
+
+.mx-8 { margin-right: 150px; margin-left: 150px; }
+
+.mx-auto { margin-right: auto; margin-left: auto; }
+
+.my-0 { margin-top: 0; margin-bottom: 0; }
+
+.my-1 { margin-top: 2.5px; margin-bottom: 2.5px; }
+
+.my-2 { margin-top: 5px; margin-bottom: 5px; }
+
+.my-3 { margin-top: 10px; margin-bottom: 10px; }
+
+.my-4 { margin-top: 15px; margin-bottom: 15px; }
+
+.my-5 { margin-top: 30px; margin-bottom: 30px; }
+
+.my-6 { margin-top: 60px; margin-bottom: 60px; }
+
+.my-7 { margin-top: 100px; margin-bottom: 100px; }
+
+.my-8 { margin-top: 150px; margin-bottom: 150px; }
+
+.my-auto { margin-top: auto; margin-bottom: auto; }
+
+.mt-0 { margin-top: 0; }
+
+.mt-1 { margin-top: 2.5px; }
+
+.mt-2 { margin-top: 5px; }
+
+.mt-3 { margin-top: 10px; }
+
+.mt-4 { margin-top: 15px; }
+
+.mt-5 { margin-top: 30px; }
+
+.mt-6 { margin-top: 60px; }
+
+.mt-7 { margin-top: 100px; }
+
+.mt-8 { margin-top: 150px; }
+
+.mt-auto { margin-top: auto; }
+
+.mr-0 { margin-right: 0; }
+
+.mr-1 { margin-right: 2.5px; }
+
+.mr-2 { margin-right: 5px; }
+
+.mr-3 { margin-right: 10px; }
+
+.mr-4 { margin-right: 15px; }
+
+.mr-5 { margin-right: 30px; }
+
+.mr-6 { margin-right: 60px; }
+
+.mr-7 { margin-right: 100px; }
+
+.mr-8 { margin-right: 150px; }
+
+.mr-auto { margin-right: auto; }
+
+.mb-0 { margin-bottom: 0; }
+
+.mb-1 { margin-bottom: 2.5px; }
+
+.mb-2 { margin-bottom: 5px; }
+
+.mb-3 { margin-bottom: 10px; }
+
+.mb-4 { margin-bottom: 15px; }
+
+.mb-5 { margin-bottom: 30px; }
+
+.mb-6 { margin-bottom: 60px; }
+
+.mb-7 { margin-bottom: 100px; }
+
+.mb-8 { margin-bottom: 150px; }
+
+.mb-auto { margin-bottom: auto; }
+
+.ml-0 { margin-left: 0; }
+
+.ml-1 { margin-left: 2.5px; }
+
+.ml-2 { margin-left: 5px; }
+
+.ml-3 { margin-left: 10px; }
+
+.ml-4 { margin-left: 15px; }
+
+.ml-5 { margin-left: 30px; }
+
+.ml-6 { margin-left: 60px; }
+
+.ml-7 { margin-left: 100px; }
+
+.ml-8 { margin-left: 150px; }
+
+.ml-auto { margin-left: auto; }
+
+.p-0 { padding: 0; }
+
+.p-1 { padding: 2.5px; }
+
+.p-2 { padding: 5px; }
+
+.p-3 { padding: 10px; }
+
+.p-4 { padding: 15px; }
+
+.p-5 { padding: 30px; }
+
+.p-6 { padding: 60px; }
+
+.p-7 { padding: 100px; }
+
+.px-0 { padding-right: 0; padding-left: 0; }
+
+.px-1 { padding-right: 2.5px; padding-left: 2.5px; }
+
+.px-2 { padding-right: 5px; padding-left: 5px; }
+
+.px-3 { padding-right: 10px; padding-left: 10px; }
+
+.px-4 { padding-right: 15px; padding-left: 15px; }
+
+.px-5 { padding-right: 30px; padding-left: 30px; }
+
+.px-6 { padding-right: 60px; padding-left: 60px; }
+
+.px-7 { padding-right: 100px; padding-left: 100px; }
+
+.py-0 { padding-top: 0; padding-bottom: 0; }
+
+.py-1 { padding-top: 2.5px; padding-bottom: 2.5px; }
+
+.py-2 { padding-top: 5px; padding-bottom: 5px; }
+
+.py-3 { padding-top: 10px; padding-bottom: 10px; }
+
+.py-4 { padding-top: 15px; padding-bottom: 15px; }
+
+.py-5 { padding-top: 30px; padding-bottom: 30px; }
+
+.py-6 { padding-top: 60px; padding-bottom: 60px; }
+
+.py-7 { padding-top: 100px; padding-bottom: 100px; }
+
+.pt-0 { padding-top: 0; }
+
+.pt-1 { padding-top: 2.5px; }
+
+.pt-2 { padding-top: 5px; }
+
+.pt-3 { padding-top: 10px; }
+
+.pt-4 { padding-top: 15px; }
+
+.pt-5 { padding-top: 30px; }
+
+.pt-6 { padding-top: 60px; }
+
+.pt-7 { padding-top: 100px; }
+
+.pr-0 { padding-right: 0; }
+
+.pr-1 { padding-right: 2.5px; }
+
+.pr-2 { padding-right: 5px; }
+
+.pr-3 { padding-right: 10px; }
+
+.pr-4 { padding-right: 15px; }
+
+.pr-5 { padding-right: 30px; }
+
+.pr-6 { padding-right: 60px; }
+
+.pr-7 { padding-right: 100px; }
+
+.pb-0 { padding-bottom: 0; }
+
+.pb-1 { padding-bottom: 2.5px; }
+
+.pb-2 { padding-bottom: 5px; }
+
+.pb-3 { padding-bottom: 10px; }
+
+.pb-4 { padding-bottom: 15px; }
+
+.pb-5 { padding-bottom: 30px; }
+
+.pb-6 { padding-bottom: 60px; }
+
+.pb-7 { padding-bottom: 100px; }
+
+.pl-0 { padding-left: 0; }
+
+.pl-1 { padding-left: 2.5px; }
+
+.pl-2 { padding-left: 5px; }
+
+.pl-3 { padding-left: 10px; }
+
+.pl-4 { padding-left: 15px; }
+
+.pl-5 { padding-left: 30px; }
+
+.pl-6 { padding-left: 60px; }
+
+.pl-7 { padding-left: 100px; }
diff --git a/www/css/manifest.json b/www/css/manifest.json
index 59cb84db..5937544f 100644
--- a/www/css/manifest.json
+++ b/www/css/manifest.json
@@ -2,6 +2,9 @@
   "foundation/fonts.css",
   "legacy/pre-tokens.css",
   "foundation/tokens.css",
+  "foundation/base.css",
+  "foundation/typography.css",
+  "foundation/utilities.css",
   "../style.css",
   "components/status-badge.css",
   "layout/footer.css"
diff --git a/www/style.css b/www/style.css
index 457d081e..da5aff61 100644
--- a/www/style.css
+++ b/www/style.css
@@ -1,382 +1,3 @@
-body {
-  direction: ltr;
-  text-align: left;
-  font-family: "Inter", sans-serif;
-  color: #fff;
-  background-color: var(--background-color);
-  margin: 0px;
-  padding: 0px;
-  line-height: 1.5;
-  overflow-x: hidden;
-}
-
-body[lang=he] {
-  font-family: "Open Sans Hebrew","Helvetica Neue",Helvetica,Arial,sans-serif;
-}
-
-input {
-  font-family: Inter;
-  outline: none;
-}
-
-div {
-  box-sizing: border-box;
-}
-
-h1, h2, h3, p {
-  margin: 0px;
-}
-
-img {
-  vertical-align: middle;
-}
-
-ul {
-  margin: 0px;
-}
-
-.text-white { color: #FFF; }
-
-.text-gray { color: #B5BDC2; }
-
-.text-dark-gray { color: #55585A; }
-
-.font-h1 { font-size: 48px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-h1 {
-    font-size: 36px;
-  }
-}
-
-.font-h2 { font-size: 40px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-h2 {
-    font-size: 24px;
-  }
-}
-
-.font-h3 { font-size: 28px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-h3 {
-    font-size: 20px;
-  }
-}
-
-.font-h5 { font-size: 16px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-h5 {
-    font-size: 14px;
-  }
-}
-
-.font-h6 { font-size: 14px; font-weight: 700; font-family: "Rigid Square", sans-serif; line-height: normal; letter-spacing: normal; font-style: normal; }
-
-.font-p1 { font-size: 18px; font-weight: 400; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-p1 {
-    font-size: 16px;
-  }
-}
-
-.font-p2 { font-size: 16px; font-weight: 400; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-p2 {
-    font-size: 14px;
-  }
-}
-
-.font-p3 { font-size: 14px; font-weight: 400; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-p3 {
-    font-size: 12px;
-  }
-}
-
-.font-p4 { font-size: 14px; font-weight: 600; font-family: "Inter", sans-serif; line-height: 25px; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-p4 {
-    font-size: 12px;
-  }
-}
-
-.font-p5 { font-size: 12x; font-weight: 400; font-family: "Inter", sans-serif; line-height: 20px; letter-spacing: normal; font-style: normal; }
-
-@media only screen and (max-width: 475px) {
-  .font-p5 {
-    font-size: 11px;
-  }
-}
-
-.font-btn-1 { font-size: 18px; }
-
-.font-btn-2 { font-size: 16px; }
-
-.font-link-semibold { font-family: "Inter", sans-serif; font-size: 16px; font-style: normal; font-weight: 600; line-height: 28.8px; letter-spacing: normal; }
-
-.font-link-regular { font-family: "Inter", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28.8px; letter-spacing: normal; }
-
-.font-disclaimer-text { color: #B5BDC2; font-family: "Inter", sans-serif; font-size: 14px; font-style: italic; font-weight: 400; line-height: normal; letter-spacing: normal; }
-
-.m-0 { margin: 0; }
-
-.m-1 { margin: 2.5px; }
-
-.m-2 { margin: 5px; }
-
-.m-3 { margin: 10px; }
-
-.m-4 { margin: 15px; }
-
-.m-5 { margin: 30px; }
-
-.m-6 { margin: 60px; }
-
-.m-7 { margin: 100px; }
-
-.m-8 { margin: 150px; }
-
-.m-auto { margin: auto; }
-
-.mx-0 { margin-right: 0; margin-left: 0; }
-
-.mx-1 { margin-right: 2.5px; margin-left: 2.5px; }
-
-.mx-2 { margin-right: 5px; margin-left: 5px; }
-
-.mx-3 { margin-right: 10px; margin-left: 10px; }
-
-.mx-4 { margin-right: 15px; margin-left: 15px; }
-
-.mx-5 { margin-right: 30px; margin-left: 30px; }
-
-.mx-6 { margin-right: 60px; margin-left: 60px; }
-
-.mx-7 { margin-right: 100px; margin-left: 100px; }
-
-.mx-8 { margin-right: 150px; margin-left: 150px; }
-
-.mx-auto { margin-right: auto; margin-left: auto; }
-
-.my-0 { margin-top: 0; margin-bottom: 0; }
-
-.my-1 { margin-top: 2.5px; margin-bottom: 2.5px; }
-
-.my-2 { margin-top: 5px; margin-bottom: 5px; }
-
-.my-3 { margin-top: 10px; margin-bottom: 10px; }
-
-.my-4 { margin-top: 15px; margin-bottom: 15px; }
-
-.my-5 { margin-top: 30px; margin-bottom: 30px; }
-
-.my-6 { margin-top: 60px; margin-bottom: 60px; }
-
-.my-7 { margin-top: 100px; margin-bottom: 100px; }
-
-.my-8 { margin-top: 150px; margin-bottom: 150px; }
-
-.my-auto { margin-top: auto; margin-bottom: auto; }
-
-.mt-0 { margin-top: 0; }
-
-.mt-1 { margin-top: 2.5px; }
-
-.mt-2 { margin-top: 5px; }
-
-.mt-3 { margin-top: 10px; }
-
-.mt-4 { margin-top: 15px; }
-
-.mt-5 { margin-top: 30px; }
-
-.mt-6 { margin-top: 60px; }
-
-.mt-7 { margin-top: 100px; }
-
-.mt-8 { margin-top: 150px; }
-
-.mt-auto { margin-top: auto; }
-
-.mr-0 { margin-right: 0; }
-
-.mr-1 { margin-right: 2.5px; }
-
-.mr-2 { margin-right: 5px; }
-
-.mr-3 { margin-right: 10px; }
-
-.mr-4 { margin-right: 15px; }
-
-.mr-5 { margin-right: 30px; }
-
-.mr-6 { margin-right: 60px; }
-
-.mr-7 { margin-right: 100px; }
-
-.mr-8 { margin-right: 150px; }
-
-.mr-auto { margin-right: auto; }
-
-.mb-0 { margin-bottom: 0; }
-
-.mb-1 { margin-bottom: 2.5px; }
-
-.mb-2 { margin-bottom: 5px; }
-
-.mb-3 { margin-bottom: 10px; }
-
-.mb-4 { margin-bottom: 15px; }
-
-.mb-5 { margin-bottom: 30px; }
-
-.mb-6 { margin-bottom: 60px; }
-
-.mb-7 { margin-bottom: 100px; }
-
-.mb-8 { margin-bottom: 150px; }
-
-.mb-auto { margin-bottom: auto; }
-
-.ml-0 { margin-left: 0; }
-
-.ml-1 { margin-left: 2.5px; }
-
-.ml-2 { margin-left: 5px; }
-
-.ml-3 { margin-left: 10px; }
-
-.ml-4 { margin-left: 15px; }
-
-.ml-5 { margin-left: 30px; }
-
-.ml-6 { margin-left: 60px; }
-
-.ml-7 { margin-left: 100px; }
-
-.ml-8 { margin-left: 150px; }
-
-.ml-auto { margin-left: auto; }
-
-.p-0 { padding: 0; }
-
-.p-1 { padding: 2.5px; }
-
-.p-2 { padding: 5px; }
-
-.p-3 { padding: 10px; }
-
-.p-4 { padding: 15px; }
-
-.p-5 { padding: 30px; }
-
-.p-6 { padding: 60px; }
-
-.p-7 { padding: 100px; }
-
-.px-0 { padding-right: 0; padding-left: 0; }
-
-.px-1 { padding-right: 2.5px; padding-left: 2.5px; }
-
-.px-2 { padding-right: 5px; padding-left: 5px; }
-
-.px-3 { padding-right: 10px; padding-left: 10px; }
-
-.px-4 { padding-right: 15px; padding-left: 15px; }
-
-.px-5 { padding-right: 30px; padding-left: 30px; }
-
-.px-6 { padding-right: 60px; padding-left: 60px; }
-
-.px-7 { padding-right: 100px; padding-left: 100px; }
-
-.py-0 { padding-top: 0; padding-bottom: 0; }
-
-.py-1 { padding-top: 2.5px; padding-bottom: 2.5px; }
-
-.py-2 { padding-top: 5px; padding-bottom: 5px; }
-
-.py-3 { padding-top: 10px; padding-bottom: 10px; }
-
-.py-4 { padding-top: 15px; padding-bottom: 15px; }
-
-.py-5 { padding-top: 30px; padding-bottom: 30px; }
-
-.py-6 { padding-top: 60px; padding-bottom: 60px; }
-
-.py-7 { padding-top: 100px; padding-bottom: 100px; }
-
-.pt-0 { padding-top: 0; }
-
-.pt-1 { padding-top: 2.5px; }
-
-.pt-2 { padding-top: 5px; }
-
-.pt-3 { padding-top: 10px; }
-
-.pt-4 { padding-top: 15px; }
-
-.pt-5 { padding-top: 30px; }
-
-.pt-6 { padding-top: 60px; }
-
-.pt-7 { padding-top: 100px; }
-
-.pr-0 { padding-right: 0; }
-
-.pr-1 { padding-right: 2.5px; }
-
-.pr-2 { padding-right: 5px; }
-
-.pr-3 { padding-right: 10px; }
-
-.pr-4 { padding-right: 15px; }
-
-.pr-5 { padding-right: 30px; }
-
-.pr-6 { padding-right: 60px; }
-
-.pr-7 { padding-right: 100px; }
-
-.pb-0 { padding-bottom: 0; }
-
-.pb-1 { padding-bottom: 2.5px; }
-
-.pb-2 { padding-bottom: 5px; }
-
-.pb-3 { padding-bottom: 10px; }
-
-.pb-4 { padding-bottom: 15px; }
-
-.pb-5 { padding-bottom: 30px; }
-
-.pb-6 { padding-bottom: 60px; }
-
-.pb-7 { padding-bottom: 100px; }
-
-.pl-0 { padding-left: 0; }
-
-.pl-1 { padding-left: 2.5px; }
-
-.pl-2 { padding-left: 5px; }
-
-.pl-3 { padding-left: 10px; }
-
-.pl-4 { padding-left: 15px; }
-
-.pl-5 { padding-left: 30px; }
-
-.pl-6 { padding-left: 60px; }
-
-.pl-7 { padding-left: 100px; }
-
 .g-btn { font-family: "Rigid Square", sans-serif; font-style: normal; font-weight: 700; line-height: 22px; letter-spacing: normal; cursor: pointer; width: 100%; max-width: max-content; padding: 10px 30px; display: inline-block; outline: none; transition: 0.3s ease-out; text-decoration: none; text-align: center; border: none; background: none; font-size: 16px;}
 
 .g-btn:hover, .g-btn:active { box-shadow: 149 157 165/20% 0px 8px 24px; transition: 0.3s ease-out; text-decoration: none; }