diff --git a/assets/css/typography.css b/assets/css/typography.css
index ad01deb..6052fc5 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -49,9 +49,9 @@ blockquote > q {
   cursor: pointer;
   text-decoration: underline;
   text-decoration-skip-ink: auto;
-  transition-duration: 200ms;
+  transition-duration: var(--speed-medium);
   transition-property: text-decoration-color;
-  transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
+  transition-timing-function: var(--easing-standard);
 }
 
 :any-link:hover {
diff --git a/assets/css/variables.css b/assets/css/variables.css
index 1ff99a3..83ba062 100644
--- a/assets/css/variables.css
+++ b/assets/css/variables.css
@@ -50,6 +50,15 @@
   --l-95: 95%;
   --l-100: 100%;
 
+  --speed-small: 100ms;
+  --speed-medium: 200ms;
+  --speed-large: 300ms;
+
+  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+  /* TODO(toby3d): --easing-emphasized */
+  --easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);
+  --easing-accelerated: cubic-bezier(0.4, 0.0, 1, 1);
+
   /* NOTE(toby3d): Colors */
   --background-color: hsl(0, 0%, var(--l-100));
   --color: hsl(0, 0%, var(--l-0));