diff --git a/static/variables.css b/static/variables.css
new file mode 100644
index 0000000..bf94842
--- /dev/null
+++ b/static/variables.css
@@ -0,0 +1,26 @@
+:root {
+	--content-width: 700px;
+	--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
+	--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+	--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+	--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+
+	--color-border: hsl(17, 24%, 90%);
+	--color-link: var(--color-brand-blue-3);
+
+	--color-brand-blue-1: #3054bf;
+	--color-brand-blue-2: #203880;
+	--color-brand-blue-3: #416fff;
+	--color-brand-blue-4: #101c40;
+	--color-brand-blue-5: #3964e6;
+
+	--color-brand-complement: orange;
+
+	--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
+	--text-color-dark: black;
+	--text-color-light: #f8f9fa;
+
+	--bg-dark: #343a40;
+	--bg-darker: #212529;
+	--bg-darkest: #000;
+}
diff --git a/templates/threads.html b/templates/threads.html
index d14cc5d..82f258b 100644
--- a/templates/threads.html
+++ b/templates/threads.html
@@ -21,6 +21,7 @@
       import TimeAgo from 'https://esm.sh/v135/@github/relative-time-element@4.4.0'
     </script>
 
+    <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
     <style>
       html {
@@ -30,7 +31,7 @@
         font-family: system-ui, sans-serif;
         max-width: 600px;
         margin: 0 auto;
-        color: #232323;
+        color: var(--text-color-dark);
       }
       header, footer, main {
         padding: 1em;
@@ -142,10 +143,9 @@
             padding-top: 5px;
             font-size: small;
             text-align: right;
-            color: #888;
 
             & a{
-              color: #888;
+              color: var(--text-color-dark);
 
                 &:hover {
                   color: blue;
@@ -280,7 +280,7 @@
                 <a href="{{ thread.url }}" title="{{ thread.created_at }}">
                   <relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
                 </a> &middot;
-                <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">Anchor</a>
+                <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">anchor</a>
               </div>
             </div>