diff --git a/_layouts/page.njk b/_layouts/page.njk
index a460dea..5c2668e 100644
--- a/_layouts/page.njk
+++ b/_layouts/page.njk
@@ -26,15 +26,48 @@ eleventyComputed:
 {% css %}
 :root {
   --page-width: 75rem;
+  --color-text: #495057;
+  --color-primary: {{ eseColor }};
+  font-size: 17px;
 }
 body {
-  font-family: sans-serif;
   margin: 0;
-  font-size: 17px;
+  font-family: sans-serif;
+  line-height: 1.5;
+  color: var(--color-text);
 }
 main {
   max-width: var(--page-width);
   margin-left: auto;
   margin-right: auto;
 }
+h1, h2, h3, h4 {
+  font-family: Aileron, sans-serif;
+  color: var(--color-primary);
+}
+h1 {
+  font-weight: 700;
+  font-size: 2.8rem;
+  text-transform: uppercase;
+}
+h2 {
+  font-weight: 300;
+  font-size: 2.4rem;
+  line-height: 2;
+}
+h3 {
+  font-weight: 300;
+  font-size: 1.8rem;
+  line-height: 2;
+}
+h4 {
+  font-weight: 400;
+  font-size: 1.3rem;
+  line-height: 2;
+}
+h5 {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+}
 {% endcss %}
diff --git a/eleventy.config.js b/eleventy.config.js
index 05255df..b947469 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -5,6 +5,7 @@ const fs = require('fs');
 
 // update this :)
 const year = 2024;
+const eseColor = "#F221B7";
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
@@ -15,11 +16,13 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(bundlerPlugin);
 
   eleventyConfig.addGlobalData("year", year);
+  eleventyConfig.addGlobalData("eseColor", eseColor);
 
   eleventyConfig.addFilter("pageLang", function(value) {
     return value.filter(item => item.page.lang === this.page.lang)
   });
 
+  // copy aileron font
   eleventyConfig.addPassthroughCopy({'./submodules/aileron/fonts/*.(ttf|woff|woff2)': 'fonts'})
   eleventyConfig.addPassthroughCopy({'./submodules/aileron/aileron.lite.min.css': 'aileron.lite.min.css'})