diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 4908268..6a92345 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -209,7 +209,7 @@
   }
 
   .ui-accent-text {
-    @apply italic text-brand-accent;
+    @apply italic text-brand-primary;
   }
 
   .ui-hero-shell {
@@ -264,18 +264,23 @@
   }
 
   .ui-hero-button {
-    @apply inline-flex items-center justify-center rounded-full bg-[#FDFDF9] px-6 py-3 text-xs font-bold uppercase tracking-widest text-[#1F3D2D] transition-colors hover:bg-[#EAEFEA];
+    @apply inline-flex items-center justify-center rounded-full px-6 py-3 text-xs font-bold uppercase tracking-widest transition-colors;
+    background-color: var(--color-surface-page);
+    color: var(--color-text-main);
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   }
+  .ui-hero-button:hover {
+    opacity: 0.9;
+  }
 
   .ui-hero-link {
     @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors;
-    color: #D4AF37;
+    color: var(--color-brand-primary);
     padding: 0.75rem 1.5rem;
   }
 
   .ui-hero-link:hover {
-    color: #FDFDF9;
+    color: var(--color-surface-page);
   }
 
   .ui-banner-shell {
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index b7ac892..dea5806 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -40,7 +40,7 @@ function optionalText(value: unknown, lang: string) {
   return localizedValue(value, lang)
 }
 
-function renderAccentTitle(text: string, accentClassName = 'ui-accent-text not-italic') {
+function renderAccentTitle(text: string, accentClassName = 'ui-accent-text') {
   if (!text.includes('[') || !text.includes(']')) return text
 
   return text.split('[').map((part, index) => {