diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec41b7f..da009e6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,10 +2,13 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
-@custom-variant dark (&:is(.dark *));
-
 /* Theme */
 @theme inline {
+  --font-sans:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-handwritten: 'Pacifico', cursive;
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -42,15 +45,19 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Brand */
+  --color-brand: var(--primary);
+  --color-brand-foreground: var(--primary-foreground);
+
+  /* Spacing aliases */
+  --spacing-brand: 1.5rem;
 }
 
 /* Light theme */
 :root {
   color-scheme: light dark;
 
-  --font-sans: Inter, system-ui, sans-serif;
-  --font-handwritten: Pacifico, cursive;
-
   font-weight: 400;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -128,11 +135,6 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 
-/* Font */
-.font-handwritten {
-  font-family: 'Pacifico', cursive;
-}
-
 /* Page transition */
 .page-enter-active,
 .page-leave-active {