diff --git a/assets/Fonts/Barlow/Barlow-Bold.ttf b/assets/Fonts/Barlow/Barlow-Bold.ttf
new file mode 100644
index 0000000..86f237c
Binary files /dev/null and b/assets/Fonts/Barlow/Barlow-Bold.ttf differ
diff --git a/assets/Fonts/Barlow/Barlow-Light.ttf b/assets/Fonts/Barlow/Barlow-Light.ttf
new file mode 100644
index 0000000..a6f71f2
Binary files /dev/null and b/assets/Fonts/Barlow/Barlow-Light.ttf differ
diff --git a/assets/Fonts/Barlow/Barlow-Regular.ttf b/assets/Fonts/Barlow/Barlow-Regular.ttf
new file mode 100644
index 0000000..d39c293
Binary files /dev/null and b/assets/Fonts/Barlow/Barlow-Regular.ttf differ
diff --git a/assets/Fonts/Barlow/Barlow-SemiBold.ttf b/assets/Fonts/Barlow/Barlow-SemiBold.ttf
new file mode 100644
index 0000000..e95527e
Binary files /dev/null and b/assets/Fonts/Barlow/Barlow-SemiBold.ttf differ
diff --git a/assets/Fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf b/assets/Fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf
new file mode 100644
index 0000000..217ef02
Binary files /dev/null and b/assets/Fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf differ
diff --git a/assets/css/main.css b/assets/css/main.css
index a461c50..49d8c27 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1 +1,113 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+@theme {
+  --font-barlow: 'Barlow', sans-serif;
+  --font-barlow-semi-condensed: 'BarlowSemiCondensed', sans-serif;
+
+  /* Color base */
+  --color-consumo-base: #F28C8C;
+  --color-consumo-light: #F6B1B1;
+  --color-consumo-extra-light: #FAD1D1;
+  --color-iguales-base: #C98EEF;
+  --color-iguales-light: #DAB2F4;
+  --color-iguales-extra-light: #E9D2F9;
+  --color-aula-base: #5CAACC;
+  --color-aula-light: #90C5DC;
+  --color-aula-extra-light: #BEDDEB;
+  --color-certifica-base: #CAF03F;
+  --color-certifica-light: #DFF68C;
+  --color-certifica-extra-light: #ECFABC;
+  --color-foro-base: #E2CA64;
+  --color-foro-light: #EBDB96;
+  --color-foro-extra-light: #F3EAC1;
+  --color-ods-base: #2FB384;
+  --color-ods-light: #72CBAB;
+  --color-ods-extra-light: #ACE1CE;
+  /* Color background */
+  --color-background-dark: #091B3D;
+  --color-background-dark-2: #0D2758;
+  --color-background-light: #F9F4F2;
+  --color-background-extra-light: #FDFCFB;
+  /* Color button */
+  --color-button: #143E8C;
+  --color-button-hover: #1E58C7;
+
+  --color-error: #B40502;
+  --color-success: #039B65;
+
+  /* Breakpoints */
+  --breakpoint-large: 480rem; /* Super desktop 1920px */
+
+  /* Font sizes */
+  --text-5.5: 1.375rem; /* 22px */
+  --text-8: 2rem; /* 32px */
+}
+
+@font-face {
+  font-family: "BarlowSemiCondensed";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Barlow SemiCondensed Bold"), local("BarlowBarlowSemiCondensed-Bold"),
+    url(../fonts/Barlow/BarlowSemiCondensed-Bold.ttf) format("opentype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Barlow Bold"), local("Barlow-Bold"),
+    url(../fonts/Barlow/Barlow-Bold.ttf) format("opentype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  src: local("Barlow Semibold"), local("Barlow-Semibold"),
+    url(../fonts/Barlow/Barlow-Semibold.ttf) format("opentype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  src: local("Barlow Medium"), local("Barlow-Medium"),
+    url(../fonts/Barlow/Barlow-Medium.ttf) format("opentype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Barlow Regular"), local("Barlow-Regular"),
+    url(../fonts/Barlow/Barlow-Regular.ttf) format("opentype");
+}
+
+html,
+body {
+  font-family: var(--font-barlow);
+  font-size: 18px;
+  height: 100dvh;
+  color: var(--color-black);
+}
+
+body footer {
+  position: sticky;
+  top: 100dvh;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+.min-h-screen-header {
+  min-height: calc(100dvh - 15rem);
+}
+
+.max-h-sidebar {
+  max-height: calc(100dvh - 8rem);
+}
+
+.body-overflow-hidden {
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/pages/typography-and-colours.vue b/pages/typography-and-colours.vue
new file mode 100644
index 0000000..f8dcf53
--- /dev/null
+++ b/pages/typography-and-colours.vue
@@ -0,0 +1,228 @@
+<template>
+  <main class="p-5 container mx-auto">
+    <NuxtLink to="/" class="my-16">Back</NuxtLink>
+    <section class="text-sm">
+      <h2 class="my-4 text-center text-4xl">Colours</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-8">
+        <!-- Consumo -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Consumo</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-consumo-base"></div>
+              <p>consumo-base</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-consumo-light"></div>
+              <p>consumo-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-consumo-extra-light"></div>
+              <p>consumo-extra-light</p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Iguales -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Iguales</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-iguales-base"></div>
+              <p>iguales-base</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-iguales-light"></div>
+              <p>iguales-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-iguales-extra-light"></div>
+              <p>iguales-extra-light</p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Aula -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Aula</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-aula-base"></div>
+              <p>aula-base</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-aula-light"></div>
+              <p>aula-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-aula-extra-light"></div>
+              <p>aula-extra-light</p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Certifica -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Certifica</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-certifica-base"></div>
+              <p>certifica-base</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-certifica-light"></div>
+              <p>certifica-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-certifica-extra-light"></div>
+              <p>certifica-extra-light</p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Foro -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Foro</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-foro-base"></div>
+              <p>foro-base</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-foro-light"></div>
+              <p>foro-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-foro-extra-light"></div>
+              <p>foro-extra-light</p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- ODS -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">ODS</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-ods-base"></div>
+              <p>ods-base</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-ods-light"></div>
+              <p>ods-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-ods-extra-light"></div>
+              <p>ods-extra-light</p>
+            </li>
+          </ul>
+        </div>
+        <!-- Background -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Background</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-background-dark"></div>
+              <p>background-dark</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-background-dark-2"></div>
+              <p>background-dark-2</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-background-light"></div>
+              <p>background-light</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-background-extra-light"></div>
+              <p>background-extra-light</p>
+            </li>
+          </ul>
+        </div>
+        <!-- Buttons -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Buttons</h3>
+          <ul class="flex flex-col gap-2">
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-button"></div>
+              <p>button</p>
+            </li>
+            <li class="flex items-center gap-2">
+              <div class="h-4 w-4 bg-button-hover"></div>
+              <p>button-hover</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="text-sm mt-16">
+      <h2 class="my-4 text-center text-4xl">Fonts</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Barlow Semi Condensed</h3>
+          <p class="font-barlow-semi-condensed text-base">This is a sample text in Barlow Semi Condensed.</p>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Barlow</h3>
+          <p class="font-barlow text-base">This is a sample text in Barlow.</p>
+        </div>
+      </div>
+      <div class="mt-8">
+        <h3 class="text-lg font-semibold mb-2">Font Sizes</h3>
+        <ul class="flex flex-col gap-4">
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Heading H1 (48px) - <span class="italic text-gray-400">Tailwind Text 5XL</span></h4>
+            <p class="text-5xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Heading H2 (36px) - <span class="italic text-gray-400">Tailwind Text 4XL</span></h4>
+            <p class="text-4xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Heading H3 (32px) - <span class="italic text-gray-400">Tailwind Text 8</span></h4>
+            <p class="text-8 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Heading H4 (22px) - <span class="italic text-gray-400">Tailwind Text 5.5</span></h4>
+            <p class="text-5.5 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Heading H5 (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
+            <p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Body-Text-2-Extra-Large (24px) - <span class="italic text-gray-400">Tailwind Text 2XL</span></h4>
+            <p class="text-2xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Body-Text-Extra-Large (18px) - <span class="italic text-gray-400">Tailwind Text LG</span></h4>
+            <p class="text-lg w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Body-Text-Large (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
+            <p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Body-Text-Medium (14px) - <span class="italic text-gray-400">Tailwind Text SM</span></h4>
+            <p class="text-sm w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Body-Text-Small (12px) - <span class="italic text-gray-400">Tailwind Text XS</span></h4>
+            <p class="text-xs w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+          <li class="flex justify-between py-2 border-t border-t-black">
+            <h4 class="text-lg w-1/3">Text Button (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
+            <p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
+          </li>
+
+        </ul>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e69de29