diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css
index 74651b0..2222009 100644
--- a/src/app/(frontend)/globals.css
+++ b/src/app/(frontend)/globals.css
@@ -24,6 +24,17 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
+  --font-size-eyebrow: var(--type-eyebrow);
+  --font-size-caption: var(--type-caption);
+  --font-size-small: var(--type-small);
+  --font-size-body: var(--type-step-0);
+  --font-size-lead: var(--type-step-1);
+  --font-size-card-title: var(--type-step-2);
+  --font-size-subtitle: var(--type-step-3);
+  --font-size-section-title: var(--type-step-4);
+  --font-size-page-title: var(--type-step-6);
+  --font-size-display: var(--type-step-7);
+
   --radius-lg: 0.5rem;
   --radius-md: calc(0.5rem - 2px);
   --radius-sm: calc(0.5rem - 4px);
@@ -43,11 +54,45 @@
   --muted: #f1f5f9;
   --muted-foreground: #64748b;
   --accent: #EFBF04;
-  --accent-foreground: #ffffff;
+  --accent-foreground: #101828;
   --destructive: #ef4444;
   --border: #e2e8f0;
   --input: #e2e8f0;
   --ring: #03093A;
+
+  /* Fluid type scale: 320px -> 1440px, 16px -> 18px body. */
+  --type-eyebrow: clamp(0.6875rem, 0.6696rem + 0.0893vw, 0.75rem);
+  --type-caption: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
+  --type-small: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
+  --type-step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
+  --type-step-1: clamp(1.125rem, 1.0446rem + 0.4018vw, 1.4063rem);
+  --type-step-2: clamp(1.2656rem, 1.125rem + 0.7031vw, 1.7578rem);
+  --type-step-3: clamp(1.4238rem, 1.2028rem + 1.1049vw, 2.1973rem);
+  --type-step-4: clamp(1.6018rem, 1.2747rem + 1.6354vw, 2.7466rem);
+  --type-step-5: clamp(1.802rem, 1.336rem + 2.3303vw, 3.4332rem);
+  --type-step-6: clamp(2.0273rem, 1.3804rem + 3.2346vw, 4.2915rem);
+  --type-step-7: clamp(2.2807rem, 1.3996rem + 4.4053vw, 5.3644rem);
+
+  --leading-display: 0.98;
+  --leading-heading: 1.05;
+  --leading-body: 1.7;
+  --leading-small: 1.55;
+
+  /* Semantic text roles. Gold stays bright on dark surfaces and decorative uses. */
+  --text-heading: #101828;
+  --text-body: #344054;
+  --text-secondary: #475467;
+  --text-muted: #596579;
+  --text-link: #111D55;
+  --text-link-hover: #051A87;
+  --text-eyebrow-light: #285F8C;
+  --text-brand-on-light: #765600;
+  --text-brand-on-dark: #EFBF04;
+  --text-on-accent: #101828;
+  --text-inverse: #ffffff;
+  --text-inverse-secondary: rgba(255, 255, 255, 0.72);
+  --text-inverse-muted: rgba(255, 255, 255, 0.65);
+  --text-danger: #B91C1C;
 }
 
 .dark {
@@ -64,7 +109,7 @@
   --muted: #1e293b;
   --muted-foreground: #94a3b8;
   --accent: #EFBF04;
-  --accent-foreground: #ffffff;
+  --accent-foreground: #101828;
   --destructive: #7f1d1d;
   --border: rgba(255, 255, 255, 0.1);
   --input: rgba(255, 255, 255, 0.15);
@@ -77,6 +122,9 @@
   }
   body {
     @apply bg-background text-foreground font-body;
+    color: var(--text-body);
+    font-size: var(--type-step-0);
+    line-height: var(--leading-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin: 0;
@@ -88,6 +136,7 @@
   }
   h1, h2, h3, h4, h5, h6 {
     @apply font-display font-bold;
+    color: var(--text-heading);
   }
 
   blockquote, q,
@@ -106,6 +155,99 @@
   }
 }
 
+@layer components {
+  .type-display,
+  .type-page-title,
+  .type-section-title,
+  .type-subtitle,
+  .type-card-title,
+  .type-eyebrow {
+    font-family: var(--font-display);
+    font-weight: 700;
+    hyphens: auto;
+    overflow-wrap: anywhere;
+  }
+
+  .type-display {
+    font-size: var(--type-step-7);
+    line-height: var(--leading-display);
+    letter-spacing: -0.03em;
+  }
+
+  .type-page-title {
+    font-size: var(--type-step-6);
+    line-height: var(--leading-display);
+    letter-spacing: -0.03em;
+  }
+
+  .type-section-title {
+    font-size: var(--type-step-4);
+    line-height: var(--leading-heading);
+    letter-spacing: -0.025em;
+  }
+
+  .type-subtitle {
+    font-size: var(--type-step-3);
+    line-height: var(--leading-heading);
+    letter-spacing: -0.02em;
+  }
+
+  .type-card-title {
+    font-size: var(--type-step-2);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  .type-lead,
+  .type-body,
+  .type-small,
+  .type-caption {
+    font-family: var(--font-body);
+    font-weight: 400;
+    overflow-wrap: anywhere;
+  }
+
+  .type-lead {
+    font-size: var(--type-step-1);
+    line-height: var(--leading-body);
+  }
+
+  .type-body {
+    font-size: var(--type-step-0);
+    line-height: var(--leading-body);
+  }
+
+  .type-small {
+    font-size: var(--type-small);
+    line-height: var(--leading-small);
+  }
+
+  .type-caption {
+    font-size: var(--type-caption);
+    line-height: var(--leading-small);
+  }
+
+  .type-eyebrow {
+    font-size: var(--type-eyebrow);
+    line-height: 1.3;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+  }
+
+  .text-role-heading { color: var(--text-heading); }
+  .text-role-body { color: var(--text-body); }
+  .text-role-secondary { color: var(--text-secondary); }
+  .text-role-muted { color: var(--text-muted); }
+  .text-role-link { color: var(--text-link); }
+  .text-role-eyebrow { color: var(--text-eyebrow-light); }
+  .text-role-brand-light { color: var(--text-brand-on-light); }
+  .text-role-brand-dark { color: var(--text-brand-on-dark); }
+  .text-role-inverse { color: var(--text-inverse); }
+  .text-role-inverse-secondary { color: var(--text-inverse-secondary); }
+  .text-role-inverse-muted { color: var(--text-inverse-muted); }
+  .text-role-danger { color: var(--text-danger); }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
diff --git a/src/spa/components/AwardsGridSection.tsx b/src/spa/components/AwardsGridSection.tsx
index 7b5f159..386dd22 100644
--- a/src/spa/components/AwardsGridSection.tsx
+++ b/src/spa/components/AwardsGridSection.tsx
@@ -110,14 +110,14 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) {
       </div>
 
       <div style={{ background: '#fff', color: '#101828', padding: isMobile ? '24px 24px 30px' : '34px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-        <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#4A8FC9', marginBottom: 16 }}>
+        <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--text-eyebrow-light)', marginBottom: 16 }}>
           {fallbackText(card.label, 'Auszeichnung 01')}
         </span>
-        <h3 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.7rem, 8vw, 2.8rem)' : 'clamp(2.1rem, 3.2vw, 3.3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.98, margin: '0 0 14px', overflowWrap: 'anywhere' }}>
+        <h3 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 14px', overflowWrap: 'anywhere' }}>
           <Lines text={fallbackText(card.title, '')} />
         </h3>
         <div style={{ width: 44, height: 2, background: GOLD, marginBottom: 18 }} />
-        <p style={{ fontFamily: FB, fontSize: isMobile ? 16 : 17, color: 'rgba(16,24,40,0.62)', lineHeight: 1.6, margin: 0, maxWidth: 560 }}>
+        <p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 560 }}>
           {fallbackText(card.description, '')}
         </p>
 
@@ -228,14 +228,14 @@ function SupportingAwardCards({
             </div>
 
             <div style={{ padding: isMobile ? '28px 24px 32px' : followsFeaturedCard ? '38px 44px 42px' : '36px 36px 40px', display: 'flex', flexDirection: 'column', flex: 1 }}>
-              <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.26em', textTransform: 'uppercase', color: isDarkCard ? 'rgba(239,191,4,0.8)' : '#4A8FC9', marginBottom: 12 }}>
+              <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.26em', textTransform: 'uppercase', color: isDarkCard ? 'rgba(239,191,4,0.8)' : 'var(--text-eyebrow-light)', marginBottom: 12 }}>
                 {fallbackText(card.label, '')}
               </span>
-              <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.25rem, 2vw, 1.7rem)', fontWeight: 900, color: isDarkCard ? '#fff' : '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 16px', overflowWrap: 'anywhere' }}>
+              <h3 className={`type-card-title ${isDarkCard ? 'text-role-inverse' : 'text-role-heading'}`} style={{ textTransform: 'uppercase', margin: '0 0 16px', overflowWrap: 'anywhere' }}>
                 <Lines text={fallbackText(card.title, '')} />
               </h3>
               <div style={{ width: 36, height: 2, background: GOLD, marginBottom: 22 }} />
-              <p style={{ fontFamily: FB, fontSize: 18, color: isDarkCard ? 'rgba(255,255,255,0.62)' : 'rgba(16,24,40,0.55)', lineHeight: 1.7, margin: 0, flex: 1 }}>
+              <p className={`type-body ${isDarkCard ? 'text-role-inverse-secondary' : 'text-role-secondary'}`} style={{ margin: 0, flex: 1 }}>
                 {fallbackText(card.description, '')}
               </p>
 
@@ -306,14 +306,14 @@ export default function AwardsGridSection({ content, featuredGoldeneBavaria = fa
       <section id="auszeichnungen" style={{ background: featuredCard ? '#fff' : '#F7F7F5', position: 'relative', overflow: 'hidden', isolation: 'isolate' }}>
         {!featuredCard ? <MunichSkylineBg /> : null}
         <div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', borderBottom: '1px solid rgba(3,9,58,0.1)' }}>
-          <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>
+          <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>
             {fallbackText(section.eyebrow, participationContent.awardsGrid.eyebrow)}
           </span>
           <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1fr)', gap: isMobile ? 16 : 56, alignItems: 'end' }}>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0, overflowWrap: 'anywhere' }}>
+            <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0, overflowWrap: 'anywhere' }}>
               <Lines text={fallbackText(section.heading, participationContent.awardsGrid.heading)} />
             </h2>
-            <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
+            <p className="type-body text-role-secondary" style={{ margin: 0 }}>
               {fallbackText(section.description, participationContent.awardsGrid.description)}
             </p>
           </div>
@@ -332,10 +332,10 @@ export default function AwardsGridSection({ content, featuredGoldeneBavaria = fa
         <section id="weitere-auszeichnungen" aria-label="Weitere Auszeichnungen" style={{ background: '#fff', position: 'relative', overflow: 'hidden', padding: isMobile ? '40px 0 56px' : '64px 0 80px', borderTop: '1px solid rgba(17,29,85,0.08)', scrollMarginTop: 80 }}>
           <div style={{ padding: isMobile ? '0 24px 32px' : '0 80px 48px' }}>
             <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1fr)', gap: isMobile ? 16 : 56, alignItems: 'end' }}>
-              <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3.2vw, 2.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0, overflowWrap: 'anywhere' }}>
+              <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0, overflowWrap: 'anywhere' }}>
                 <Lines text={fallbackText(section.supportingHeading, participationContent.awardsGrid.supportingHeading)} />
               </h2>
-              <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
+              <p className="type-body text-role-secondary" style={{ margin: 0 }}>
                 {fallbackText(section.supportingDescription, participationContent.awardsGrid.supportingDescription)}
               </p>
             </div>
diff --git a/src/spa/components/HomeWinnersSection.tsx b/src/spa/components/HomeWinnersSection.tsx
index 793d3f1..4c02c86 100644
--- a/src/spa/components/HomeWinnersSection.tsx
+++ b/src/spa/components/HomeWinnersSection.tsx
@@ -86,8 +86,8 @@ function HomeWinnerCard({
           <Star size={10} style={{ color: '#EFBF04', flexShrink: 0 }} fill="#EFBF04" />
           <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, color: '#EFBF04', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{winner?.year || staticWinner?.year} · {winner?.awardType || winner?.type || staticWinner?.type}</span>
         </div>
-        <h3 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 16, fontWeight: 700, color: '#fff', margin: '0 0 3px', lineHeight: 1.3 }}>{title}</h3>
-        <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.75)', margin: 0 }}>{winner?.category || staticWinner?.category}</p>
+        <h3 className="type-small text-role-inverse" style={{ margin: '0 0 3px', fontWeight: 700 }}>{title}</h3>
+        <p className="type-caption text-role-inverse-secondary" style={{ margin: 0 }}>{winner?.category || staticWinner?.category}</p>
         <div style={{ marginTop: 10, display: 'inline-block', background: '#EFBF04', color: '#101828', padding: '5px 14px', borderRadius: 999, fontSize: 10, fontFamily: '"IBM Plex Sans", sans-serif', fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: hovered ? 1 : 0, transform: hovered ? 'translateY(0)' : 'translateY(6px)', transition: 'all 0.25s' }}>
           {hoverLabel}
         </div>
@@ -121,7 +121,7 @@ export default function HomeWinnersSection({ content }: { content?: HomeWinnersC
       <div style={{ padding: isMobile ? '48px 24px 32px' : '72px 80px 48px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'flex-end', justifyContent: 'space-between', gap: isMobile ? 16 : 0 }}>
         <div>
           <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#EFBF04', display: 'block', marginBottom: 12 }}>{fallbackText(winnersSection.eyebrow, homeContent.winners.eyebrow)}</span>
-          <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>
+          <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
             <Lines text={fallbackText(winnersSection.heading, homeContent.winners.heading)} />
           </h2>
         </div>
diff --git a/src/spa/components/TestimonialsSection.tsx b/src/spa/components/TestimonialsSection.tsx
index 7711152..bfacbeb 100644
--- a/src/spa/components/TestimonialsSection.tsx
+++ b/src/spa/components/TestimonialsSection.tsx
@@ -77,8 +77,8 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
       {isMobile && (
         <div style={{ padding: '48px 24px 52px', position: 'relative', zIndex: 1 }}>
           {/* Section header */}
-          <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{eyebrow}</span>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 8vw, 2.3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 16px' }}>
+          <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{eyebrow}</span>
+          <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 16px' }}>
             <Lines text={heading} />
           </h2>
           <div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
@@ -94,7 +94,7 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
             {/* Body */}
             <div style={{ padding: '22px 22px 24px' }}>
               <span aria-hidden style={{ fontFamily: 'Georgia, serif', fontSize: 52, lineHeight: 0.4, color: '#EFBF04', display: 'block', height: 26, marginBottom: 6 }}>&ldquo;</span>
-              <p style={{ fontFamily: FF, fontSize: '1.2rem', fontWeight: 300, color: '#101828', lineHeight: 1.5, margin: '0 0 22px' }}>{t.quote}</p>
+              <p className="type-lead text-role-body" style={{ margin: '0 0 22px' }}>{t.quote}</p>
               <div style={{ width: 36, height: 2, background: '#EFBF04', marginBottom: 16 }} />
               <div style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#101828', marginBottom: 4 }}>{t.name}</div>
               <div style={{ fontFamily: FF, fontSize: 14, color: 'rgba(16,24,40,0.5)' }}>{t.role} · {t.company}</div>
@@ -134,13 +134,13 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
 
         {/* Right – quote */}
         <div style={{ padding: isMobile ? '40px 22px 56px' : '80px 72px 80px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-          <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{eyebrow}</span>
+          <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{eyebrow}</span>
 
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 2.6vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 36px' }}>
+          <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 36px' }}>
             <Lines text={desktopHeading} />
           </h2>
 
-          <p style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 300, color: '#101828', lineHeight: 1.55, margin: '0 0 40px' }}>
+          <p className="type-lead text-role-body" style={{ margin: '0 0 40px' }}>
             {t.quote}
           </p>
 
@@ -148,7 +148,7 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
           <div>
             <div style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#101828', marginBottom: 4 }}>{t.name}</div>
             <div style={{ fontFamily: FF, fontSize: 12, color: 'rgba(16,24,40,0.5)' }}>{t.role} · {t.company}</div>
-            <div style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: '#4A8FC9', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{yearPrefix} {t.year}</div>
+            <div style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: 'var(--text-eyebrow-light)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{yearPrefix} {t.year}</div>
           </div>
 
           <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 40 }}>
diff --git a/src/spa/components/WegZurAuszeichnungSection.tsx b/src/spa/components/WegZurAuszeichnungSection.tsx
index f37296d..5808815 100644
--- a/src/spa/components/WegZurAuszeichnungSection.tsx
+++ b/src/spa/components/WegZurAuszeichnungSection.tsx
@@ -47,10 +47,10 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
         {/* Section header */}
         <div style={{ marginBottom: 36 }}>
           <span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 16px' }}>
+          <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 16px' }}>
             <Lines text={fallbackText(section.heading, participationContent.process.heading)} />
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, margin: 0 }}>
+          <p className="type-small text-role-inverse-secondary" style={{ margin: 0 }}>
             {fallbackText(section.description, participationContent.process.description)}
           </p>
         </div>
@@ -71,12 +71,12 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
                       <span style={{ width: 1, height: 11, background: 'rgba(255,255,255,0.2)' }} />
                       <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.06em' }}>{fallbackText(item.date, '')}</span>
                     </div>
-                    <h3 style={{ fontFamily: FF, fontSize: '1.35rem', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
+                    <h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
                       {fallbackText(item.title, '')}
                     </h3>
                   </div>
                 </div>
-                <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
+                <p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>
                   {fallbackText(item.desc, '')}
                 </p>
                 {/* Step progress indicator */}
@@ -101,11 +101,11 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
         <div style={{ padding: '56px 80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', borderBottom: '1px solid rgba(255,255,255,0.07)', flexShrink: 0 }}>
           <div>
             <span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
+            <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
               <Lines text={fallbackText(section.heading, participationContent.process.heading)} />
             </h2>
           </div>
-          <p style={{ fontFamily: FB, fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, margin: 0 }}>
+          <p className="type-small text-role-inverse-secondary" style={{ margin: 0 }}>
             {fallbackText(section.description, participationContent.process.description)}
           </p>
         </div>
@@ -167,11 +167,11 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
                       <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.08em' }}>{fallbackText(item.date, '')}</span>
                     </div>
                     <div style={{ width: 32, height: 1, background: GOLD, marginBottom: 16, opacity: 0.5 }} />
-                    <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.5rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
+                    <h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
                       {fallbackText(item.title, '')}
                     </h3>
                   </div>
-                  <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
+                  <p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>
                     {fallbackText(item.desc, '')}
                   </p>
                   {/* Step progress indicator */}
diff --git a/src/spa/components/forms/ApplicationFormSection.tsx b/src/spa/components/forms/ApplicationFormSection.tsx
index 63cf790..4879aeb 100644
--- a/src/spa/components/forms/ApplicationFormSection.tsx
+++ b/src/spa/components/forms/ApplicationFormSection.tsx
@@ -50,11 +50,11 @@ export function ApplicationFormSection({ source }: { source: NewsletterSource })
       <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}>
         <div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
           <span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.36em', fontWeight: 700, display: 'block', marginBottom: 16, opacity: 0.8 }}>{showApplicationForm ? fallbackText(section.eyebrow, homeContent.application.eyebrow) : newsletterCopy.eyebrow}</span>
-          <h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.6rem)' : 'clamp(1.8rem, 2.8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, marginBottom: 16 }}>
+          <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 16 }}>
             <Lines text={showApplicationForm ? fallbackText(section.heading, homeContent.application.heading) : newsletterCopy.heading} />
           </h2>
           <div style={{ width: 32, height: 2, background: '#EFBF04', marginBottom: 20 }} />
-          <p style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, marginBottom: 32 }}>
+          <p className="type-small text-role-inverse-secondary" style={{ marginBottom: 32 }}>
             {showApplicationForm ? fallbackText(section.body, homeContent.application.body) : newsletterCopy.body}
           </p>
 
@@ -99,7 +99,7 @@ export function ApplicationFormSection({ source }: { source: NewsletterSource })
 
           <div style={{ padding: isMobile ? '32px 24px' : '24px 48px 32px 40px', flex: isMobile ? 'none' : 1, height: isMobile && showApplicationForm ? '82svh' : undefined, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative', zIndex: 1 }}>
             <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.5)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 8 }}>{showApplicationForm ? fallbackText(section.formEyebrow, homeContent.application.formEyebrow) : newsletterCopy.formEyebrow}</span>
-            <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.2rem, 1.8vw, 1.6rem)', fontWeight: 900, color: '#111D55', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 24 }}>{showApplicationForm ? fallbackText(section.formTitle, homeContent.application.formTitle) : newsletterCopy.formTitle}</h3>
+            <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 24 }}>{showApplicationForm ? fallbackText(section.formTitle, homeContent.application.formTitle) : newsletterCopy.formTitle}</h3>
             {showApplicationForm ? <BewerbungsForm theme="gold" content={form} /> : <NewsletterInterestForm copy={newsletterCopy} phase={newsletterPhase} source={source} />}
           </div>
         </div>
diff --git a/src/spa/components/forms/BewerbungsForm.tsx b/src/spa/components/forms/BewerbungsForm.tsx
index 0d5b4f0..c757b95 100644
--- a/src/spa/components/forms/BewerbungsForm.tsx
+++ b/src/spa/components/forms/BewerbungsForm.tsx
@@ -345,10 +345,10 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
           <div style={{ width: 52, height: 52, background: c.successIcon, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
             <Check size={22} color={c.successIconInner} strokeWidth={3} />
           </div>
-          <h3 style={{ fontSize: 18, fontWeight: 900, color: c.successHeading, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 10 }}>
+          <h3 className="type-card-title" style={{ color: c.successHeading, textTransform: 'uppercase', marginBottom: 10 }}>
             {data.type === 'selbst' ? fallbackText(formContent.success.selfHeading, participationContent.form.success.selfHeading) : fallbackText(formContent.success.nominationHeading, participationContent.form.success.nominationHeading)}
           </h3>
-          <p style={{ fontSize: 13, color: c.successBody, maxWidth: 340, margin: '0 auto', lineHeight: 1.7 }}>
+          <p className="type-caption" style={{ color: c.successBody, maxWidth: 340, margin: '0 auto' }}>
             {data.type === 'selbst'
               ? <><span>{fallbackText(formContent.success.selfPrefix, participationContent.form.success.selfPrefix)}</span><strong style={{ color: c.successName }}>{data.firmenname}</strong><span>{fallbackText(formContent.success.selfMiddle, participationContent.form.success.selfMiddle)}</span><strong style={{ color: c.successAccent }}>{data.email}</strong><span>{fallbackText(formContent.success.selfSuffix, participationContent.form.success.selfSuffix)}</span></>
               : <><span>{fallbackText(formContent.success.nominationPrefix, participationContent.form.success.nominationPrefix)}</span><strong style={{ color: c.successName }}>{data.nomName}</strong><span>{fallbackText(formContent.success.nominationMiddle, participationContent.form.success.nominationMiddle)}</span><strong style={{ color: c.successAccent }}>{data.nomFirma}</strong><span>{fallbackText(formContent.success.nominationSuffix, participationContent.form.success.nominationSuffix)}</span></>
@@ -400,8 +400,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
             {/* ── Step 0: Typ-Wahl ── */}
             {step === 0 && (
               <div>
-                <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 8 }}>{fallbackText(formContent.typeStep.eyebrow, participationContent.form.typeStep.eyebrow)}</p>
-                <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 14 }}>{fallbackText(formContent.typeStep.heading, participationContent.form.typeStep.heading)}</h3>
+                <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 8 }}>{fallbackText(formContent.typeStep.eyebrow, participationContent.form.typeStep.eyebrow)}</p>
+                <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase', marginBottom: 14 }}>{fallbackText(formContent.typeStep.heading, participationContent.form.typeStep.heading)}</h3>
                 <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 8 }}>
                   <TypeCard c={c} selected={data.type === 'selbst'} title={fallbackText(formContent.typeStep.selfTitle, participationContent.form.typeStep.selfTitle)}
                     desc={fallbackText(formContent.typeStep.selfDesc, participationContent.form.typeStep.selfDesc)}
@@ -417,8 +417,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
             {step === 1 && data.type === 'selbst' && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.eligibility.eyebrow, participationContent.form.eligibility.eyebrow)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.eligibility.heading, participationContent.form.eligibility.heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.eligibility.eyebrow, participationContent.form.eligibility.eyebrow)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.eligibility.heading, participationContent.form.eligibility.heading)}</h3>
                 </div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                   <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -450,12 +450,12 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                     <AlertCircle size={18} color={c.alertIcon} />
-                    <h3 style={{ fontFamily: FF, fontSize: 15, fontWeight: 800, color: c.alertTitle, textTransform: 'uppercase' }}>{fallbackText(formContent.eligibility.ineligibleHeading, participationContent.form.eligibility.ineligibleHeading)}</h3>
+                    <h3 className="type-small" style={{ color: c.alertTitle, textTransform: 'uppercase', fontWeight: 700 }}>{fallbackText(formContent.eligibility.ineligibleHeading, participationContent.form.eligibility.ineligibleHeading)}</h3>
                   </div>
-                  <p style={{ fontFamily: FF, fontSize: 13, color: c.bodyText, lineHeight: 1.7 }}>
+                  <p className="type-caption" style={{ color: c.bodyText }}>
                     {fallbackText(formContent.eligibility.ineligibleBody, participationContent.form.eligibility.ineligibleBody)}
                   </p>
-                  <p style={{ fontFamily: FF, fontSize: 13, color: c.mutedText, lineHeight: 1.7 }}>
+                  <p className="type-caption" style={{ color: c.mutedText }}>
                     {fallbackText(formContent.eligibility.ineligibleContactPrefix, participationContent.form.eligibility.ineligibleContactPrefix)} <span style={{ color: c.alertEmail }}>{fallbackText(formContent.eligibility.ineligibleContactEmail, participationContent.form.eligibility.ineligibleContactEmail)}</span>
                   </p>
                 </div>
@@ -463,8 +463,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
               return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                   <div>
-                    <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.selfContact.eyebrow, participationContent.form.selfContact.eyebrow)}</p>
-                    <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.selfContact.heading, participationContent.form.selfContact.heading)}</h3>
+                    <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.selfContact.eyebrow, participationContent.form.selfContact.eyebrow)}</p>
+                    <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.selfContact.heading, participationContent.form.selfContact.heading)}</h3>
                   </div>
                   <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
                     <Field c={c} label={fallbackText(formContent.selfContact.companyLabel, participationContent.form.selfContact.companyLabel)} error={errors.firmenname} requiredSuffix={fallbackText(formContent.requiredSuffix, participationContent.form.requiredSuffix)}>
@@ -480,7 +480,7 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
                       <StyledInput c={c} type="tel" value={data.telefon} onChange={e => set('telefon', e.target.value)} placeholder={fallbackText(formContent.selfContact.phonePlaceholder, participationContent.form.selfContact.phonePlaceholder)} />
                     </Field>
                   </div>
-                  <p style={{ fontFamily: FF, fontSize: 12, color: c.mutedText, lineHeight: 1.6 }}>
+                  <p className="type-caption" style={{ color: c.mutedText }}>
                     {fallbackText(formContent.selfContact.footnote, participationContent.form.selfContact.footnote)}
                   </p>
                 </div>
@@ -491,8 +491,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
             {step === 3 && data.type === 'selbst' && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.selfSummary.eyebrow, participationContent.form.selfSummary.eyebrow)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.selfSummary.heading, participationContent.form.selfSummary.heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.selfSummary.eyebrow, participationContent.form.selfSummary.eyebrow)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.selfSummary.heading, participationContent.form.selfSummary.heading)}</h3>
                 </div>
                 <div style={{ borderTop: `1px solid ${c.border}` }}>
                   {[
@@ -514,8 +514,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
             {step === 1 && data.type === 'vorschlag' && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.nominationCompany.eyebrow, participationContent.form.nominationCompany.eyebrow)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.nominationCompany.heading, participationContent.form.nominationCompany.heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.nominationCompany.eyebrow, participationContent.form.nominationCompany.eyebrow)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.nominationCompany.heading, participationContent.form.nominationCompany.heading)}</h3>
                 </div>
                 <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
                   <Field c={c} label={fallbackText(formContent.nominationCompany.companyLabel, participationContent.form.nominationCompany.companyLabel)} error={errors.nomFirma} requiredSuffix={fallbackText(formContent.requiredSuffix, participationContent.form.requiredSuffix)}>
@@ -535,8 +535,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
             {step === 2 && data.type === 'vorschlag' && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.nominationContact.eyebrow, participationContent.form.nominationContact.eyebrow)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.nominationContact.heading, participationContent.form.nominationContact.heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.nominationContact.eyebrow, participationContent.form.nominationContact.eyebrow)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.nominationContact.heading, participationContent.form.nominationContact.heading)}</h3>
                 </div>
                 <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
                   <Field c={c} label={fallbackText(formContent.nominationContact.nameLabel, participationContent.form.nominationContact.nameLabel)} error={errors.nomName} requiredSuffix={fallbackText(formContent.requiredSuffix, participationContent.form.requiredSuffix)}>
@@ -549,7 +549,7 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
                     <StyledInput c={c} value={data.nomBeziehung} onChange={e => set('nomBeziehung', e.target.value)} placeholder={fallbackText(formContent.nominationContact.relationshipPlaceholder, participationContent.form.nominationContact.relationshipPlaceholder)} />
                   </Field>
                 </div>
-                <p style={{ fontFamily: FF, fontSize: 12, color: c.mutedText, lineHeight: 1.6 }}>
+                <p className="type-caption" style={{ color: c.mutedText }}>
                   {fallbackText(formContent.nominationContact.footnote, participationContent.form.nominationContact.footnote)}
                 </p>
               </div>
@@ -559,8 +559,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
             {step === 3 && data.type === 'vorschlag' && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.nominationSummary.eyebrow, participationContent.form.nominationSummary.eyebrow)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.nominationSummary.heading, participationContent.form.nominationSummary.heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.nominationSummary.eyebrow, participationContent.form.nominationSummary.eyebrow)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.nominationSummary.heading, participationContent.form.nominationSummary.heading)}</h3>
                 </div>
                 <div style={{ borderTop: `1px solid ${c.border}` }}>
                   {[
diff --git a/src/spa/components/forms/KontaktForm.tsx b/src/spa/components/forms/KontaktForm.tsx
index bc72258..b85b83c 100644
--- a/src/spa/components/forms/KontaktForm.tsx
+++ b/src/spa/components/forms/KontaktForm.tsx
@@ -264,10 +264,10 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
         <div style={{ width: 56, height: 56, background: c.successIcon, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
           <Check size={24} color={c.successIconIn} strokeWidth={2.5} />
         </div>
-        <h3 style={{ fontSize: 20, fontWeight: 800, color: c.successHeading, marginBottom: 10, letterSpacing: '-0.02em', fontFamily: FF }}>
+        <h3 className="type-card-title" style={{ color: c.successHeading, marginBottom: 10 }}>
           {fallbackText(copy.success.heading, contactFormContent.success.heading)}
         </h3>
-        <p style={{ fontSize: 15, color: c.successBody, lineHeight: 1.7, maxWidth: 280, margin: '0 auto', fontFamily: FF, overflowWrap: 'anywhere' }}>
+        <p className="type-small" style={{ color: c.successBody, maxWidth: 280, margin: '0 auto', overflowWrap: 'anywhere' }}>
           {fallbackText(copy.success.prefix, contactFormContent.success.prefix)} <strong style={{ color: c.successHeading }}>{data.name}</strong>. {fallbackText(copy.success.suffixBeforeEmail, contactFormContent.success.suffixBeforeEmail)}{' '}
           <strong style={{ color: c.successIcon }}>{data.email}</strong>.
         </p>
@@ -326,7 +326,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
 
             {step === 0 && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                <p style={{ fontSize: 14, color: c.subtext, marginBottom: 12, fontFamily: FF }}>{fallbackText(copy.prompts.subject, contactFormContent.prompts.subject)}</p>
+                <p className="type-small" style={{ color: c.subtext, marginBottom: 12 }}>{fallbackText(copy.prompts.subject, contactFormContent.prompts.subject)}</p>
                 {copy.subjects.map(item => (
                   <BetreffCard key={item.value} c={c} item={item} selected={data.betreff === item.value}
                     onClick={() => { set('betreff', item.value); setDir(1); setStep(1); }} />
@@ -336,7 +336,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
 
             {step === 1 && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-                <p style={{ fontSize: 14, color: c.subtext, marginBottom: 4, fontFamily: FF }}>{fallbackText(copy.prompts.contact, contactFormContent.prompts.contact)}</p>
+                <p className="type-small" style={{ color: c.subtext, marginBottom: 4 }}>{fallbackText(copy.prompts.contact, contactFormContent.prompts.contact)}</p>
                 {([
                   { label: copy.fields.nameLabel, key: 'name'  as const, type: 'text',  placeholder: copy.fields.namePlaceholder, error: errors.name  },
                   { label: copy.fields.emailLabel, key: 'email' as const, type: 'email', placeholder: copy.fields.emailPlaceholder, error: errors.email },
@@ -352,7 +352,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
 
             {step === 2 && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-                <p style={{ fontSize: 14, color: c.subtext, marginBottom: 4, fontFamily: FF }}>{fallbackText(copy.prompts.message, contactFormContent.prompts.message)}</p>
+                <p className="type-small" style={{ color: c.subtext, marginBottom: 4 }}>{fallbackText(copy.prompts.message, contactFormContent.prompts.message)}</p>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                   <label style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: c.labelText, fontFamily: FF }}>{fallbackText(copy.fields.messageLabel, contactFormContent.fields.messageLabel)}</label>
                   <StyledTextarea c={c} value={data.nachricht} onChange={e => set('nachricht', e.target.value)} rows={5} placeholder={fallbackText(copy.fields.messagePlaceholder, contactFormContent.fields.messagePlaceholder)} />
@@ -405,7 +405,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
           )}
         </div>
       )}
-      {submissionError && <p role="alert" style={{ fontFamily: FF, fontSize: 11, color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
+      {submissionError && <p role="alert" className="type-caption" style={{ color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
     </div>
   );
 }
diff --git a/src/spa/components/forms/NewsletterInterestForm.tsx b/src/spa/components/forms/NewsletterInterestForm.tsx
index a8d0002..6858eba 100644
--- a/src/spa/components/forms/NewsletterInterestForm.tsx
+++ b/src/spa/components/forms/NewsletterInterestForm.tsx
@@ -72,10 +72,10 @@ export function NewsletterInterestForm({
         <div style={{ width: 52, height: 52, background: '#111D55', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
           <Check size={22} color="#EFBF04" strokeWidth={3} />
         </div>
-        <h4 style={{ fontFamily: FF, fontSize: isMobile ? 20 : 24, fontWeight: 900, color: '#111D55', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 12px' }}>
+        <h4 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
           {copy.successHeading}
         </h4>
-        <p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(17,29,85,0.66)', lineHeight: 1.7, margin: 0, maxWidth: 430 }}>
+        <p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 430 }}>
           {copy.successBody}
         </p>
       </div>
@@ -95,7 +95,7 @@ export function NewsletterInterestForm({
         minHeight: 0,
       }}
     >
-      <p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(17,29,85,0.68)', lineHeight: 1.75, margin: '0 0 28px', maxWidth: 520 }}>
+      <p className="type-body text-role-secondary" style={{ margin: '0 0 28px', maxWidth: 520 }}>
         {copy.formBody}
       </p>
       <div aria-hidden="true" style={{ position: 'absolute', left: '-10000px', width: 1, height: 1, overflow: 'hidden' }}>
@@ -168,7 +168,7 @@ export function NewsletterInterestForm({
           {copy.submitLabel} <Mail size={14} />
         </button>
       </div>
-      <p style={{ fontFamily: FF, fontSize: 13, color: 'rgba(17,29,85,0.48)', lineHeight: 1.6, margin: '18px 0 0', maxWidth: 520 }}>
+      <p className="type-caption text-role-muted" style={{ margin: '18px 0 0', maxWidth: 520 }}>
         {copy.privacy}
       </p>
     </form>
diff --git a/src/spa/components/forms/SponsoringForm.tsx b/src/spa/components/forms/SponsoringForm.tsx
index 822b238..c6c2d95 100644
--- a/src/spa/components/forms/SponsoringForm.tsx
+++ b/src/spa/components/forms/SponsoringForm.tsx
@@ -212,10 +212,10 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
         <div style={{ width: 52, height: 52, background: c.successIcon, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
           <Check size={22} color={c.successIconIn} strokeWidth={3} />
         </div>
-        <h3 style={{ fontSize: 18, fontWeight: 900, color: c.successHeading, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 10 }}>
+        <h3 className="type-card-title" style={{ color: c.successHeading, textTransform: 'uppercase', marginBottom: 10 }}>
           {fallbackText(copy.successHeading, netzwerkContent.sponsoringForm.successHeading)}
         </h3>
-        <p style={{ fontSize: 12, color: c.successBody, maxWidth: 320, margin: '0 auto', lineHeight: 1.6 }}>
+        <p className="type-caption" style={{ color: c.successBody, maxWidth: 320, margin: '0 auto' }}>
           {fallbackText(copy.successMessagePrefix, netzwerkContent.sponsoringForm.successMessagePrefix)} <strong style={{ color: c.successHeading }}>{data.kontakt}</strong>. {fallbackText(copy.successMessageSuffix, netzwerkContent.sponsoringForm.successMessageSuffix)}
         </p>
       </div>
@@ -261,8 +261,8 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
             {step === 0 && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 8 }}>{numberedStepLabel(copy.step2Eyebrow, netzwerkContent.sponsoringForm.step2Eyebrow, 1)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(copy.step2Heading, netzwerkContent.sponsoringForm.step2Heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 8 }}>{numberedStepLabel(copy.step2Eyebrow, netzwerkContent.sponsoringForm.step2Eyebrow, 1)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(copy.step2Heading, netzwerkContent.sponsoringForm.step2Heading)}</h3>
                 </div>
                 <Field c={c} label={fallbackText(copy.companyLabel, netzwerkContent.sponsoringForm.companyLabel)} error={errors.unternehmen}>
                   <StyledInput c={c} value={data.unternehmen} onChange={e => set('unternehmen', e.target.value)} placeholder={fallbackText(copy.companyPlaceholder, netzwerkContent.sponsoringForm.companyPlaceholder)} />
@@ -276,8 +276,8 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
             {step === 1 && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                 <div>
-                  <p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 8 }}>{numberedStepLabel(copy.step3Eyebrow, netzwerkContent.sponsoringForm.step3Eyebrow, 2)}</p>
-                  <h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(copy.step3Heading, netzwerkContent.sponsoringForm.step3Heading)}</h3>
+                  <p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 8 }}>{numberedStepLabel(copy.step3Eyebrow, netzwerkContent.sponsoringForm.step3Eyebrow, 2)}</p>
+                  <h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(copy.step3Heading, netzwerkContent.sponsoringForm.step3Heading)}</h3>
                 </div>
                 <Field c={c} label={fallbackText(copy.contactLabel, netzwerkContent.sponsoringForm.contactLabel)} error={errors.kontakt}>
                   <StyledInput c={c} value={data.kontakt} onChange={e => set('kontakt', e.target.value)} placeholder={fallbackText(copy.contactPlaceholder, netzwerkContent.sponsoringForm.contactPlaceholder)} />
@@ -335,9 +335,9 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
         )}
       </div>
 
-      {submissionError && <p role="alert" style={{ fontFamily: FF, fontSize: 11, color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
+      {submissionError && <p role="alert" className="type-caption" style={{ color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
 
-      <p style={{ fontFamily: FF, textAlign: 'center', fontSize: 12, color: c.footerText, paddingTop: 12 }}>
+      <p className="type-caption" style={{ textAlign: 'center', color: c.footerText, paddingTop: 12 }}>
         {fallbackText(copy.footerText, netzwerkContent.sponsoringForm.footerText)}
       </p>
     </div>
diff --git a/src/spa/components/layout/Layout.tsx b/src/spa/components/layout/Layout.tsx
index 71fd593..773dd89 100644
--- a/src/spa/components/layout/Layout.tsx
+++ b/src/spa/components/layout/Layout.tsx
@@ -587,15 +587,9 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
           position: 'relative',
           padding: isMobile ? '28px 24px 16px' : '36px 64px 0',
         }}>
-          <h2 style={{
-            fontFamily: FF_DISPLAY,
-            fontWeight: 900,
-            fontSize: 'clamp(1.6rem, 3vw, 2.8rem)',
+          <h2 className="type-section-title text-role-inverse" style={{
             textTransform: 'uppercase',
-            letterSpacing: '-0.03em',
-            color: '#fff',
             margin: 0,
-            lineHeight: 1,
             whiteSpace: isMobile ? 'normal' : 'nowrap',
           }}>
             {footer.headlinePrefix} <span style={{ color: GOLD }}>{footer.headlineAccent}</span> {footer.headlineSuffix}
@@ -663,11 +657,7 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
               style={{ width: 140, height: 'auto', marginBottom: 10, opacity: 0.9 }}
             />
 
-            <p style={{
-              fontFamily: FF_BODY,
-              fontSize: 15,
-              lineHeight: 1.65,
-              color: 'rgba(255,255,255,0.45)',
+            <p className="type-small text-role-inverse-secondary" style={{
               margin: '0 0 16px 0',
               maxWidth: 300,
             }}>
@@ -778,13 +768,7 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
               {footer.linkColumns.map((column, index) => (
                 <React.Fragment key={column.label + index}>
                   <div style={{ minWidth: isMobile ? 'auto' : index === footer.linkColumns.length - 1 ? 120 : 160 }}>
-                    <p style={{
-                      fontFamily: FF_DISPLAY,
-                      fontSize: 9,
-                      fontWeight: 700,
-                      textTransform: 'uppercase',
-                      letterSpacing: '0.28em',
-                      color: 'rgba(255,255,255,0.3)',
+                    <p className="type-eyebrow text-role-inverse-muted" style={{
                       margin: '0 0 10px 0',
                     }}>{column.label}</p>
                     <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -864,13 +848,9 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
           justifyContent: 'space-between',
           gap: isMobile ? 16 : 0,
         }}>
-          <p style={{
-            fontFamily: FF_DISPLAY,
-            fontSize: 10,
-            fontWeight: 400,
+          <p className="type-caption text-role-inverse-muted" style={{
             textTransform: 'uppercase',
             letterSpacing: '0.2em',
-            color: 'rgba(255,255,255,0.3)',
             margin: 0,
           }}>
             {footer.copyright}
diff --git a/src/spa/components/legal/LegalPage.tsx b/src/spa/components/legal/LegalPage.tsx
index 87bd14e..1a7c49e 100644
--- a/src/spa/components/legal/LegalPage.tsx
+++ b/src/spa/components/legal/LegalPage.tsx
@@ -66,19 +66,20 @@ export default function LegalPage({ content, cmsKey }: { content: LegalPageConte
           <div style={{ width: 32, height: 2, background: GOLD }} />
           <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.35em', textTransform: 'uppercase', color: GOLD }}>{fallbackText(hero.eyebrow, content.hero.eyebrow)}</span>
         </div>
-        <h1 style={{ fontFamily: FF, fontWeight: 900, fontSize: isMobile ? 'clamp(1.8rem, 7vw, 2.6rem)' : 'clamp(2.4rem, 4vw, 3.2rem)', color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.02, margin: '0 0 12px' }}>
+        <h1 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
           {fallbackText(hero.heading, content.hero.heading)}
         </h1>
         <p
-          style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.45)', margin: 0 }}
+          className="type-small text-role-inverse-secondary"
+          style={{ margin: 0 }}
           dangerouslySetInnerHTML={{ __html: fallbackText(hero.descriptionHtml, content.hero.descriptionHtml) }}
         />
       </section>
 
-      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '40px 24px' : '64px 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '200px 1fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
+      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '40px 24px' : '64px 80px', display: 'grid', gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : '200px minmax(0, 1fr)', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
         {!isMobile && (
           <nav style={{ position: 'sticky', top: 80 }}>
-            <div style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: GOLD, marginBottom: 16 }}>{fallbackText(navigation.tocTitle, content.navigation.tocTitle)}</div>
+            <div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-brand-on-light)', marginBottom: 16 }}>{fallbackText(navigation.tocTitle, content.navigation.tocTitle)}</div>
             <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
               {sections.map((item) => (
                 <li key={item.id}>
@@ -107,7 +108,7 @@ export default function LegalPage({ content, cmsKey }: { content: LegalPageConte
           </nav>
         )}
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 56, minWidth: 0 }}>
           {sections.map((section) => (
             <Section key={section.id} id={section.id} title={section.title}>
               {fallbackArray<LegalContentItem>(section.items, []).filter(isLegalItem).map((item, index) => (
@@ -122,10 +123,6 @@ export default function LegalPage({ content, cmsKey }: { content: LegalPageConte
 }
 
 const body: React.CSSProperties = {
-  fontFamily: '"Inter", sans-serif',
-  fontSize: 15,
-  color: 'rgba(58,58,58,0.82)',
-  lineHeight: 1.85,
   margin: '0 0 16px',
   overflowWrap: 'anywhere',
 }
@@ -134,7 +131,7 @@ function Section({ id, title, children }: { id: string; title: string; children:
   return (
     <div id={id} style={{ scrollMarginTop: 80 }}>
       <div style={{ borderLeft: `3px solid ${GOLD}`, paddingLeft: 16, marginBottom: 28 }}>
-        <h2 style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.2em', color: NAVY, margin: 0 }}>
+        <h2 className="type-subtitle text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
           {title}
         </h2>
       </div>
@@ -151,7 +148,7 @@ function ContentItem({ item }: { item: LegalContentItem }) {
       return <Legal html={item.html} />
     case 'list':
       return (
-        <ul style={{ ...body, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <ul className="type-body text-role-body" style={{ ...body, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
           {item.items.map((entry, index) => (
             <li key={`${entry}-${index}`}>{entry}</li>
           ))}
@@ -179,15 +176,15 @@ function Paragraph({ item }: { item: Extract<LegalContentItem, { type: 'paragrap
         ? { fontStyle: 'italic', borderLeft: `3px solid ${GOLD}`, paddingLeft: 16, marginBottom: 32 }
         : {}
 
-  return <p style={{ ...body, ...variantStyle }} dangerouslySetInnerHTML={{ __html: item.html }} />
+  return <p className="type-body text-role-body" style={{ ...body, ...variantStyle }} dangerouslySetInnerHTML={{ __html: item.html }} />
 }
 
 function SubSection({ num, title, children }: { num: string; title: string; children: React.ReactNode }) {
   return (
     <div style={{ marginBottom: 28 }}>
       <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
-        <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.12em' }}>{num}.</span>
-        <h3 style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: NAVY, margin: 0 }}>{title}</h3>
+        <span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: 'var(--text-brand-on-light)', letterSpacing: '0.12em' }}>{num}.</span>
+        <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>{title}</h3>
       </div>
       {children}
     </div>
@@ -197,7 +194,7 @@ function SubSection({ num, title, children }: { num: string; title: string; chil
 function AddressBlock({ lines }: { lines: string[] }) {
   const isMobile = useIsMobile()
   return (
-    <address style={{ fontFamily: '"Inter", sans-serif', fontSize: isMobile ? 15 : 14, color: 'rgba(58,58,58,0.75)', lineHeight: 1.9, fontStyle: 'normal', background: 'rgba(17,29,85,0.04)', padding: '16px 20px', borderLeft: '2px solid rgba(239,191,4,0.4)', marginBottom: 16, overflowWrap: 'anywhere' }}>
+    <address className="type-small text-role-secondary" style={{ fontStyle: 'normal', background: 'rgba(17,29,85,0.04)', padding: '16px 20px', borderLeft: '2px solid rgba(239,191,4,0.4)', marginBottom: 16, overflowWrap: 'anywhere' }}>
       {lines.map((line, index) => (
         <React.Fragment key={`${line}-${index}`}>
           {line}
@@ -212,7 +209,8 @@ function Legal({ html }: { html: string }) {
   const isMobile = useIsMobile()
   return (
     <p
-      style={{ fontFamily: '"Inter", sans-serif', fontSize: isMobile ? 15 : 14, color: NAVY, lineHeight: 1.75, background: 'rgba(17,29,85,0.04)', padding: '12px 16px', borderLeft: `3px solid ${NAVY}`, margin: '0 0 16px', fontWeight: 500, overflowWrap: 'anywhere' }}
+      className="type-small text-role-link"
+      style={{ background: 'rgba(17,29,85,0.04)', padding: '12px 16px', borderLeft: `3px solid ${NAVY}`, margin: '0 0 16px', fontWeight: 500, overflowWrap: 'anywhere' }}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   )
diff --git a/src/spa/components/membership/MembershipWizard.tsx b/src/spa/components/membership/MembershipWizard.tsx
index 2ae7492..be7dfb3 100644
--- a/src/spa/components/membership/MembershipWizard.tsx
+++ b/src/spa/components/membership/MembershipWizard.tsx
@@ -604,22 +604,14 @@ function StepHeading({ step, total, title, subtitle, template }: { step: number;
           {template.replace('{step}', String(step)).replace('{total}', String(total))}
         </span>
       </div>
-      <h3 style={{
+      <h3 className="type-card-title text-role-inverse" style={{
         margin: 0,
-        fontSize: 20,
-        fontWeight: 600,
-        color: WHITE,
-        fontFamily: '"IBM Plex Sans", sans-serif',
-        letterSpacing: "-0.01em",
       }}>
         {title}
       </h3>
       {subtitle && (
-        <p style={{
+        <p className="type-caption text-role-inverse-secondary" style={{
           margin: "6px 0 0",
-          fontSize: 13,
-          color: "rgba(255,255,255,0.45)",
-          fontFamily: '"IBM Plex Sans", sans-serif',
         }}>
           {subtitle}
         </p>
@@ -1069,22 +1061,13 @@ function SuccessScreen({ copy }: { copy: WizardCopy }) {
         </svg>
       </div>
 
-      <h3 style={{
+      <h3 className="type-card-title text-role-inverse" style={{
         margin: "0 0 10px",
-        fontSize: 22,
-        fontWeight: 700,
-        color: WHITE,
-        fontFamily: '"IBM Plex Sans", sans-serif',
-        letterSpacing: "-0.02em",
       }}>
         {success.heading}
       </h3>
-      <p style={{
+      <p className="type-small text-role-inverse-secondary" style={{
         margin: "0 0 28px",
-        fontSize: 14,
-        color: "rgba(255,255,255,0.55)",
-        fontFamily: '"IBM Plex Sans", sans-serif',
-        lineHeight: 1.6,
       }}>
         {success.message}
       </p>
diff --git a/src/spa/pages/About.tsx b/src/spa/pages/About.tsx
index 32d89cb..7987d76 100644
--- a/src/spa/pages/About.tsx
+++ b/src/spa/pages/About.tsx
@@ -118,7 +118,7 @@ const About: React.FC = () => {
               {fallbackText(hero.eyebrow, aboutContent.hero.eyebrow)}
             </span>
           </div>
-          <h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 6vw, 5rem)' : 'clamp(2.8rem, 6vw, 5rem)', fontWeight: 900, color: '#fff', lineHeight: 0.95, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: '0 0 28px' }}>
+          <h1 className="type-display text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 28px' }}>
             {fallbackText(hero.heading, aboutContent.hero.heading).split('\n').map((line, index) => (
               <React.Fragment key={`${line}-${index}`}>
                 {index > 0 && <br />}
@@ -126,7 +126,7 @@ const About: React.FC = () => {
               </React.Fragment>
             ))}
           </h1>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, maxWidth: 560, margin: '0 0 40px', fontWeight: 300 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ maxWidth: 560, margin: '0 0 40px' }}>
             {fallbackText(hero.description, aboutContent.hero.description)}
           </p>
           <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
@@ -165,15 +165,15 @@ const About: React.FC = () => {
           <div style={{ background: WHITE, padding: isMobile ? '32px 24px 44px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
             {!isMobile && (
               <>
-                <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(prize.eyebrow, aboutContent.prize.eyebrow)}</span>
-                <h2 style={{ fontFamily: FF, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 20px' }}>
+                <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(prize.eyebrow, aboutContent.prize.eyebrow)}</span>
+                <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
                   <Lines text={fallbackText(prize.heading, aboutContent.prize.heading)} />
                 </h2>
               </>
             )}
             <div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
             {paragraphs(prize.body, aboutContent.prize.body).map((text, index, arr) => (
-              <p key={index} style={{ fontFamily: FB, fontSize: 19, color: 'rgba(16,24,40,0.8)', lineHeight: 1.8, maxWidth: 440, marginBottom: index === arr.length - 1 ? (isMobile ? 0 : 44) : 16 }}>
+              <p key={index} className="type-body text-role-body" style={{ maxWidth: 440, marginBottom: index === arr.length - 1 ? (isMobile ? 0 : 44) : 16 }}>
                 {text}
               </p>
             ))}
@@ -181,7 +181,7 @@ const About: React.FC = () => {
               {fallbackArray(prize.facts, aboutContent.prize.facts).map((f, i, arr) => (
                 <div key={`${f.value}-${i}`} style={{ flex: 1, padding: '20px 0', borderRight: i < arr.length - 1 ? '1px solid #D0D5DD' : 'none', paddingLeft: 0, paddingRight: i < arr.length - 1 ? 20 : 0 }}>
                   <div style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2vw, 1.8rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.03em', lineHeight: 1 }}>{fallbackText(f.value, '')}</div>
-                  <div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 6 }}>{fallbackText(f.label, '')}</div>
+                  <div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: 'var(--text-brand-on-light)', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 6 }}>{fallbackText(f.label, '')}</div>
                 </div>
               ))}
             </div>
@@ -200,7 +200,7 @@ const About: React.FC = () => {
             {isMobile && (
               <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 24px', zIndex: 2 }}>
                 <span style={{ fontFamily: FF, fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(prize.eyebrow, aboutContent.prize.eyebrow)}</span>
-                <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
+                <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
                   <Lines text={fallbackText(prize.heading, aboutContent.prize.heading)} />
                 </h2>
               </div>
@@ -235,7 +235,7 @@ const About: React.FC = () => {
             {isMobile && (
               <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 24px', zIndex: 2 }}>
                 <span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(mittelstand.eyebrow, aboutContent.mittelstand.eyebrow)}</span>
-                <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
+                <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
                   <Lines text={fallbackText(mittelstand.heading, aboutContent.mittelstand.heading)} />
                 </h2>
               </div>
@@ -246,14 +246,14 @@ const About: React.FC = () => {
             {!isMobile && (
               <>
                 <span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(mittelstand.eyebrow, aboutContent.mittelstand.eyebrow)}</span>
-                <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.2vw, 2.9rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 20px' }}>
+                <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
                   <Lines text={fallbackText(mittelstand.heading, aboutContent.mittelstand.heading)} />
                 </h2>
               </>
             )}
             <div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
             {paragraphs(mittelstand.body, aboutContent.mittelstand.body).map((text, index, arr) => (
-              <p key={index} style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.5)', lineHeight: 1.8, maxWidth: 440, marginBottom: index === arr.length - 1 ? 40 : 16 }}>
+              <p key={index} className="type-body text-role-inverse-secondary" style={{ maxWidth: 440, marginBottom: index === arr.length - 1 ? 40 : 16 }}>
                 {text}
               </p>
             ))}
@@ -271,7 +271,7 @@ const About: React.FC = () => {
             {!isMobile && <div style={{ position: 'absolute', right: -24, bottom: -40, fontFamily: FF, fontSize: 'clamp(160px, 20vw, 240px)', fontWeight: 900, color: 'rgba(239,191,4,0.04)', lineHeight: 1, userSelect: 'none', pointerEvents: 'none', letterSpacing: '-0.04em' }}>{fallbackText(history.watermark, aboutContent.history.watermark)}</div>}
 
             <span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(history.eyebrow, aboutContent.history.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, margin: '0 0 52px' }}>
+            <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 52px' }}>
               {fallbackText(history.heading, aboutContent.history.heading).split('\n').map((line, index) => (
                 <React.Fragment key={`${line}-${index}`}>
                   {index > 0 && <br />}
@@ -295,15 +295,15 @@ const About: React.FC = () => {
           </div>
 
           <div style={{ background: '#fff', padding: isMobile ? '56px 24px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-            <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(goals.eyebrow, aboutContent.goals.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: NAVY, textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, margin: '0 0 40px' }}>
+            <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(goals.eyebrow, aboutContent.goals.eyebrow)}</span>
+            <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 40px' }}>
               <Lines text={fallbackText(goals.heading, aboutContent.goals.heading)} />
             </h2>
 
             <div>
               {fallbackArray(goals.items, aboutContent.goals.items).map((item, i, arr) => (
                 <div key={`${item.num}-${i}`} style={{ display: 'flex', gap: 24, alignItems: 'flex-start', padding: '24px 0', borderTop: '1px solid rgba(17,29,85,0.1)', borderBottom: i === arr.length - 1 ? '1px solid rgba(17,29,85,0.1)' : 'none', cursor: 'default' }}>
-                  <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.12em', paddingTop: 3, flexShrink: 0, minWidth: 24 }}>{fallbackText(item.num, '')}</span>
+                  <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'var(--text-brand-on-light)', letterSpacing: '0.12em', paddingTop: 3, flexShrink: 0, minWidth: 24 }}>{fallbackText(item.num, '')}</span>
                   <div>
                     <div style={{ fontFamily: FF, fontSize: 17, fontWeight: 800, color: NAVY, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 7 }}>{fallbackText(item.title, '')}</div>
                     <div style={{ fontFamily: FB, fontSize: 16, color: 'rgba(17,29,85,0.5)', lineHeight: 1.75 }}>{fallbackText(item.desc, '')}</div>
@@ -319,12 +319,12 @@ const About: React.FC = () => {
         <MunichSkylineBg />
         <div style={{ padding: isMobile ? '48px 24px 32px' : '88px 80px 56px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 40, alignItems: 'flex-end', borderBottom: '1px solid #D0D5DD' }}>
           <div>
-            <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(values.eyebrow, aboutContent.values.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.2vw, 2.9rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0 }}>
+            <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(values.eyebrow, aboutContent.values.eyebrow)}</span>
+            <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
               <Lines text={fallbackText(values.heading, aboutContent.values.heading)} />
             </h2>
           </div>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.8, margin: 0, maxWidth: 440 }}>
+          <p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 440 }}>
             {fallbackText(values.description, aboutContent.values.description)}
           </p>
         </div>
@@ -346,10 +346,10 @@ const About: React.FC = () => {
             <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#EFBF04' }}>{fallbackText(cta.eyebrow, aboutContent.cta.eyebrow)}</span>
             <div style={{ width: 28, height: 1, background: GOLD, opacity: 0.6 }} />
           </div>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(2.2rem, 5vw, 3.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1, margin: '0 0 24px' }}>
+          <h2 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
             <Lines text={fallbackText(cta.heading, aboutContent.cta.heading)} />
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.55)', lineHeight: 1.8, marginBottom: 48, fontWeight: 300 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ marginBottom: 48 }}>
             {fallbackText(cta.description, aboutContent.cta.description)}
           </p>
           <Link
@@ -392,7 +392,7 @@ function ValueRow({ item, last }: { item: { num?: string | null; title?: string
         <div style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: hovered ? GOLD : 'rgba(16,24,40,0.1)', lineHeight: 1, letterSpacing: '-0.04em', transition: 'color 0.2s' }}>{fallbackText(item.num, '')}</div>
       </div>
       <div>
-        <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.3rem, 2vw, 1.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>{fallbackText(item.title, '')}</h3>
+        <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>{fallbackText(item.title, '')}</h3>
       </div>
     </div>
   )
diff --git a/src/spa/pages/BlogDetail.tsx b/src/spa/pages/BlogDetail.tsx
index 6d829d9..f94979a 100644
--- a/src/spa/pages/BlogDetail.tsx
+++ b/src/spa/pages/BlogDetail.tsx
@@ -96,7 +96,7 @@ export default function BlogDetail() {
   if (!article) {
     return (
       <div style={{ minHeight: '60vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, padding: '80px 24px', background: PAGE_BG }}>
-        <h2 style={{ fontFamily: FF, fontSize: '2rem', fontWeight: 900, color: NAVY }}>{fallbackText(notFound.title, blogDetailContent.notFound.title)}</h2>
+        <h2 className="type-section-title text-role-heading">{fallbackText(notFound.title, blogDetailContent.notFound.title)}</h2>
         <Link to={fallbackText(notFound.backUrl, blogDetailContent.notFound.backUrl)} style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: NAVY, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
           <ArrowLeft size={14} /> {fallbackText(notFound.backLabel, blogDetailContent.notFound.backLabel)}
         </Link>
@@ -155,16 +155,11 @@ export default function BlogDetail() {
           </div>
 
           <motion.h1
+            className="type-page-title text-role-inverse"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
             style={{
-              fontFamily: FF,
-              fontSize: isMobile ? 'clamp(1.6rem, 6vw, 2.4rem)' : 'clamp(2rem, 5vw, 3.8rem)',
-              fontWeight: 900,
-              color: '#fff',
-              lineHeight: 1.05,
-              letterSpacing: '-0.03em',
               textTransform: 'uppercase',
               margin: '0 0 28px',
               maxWidth: 760,
@@ -189,14 +184,12 @@ export default function BlogDetail() {
 
       {/* ── ARTICLE BODY ─────────────────────────────────────────────────── */}
       <section style={{ background: PAGE_BG, padding: isMobile ? '48px 0 0' : '80px 0 0' }}>
-        <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 320px', gap: isMobile ? 40 : 80 }}>
+        <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', display: 'grid', gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) 320px', gap: isMobile ? 40 : 80 }}>
 
           {/* LEFT – article text */}
-          <article>
+          <article style={{ minWidth: 0 }}>
             {/* Lead */}
-            <p style={{
-              fontFamily: FB, fontSize: 19, fontWeight: 300,
-              color: INK, lineHeight: 1.75,
+            <p className="type-lead text-role-body" style={{
               borderLeft: `4px solid ${GOLD}`, paddingLeft: 28,
               marginBottom: 56,
             }}>
@@ -214,18 +207,15 @@ export default function BlogDetail() {
                 style={{ marginBottom: 48 }}
               >
                 {section.heading && (
-                  <h2 style={{
-                    fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.35rem)',
-                    fontWeight: 900, color: NAVY,
-                    textTransform: 'uppercase', letterSpacing: '-0.01em',
+                  <h2 className="type-subtitle text-role-heading" style={{
+                    textTransform: 'uppercase',
                     marginBottom: 16,
                   }}>
                     {section.heading}
                   </h2>
                 )}
-                <p style={{
-                  fontFamily: FB, fontSize: 18,
-                  color: 'rgba(58,58,58,0.8)', lineHeight: 1.8, margin: 0,
+                <p className="type-body text-role-body" style={{
+                  margin: 0,
                 }}>
                   {section.body}
                 </p>
@@ -249,7 +239,7 @@ export default function BlogDetail() {
           </article>
 
           {/* RIGHT – sticky sidebar */}
-          <aside>
+          <aside style={{ minWidth: 0 }}>
             <div style={{ position: isMobile ? 'static' : 'sticky', top: isMobile ? undefined : 100 }}>
 
               {/* Author card */}
@@ -268,10 +258,10 @@ export default function BlogDetail() {
               {/* CTA */}
               <div style={{ background: '#fff', border: '1px solid rgba(3,9,58,0.1)', padding: '28px' }}>
                 <div style={{ width: 32, height: 2, background: GOLD, marginBottom: 16 }} />
-                <h4 style={{ fontFamily: FF, fontSize: 15, fontWeight: 900, color: NAVY, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 12 }}>
+                <h4 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 12 }}>
                   {fallbackText(sidebarCta.heading, blogDetailContent.sidebarCta.heading)}
                 </h4>
-                <p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(58,58,58,0.55)', lineHeight: 1.7, marginBottom: 20 }}>
+                <p className="type-small text-role-secondary" style={{ marginBottom: 20 }}>
                   {fallbackText(sidebarCta.text, blogDetailContent.sidebarCta.text)}
                 </p>
                 {sidebarCtaIsExternal ? (
@@ -358,11 +348,11 @@ function RelatedCard({ article, bordered, isMobile, readMoreLabel }: { article:
       <span style={{ fontFamily: FF, fontSize: 9, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>
         {article.cat}
       </span>
-      <h3 style={{ fontFamily: FF, fontSize: 'clamp(1rem, 1.4vw, 1.15rem)', fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 1.25, marginBottom: 12 }}>
+      <h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 12 }}>
         {article.title}
       </h3>
       <div style={{ width: hovered ? 64 : 24, height: 1, background: 'rgba(239,191,4,0.5)', transition: 'width 0.35s', marginBottom: 14 }} />
-      <p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.38)', lineHeight: 1.7, flex: 1, marginBottom: 16 }}>
+      <p className="type-small text-role-inverse-muted" style={{ flex: 1, marginBottom: 16 }}>
         {article.excerpt}
       </p>
       <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: GOLD, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
diff --git a/src/spa/pages/CmsGenericPage.tsx b/src/spa/pages/CmsGenericPage.tsx
index 043a3dc..b49d5c9 100644
--- a/src/spa/pages/CmsGenericPage.tsx
+++ b/src/spa/pages/CmsGenericPage.tsx
@@ -21,18 +21,18 @@ export default function CmsGenericPage() {
   return (
     <main style={{ minHeight: '70vh', background: CREAM, padding: '140px 24px 80px' }}>
       <div style={{ maxWidth: 960, margin: '0 auto' }}>
-        <div style={{ color: GOLD, fontFamily: FF, fontWeight: 800, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 20 }}>
+        <div style={{ color: 'var(--text-brand-on-light)', fontFamily: FF, fontWeight: 700, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 20 }}>
           {route?.collection || siteSettings.genericPageKicker}
         </div>
-        <h1 style={{ color: NAVY, fontFamily: FF, fontSize: 'clamp(2.25rem, 7vw, 5rem)', lineHeight: 1, fontWeight: 900, textTransform: 'uppercase', margin: 0 }}>
+        <h1 className="type-page-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
           {title}
         </h1>
         {description ? (
-          <p style={{ color: 'rgba(58,58,58,0.78)', fontFamily: FB, fontSize: 22, lineHeight: 1.6, marginTop: 28, maxWidth: 760 }}>
+          <p className="type-lead text-role-body" style={{ marginTop: 28, maxWidth: 760 }}>
             {description}
           </p>
         ) : (
-          <p style={{ color: 'rgba(58,58,58,0.65)', fontFamily: FB, fontSize: 18, lineHeight: 1.7, marginTop: 28, maxWidth: 760 }}>
+          <p className="type-body text-role-secondary" style={{ marginTop: 28, maxWidth: 760 }}>
             {siteSettings.genericPageDescription}
           </p>
         )}
diff --git a/src/spa/pages/Contact.tsx b/src/spa/pages/Contact.tsx
index e39bd9c..e24d485 100644
--- a/src/spa/pages/Contact.tsx
+++ b/src/spa/pages/Contact.tsx
@@ -68,13 +68,13 @@ const Contact: React.FC = () => {
         <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 160, background: `linear-gradient(to top, ${NAVY}, transparent)` }} />
 
         <div style={{ position: 'relative', zIndex: 2, width: '100%', paddingBottom: isMobile ? '3rem' : '5rem', paddingLeft: isMobile ? 24 : 80, paddingRight: isMobile ? 24 : 80 }}>
-          <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase', color: GOLD, marginBottom: 16 }}>
+          <p className="type-eyebrow text-role-brand-dark" style={{ marginBottom: 16 }}>
             {fallbackText(hero.eyebrow, contactContent.hero.eyebrow)}
           </p>
-          <h1 style={{ fontSize: isMobile ? 'clamp(2rem, 10vw, 3rem)' : 'clamp(3rem, 7vw, 6rem)', fontWeight: 900, lineHeight: 1.0, color: '#fff', letterSpacing: '-0.03em', marginBottom: 24, maxWidth: 640 }}>
+          <h1 className="type-display text-role-inverse" style={{ marginBottom: 24, maxWidth: 640 }}>
             <Lines text={fallbackText(hero.heading, contactContent.hero.heading)} />
           </h1>
-          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.72)', maxWidth: 480, lineHeight: 1.65, fontWeight: 400 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ maxWidth: 480 }}>
             {fallbackText(hero.description, contactContent.hero.description)}
           </p>
         </div>
@@ -89,11 +89,11 @@ const Contact: React.FC = () => {
 
           {/* Left – info panel */}
           <div style={{ padding: isMobile ? '48px 24px' : '88px 56px 88px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' }}>
-            <p style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 20 }}>
+            <p className="type-eyebrow text-role-inverse-muted" style={{ marginBottom: 20 }}>
               {fallbackText(info.eyebrow, contactContent.info.eyebrow)}
             </p>
             <div style={{ width: 36, height: 2, background: GOLD, marginBottom: 20 }} />
-            <h2 style={{ fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', fontWeight: 900, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.03em', marginBottom: 52 }}>
+            <h2 className="type-section-title text-role-inverse" style={{ marginBottom: 52 }}>
               <Lines text={fallbackText(info.heading, contactContent.info.heading)} />
             </h2>
 
@@ -120,7 +120,7 @@ const Contact: React.FC = () => {
             </div>
 
             <div style={{ marginTop: 52, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
-              <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.40)', lineHeight: 1.65 }}>
+              <p className="type-small text-role-inverse-muted">
                 {fallbackText(info.nextAwardLabel, contactContent.info.nextAwardLabel)} <strong style={{ color: '#fff' }}>{fallbackText(info.nextAwardDate, contactContent.info.nextAwardDate)}</strong>
               </p>
             </div>
@@ -158,7 +158,7 @@ const Contact: React.FC = () => {
             )}
             <div style={{ padding: isMobile ? '36px 20px' : '32px 48px 32px 40px', flex: isMobile ? 'none' : 1, display: 'flex', flexDirection: 'column', minHeight: isMobile ? 480 : 0, position: 'relative', zIndex: 1 }}>
               <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: 'rgba(17,29,85,0.5)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 8 }}>{fallbackText(info.formEyebrow, contactContent.info.formEyebrow)}</span>
-              <h3 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.2rem, 1.8vw, 1.6rem)', fontWeight: 900, color: '#111D55', letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 1.1, marginBottom: 24 }}>
+              <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 24 }}>
                 {fallbackText(info.formTitle, contactContent.info.formTitle)}
               </h3>
               <KontaktForm theme="gold" content={info.formCopy || undefined} />
@@ -216,11 +216,11 @@ const Contact: React.FC = () => {
 
             {/* Left – sticky label */}
             <div style={isMobile ? undefined : { position: 'sticky', top: 96, alignSelf: 'start' }}>
-              <p style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#4A8FC9', marginBottom: 20 }}>
+              <p className="type-eyebrow text-role-eyebrow" style={{ marginBottom: 20 }}>
                 {fallbackText(faq.eyebrow, contactContent.faq.eyebrow)}
               </p>
               <div style={{ width: 28, height: 2, background: GOLD, marginBottom: 20 }} />
-              <h2 style={{ fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.4rem)' : 'clamp(2rem, 3.5vw, 2.8rem)', fontWeight: 900, color: NAVY, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
+              <h2 className="type-section-title text-role-heading">
                 <Lines text={fallbackText(faq.heading, contactContent.faq.heading)} />
               </h2>
             </div>
diff --git a/src/spa/pages/EventDetail.tsx b/src/spa/pages/EventDetail.tsx
index b286140..cbaf0e8 100644
--- a/src/spa/pages/EventDetail.tsx
+++ b/src/spa/pages/EventDetail.tsx
@@ -175,10 +175,10 @@ export default function EventDetail() {
                 {event.category}
               </span>
             </div>
-            <h1 style={{ fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.8rem)' : 'clamp(2rem, 5vw, 4rem)', fontWeight: 900, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 12, fontFamily: '"IBM Plex Sans", sans-serif' }}>
+            <h1 className="type-page-title text-role-inverse" style={{ marginBottom: 12 }}>
               {event.title}
             </h1>
-            <p style={{ fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.65)', maxWidth: 520, lineHeight: 1.6 }}>
+            <p className="type-small text-role-inverse-secondary" style={{ maxWidth: 520 }}>
               {event.subtitle}
             </p>
           </div>
@@ -210,17 +210,17 @@ export default function EventDetail() {
           <div>
             {/* Description */}
             <div style={{ marginBottom: 56 }}>
-              <p style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.25em', color: GOLD, marginBottom: 16 }}>
+              <p className="type-eyebrow text-role-brand-light" style={{ marginBottom: 16 }}>
                 {fallbackText(sections.aboutEyebrow, eventDetailContent.sections.aboutEyebrow)}
               </p>
               {event.longDescription.split('\n\n').map((para, i) => (
-                <p key={i} style={{ fontSize: 17, color: 'rgba(58,58,58,0.75)', lineHeight: 1.8, marginBottom: 20 }}>{para}</p>
+                <p key={i} className="type-body text-role-body" style={{ marginBottom: 20 }}>{para}</p>
               ))}
             </div>
 
             {/* Eckdaten */}
             <div>
-              <p style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.25em', color: GOLD, marginBottom: 24 }}>
+              <p className="type-eyebrow text-role-brand-light" style={{ marginBottom: 24 }}>
                 {fallbackText(sections.factsEyebrow, eventDetailContent.sections.factsEyebrow)}
               </p>
               <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 2 }}>
@@ -301,12 +301,12 @@ export default function EventDetail() {
       <section style={{ background: NAVY, padding: isMobile ? '48px 24px' : '64px 80px', marginTop: 40 }}>
         <div style={{ maxWidth: 1400, margin: '0 auto', display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? 24 : 0 }}>
           <div>
-            <p style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.25em', color: GOLD, marginBottom: 10 }}>
+            <p className="type-eyebrow text-role-brand-dark" style={{ marginBottom: 10 }}>
               {fallbackText(bottomCta.eyebrow, eventDetailContent.bottomCta.eyebrow)}
             </p>
-            <h3 style={{ fontSize: 28, fontWeight: 900, color: '#fff', letterSpacing: '-0.03em', fontFamily: '"IBM Plex Sans", sans-serif' }}>
+            <h2 className="type-section-title text-role-inverse">
               {fallbackText(bottomCta.heading, eventDetailContent.bottomCta.heading)}
-            </h3>
+            </h2>
           </div>
           <Link
             to={fallbackText(bottomCta.url, eventDetailContent.bottomCta.url)}
diff --git a/src/spa/pages/FormularUpload.tsx b/src/spa/pages/FormularUpload.tsx
index 713f2eb..e0ba2ab 100644
--- a/src/spa/pages/FormularUpload.tsx
+++ b/src/spa/pages/FormularUpload.tsx
@@ -84,11 +84,11 @@ export default function FormularUpload() {
           <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.35em', color: HELLBLAU, display: 'block', marginBottom: 16 }}>
             {fallbackText(hero.eyebrow, formularUploadContent.hero.eyebrow)}
           </span>
-          <h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 4vw, 3.6rem)' : 'clamp(2.2rem, 4vw, 3.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.0, margin: '0 0 20px' }}>
+          <h1 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
             <Lines text={fallbackText(hero.heading, formularUploadContent.hero.heading)} />
           </h1>
           <div style={{ width: 48, height: 3, background: GOLD, marginBottom: 24 }} />
-          <p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(255,255,255,0.55)', lineHeight: 1.75, maxWidth: 520, margin: 0 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ maxWidth: 520, margin: 0 }}>
             {fallbackText(hero.description, formularUploadContent.hero.description)}
           </p>
         </div>
@@ -106,13 +106,13 @@ export default function FormularUpload() {
 
       {/* Breadcrumb */}
       <div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '16px 24px' : '16px 80px' }}>
-        <span style={{ fontFamily: FF, fontSize: 12, color: HELLBLAU, fontWeight: 700, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, formularUploadContent.breadcrumb.label)}</span>
+        <span style={{ fontFamily: FF, fontSize: 12, color: 'var(--text-eyebrow-light)', fontWeight: 700, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, formularUploadContent.breadcrumb.label)}</span>
       </div>
 
       {/* ── ERKLÄRUNG ───────────────────────────────────── */}
       <div style={{ background: GRAU, padding: isMobile ? '48px 24px' : '64px 80px' }}>
-        <p style={{ fontFamily: FF, fontSize: 11, color: '#888', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>{fallbackText(requirements.eyebrow, formularUploadContent.requirements.eyebrow)}</p>
-        <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 900, color: DARK, textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 40 }}>
+        <p className="type-eyebrow text-role-eyebrow" style={{ marginBottom: 8 }}>{fallbackText(requirements.eyebrow, formularUploadContent.requirements.eyebrow)}</p>
+        <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 40 }}>
           <Lines text={fallbackText(requirements.heading, formularUploadContent.requirements.heading)} />
         </h2>
 
@@ -125,7 +125,7 @@ export default function FormularUpload() {
               <div style={{ width: 40, height: 40, background: DARK, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                 <Icon size={18} color={GOLD} />
               </div>
-              <h3 style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, color: DARK, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>{fallbackText(card.title, fallbackCard.title)}</h3>
+              <h3 className="type-small text-role-heading" style={{ fontWeight: 700, textTransform: 'uppercase', marginBottom: 16 }}>{fallbackText(card.title, fallbackCard.title)}</h3>
               <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                 {lines(card.items, fallbackCard.items).map((item, j) => (
                   <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: FF, fontSize: 14, color: '#555', lineHeight: 1.5 }}>
@@ -142,8 +142,8 @@ export default function FormularUpload() {
 
       {/* ── UPLOAD-BEREICH ──────────────────────────────── */}
       <div style={{ background: NAVY, padding: isMobile ? '48px 24px' : '72px 80px' }}>
-        <p style={{ fontFamily: FF, fontSize: 11, color: HELLBLAU, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.25em', marginBottom: 8 }}>{fallbackText(upload.eyebrow, formularUploadContent.upload.eyebrow)}</p>
-        <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 40 }}>
+        <p className="type-eyebrow text-role-inverse-secondary" style={{ marginBottom: 8 }}>{fallbackText(upload.eyebrow, formularUploadContent.upload.eyebrow)}</p>
+        <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 40 }}>
           <Lines text={fallbackText(upload.heading, formularUploadContent.upload.heading)} />
         </h2>
 
@@ -152,8 +152,8 @@ export default function FormularUpload() {
             <div style={{ width: 64, height: 64, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
               <CheckCircle size={28} color={DARK} />
             </div>
-            <h3 style={{ fontFamily: FF, fontSize: 22, fontWeight: 900, color: '#fff', textTransform: 'uppercase', marginBottom: 12 }}>{fallbackText(success.heading, formularUploadContent.success.heading)}</h3>
-            <p style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.45)', maxWidth: 440, margin: '0 auto 32px', lineHeight: 1.7 }}>
+            <h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 12 }}>{fallbackText(success.heading, formularUploadContent.success.heading)}</h3>
+            <p className="type-small text-role-inverse-secondary" style={{ maxWidth: 440, margin: '0 auto 32px' }}>
               {fallbackText(success.description, formularUploadContent.success.description)}
             </p>
             <Link to={fallbackText(success.linkUrl, formularUploadContent.success.linkUrl)} style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: DARK, background: GOLD, padding: '14px 32px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
@@ -181,10 +181,10 @@ export default function FormularUpload() {
                 }}
               >
                 <Upload size={32} color={dragging ? GOLD : 'rgba(255,255,255,0.3)'} style={{ margin: '0 auto 16px' }} />
-                <p style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#fff', marginBottom: 8 }}>
+                <p className="type-small text-role-inverse" style={{ fontWeight: 700, marginBottom: 8 }}>
                   {fallbackText(upload.dropTitle, formularUploadContent.upload.dropTitle)}
                 </p>
-                <p style={{ fontFamily: FF, fontSize: 12, color: 'rgba(255,255,255,0.35)', marginBottom: 20 }}>
+                <p className="type-caption text-role-inverse-muted" style={{ marginBottom: 20 }}>
                   {fallbackText(upload.dropDescription, formularUploadContent.upload.dropDescription)}
                 </p>
                 <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
@@ -222,7 +222,7 @@ export default function FormularUpload() {
                   <Info size={14} color={GOLD} style={{ marginTop: 2, flexShrink: 0 }} />
                   <span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{fallbackText(upload.noteTitle, formularUploadContent.upload.noteTitle)}</span>
                 </div>
-                <p style={{ fontFamily: FF, fontSize: 12, color: 'rgba(255,255,255,0.4)', lineHeight: 1.7, margin: 0 }}>
+                <p className="type-caption text-role-inverse-muted" style={{ margin: 0 }}>
                   {fallbackText(upload.note, formularUploadContent.upload.note)}
                 </p>
               </div>
@@ -244,7 +244,7 @@ export default function FormularUpload() {
                 {files.length ? `${files.length} ${fallbackText(upload.selectedSubmitPrefix, formularUploadContent.upload.selectedSubmitPrefix)}${files.length > 1 ? fallbackText(upload.selectedSubmitPluralSuffix, formularUploadContent.upload.selectedSubmitPluralSuffix) : ''} ${fallbackText(upload.selectedSubmitAction, formularUploadContent.upload.selectedSubmitAction)}` : fallbackText(upload.emptySubmitLabel, formularUploadContent.upload.emptySubmitLabel)}
               </button>
 
-              <p style={{ fontFamily: FF, fontSize: 11, color: 'rgba(255,255,255,0.2)', lineHeight: 1.6, margin: 0 }}>
+              <p className="type-caption text-role-inverse-muted" style={{ margin: 0 }}>
                 {fallbackText(upload.privacyNote, formularUploadContent.upload.privacyNote)}
               </p>
             </div>
@@ -257,7 +257,7 @@ export default function FormularUpload() {
       {/* ── CTA ─────────────────────────────────────────── */}
       <div style={{ padding: isMobile ? '48px 24px' : '64px 80px', borderTop: `1px solid ${BORDER}`, display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
         <div>
-          <p style={{ fontFamily: FF, fontSize: 12, color: '#888', marginBottom: 6 }}>{fallbackText(cta.eyebrow, formularUploadContent.cta.eyebrow)}</p>
+          <p className="type-caption text-role-muted" style={{ marginBottom: 6 }}>{fallbackText(cta.eyebrow, formularUploadContent.cta.eyebrow)}</p>
           <Link to={fallbackText(cta.contactUrl, formularUploadContent.cta.contactUrl)} style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: NAVY, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
             {fallbackText(cta.contactLabel, formularUploadContent.cta.contactLabel)} <ArrowRight size={14} />
           </Link>
diff --git a/src/spa/pages/Home.tsx b/src/spa/pages/Home.tsx
index c453f23..cde028b 100644
--- a/src/spa/pages/Home.tsx
+++ b/src/spa/pages/Home.tsx
@@ -212,8 +212,7 @@ const Home: React.FC = () => {
             </div>
             
             <h1
-              className="font-display font-bold text-white mb-6 leading-[0.9] tracking-tight"
-              style={{ fontSize: isMobile ? 'clamp(1.75rem, 8vw, 3rem)' : 'clamp(3.25rem, 6.5vw, 6rem)' }}
+              className="type-display text-role-inverse mb-6"
             >
               <span style={{ display: 'block', whiteSpace: 'nowrap' }}>
                 {fallbackText(hero.headingLine1, homeContent.hero.headingLine1)}
@@ -223,7 +222,7 @@ const Home: React.FC = () => {
               </span>
             </h1>
             
-            <p className="text-white/70 mb-12 font-light leading-relaxed" style={{ fontSize: isMobile ? '1.0625rem' : '1.375rem', maxWidth: isMobile ? '100%' : '36rem', marginBottom: isMobile ? 28 : undefined }}>
+            <p className="type-lead text-role-inverse-secondary mb-12" style={{ maxWidth: isMobile ? '100%' : '36rem', marginBottom: isMobile ? 28 : undefined }}>
               {fallbackText(hero.description, homeContent.hero.description)}
             </p>
             
@@ -291,14 +290,14 @@ const Home: React.FC = () => {
             {/* Eyebrow + heading – desktop only (on mobile these are overlaid on the image) */}
             {!isMobile && (
               <>
-                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</span>
-                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.8rem, 2.8vw, 2.5rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
+                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</span>
+                <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
                   <Lines text={fallbackText(quickCheck.heading, homeContent.quickCheck.heading)} />
                 </h2>
               </>
             )}
             <div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
-            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, marginBottom: 32 }}>
+            <p className="type-body text-role-secondary" style={{ marginBottom: 32 }}>
               {fallbackText(quickCheck.body, homeContent.quickCheck.body)}
             </p>
             {/* Criteria list */}
@@ -315,7 +314,7 @@ const Home: React.FC = () => {
                 </div>
               ))}
             </div>
-            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6, marginTop: 16, marginBottom: 28 }}>
+            <p className="type-small text-role-secondary" style={{ marginTop: 16, marginBottom: 28 }}>
               {fallbackText(quickCheck.note, homeContent.quickCheck.note)}
             </p>
             <Link
@@ -343,7 +342,7 @@ const Home: React.FC = () => {
             {isMobile && (
               <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
                 <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</span>
-                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.9rem, 8vw, 2.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
+                <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
                   <Lines text={fallbackText(quickCheck.heading, homeContent.quickCheck.heading)} />
                 </h2>
               </div>
@@ -373,7 +372,7 @@ const Home: React.FC = () => {
             {isMobile && (
               <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
                 <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</span>
-                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.9rem, 8vw, 2.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
+                <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
                   <Lines text={fallbackText(intro.heading, homeContent.intro.heading)} />
                 </h2>
               </div>
@@ -395,8 +394,8 @@ const Home: React.FC = () => {
           <div style={{ background: '#fff', padding: isMobile ? '32px 24px 40px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
             {!isMobile && (
               <>
-                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</span>
-                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 3.2vw, 2.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
+                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</span>
+                <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
                   <Lines text={fallbackText(intro.heading, homeContent.intro.heading)} />
                 </h2>
               </>
@@ -407,16 +406,16 @@ const Home: React.FC = () => {
                 {introStats.map(({ value: v, label: l }) => (
                   <div key={l} style={{ flex: 1 }}>
                     <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 26, fontWeight: 900, color: '#101828', lineHeight: 1 }}>{v}</div>
-                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#4A8FC9', marginTop: 6 }}>{l}</div>
+                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-eyebrow-light)', marginTop: 6 }}>{l}</div>
                   </div>
                 ))}
               </div>
             )}
             <div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28, display: isMobile ? 'none' : 'block' }} />
-            <blockquote style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 18, fontStyle: 'italic', color: '#101828', lineHeight: 1.7, borderLeft: '3px solid #EFBF04', paddingLeft: 20, margin: '0 0 24px' }}>
+            <blockquote className="type-body text-role-heading" style={{ fontStyle: 'italic', borderLeft: '3px solid #EFBF04', paddingLeft: 20, margin: '0 0 24px' }}>
               {fallbackText(intro.quote, homeContent.intro.quote)}
             </blockquote>
-            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: '0 0 36px' }}>
+            <p className="type-body text-role-secondary" style={{ margin: '0 0 36px' }}>
               {fallbackText(intro.body, homeContent.intro.body)}
             </p>
             <Link
@@ -444,8 +443,8 @@ const Home: React.FC = () => {
           <div style={{ background: '#fff', padding: isMobile ? '32px 24px 44px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
             {!isMobile && (
               <>
-                <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</span>
-                <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 48px' }}>
+                <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</span>
+                <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 48px' }}>
                   <Lines text={fallbackText(benefits.heading, homeContent.benefits.heading)} />
                 </h2>
               </>
@@ -460,7 +459,7 @@ const Home: React.FC = () => {
                   onMouseEnter={e => (e.currentTarget.style.background = 'rgba(17,29,85,0.04)')}
                   onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                 >
-                  <span style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: '#EFBF04', letterSpacing: '0.1em', paddingTop: 2 }}>{item.num}</span>
+                  <span style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: 'var(--text-brand-on-light)', letterSpacing: '0.1em', paddingTop: 2 }}>{item.num}</span>
                   <div>
                     <div style={{ fontFamily: FF, fontSize: 17, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 5 }}>{item.title}</div>
                     <div style={{ fontFamily: FF, fontSize: 16, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6 }}>{item.desc}</div>
@@ -484,7 +483,7 @@ const Home: React.FC = () => {
             {isMobile && (
               <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
                 <span style={{ fontFamily: FF, fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</span>
-                <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.4rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
+                <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
                   <Lines text={fallbackText(benefits.heading, homeContent.benefits.heading)} />
                 </h2>
               </div>
@@ -527,8 +526,8 @@ const Home: React.FC = () => {
             ) : (
               <div className="text-center">
                 <Play size={80} className="text-accent mx-auto mb-6 opacity-40" />
-                <p className="text-white/40 uppercase tracking-widest text-sm">{videoTitle}</p>
-                <p className="text-white/60 mt-4 text-xs italic font-body">{fallbackText(videoModal.description, homeContent.videoModal.description)}</p>
+                <p className="type-small text-role-inverse-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>{videoTitle}</p>
+                <p className="type-caption text-role-inverse-secondary" style={{ marginTop: 16, fontStyle: 'italic' }}>{fallbackText(videoModal.description, homeContent.videoModal.description)}</p>
                 <Button type="button" onClick={() => setShowVideo(false)} className="mt-8" variant="outline">{fallbackText(videoModal.closeLabel, homeContent.videoModal.closeLabel)}</Button>
               </div>
             )}
@@ -628,10 +627,10 @@ function StatusSlideCard({
 
         {/* Headline + body + CTA */}
         <div>
-          <h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.6rem)' : 'clamp(2.4rem, 3.8vw, 3.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.94, margin: '0 0 24px' }}>
+          <h2 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
             {phase.headline}
           </h2>
-          <p style={{ fontFamily: '"Inter", sans-serif', fontSize: 17, color: '#C7CAD1', lineHeight: 1.8, marginBottom: 32, maxWidth: isMobile ? 520 : 760 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ marginBottom: 32, maxWidth: isMobile ? 520 : 760 }}>
             {phase.body}
           </p>
           {phase.cta ? (
diff --git a/src/spa/pages/MitgliedWerden.tsx b/src/spa/pages/MitgliedWerden.tsx
index 441860b..ba6bb32 100644
--- a/src/spa/pages/MitgliedWerden.tsx
+++ b/src/spa/pages/MitgliedWerden.tsx
@@ -15,7 +15,7 @@ const GOLD = '#EFBF04';
 const CREAM = '#EFE5E3';
 const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
-const BLUE = '#4A8FC9';
+const BLUE = 'var(--text-eyebrow-light)';
 
 // ── Benefit card with hover accent line ──────────────────────────────────────
 
@@ -133,7 +133,7 @@ function BeitragsrechnerSection({ isMobile, content }: { isMobile: boolean; cont
         <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.32em', color: BLUE, display: 'block', marginBottom: 16 }}>
           {fallbackText(content.eyebrow, fallback.eyebrow)}
         </span>
-        <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: '0 0 20px' }}>
+        <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
           {fallbackText(content.heading, fallback.heading)}
         </h2>
         <div style={{ width: 40, height: 2, background: GOLD, marginBottom: 48 }} />
@@ -524,7 +524,7 @@ function FAQSection({ isMobile, content }: { isMobile: boolean; content: Partial
       <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.32em', color: BLUE, display: 'block', marginBottom: 16 }}>
         {fallbackText(content.eyebrow, mitgliedWerdenContent.faq.eyebrow)}
       </span>
-      <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: '0 0 20px' }}>
+      <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
         {fallbackText(content.heading, mitgliedWerdenContent.faq.heading)}
       </h2>
       <div style={{ width: 40, height: 2, background: GOLD, marginBottom: 48 }} />
@@ -609,12 +609,9 @@ function QuoteCard({
       }}
     >
       <p
+        className="type-body text-role-body"
         style={{
-          fontFamily: FB,
-          fontSize: 18,
           fontStyle: 'italic',
-          color: 'rgba(16,24,40,0.7)',
-          lineHeight: 1.75,
           margin: '0 0 24px',
           flex: 1,
         }}
@@ -791,14 +788,9 @@ const MitgliedWerden: React.FC = () => {
               {fallbackText(hero.eyebrow, mitgliedWerdenContent.hero.eyebrow)}
             </span>
             <h1
+              className="type-display text-role-inverse"
               style={{
-                fontFamily: FF,
-                fontSize: isMobile ? 'clamp(2rem, 9vw, 2.6rem)' : 'clamp(2.8rem, 6vw, 5rem)',
-                fontWeight: 900,
-                color: '#fff',
                 textTransform: 'uppercase',
-                lineHeight: 0.95,
-                letterSpacing: '-0.03em',
                 margin: '0 0 28px',
               }}
             >
@@ -806,13 +798,9 @@ const MitgliedWerden: React.FC = () => {
             </h1>
             <div style={{ width: 48, height: 3, background: GOLD, marginBottom: 28 }} />
             <p
+              className="type-body text-role-inverse-secondary"
               style={{
-                fontFamily: FB,
-                fontSize: 18,
-                fontWeight: 300,
-                color: 'rgba(255,255,255,0.55)',
                 maxWidth: 520,
-                lineHeight: 1.75,
                 margin: 0,
               }}
             >
@@ -914,14 +902,9 @@ const MitgliedWerden: React.FC = () => {
             {fallbackText(benefits.eyebrow, mitgliedWerdenContent.benefits.eyebrow)}
           </span>
           <h2
+            className="type-section-title text-role-heading"
             style={{
-              fontFamily: FF,
-              fontSize: 'clamp(2rem, 4vw, 3rem)',
-              fontWeight: 900,
-              color: '#101828',
               textTransform: 'uppercase',
-              letterSpacing: '-0.025em',
-              lineHeight: 1.03,
               margin: '0 0 20px',
             }}
           >
@@ -977,14 +960,9 @@ const MitgliedWerden: React.FC = () => {
             {fallbackText(about.eyebrow, mitgliedWerdenContent.about.eyebrow)}
           </span>
           <h2
+            className="type-section-title text-role-heading"
             style={{
-              fontFamily: FF,
-              fontSize: 'clamp(2rem, 3.5vw, 3rem)',
-              fontWeight: 900,
-              color: '#101828',
               textTransform: 'uppercase',
-              letterSpacing: '-0.025em',
-              lineHeight: 1.03,
               margin: '0 0 20px',
             }}
           >
@@ -994,11 +972,8 @@ const MitgliedWerden: React.FC = () => {
           {aboutParagraphs.map((paragraph, index) => (
             <p
               key={`${paragraph}-${index}`}
+              className="type-body text-role-secondary"
               style={{
-                fontFamily: FB,
-                fontSize: 18,
-                color: 'rgba(16,24,40,0.55)',
-                lineHeight: 1.85,
                 margin: index === aboutParagraphs.length - 1 ? '0 0 40px' : index === 0 ? '0 0 20px' : '0 0 40px',
               }}
             >
@@ -1128,14 +1103,9 @@ const MitgliedWerden: React.FC = () => {
               {fallbackText(formIntro.eyebrow, mitgliedWerdenContent.formIntro.eyebrow)}
             </span>
             <h2
+              className="type-section-title text-role-inverse"
               style={{
-                fontFamily: FF,
-                fontSize: 'clamp(2rem, 3.2vw, 2.8rem)',
-                fontWeight: 900,
-                color: '#fff',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.025em',
-                lineHeight: 1.04,
                 margin: '0 0 20px',
               }}
             >
@@ -1143,11 +1113,8 @@ const MitgliedWerden: React.FC = () => {
             </h2>
             <div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
             <p
+              className="type-body text-role-inverse-secondary"
               style={{
-                fontFamily: FB,
-                fontSize: 18,
-                color: 'rgba(255,255,255,0.5)',
-                lineHeight: 1.8,
                 maxWidth: 400,
                 marginBottom: 48,
               }}
@@ -1261,14 +1228,9 @@ const MitgliedWerden: React.FC = () => {
               {fallbackText(testimonials.eyebrow, mitgliedWerdenContent.testimonials.eyebrow)}
             </span>
             <h2
+              className="type-section-title text-role-heading"
               style={{
-                fontFamily: FF,
-                fontSize: 'clamp(2rem, 4vw, 3rem)',
-                fontWeight: 900,
-                color: '#101828',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.025em',
-                lineHeight: 1.03,
                 margin: '0 0 20px',
               }}
             >
@@ -1317,14 +1279,9 @@ const MitgliedWerden: React.FC = () => {
           {fallbackText(bottomCta.eyebrow, mitgliedWerdenContent.bottomCta.eyebrow)}
         </span>
         <h2
+          className="type-section-title text-role-inverse"
           style={{
-            fontFamily: FF,
-            fontSize: 'clamp(2rem, 4vw, 3.2rem)',
-            fontWeight: 900,
-            color: '#fff',
             textTransform: 'uppercase',
-            letterSpacing: '-0.025em',
-            lineHeight: 1.03,
             margin: '0 auto 20px',
             maxWidth: 640,
           }}
diff --git a/src/spa/pages/Netzwerk.tsx b/src/spa/pages/Netzwerk.tsx
index b66a91f..708083e 100644
--- a/src/spa/pages/Netzwerk.tsx
+++ b/src/spa/pages/Netzwerk.tsx
@@ -368,15 +368,12 @@ function PartnerModal({ partner, copy, onClose }: { partner: Partner; copy: Part
 
         {/* ── Content ── */}
         <div style={{ padding: '72px 32px 32px' }}>
-          <h2 style={{
-            fontFamily: FF, fontSize: 'clamp(1.5rem, 3vw, 2rem)',
-            fontWeight: 900, color: '#101828',
-            letterSpacing: '-0.025em', lineHeight: 1.05,
+          <h2 className="type-subtitle text-role-heading" style={{
             margin: '0 0 10px',
           }}>
             {partner.name}
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.65, margin: '0 0 24px' }}>
+          <p className="type-body text-role-secondary" style={{ margin: '0 0 24px' }}>
             {partner.desc}
           </p>
 
@@ -407,7 +404,7 @@ function PartnerModal({ partner, copy, onClose }: { partner: Partner; copy: Part
               {fallbackText(copy.aboutLabel, netzwerkContent.partners.modal.aboutLabel)}
             </span>
           </div>
-          <p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(16,24,40,0.6)', lineHeight: 1.82, marginBottom: 36 }}>
+          <p className="type-body text-role-secondary" style={{ marginBottom: 36 }}>
             {partner.fullDesc}
           </p>
 
@@ -534,10 +531,10 @@ const Netzwerk: React.FC = () => {
             <div style={{ width: 40, height: 2, background: GOLD }} />
             <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD }}>{fallbackText(hero.eyebrow, netzwerkContent.hero.eyebrow)}</span>
           </div>
-          <h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 6vw, 5rem)' : 'clamp(2.8rem, 6vw, 5rem)', fontWeight: 900, color: '#fff', lineHeight: 0.95, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: '0 0 28px' }}>
+          <h1 className="type-display text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 28px' }}>
             <Lines text={fallbackText(hero.heading, netzwerkContent.hero.heading)} highlight={fallbackText(hero.highlight, netzwerkContent.hero.highlight)} />
           </h1>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, maxWidth: 560, margin: 0, fontWeight: 300 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ maxWidth: 560, margin: 0 }}>
             {fallbackText(hero.description, netzwerkContent.hero.description)}
           </p>
         </div>
@@ -548,9 +545,9 @@ const Netzwerk: React.FC = () => {
       <section id="schirmherrschaft" style={{ background: NAVY }}>
         <div style={{ padding: isMobile ? '48px 24px 32px' : '80px 80px 56px' }}>
           <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, display: 'block', marginBottom: 16 }}>{fallbackText(patronage.eyebrow, netzwerkContent.patronage.eyebrow)}</span>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1, margin: '0 0 20px' }}>{fallbackText(patronage.heading, netzwerkContent.patronage.heading)}</h2>
+          <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>{fallbackText(patronage.heading, netzwerkContent.patronage.heading)}</h2>
           <div style={{ width: 40, height: 2, background: GOLD, marginBottom: 14 }} />
-          <p style={{ fontFamily: FF, fontSize: 18, color: 'rgba(255,255,255,0.5)', margin: 0 }}>{fallbackText(patronage.description, netzwerkContent.patronage.description)}</p>
+          <p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>{fallbackText(patronage.description, netzwerkContent.patronage.description)}</p>
         </div>
 
         <div style={{ display: isMobile ? 'flex' : 'grid', gridTemplateColumns: isMobile ? undefined : '1fr 1fr', overflowX: isMobile ? 'auto' : undefined, scrollSnapType: isMobile ? 'x mandatory' : undefined, gap: isMobile ? 14 : 0, padding: isMobile ? '0 24px 28px' : 0, WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
@@ -579,7 +576,7 @@ const Netzwerk: React.FC = () => {
               <div style={{ fontFamily: FF, fontSize: 17, color: 'rgba(255,255,255,0.4)', lineHeight: 1.6 }}>{fallbackText(patronage.greetingTitleLine2, netzwerkContent.patronage.greetingTitleLine2)}</div>
             </div>
             <div>
-              <blockquote style={{ fontFamily: FF, fontSize: 18, fontStyle: 'italic', color: 'rgba(255,255,255,0.8)', lineHeight: 1.75, margin: 0, paddingLeft: 24, borderLeft: `3px solid ${GOLD}` }}>
+              <blockquote className="type-body text-role-inverse-secondary" style={{ fontStyle: 'italic', margin: 0, paddingLeft: 24, borderLeft: `3px solid ${GOLD}` }}>
                 {fallbackText(patronage.greetingQuote, netzwerkContent.patronage.greetingQuote)}
               </blockquote>
               <div style={{ fontFamily: FF, fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 20, paddingLeft: 24 }}>
@@ -642,11 +639,11 @@ const Netzwerk: React.FC = () => {
           /* Mobile: one cohesive navy module – copy + compact stat strip */
           <div style={{ padding: '48px 24px', position: 'relative', zIndex: 1 }}>
             <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 18 }}>{fallbackText(juryIntro.eyebrow, netzwerkContent.juryIntro.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.7rem, 8vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 22px' }}>
+            <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 22px' }}>
               <Lines text={fallbackText(juryIntro.heading, netzwerkContent.juryIntro.heading)} />
             </h2>
             <div style={{ width: 40, height: 2, background: GOLD, marginBottom: 22 }} />
-            <p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.55)', lineHeight: 1.75, margin: 0 }}>
+            <p className="type-small text-role-inverse-secondary" style={{ margin: 0 }}>
               {fallbackText(juryIntro.description, netzwerkContent.juryIntro.description)}
             </p>
             {/* Stat strip */}
@@ -681,11 +678,11 @@ const Netzwerk: React.FC = () => {
             {/* Right – Navy, editorial copy */}
             <div style={{ background: NAVY, padding: '72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
               <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, marginBottom: 20 }}>{fallbackText(juryIntro.eyebrow, netzwerkContent.juryIntro.eyebrow)}</span>
-              <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.6rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 24px' }}>
+              <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
                 <Lines text={fallbackText(juryIntro.heading, netzwerkContent.juryIntro.heading)} />
               </h2>
               <div style={{ width: 40, height: 2, background: GOLD }} />
-              <p style={{ marginTop: 24, fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.45)', lineHeight: 1.85 }}>
+              <p className="type-body text-role-inverse-secondary" style={{ marginTop: 24 }}>
                 {fallbackText(juryIntro.description, netzwerkContent.juryIntro.description)}
               </p>
             </div>
@@ -699,9 +696,9 @@ const Netzwerk: React.FC = () => {
         <div style={{ padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 48, alignItems: 'flex-end', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
           <div>
             <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 16 }}>{fallbackText(jury.eyebrow, netzwerkContent.jury.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.95, margin: 0 }}><Lines text={fallbackText(jury.heading, netzwerkContent.jury.heading)} /></h2>
+            <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}><Lines text={fallbackText(jury.heading, netzwerkContent.jury.heading)} /></h2>
           </div>
-          <p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.4)', lineHeight: 1.8, margin: 0 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>
             {fallbackText(jury.description, netzwerkContent.jury.description)}
           </p>
         </div>
@@ -726,7 +723,7 @@ const Netzwerk: React.FC = () => {
       <section style={{ background: '#101828', overflow: 'hidden', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', borderTop: '1px solid rgba(255,255,255,0.07)' }}>
         <div style={{ padding: isMobile ? '48px 24px' : 80, display: 'flex', flexDirection: 'column', justifyContent: 'center', background: '#101828' }}>
           <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 16 }}>{fallbackText(expertise.eyebrow, netzwerkContent.expertise.eyebrow)}</span>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.0, margin: '0 0 24px' }}><Lines text={fallbackText(expertise.heading, netzwerkContent.expertise.heading)} /></h2>
+          <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}><Lines text={fallbackText(expertise.heading, netzwerkContent.expertise.heading)} /></h2>
           <div style={{ width: 40, height: 2, background: GOLD, marginBottom: 40 }} />
           <div>
             {expertiseRows.map((row) => (
@@ -742,7 +739,7 @@ const Netzwerk: React.FC = () => {
         </div>
         <div style={{ padding: isMobile ? '48px 24px' : '80px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderLeft: isMobile ? 'none' : '1px solid rgba(255,255,255,0.07)', borderTop: isMobile ? '1px solid rgba(255,255,255,0.07)' : 'none', overflow: 'hidden', background: '#101828' }}>
           <span style={{ fontFamily: 'Georgia, serif', fontSize: 'clamp(60px, 8vw, 120px)', color: 'rgba(239,191,4,0.1)', lineHeight: 0.8, display: 'block', marginBottom: -20 }}>&ldquo;</span>
-          <p style={{ fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.4rem)', fontWeight: 300, color: 'rgba(255,255,255,0.75)', lineHeight: 1.65, margin: '0 0 40px' }}>
+          <p className="type-lead text-role-inverse-secondary" style={{ margin: '0 0 40px' }}>
             {fallbackText(expertise.quote, netzwerkContent.expertise.quote)}
           </p>
           <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
@@ -758,10 +755,10 @@ const Netzwerk: React.FC = () => {
         <MunichSkylineBg />
         <div style={{ padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end', borderBottom: '1px solid rgba(3,9,58,0.1)' }}>
           <div>
-            <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: '#4A8FC9', display: 'block', marginBottom: 16 }}>{fallbackText(partnerSection.eyebrow, netzwerkContent.partners.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', fontSize: 'clamp(2rem, 3.5vw, 3rem)', lineHeight: 0.95, margin: 0 }}><Lines text={fallbackText(partnerSection.heading, netzwerkContent.partners.heading)} /></h2>
+            <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: 'var(--text-eyebrow-light)', display: 'block', marginBottom: 16 }}>{fallbackText(partnerSection.eyebrow, netzwerkContent.partners.eyebrow)}</span>
+            <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}><Lines text={fallbackText(partnerSection.heading, netzwerkContent.partners.heading)} /></h2>
           </div>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.4)', maxWidth: isMobile ? '100%' : 220, textAlign: isMobile ? 'left' : 'right', lineHeight: 1.6, margin: 0 }}>
+          <p className="type-body text-role-secondary" style={{ maxWidth: isMobile ? '100%' : 220, textAlign: isMobile ? 'left' : 'right', margin: 0 }}>
             {visiblePartnerDescription(partnerSection.description)}
           </p>
         </div>
@@ -795,9 +792,9 @@ const Netzwerk: React.FC = () => {
           {/* Left – pitch */}
           <div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'visible' }}>
             <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 8 }}>{fallbackText(sponsoring.eyebrow, netzwerkContent.sponsoring.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', fontSize: 'clamp(1.6rem, 2.4vw, 2.4rem)', lineHeight: 1.0, margin: '0 0 12px' }}><Lines text={fallbackText(sponsoring.heading, netzwerkContent.sponsoring.heading)} /></h2>
+            <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}><Lines text={fallbackText(sponsoring.heading, netzwerkContent.sponsoring.heading)} /></h2>
             <div style={{ width: 36, height: 2, background: GOLD, margin: '0 0 14px', flexShrink: 0 }} />
-            <p style={{ fontFamily: FB, fontSize: 'clamp(15px, 1.2vw, 17px)', color: 'rgba(255,255,255,0.75)', lineHeight: 1.65, marginBottom: 16 }}>
+            <p className="type-small text-role-inverse-secondary" style={{ marginBottom: 16 }}>
               {fallbackText(sponsoring.description, netzwerkContent.sponsoring.description)}
             </p>
             {sponsorBenefits.map((item) => (
diff --git a/src/spa/pages/Participation.tsx b/src/spa/pages/Participation.tsx
index 67e9320..24c445d 100644
--- a/src/spa/pages/Participation.tsx
+++ b/src/spa/pages/Participation.tsx
@@ -80,11 +80,11 @@ const Participation: React.FC = () => {
             <div style={{ width: 36, height: 2, background: GOLD }} />
             <span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#EFBF04' }}>{fallbackText(hero.eyebrow, participationContent.hero.eyebrow)}</span>
           </div>
-          <h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 6vw, 5rem)' : 'clamp(2.8rem, 6vw, 5rem)', fontWeight: 900, color: '#fff', lineHeight: 0.95, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: '0 0 24px' }}>
+          <h1 className="type-display text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
             <Lines text={fallbackText(hero.heading, participationContent.hero.heading)} />
           </h1>
           <div style={{ width: 48, height: 2, background: GOLD, marginBottom: 24 }} />
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, maxWidth: 520, fontWeight: 300 }}>
+          <p className="type-body text-role-inverse-secondary" style={{ maxWidth: 520 }}>
             {fallbackText(hero.description, participationContent.hero.description)}
           </p>
         </div>
@@ -99,8 +99,8 @@ const Participation: React.FC = () => {
         {/* Header */}
         <div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 48, alignItems: 'flex-end', borderBottom: `1px solid #D0D5DD` }}>
           <div>
-            <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(eligibility.eyebrow, participationContent.eligibility.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
+            <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(eligibility.eyebrow, participationContent.eligibility.eyebrow)}</span>
+            <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
               <Lines text={fallbackText(eligibility.heading, participationContent.eligibility.heading)} />
             </h2>
           </div>
@@ -115,7 +115,7 @@ const Participation: React.FC = () => {
                 {fallbackText(eligibility.primaryCta?.label, participationContent.eligibility.primaryCta.label)} <ArrowRight size={13} />
               </Link>
             </div>
-            <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.8, margin: 0, textAlign: isMobile ? 'left' : 'right' }}>
+            <p className="type-body text-role-secondary" style={{ margin: 0, textAlign: isMobile ? 'left' : 'right' }}>
               {fallbackText(eligibility.description, participationContent.eligibility.description)}
             </p>
           </div>
@@ -140,7 +140,7 @@ const Participation: React.FC = () => {
             <Icon size={18} style={{ color: GOLD, flexShrink: 0, marginTop: 3 }} strokeWidth={1.7} />
             <div>
               <div style={{ fontFamily: FF, fontSize: 13, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>{fallbackText(note.title, '')}</div>
-              <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: 0 }}>
+              <p className="type-body text-role-secondary" style={{ margin: 0 }}>
                 {fallbackText(note.body, '')}
               </p>
             </div>
@@ -180,8 +180,8 @@ const Participation: React.FC = () => {
           /* Desktop: full banner */
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1px 1fr 1px 1fr 1px 1fr', maxWidth: 1200, margin: '0 auto' }}>
             <div style={{ padding: '48px 56px' }}>
-              <h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 6 }}>{fallbackText(datesBanner.heading, participationContent.datesBanner.heading)}</h3>
-              <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.6)', margin: 0 }}>{fallbackText(datesBanner.description, participationContent.datesBanner.description)}</p>
+              <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 6 }}>{fallbackText(datesBanner.heading, participationContent.datesBanner.heading)}</h3>
+              <p className="type-body text-role-secondary" style={{ margin: 0 }}>{fallbackText(datesBanner.description, participationContent.datesBanner.description)}</p>
             </div>
             <div style={{ background: 'rgba(3,9,58,0.12)' }} />
             {desktopDates.map((d, i) => (
@@ -251,12 +251,12 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent }
 
       {/* Header */}
       <div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', borderBottom: '1px solid #D0D5DD' }}>
-        <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(section.eyebrow, participationContent.applicationWays.eyebrow)}</span>
+        <span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(section.eyebrow, participationContent.applicationWays.eyebrow)}</span>
         <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 48, alignItems: 'flex-end' }}>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
+          <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
             <Lines text={fallbackText(section.heading, participationContent.applicationWays.heading)} />
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
+          <p className="type-body text-role-secondary" style={{ margin: 0 }}>
             {fallbackText(section.description, participationContent.applicationWays.description)}
           </p>
         </div>
@@ -277,8 +277,8 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent }
                   <Icon size={20} style={{ color: GOLD }} strokeWidth={1.6} />
                 </div>
                 <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.4)', display: 'block', marginBottom: 8 }}>{fallbackText(w.label, '')}</span>
-                <h3 style={{ fontFamily: FF, fontSize: '1.45rem', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 10px' }}><Lines text={fallbackText(w.title, '')} /></h3>
-                <p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6, margin: '0 0 20px' }}>{fallbackText(w.desc, '')}</p>
+                <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 10px' }}><Lines text={fallbackText(w.title, '')} /></h3>
+                <p className="type-small text-role-secondary" style={{ margin: '0 0 20px' }}>{fallbackText(w.desc, '')}</p>
                 <div style={{ width: 36, height: 2, background: GOLD }} />
               </div>
               {/* Detail list */}
@@ -315,10 +315,10 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent }
             <Icon size={18} style={{ color: GOLD }} strokeWidth={1.5} />
           </div>
           <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.4)', display: 'block', marginBottom: 10 }}>{fallbackText(w.label, '')}</span>
-          <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 8px' }}>
+          <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 8px' }}>
             <Lines text={fallbackText(w.title, '')} />
           </h3>
-          <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.7, margin: '0 0 32px' }}>
+          <p className="type-body text-role-secondary" style={{ margin: '0 0 32px' }}>
             {fallbackText(w.desc, '')}
           </p>
 
diff --git a/src/spa/pages/Preistraeger.tsx b/src/spa/pages/Preistraeger.tsx
index 17ad3e1..019cba0 100644
--- a/src/spa/pages/Preistraeger.tsx
+++ b/src/spa/pages/Preistraeger.tsx
@@ -200,9 +200,11 @@ export default function Preistraeger() {
         <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, #EFBF04, rgba(239,191,4,0.3), transparent)' }} />
       </div>
 
-      {/* Breadcrumb */}
+      {/* Page title */}
       <div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '18px 24px' : '18px 80px' }}>
-        <span style={{ fontFamily: FF, fontSize: 16, color: GOLD, fontWeight: 600, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, preistraegerIndexContent.breadcrumb.label)}</span>
+        <h1 className="type-card-title text-role-brand-light" style={{ margin: 0 }}>
+          {fallbackText(breadcrumb.label, preistraegerIndexContent.breadcrumb.label)}
+        </h1>
       </div>
 
       {/* Year Filter Section */}
@@ -284,7 +286,7 @@ export default function Preistraeger() {
 
       {/* Bottom CTA */}
       <div style={{ padding: isMobile ? '48px 24px' : '64px 80px', borderTop: `1px solid ${BORDER}`, textAlign: 'center' }}>
-        <p style={{ fontFamily: FF, fontSize: 17, color: GRAY, marginBottom: 20 }}>{fallbackText(cta.text, preistraegerIndexContent.cta.text)}</p>
+        <p className="type-body text-role-secondary" style={{ marginBottom: 20 }}>{fallbackText(cta.text, preistraegerIndexContent.cta.text)}</p>
         <Link
           to={fallbackText(cta.primaryCta?.url, preistraegerIndexContent.cta.primaryCta.url)}
           style={{
@@ -306,13 +308,13 @@ export default function Preistraeger() {
 function SectionIntro({ copy, isMobile }: { copy: typeof preistraegerIndexContent.winners; isMobile: boolean }) {
   return (
     <div style={{ padding: isMobile ? '40px 24px 22px' : '56px 80px 28px', maxWidth: 900 }}>
-      <span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
+      <span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
         {fallbackText(copy.eyebrow, preistraegerIndexContent.winners.eyebrow)}
       </span>
-      <h2 style={{ color: NAVY, fontFamily: FF, fontSize: isMobile ? 28 : 42, fontWeight: 900, lineHeight: 1.05, margin: '10px 0 12px', textTransform: 'uppercase', letterSpacing: 0 }}>
+      <h2 className="type-section-title text-role-heading" style={{ margin: '10px 0 12px', textTransform: 'uppercase' }}>
         {fallbackText(copy.heading, preistraegerIndexContent.winners.heading)}
       </h2>
-      <p style={{ color: GRAY, fontFamily: FF, fontSize: 17, lineHeight: 1.6, margin: 0, maxWidth: 680 }}>
+      <p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 680 }}>
         {fallbackText(copy.description, preistraegerIndexContent.winners.description)}
       </p>
     </div>
@@ -333,13 +335,13 @@ function GoldeneBavariaSection({
   return (
     <section style={{ background: NAVY, color: '#fff', borderTop: `1px solid ${BORDER}` }}>
       <div style={{ padding: isMobile ? '44px 24px 26px' : '64px 80px 34px', maxWidth: 980 }}>
-        <span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
+        <span className="type-eyebrow text-role-inverse" style={{ color: GOLD, textTransform: 'uppercase' }}>
           {fallbackText(copy.eyebrow, preistraegerIndexContent.goldeneBavaria.eyebrow)}
         </span>
-        <h2 style={{ color: '#fff', fontFamily: FF, fontSize: isMobile ? 30 : 48, fontWeight: 900, lineHeight: 1.02, margin: '10px 0 14px', textTransform: 'uppercase', letterSpacing: 0 }}>
+        <h2 className="type-section-title text-role-inverse" style={{ margin: '10px 0 14px', textTransform: 'uppercase' }}>
           {fallbackText(copy.heading, preistraegerIndexContent.goldeneBavaria.heading)}
         </h2>
-        <p style={{ color: 'rgba(255,255,255,0.74)', fontFamily: FF, fontSize: 18, lineHeight: 1.6, margin: 0, maxWidth: 760 }}>
+        <p className="type-body text-role-inverse-secondary" style={{ margin: 0, maxWidth: 760 }}>
           {fallbackText(copy.description, preistraegerIndexContent.goldeneBavaria.description)}
         </p>
       </div>
@@ -381,13 +383,13 @@ function GoldeneBavariaCard({ winner, rank, hoverLabel }: { winner: Winner; rank
         </div>
       </div>
       <div style={{ padding: isMobile ? '20px' : '24px' }}>
-        <span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
+        <span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
           {winner.year} · {winner.category}
         </span>
-        <h3 style={{ color: NAVY, fontFamily: FF, fontSize: isMobile ? 23 : 26, fontWeight: 900, lineHeight: 1.12, margin: '10px 0 10px', overflowWrap: 'anywhere' }}>
+        <h3 className="type-card-title text-role-heading" style={{ margin: '10px 0 10px', overflowWrap: 'anywhere' }}>
           {winner.name}
         </h3>
-        <p style={{ color: GRAY, fontFamily: FF, fontSize: 15, lineHeight: 1.55, margin: 0, overflowWrap: 'anywhere' }}>
+        <p className="type-small text-role-secondary" style={{ margin: 0, overflowWrap: 'anywhere' }}>
           {winner.shortDesc}
         </p>
         <span style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 7, color: NAVY, fontFamily: FF, fontSize: 14, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
@@ -428,10 +430,10 @@ function WinnerCard({ winner, hoverLabel }: { winner: Winner; hoverLabel: string
             {winner.year} · {winner.type}
           </span>
         </div>
-        <h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 700, color: '#fff', margin: 0, lineHeight: 1.3, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
+        <h3 className="type-card-title text-role-inverse" style={{ margin: 0, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
           {winner.name}
         </h3>
-        <p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(255,255,255,0.82)', margin: '4px 0 0', lineHeight: 1.3 }}>
+        <p className="type-small text-role-inverse-secondary" style={{ margin: '4px 0 0' }}>
           {winner.category}
         </p>
 
@@ -491,14 +493,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 18 }}>
         {winnerMeta ? (
-          <span style={{
-            color: GOLD,
-            fontFamily: FF,
-            fontSize: 12,
-            fontWeight: 700,
-            letterSpacing: '0.12em',
-            textTransform: 'uppercase',
-          }}>
+          <span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
             {winnerMeta}
           </span>
         ) : null}
@@ -517,12 +512,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
         ) : null}
       </div>
 
-      <h3 style={{
-        color: NAVY,
-        fontFamily: FF,
-        fontSize: isMobile ? 20 : 22,
-        fontWeight: 700,
-        lineHeight: 1.18,
+      <h3 className="type-card-title text-role-heading" style={{
         margin: 0,
         overflowWrap: 'anywhere',
       }}>
@@ -530,11 +520,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
       </h3>
 
       {hasDescription ? (
-        <p style={{
-          color: GRAY,
-          fontFamily: FF,
-          fontSize: 15,
-          lineHeight: 1.55,
+        <p className="type-small text-role-secondary" style={{
           margin: '16px 0 0',
           overflowWrap: 'anywhere',
         }}>
diff --git a/src/spa/pages/PreistraegerDetail.tsx b/src/spa/pages/PreistraegerDetail.tsx
index f4ae921..62bc36e 100644
--- a/src/spa/pages/PreistraegerDetail.tsx
+++ b/src/spa/pages/PreistraegerDetail.tsx
@@ -122,7 +122,7 @@ export default function PreistraegerDetail() {
 
       {/* Breadcrumb */}
       <div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '16px 24px' : '16px 80px', display: 'flex', alignItems: 'center', gap: 8 }}>
-        <Link to={fallbackText(breadcrumb.url, preistraegerDetailContent.breadcrumb.url)} style={{ fontFamily: FF, fontSize: 16, color: GOLD, textDecoration: 'none', fontWeight: 600 }}>
+        <Link to={fallbackText(breadcrumb.url, preistraegerDetailContent.breadcrumb.url)} style={{ fontFamily: FF, fontSize: 16, color: 'var(--text-brand-on-light)', textDecoration: 'none', fontWeight: 600 }}>
           {fallbackText(breadcrumb.label, preistraegerDetailContent.breadcrumb.label)}
         </Link>
         <ChevronRight size={14} style={{ color: GRAY }} />
@@ -140,7 +140,7 @@ export default function PreistraegerDetail() {
             {winner.category}
           </span>
           {typeof winner.year === 'number' ? (
-            <span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: GOLD }}>
+            <span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: 'var(--text-brand-on-light)' }}>
               {winner.year}
             </span>
           ) : null}
@@ -148,10 +148,10 @@ export default function PreistraegerDetail() {
             {winner.type}
           </span>
         </div>
-        <h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 5vw, 3rem)' : 'clamp(2rem, 5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 12px' }}>
+        <h1 className="type-page-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
           {winner.name}
         </h1>
-        <p style={{ fontFamily: FB, fontSize: 18, color: GRAY, margin: 0, maxWidth: 640, lineHeight: 1.6 }}>
+        <p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 640 }}>
           {winner.shortDesc}
         </p>
       </div>
@@ -160,28 +160,28 @@ export default function PreistraegerDetail() {
       <div style={{ padding: isMobile ? '48px 24px' : '64px 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 1fr', gap: isMobile ? 40 : 64 }}>
         {/* Left: Text */}
         <div>
-          <h2 style={{ fontFamily: FF, fontSize: 18, fontWeight: 800, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 20 }}>
+          <h2 className="type-subtitle text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 20 }}>
             {fallbackText(sections.companyHeading, preistraegerDetailContent.sections.companyHeading)}
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 18, color: '#333', lineHeight: 1.8, marginBottom: 40 }}>
+          <p className="type-body text-role-body" style={{ marginBottom: 40 }}>
             {winner.longDesc}
           </p>
 
-          <h2 style={{ fontFamily: FF, fontSize: 18, fontWeight: 800, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 20 }}>
+          <h2 className="type-subtitle text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 20 }}>
             {fallbackText(sections.juryHeading, preistraegerDetailContent.sections.juryHeading)}
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 18, color: '#333', lineHeight: 1.8, marginBottom: 40 }}>
+          <p className="type-body text-role-body" style={{ marginBottom: 40 }}>
             {fallbackText(sections.juryTextBeforeName, preistraegerDetailContent.sections.juryTextBeforeName)} {winner.name} {fallbackText(sections.juryTextAfterNameBeforeCategory, preistraegerDetailContent.sections.juryTextAfterNameBeforeCategory)} <strong>{winner.category}</strong>. {fallbackText(sections.juryTextAfterCategory, preistraegerDetailContent.sections.juryTextAfterCategory)}
           </p>
 
           {/* Quote */}
           <div style={{ borderLeft: `4px solid ${GOLD}`, paddingLeft: 24, marginBottom: 40 }}>
-            <p style={{ fontFamily: FB, fontStyle: 'italic', fontSize: 18, color: '#101828', lineHeight: 1.7, marginBottom: 12 }}>
+            <p className="type-body text-role-heading" style={{ fontStyle: 'italic', marginBottom: 12 }}>
               <span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginRight: 4, fontFamily: '"IBM Plex Sans"' }}>&ldquo;</span>
               {winner.quote}
               <span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginLeft: 2, fontFamily: '"IBM Plex Sans"' }}>&rdquo;</span>
             </p>
-            <p style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: GRAY, margin: 0, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
+            <p className="type-small text-role-secondary" style={{ fontWeight: 700, margin: 0, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
               – {winner.quotePerson}, {winner.quoteRole}
             </p>
           </div>
@@ -196,7 +196,7 @@ export default function PreistraegerDetail() {
 
           {/* Kenndaten */}
           <div style={{ background: BG_ALT, borderLeft: `3px solid ${GOLD}`, padding: '20px 24px' }}>
-            <h3 style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: GRAY, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 20 }}>
+            <h3 className="type-small text-role-secondary" style={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 20 }}>
               {fallbackText(facts.heading, preistraegerDetailContent.facts.heading)}
             </h3>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -259,11 +259,11 @@ export default function PreistraegerDetail() {
         <section style={{ borderTop: `1px solid ${BORDER}`, background: '#fff' }}>
           <div style={{ padding: isMobile ? '48px 24px' : '64px 80px' }}>
             <div style={{ marginBottom: 28, maxWidth: 760 }}>
-              <h2 style={{ fontFamily: FF, fontSize: isMobile ? 26 : 34, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.02em', margin: '0 0 12px' }}>
+              <h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
                 {fallbackText(gallery.heading, 'Bildergalerie')}
               </h2>
               {gallery.description ? (
-                <p style={{ fontFamily: FB, fontSize: 17, color: GRAY, lineHeight: 1.7, margin: 0 }}>
+                <p className="type-body text-role-secondary" style={{ margin: 0 }}>
                   {gallery.description}
                 </p>
               ) : null}
@@ -360,7 +360,7 @@ export default function PreistraegerDetail() {
               style={{ maxWidth: '100%', maxHeight: activeGalleryImage.caption ? '76vh' : '84vh', objectFit: 'contain', display: 'block' }}
             />
             {activeGalleryImage.caption ? (
-              <p style={{ fontFamily: FB, fontSize: 16, lineHeight: 1.6, color: '#fff', margin: 0, textAlign: 'center', overflowWrap: 'anywhere' }}>
+              <p className="type-small text-role-inverse" style={{ margin: 0, textAlign: 'center', overflowWrap: 'anywhere' }}>
                 {activeGalleryImage.caption}
               </p>
             ) : null}
diff --git a/src/spa/pages/Press.tsx b/src/spa/pages/Press.tsx
index 553f6ca..d3f8f90 100644
--- a/src/spa/pages/Press.tsx
+++ b/src/spa/pages/Press.tsx
@@ -140,14 +140,9 @@ function NewsCard({ item, idx, isMobile, total }: { item: PressNewsItem; idx: nu
           {item.cat}
         </span>
         <h3
+          className="type-card-title text-role-inverse"
           style={{
-            fontFamily: FF,
-            fontSize: 'clamp(1rem, 1.5vw, 1.2rem)',
-            fontWeight: 700,
-            color: '#fff',
             textTransform: 'uppercase',
-            letterSpacing: '-0.01em',
-            lineHeight: 1.25,
             marginBottom: 16,
           }}
         >
@@ -163,11 +158,8 @@ function NewsCard({ item, idx, isMobile, total }: { item: PressNewsItem; idx: nu
           }}
         />
         <p
+          className="type-body text-role-inverse-secondary"
           style={{
-            fontFamily: FB,
-            fontSize: 18,
-            color: 'rgba(255,255,255,0.4)',
-            lineHeight: 1.7,
             flex: 1,
             marginBottom: 20,
           }}
@@ -265,13 +257,8 @@ const Press: React.FC = () => {
             </span>
           </div>
           <h1
+            className="type-display text-role-inverse"
             style={{
-              fontFamily: FF,
-              fontSize: isMobile ? 'clamp(2rem, 8vw, 2.8rem)' : 'clamp(2.8rem, 6vw, 5rem)',
-              fontWeight: 900,
-              color: '#fff',
-              lineHeight: 0.95,
-              letterSpacing: '-0.03em',
               textTransform: 'uppercase',
               margin: '0 0 24px',
               overflowWrap: 'anywhere',
@@ -281,13 +268,9 @@ const Press: React.FC = () => {
           </h1>
           <div style={{ width: 48, height: 2, background: GOLD, marginBottom: 24 }} />
           <p
+            className="type-body text-role-inverse-secondary"
             style={{
-              fontFamily: FB,
-              fontSize: 18,
-              color: 'rgba(255,255,255,0.6)',
-              fontWeight: 300,
               maxWidth: 520,
-              lineHeight: 1.7,
               margin: 0,
             }}
           >
@@ -318,20 +301,16 @@ const Press: React.FC = () => {
                 fontWeight: 700,
                 textTransform: 'uppercase',
                 letterSpacing: '0.28em',
-                color: '#4A8FC9',
+                color: 'var(--text-eyebrow-light)',
                 marginBottom: 16,
               }}
             >
               {fallbackText(eventsSection.eyebrow, pressIndexContent.events.eyebrow)}
             </div>
             <h2
+              className="type-section-title text-role-heading"
               style={{
-                fontFamily: FF,
-                fontWeight: 900,
-                color: '#101828',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.025em',
-                fontSize: 'clamp(2rem, 3.5vw, 3rem)',
                 margin: 0,
               }}
             >
@@ -340,11 +319,8 @@ const Press: React.FC = () => {
           </div>
           <div>
             <p
+              className="type-body text-role-secondary"
               style={{
-                fontFamily: FB,
-                fontSize: 18,
-                color: 'rgba(16,24,40,0.45)',
-                lineHeight: 1.8,
                 margin: 0,
               }}
             >
@@ -378,8 +354,8 @@ const Press: React.FC = () => {
 
             {/* Right – copy cell */}
             <div style={{ padding: isMobile ? '24px 24px 32px' : '40px 56px 40px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
-              <div style={{ fontFamily: FF, fontSize: 9, color: '#4A8FC9', textTransform: 'uppercase' as const, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>{event.cat}</div>
-              <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase' as const, letterSpacing: '-0.02em', margin: '0 0 14px' }}>{event.title}</h3>
+              <div style={{ fontFamily: FF, fontSize: 9, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase' as const, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>{event.cat}</div>
+              <h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase' as const, margin: '0 0 14px' }}>{event.title}</h3>
               <div style={{ display: 'flex', gap: isMobile ? 16 : 28, alignItems: 'center', flexWrap: 'wrap', marginBottom: 16 }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)' }}>
                   <Calendar size={14} color={GOLD} />{event.date}
@@ -389,7 +365,7 @@ const Press: React.FC = () => {
                 </div>
               </div>
               <div style={{ width: 24, height: 1, background: 'rgba(239,191,4,0.4)', marginBottom: 14 }} />
-              <p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.7, flex: 1 }}>{event.desc}</p>
+              <p className="type-body text-role-secondary" style={{ flex: 1 }}>{event.desc}</p>
             </div>
           </Link>
         ))}
@@ -423,13 +399,9 @@ const Press: React.FC = () => {
               {fallbackText(newsSection.eyebrow, pressIndexContent.news.eyebrow)}
             </div>
             <h2
+              className="type-section-title text-role-inverse"
               style={{
-                fontFamily: FF,
-                fontWeight: 900,
-                color: '#fff',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.025em',
-                fontSize: 'clamp(2rem, 3.5vw, 3rem)',
                 margin: 0,
               }}
             >
@@ -438,11 +410,8 @@ const Press: React.FC = () => {
           </div>
           <div>
             <p
+              className="type-body text-role-inverse-secondary"
               style={{
-                fontFamily: FB,
-                fontSize: 18,
-                color: 'rgba(255,255,255,0.4)',
-                lineHeight: 1.8,
                 margin: 0,
               }}
             >
@@ -481,7 +450,7 @@ const Press: React.FC = () => {
                 fontWeight: 700,
                 textTransform: 'uppercase',
                 letterSpacing: '0.28em',
-                color: '#4A8FC9',
+                color: 'var(--text-eyebrow-light)',
                 marginBottom: 16,
               }}
             >
@@ -489,13 +458,9 @@ const Press: React.FC = () => {
             </div>
 
             <h2
+              className="type-section-title text-role-heading"
               style={{
-                fontFamily: FF,
-                fontWeight: 900,
-                color: '#101828',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.025em',
-                fontSize: 'clamp(1.8rem, 3vw, 2.6rem)',
                 margin: '0 0 20px',
               }}
             >
@@ -506,11 +471,8 @@ const Press: React.FC = () => {
             <div style={{ width: 40, height: 2, background: GOLD, margin: '0 0 28px' }} />
 
             <p
+              className="type-body text-role-secondary"
               style={{
-                fontFamily: FB,
-                fontSize: 18,
-                color: 'rgba(16,24,40,0.5)',
-                lineHeight: 1.8,
                 maxWidth: 380,
                 marginBottom: 0,
               }}
@@ -524,7 +486,7 @@ const Press: React.FC = () => {
                 style={{
                   fontFamily: FF,
                   fontSize: 10,
-                  color: '#4A8FC9',
+                  color: 'var(--text-eyebrow-light)',
                   textTransform: 'uppercase',
                   letterSpacing: '0.2em',
                   fontWeight: 700,