diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index ed77143..bdeb13f 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -57,7 +57,8 @@ describe('homepage hero', () => {
   it('uses Pilzno brand colors and typography tokens', () => {
     cy.get('[data-cy="hero"]').then((heroElements) => {
       const heroStyle = getComputedStyle(heroElements[0])
-      const documentStyle = getComputedStyle(document.documentElement)
+      const appDocument = heroElements[0].ownerDocument
+      const documentStyle = getComputedStyle(appDocument.documentElement)
 
       expect(documentStyle.getPropertyValue('--color-brand-purple').trim())
         .to.equal('#2a1f3d')
diff --git a/frontend/rabbi_gerzi/index.html b/frontend/rabbi_gerzi/index.html
index 93c0fb1..62fd8a6 100644
--- a/frontend/rabbi_gerzi/index.html
+++ b/frontend/rabbi_gerzi/index.html
@@ -12,7 +12,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
-      href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Frank+Ruhl+Libre:wght@400;500&family=Jost:wght@300;400;500;600;700&family=Lora:ital,wght@1,400;1,500&display=swap"
       rel="stylesheet"
     >
   </head>
diff --git a/frontend/rabbi_gerzi/src/assets/global.css b/frontend/rabbi_gerzi/src/assets/global.css
index 759e690..c9ff3b7 100644
--- a/frontend/rabbi_gerzi/src/assets/global.css
+++ b/frontend/rabbi_gerzi/src/assets/global.css
@@ -1,14 +1,27 @@
 :root {
-  --color-cream: #f4efe1;
-  --color-slate: #2b3f4e;
-  --color-slate-dark: #213240;
-  --color-olive: #5e6b4c;
-  --color-text: #1f1f1f;
-  --color-text-muted: #5a5a5a;
-  --color-white: #ffffff;
-  --color-border: #e6e1d2;
-  --font-serif: 'Merriweather', Georgia, serif;
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --color-brand-purple: #2a1f3d;
+  --color-brand-purple-dark: #20182f;
+  --color-gold: #c9a84c;
+  --color-cream: #faf9f5;
+  --color-light-bg: #f5f2ec;
+  --color-body-text: #3d3530;
+  --color-text: var(--color-body-text);
+  --color-text-muted: #756b62;
+  --color-border: #ded6c8;
+  --color-white: var(--color-cream);
+  --color-slate: var(--color-brand-purple);
+  --color-slate-dark: var(--color-brand-purple-dark);
+  --color-olive: var(--color-gold);
+  --color-pillar-physical: #dce6d4;
+  --color-pillar-relationships: #e8d8d4;
+  --color-pillar-wisdom: #dbd6e8;
+  --color-pillar-guidance: #d0dce8;
+  --font-display: 'Cormorant Garamond', Georgia, serif;
+  --font-ui: 'Jost', system-ui, -apple-system, sans-serif;
+  --font-hebrew: 'Frank Ruhl Libre', serif;
+  --font-quote: 'Lora', Georgia, serif;
+  --font-serif: var(--font-display);
+  --font-sans: var(--font-ui);
 }
 
 * {
@@ -21,7 +34,7 @@ body {
   padding: 0;
   font-family: var(--font-sans);
   color: var(--color-text);
-  background: var(--color-white);
+  background: var(--color-cream);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/frontend/rabbi_gerzi/src/components/ElementParentLink.vue b/frontend/rabbi_gerzi/src/components/ElementParentLink.vue
index f105b68..9baafea 100644
--- a/frontend/rabbi_gerzi/src/components/ElementParentLink.vue
+++ b/frontend/rabbi_gerzi/src/components/ElementParentLink.vue
@@ -34,7 +34,7 @@ defineProps<Props>()
   gap: 0.35rem;
   min-height: 2.2rem;
   padding: 0.35rem 0;
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   font-family: var(--font-sans);
   font-size: 0.9rem;
   font-weight: 600;
diff --git a/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue b/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue
index 7eaa976..56ba23f 100644
--- a/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue
+++ b/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue
@@ -127,8 +127,8 @@ function siblingElementAtOffset(offset: number): ChildElement | null {
 
 .element-sibling-navigation__link:hover,
 .element-sibling-navigation__link:focus-visible {
-  border-color: var(--color-slate);
-  color: var(--color-slate);
+  border-color: var(--color-brand-purple);
+  color: var(--color-brand-purple);
 }
 
 .element-sibling-navigation__link:focus-visible {
diff --git a/frontend/rabbi_gerzi/src/components/RichTextEditor.vue b/frontend/rabbi_gerzi/src/components/RichTextEditor.vue
index 7fef966..5f8f7ab 100644
--- a/frontend/rabbi_gerzi/src/components/RichTextEditor.vue
+++ b/frontend/rabbi_gerzi/src/components/RichTextEditor.vue
@@ -775,11 +775,11 @@ function deleteTable(): void {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 4px;
-  background: var(--color-white);
+  background: var(--color-cream);
 }
 
 .rich-text-editor:focus-within {
-  border-color: var(--color-slate);
+  border-color: var(--color-brand-purple);
 }
 
 .rich-text-editor__toolbar {
@@ -789,7 +789,7 @@ function deleteTable(): void {
   gap: 0.45rem;
   padding: 0.55rem;
   border-bottom: 1px solid var(--color-border);
-  background: #fbfaf6;
+  background: var(--color-light-bg);
 }
 
 .rich-text-editor__select {
@@ -798,7 +798,7 @@ function deleteTable(): void {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   color: var(--color-text);
-  background: var(--color-white);
+  background: var(--color-cream);
   font-family: var(--font-sans);
   font-size: 0.86rem;
 }
@@ -808,7 +808,7 @@ function deleteTable(): void {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 4px;
-  background: var(--color-white);
+  background: var(--color-cream);
 }
 
 .rich-text-editor__button {
@@ -833,7 +833,7 @@ function deleteTable(): void {
 .rich-text-editor__button:focus-visible,
 .rich-text-editor__button--active {
   color: var(--color-white);
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
   outline: none;
 }
 
@@ -844,7 +844,7 @@ function deleteTable(): void {
 }
 
 .rich-text-editor__content {
-  background: var(--color-white);
+  background: var(--color-cream);
 }
 
 .rich-text-editor__content :deep(.rich-text-editor__surface) {
@@ -869,8 +869,8 @@ function deleteTable(): void {
 .rich-text-editor__content :deep(h3),
 .rich-text-editor__content :deep(h4) {
   margin: 1.1rem 0 0.45rem;
-  color: #2c2c2c;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-weight: 500;
   line-height: 1.25;
 }
@@ -900,17 +900,19 @@ function deleteTable(): void {
 .rich-text-editor__content :deep(blockquote) {
   margin: 1rem 0;
   padding: 0.1rem 0 0.1rem 1rem;
-  border-left: 3px solid var(--color-olive);
+  border-left: 3px solid var(--color-gold);
   color: var(--color-text-muted);
+  font-family: var(--font-quote);
+  font-style: italic;
 }
 
 .rich-text-editor__content :deep(mark) {
   padding: 0 0.16em;
-  background: #fff3a7;
+  background: rgb(201 168 76 / 28%);
 }
 
 .rich-text-editor__content :deep(a) {
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 0.16em;
@@ -943,7 +945,7 @@ function deleteTable(): void {
 }
 
 .rich-text-editor__content :deep(th) {
-  background: #f6f3eb;
+  background: var(--color-light-bg);
   font-weight: 700;
 }
 
diff --git a/frontend/rabbi_gerzi/src/components/SiteFooter.vue b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
index f2ea224..e32bd9b 100644
--- a/frontend/rabbi_gerzi/src/components/SiteFooter.vue
+++ b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
@@ -17,11 +17,6 @@ interface ExternalFooterLink {
 
 type FooterLink = RouteFooterLink | ExternalFooterLink
 
-const signatureImage = {
-  src: '/assets/signature.png',
-  alt: "R' Yehoshua Gerzi",
-}
-
 const socialGlyphs: Record<SocialLinkLabel, string> = {
   YouTube: '▶',
   Spotify: '♫',
@@ -43,7 +38,7 @@ const footerLinkColumns: FooterLink[][] = [
   [
     {
       kind: 'external',
-      label: 'Donate',
+      label: 'Invest in Pilzno',
       linkAttributes: donateLinkAttributes,
     },
     { kind: 'route', label: 'Contact', to: '/contact' },
@@ -55,7 +50,13 @@ const footerLinkColumns: FooterLink[][] = [
   <footer class="site-footer" data-cy="footer">
     <div class="site-footer__inner">
       <div class="site-footer__brand">
-        <img v-bind="signatureImage" class="site-footer__signature" />
+        <RouterLink class="site-footer__brand-link" to="/">
+          <span class="site-footer__brand-title">Rabbi Yehoshua Gerzi</span>
+          <span class="site-footer__brand-context">
+            PILZNO · RAMAT BET SHEMESH
+          </span>
+        </RouterLink>
+        <p class="site-footer__tagline">Create Geula · Elevate Life</p>
         <div class="site-footer__social">
           <a
             v-for="socialLink in footerSocialLinks"
@@ -94,7 +95,8 @@ const footerLinkColumns: FooterLink[][] = [
 <style scoped>
 .site-footer {
   padding: 4rem 2rem 2rem;
-  background: var(--color-white);
+  color: var(--color-cream);
+  background: var(--color-brand-purple);
   border-top: 1px solid var(--color-border);
 }
 
@@ -113,9 +115,40 @@ const footerLinkColumns: FooterLink[][] = [
   gap: 1rem;
 }
 
-.site-footer__signature {
-  width: auto;
-  height: 40px;
+.site-footer__brand-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.site-footer__brand-title {
+  color: var(--color-cream);
+  font-family: var(--font-display);
+  font-size: 1.55rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.site-footer__brand-context,
+.site-footer__tagline {
+  color: rgb(250 249 245 / 72%);
+  font-family: var(--font-sans);
+}
+
+.site-footer__brand-context {
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.site-footer__tagline {
+  margin: 0;
+  color: var(--color-gold);
+  font-family: var(--font-quote);
+  font-size: 1rem;
+  font-style: italic;
 }
 
 .site-footer__social {
@@ -129,13 +162,14 @@ const footerLinkColumns: FooterLink[][] = [
   justify-content: center;
   width: 2rem;
   height: 2rem;
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
+  color: var(--color-cream);
+  border: 1px solid rgb(201 168 76 / 72%);
   border-radius: 6px;
 }
 
 .site-footer__social-link:hover {
-  background: var(--color-cream);
+  color: var(--color-brand-purple);
+  background: var(--color-gold);
 }
 
 .site-footer__links {
@@ -154,18 +188,18 @@ const footerLinkColumns: FooterLink[][] = [
 }
 
 .site-footer__link-column a {
-  color: var(--color-text);
+  color: rgb(250 249 245 / 84%);
   font-family: var(--font-sans);
   font-size: 0.95rem;
 }
 
 .site-footer__link-column a:hover {
-  color: var(--color-slate);
+  color: var(--color-gold);
 }
 
 .site-footer__copyright {
   margin: 0;
-  color: var(--color-text-muted);
+  color: rgb(250 249 245 / 58%);
   font-family: var(--font-sans);
   font-size: 0.85rem;
   text-align: center;
diff --git a/frontend/rabbi_gerzi/src/components/SiteHeader.vue b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
index 34095b1..17a7611 100644
--- a/frontend/rabbi_gerzi/src/components/SiteHeader.vue
+++ b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
@@ -11,7 +11,6 @@ interface ContextualNavAction {
 
 interface HeaderNavItem {
   label: string
-  icon: string
 }
 
 interface InternalHeaderNavItem extends HeaderNavItem {
@@ -21,11 +20,6 @@ interface InternalHeaderNavItem extends HeaderNavItem {
 const authStore = useAuthStore()
 const route = useRoute()
 
-const signatureImage = {
-  src: '/assets/signature.png',
-  alt: "R' Yehoshua Gerzi",
-}
-
 onMounted(() => {
   void authStore.fetchUser()
 })
@@ -35,14 +29,13 @@ async function handleLogout(): Promise<void> {
 }
 
 const navItems: InternalHeaderNavItem[] = [
-  { label: 'Torah Media', href: '/media', icon: '▶' },
-  { label: 'About', href: '/about', icon: 'ⓘ' },
-  { label: 'Contact', href: '/contact', icon: '➤' },
+  { label: 'Torah Media', href: '/media' },
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
 ]
 
 const donateNavItem: HeaderNavItem = {
-  label: 'Donate',
-  icon: '♡',
+  label: 'Invest in Pilzno',
 }
 
 const routeElementId = computed(() => {
@@ -85,7 +78,10 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
 <template>
   <header class="site-header">
     <RouterLink class="site-header__brand" to="/">
-      <img v-bind="signatureImage" class="site-header__signature" />
+      <span class="site-header__brand-title">Rabbi Yehoshua Gerzi</span>
+      <span class="site-header__brand-context">
+        PILZNO · RAMAT BET SHEMESH
+      </span>
     </RouterLink>
     <nav class="site-header__nav">
       <RouterLink
@@ -94,15 +90,12 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
         :to="item.href"
         class="site-header__nav-link"
       >
-        <span class="site-header__nav-icon" aria-hidden="true">
-          {{ item.icon }}
-        </span>
         <span>{{ item.label }}</span>
       </RouterLink>
-      <a v-bind="donateLinkAttributes" class="site-header__nav-link">
-        <span class="site-header__nav-icon" aria-hidden="true">
-          {{ donateNavItem.icon }}
-        </span>
+      <a
+        v-bind="donateLinkAttributes"
+        class="site-header__nav-link site-header__nav-link--invest"
+      >
         <span>{{ donateNavItem.label }}</span>
       </a>
       <RouterLink
@@ -134,60 +127,95 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 2rem;
-  background: rgba(244, 239, 225, 0.85);
+  padding: 0.9rem 2rem;
+  background: rgb(250 249 245 / 92%);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--color-border);
 }
 
 .site-header__brand {
-  display: inline-flex;
-  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  min-width: 12rem;
 }
 
-.site-header__signature {
-  height: 36px;
-  width: auto;
+.site-header__brand-title {
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.site-header__brand-context {
+  color: var(--color-text-muted);
+  font-family: var(--font-sans);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
 }
 
 .site-header__nav {
   display: flex;
-  gap: 0.75rem;
+  align-items: center;
   flex-wrap: wrap;
+  gap: 1.15rem;
 }
 
 .site-header__nav-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 1rem;
-  background: var(--color-white);
-  border: 1px solid var(--color-border);
-  border-radius: 9999px;
-  font-size: 0.95rem;
+  min-height: 2rem;
+  padding: 0.15rem 0;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  font-family: var(--font-sans);
+  font-size: 0.78rem;
   font-weight: 500;
+  letter-spacing: 0.08em;
   color: var(--color-text);
-  transition: background 0.15s ease;
+  text-transform: uppercase;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .site-header__nav-link:hover {
-  background: var(--color-cream);
+  color: var(--color-brand-purple);
+  border-color: var(--color-gold);
 }
 
-.site-header__nav-icon {
-  display: inline-block;
-  font-size: 0.85rem;
-  color: var(--color-slate);
+.site-header__nav-link--invest {
+  padding: 0.45rem 0.8rem;
+  color: var(--color-brand-purple);
+  border: 1px solid var(--color-gold);
+  border-radius: 4px;
+}
+
+.site-header__nav-link--invest:hover {
+  color: var(--color-cream);
+  background: var(--color-brand-purple);
+  border-color: var(--color-gold);
 }
 
 @media (max-width: 768px) {
   .site-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.9rem;
     padding: 0.75rem 1rem;
   }
 
+  .site-header__nav {
+    gap: 0.85rem;
+  }
+
   .site-header__nav-link {
-    padding: 0.4rem 0.75rem;
-    font-size: 0.85rem;
+    font-size: 0.72rem;
   }
 }
 </style>
diff --git a/frontend/rabbi_gerzi/src/views/AboutPage.vue b/frontend/rabbi_gerzi/src/views/AboutPage.vue
index 10b4474..d13499e 100644
--- a/frontend/rabbi_gerzi/src/views/AboutPage.vue
+++ b/frontend/rabbi_gerzi/src/views/AboutPage.vue
@@ -231,8 +231,8 @@ function submitNewsletter(submitEvent: Event): void {
             <p class="about-hero__eyebrow">Pilzno Institute</p>
             <h1 class="about-hero__heading">About Rabbi Gerzi</h1>
             <p class="about-hero__lede">
-              Healthy, Integrated and Balanced Torah living, rooted in mesorah
-              and made practical for real people building real lives.
+              Integrated Torah life, rooted in mesorah and made practical for
+              real people building real lives.
             </p>
           </div>
           <img
@@ -314,7 +314,7 @@ function submitNewsletter(submitEvent: Event): void {
           </div>
 
           <p class="about-section__closing">
-            Together, this yields Healthy, Integrated and Balanced Torah living.
+            Together, this yields an Integrated Torah life.
           </p>
         </div>
       </section>
@@ -335,7 +335,7 @@ function submitNewsletter(submitEvent: Event): void {
             <p class="about-section__paragraph">
               In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his
               legacy by building a community in Eretz Yisrael dedicated to this
-              unique form of Healthy, Integrated and Balanced Torah living.
+              unique form of Integrated Torah life.
             </p>
           </div>
         </div>
@@ -452,11 +452,11 @@ function submitNewsletter(submitEvent: Event): void {
 <style scoped>
 .about-page {
   min-height: 100vh;
-  background: var(--color-white);
+  background: var(--color-light-bg);
 }
 
 .about-hero {
-  background: var(--color-cream);
+  background: var(--color-light-bg);
   padding: 4rem 2rem 5rem;
 }
 
@@ -476,7 +476,7 @@ function submitNewsletter(submitEvent: Event): void {
 .about-hero__eyebrow,
 .about-section__kicker {
   margin: 0 0 0.75rem;
-  color: var(--color-olive);
+  color: var(--color-gold);
   font-family: var(--font-sans);
   font-size: 0.78rem;
   font-weight: 700;
@@ -487,8 +487,8 @@ function submitNewsletter(submitEvent: Event): void {
 .about-hero__heading,
 .about-section__heading {
   margin: 0;
-  color: var(--color-slate);
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 3.35rem);
   font-weight: 400;
   line-height: 1.12;
@@ -498,7 +498,7 @@ function submitNewsletter(submitEvent: Event): void {
   max-width: 33rem;
   margin: 1.35rem 0 0;
   color: var(--color-text-muted);
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: clamp(1.05rem, 2vw, 1.25rem);
   line-height: 1.65;
 }
@@ -517,15 +517,15 @@ function submitNewsletter(submitEvent: Event): void {
 }
 
 .about-section--white {
-  background: var(--color-white);
-}
-
-.about-section--cream {
   background: var(--color-cream);
 }
 
+.about-section--cream {
+  background: var(--color-light-bg);
+}
+
 .about-section--slate {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
   color: var(--color-white);
 }
 
@@ -562,7 +562,7 @@ function submitNewsletter(submitEvent: Event): void {
 .about-section__closing {
   margin: 0;
   color: var(--color-text-muted);
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: 1.02rem;
   line-height: 1.78;
 }
@@ -593,7 +593,7 @@ function submitNewsletter(submitEvent: Event): void {
 
 .mission-grid__item,
 .rabbanim__card {
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
 }
@@ -605,8 +605,8 @@ function submitNewsletter(submitEvent: Event): void {
 .mission-grid__title,
 .rabbanim__name {
   margin: 0;
-  color: var(--color-slate);
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: 1.12rem;
   font-weight: 500;
   line-height: 1.35;
@@ -617,7 +617,7 @@ function submitNewsletter(submitEvent: Event): void {
 .teacher-list__description {
   margin: 0.85rem 0 0;
   color: var(--color-text-muted);
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: 0.94rem;
   line-height: 1.65;
 }
@@ -636,14 +636,14 @@ function submitNewsletter(submitEvent: Event): void {
   grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
   gap: 1rem;
   padding: 1.1rem 1.25rem;
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
 }
 
 .teacher-list__name {
-  color: var(--color-slate);
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-weight: 500;
 }
 
@@ -652,7 +652,7 @@ function submitNewsletter(submitEvent: Event): void {
 }
 
 .rabbanim {
-  background: var(--color-white);
+  background: var(--color-cream);
   padding: 5rem 2rem;
   text-align: center;
 }
@@ -692,7 +692,7 @@ function submitNewsletter(submitEvent: Event): void {
 }
 
 .haskamot {
-  background: var(--color-cream);
+  background: var(--color-light-bg);
   padding: 5rem 2rem;
   text-align: center;
 }
@@ -711,13 +711,13 @@ function submitNewsletter(submitEvent: Event): void {
   border-radius: 8px;
   object-fit: cover;
   object-position: center top;
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   box-shadow: 0 10px 30px rgb(33 50 64 / 10%);
 }
 
 .get-involved {
-  background: var(--color-cream);
+  background: var(--color-light-bg);
   padding: 0 2rem 5rem;
 }
 
@@ -729,7 +729,7 @@ function submitNewsletter(submitEvent: Event): void {
   margin: 0 auto;
   padding: 3rem;
   gap: 3rem;
-  background: rgba(255, 255, 255, 0.48);
+  background: rgb(250 249 245 / 54%);
   border: 1px solid rgb(230 225 210 / 70%);
   border-radius: 8px;
 }
@@ -737,7 +737,7 @@ function submitNewsletter(submitEvent: Event): void {
 .get-involved__heading {
   margin: 0 0 1.25rem;
   color: var(--color-text);
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: clamp(1.6rem, 2.6vw, 2.4rem);
   font-weight: 400;
 }
@@ -746,7 +746,7 @@ function submitNewsletter(submitEvent: Event): void {
   max-width: 36ch;
   margin: 0;
   color: var(--color-text-muted);
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: 1rem;
   line-height: 1.55;
 }
@@ -780,7 +780,7 @@ function submitNewsletter(submitEvent: Event): void {
 }
 
 .get-involved__input:focus {
-  outline: 2px solid var(--color-slate);
+  outline: 2px solid var(--color-brand-purple);
   outline-offset: 2px;
 }
 
@@ -797,7 +797,7 @@ function submitNewsletter(submitEvent: Event): void {
 }
 
 .get-involved__submit:hover {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
 }
 
 @media (max-width: 860px) {
diff --git a/frontend/rabbi_gerzi/src/views/AdminElementPage.vue b/frontend/rabbi_gerzi/src/views/AdminElementPage.vue
index 3d529ba..43760f1 100644
--- a/frontend/rabbi_gerzi/src/views/AdminElementPage.vue
+++ b/frontend/rabbi_gerzi/src/views/AdminElementPage.vue
@@ -721,7 +721,7 @@ function resetInput(changeEvent: Event): void {
 <style scoped>
 .admin-element-page {
   min-height: 100vh;
-  background: var(--color-white);
+  background: var(--color-light-bg);
 }
 
 .admin-element-page__main {
@@ -739,8 +739,8 @@ function resetInput(changeEvent: Event): void {
 
 .admin-element-page__heading {
   margin: 0.35rem 0 0;
-  color: #2c2c2c;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: 2rem;
   font-weight: 400;
   line-height: 1.2;
@@ -768,6 +768,7 @@ function resetInput(changeEvent: Event): void {
   padding: 0.9rem;
   border: 1px solid var(--color-border);
   border-radius: 4px;
+  background: var(--color-cream);
 }
 
 .admin-element-page__label {
@@ -783,7 +784,7 @@ function resetInput(changeEvent: Event): void {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   color: var(--color-text);
-  background: var(--color-white);
+  background: var(--color-cream);
   font-family: var(--font-sans);
   font-size: 0.96rem;
   line-height: 1.5;
@@ -791,7 +792,7 @@ function resetInput(changeEvent: Event): void {
 
 .admin-element-page__input:focus,
 .admin-element-page__textarea:focus {
-  border-color: var(--color-slate);
+  border-color: var(--color-brand-purple);
   outline: none;
 }
 
@@ -804,6 +805,7 @@ function resetInput(changeEvent: Event): void {
   height: 6rem;
   border: 1px solid var(--color-border);
   border-radius: 4px;
+  background: var(--color-light-bg);
   object-fit: contain;
 }
 
@@ -837,6 +839,7 @@ function resetInput(changeEvent: Event): void {
   padding: 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: 4px;
+  background: var(--color-light-bg);
 }
 
 .admin-element-page__child-body {
@@ -848,7 +851,7 @@ function resetInput(changeEvent: Event): void {
 }
 
 .admin-element-page__child-link {
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   font-size: 0.95rem;
   font-weight: 600;
 }
@@ -899,8 +902,8 @@ function resetInput(changeEvent: Event): void {
 
 .admin-element-page__icon-button:hover:not(:disabled),
 .admin-element-page__icon-button:focus-visible {
-  border-color: var(--color-slate);
-  color: var(--color-slate);
+  border-color: var(--color-brand-purple);
+  color: var(--color-brand-purple);
 }
 
 .admin-element-page__child-add {
@@ -931,7 +934,7 @@ function resetInput(changeEvent: Event): void {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   color: var(--color-text);
-  background: var(--color-white);
+  background: var(--color-cream);
   font-family: var(--font-sans);
   font-size: 0.9rem;
   font-weight: 600;
@@ -950,7 +953,7 @@ function resetInput(changeEvent: Event): void {
 .admin-element-page__secondary-button:focus-visible,
 .admin-element-page__pdf-link:hover,
 .admin-element-page__pdf-link:focus-visible {
-  border-color: var(--color-slate);
+  border-color: var(--color-brand-purple);
 }
 
 .admin-element-page__actions {
@@ -962,10 +965,10 @@ function resetInput(changeEvent: Event): void {
 
 .admin-element-page__save {
   padding: 0.7rem 1.4rem;
-  border: 1px solid var(--color-slate);
+  border: 1px solid var(--color-brand-purple);
   border-radius: 4px;
   color: var(--color-white);
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
   font-family: var(--font-sans);
   font-size: 0.95rem;
   font-weight: 600;
@@ -984,7 +987,7 @@ function resetInput(changeEvent: Event): void {
 
 .admin-element-page__status--inline {
   margin: 0;
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
 }
 
 .admin-element-page__status--error {
diff --git a/frontend/rabbi_gerzi/src/views/ContactPage.vue b/frontend/rabbi_gerzi/src/views/ContactPage.vue
index 21f71cf..30bbca1 100644
--- a/frontend/rabbi_gerzi/src/views/ContactPage.vue
+++ b/frontend/rabbi_gerzi/src/views/ContactPage.vue
@@ -188,11 +188,11 @@ function submitNewsletter(submitEvent: Event): void {
 <style scoped>
 .contact-page {
   min-height: 100vh;
-  background: var(--color-white);
+  background: var(--color-light-bg);
 }
 
 .contact-hero {
-  background: var(--color-cream);
+  background: var(--color-light-bg);
   padding: 4rem 2rem;
 }
 
@@ -204,7 +204,7 @@ function submitNewsletter(submitEvent: Event): void {
 
 .contact-hero__eyebrow {
   margin: 0 0 0.75rem;
-  color: var(--color-olive);
+  color: var(--color-gold);
   font-family: var(--font-sans);
   font-size: 0.78rem;
   font-weight: 700;
@@ -217,8 +217,8 @@ function submitNewsletter(submitEvent: Event): void {
 .contact-social__heading,
 .get-involved__heading {
   margin: 0;
-  color: var(--color-slate);
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-weight: 400;
   line-height: 1.15;
 }
@@ -231,13 +231,13 @@ function submitNewsletter(submitEvent: Event): void {
   max-width: 42rem;
   margin: 1.35rem auto 0;
   color: var(--color-text-muted);
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: clamp(1.05rem, 2vw, 1.25rem);
   line-height: 1.65;
 }
 
 .contact-main {
-  background: var(--color-white);
+  background: var(--color-cream);
   padding: 5rem 2rem;
 }
 
@@ -252,7 +252,7 @@ function submitNewsletter(submitEvent: Event): void {
 
 .contact-form,
 .contact-social {
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
 }
@@ -295,7 +295,7 @@ function submitNewsletter(submitEvent: Event): void {
   width: 100%;
   padding: 0.78rem 1rem;
   color: var(--color-text);
-  background: var(--color-cream);
+  background: var(--color-light-bg);
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: 8px;
   font-family: var(--font-sans);
@@ -310,7 +310,7 @@ function submitNewsletter(submitEvent: Event): void {
 .contact-form__input:focus,
 .contact-form__textarea:focus,
 .get-involved__input:focus {
-  outline: 2px solid var(--color-slate);
+  outline: 2px solid var(--color-brand-purple);
   outline-offset: 2px;
 }
 
@@ -319,7 +319,7 @@ function submitNewsletter(submitEvent: Event): void {
   margin-top: 1.25rem;
   padding: 0.85rem 1rem;
   color: var(--color-white);
-  background: var(--color-text);
+  background: var(--color-brand-purple);
   border: none;
   border-radius: 8px;
   font-family: var(--font-sans);
@@ -329,12 +329,12 @@ function submitNewsletter(submitEvent: Event): void {
 
 .contact-form__submit:hover,
 .get-involved__submit:hover {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
 }
 
 .contact-social {
   padding: 2rem;
-  background: var(--color-cream);
+  background: var(--color-light-bg);
 }
 
 .contact-social__heading {
@@ -353,7 +353,7 @@ function submitNewsletter(submitEvent: Event): void {
   justify-content: space-between;
   padding: 0.95rem 1rem;
   color: var(--color-text);
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   font-family: var(--font-sans);
@@ -361,11 +361,11 @@ function submitNewsletter(submitEvent: Event): void {
 }
 
 .contact-social__link:hover {
-  border-color: var(--color-slate);
+  border-color: var(--color-brand-purple);
 }
 
 .get-involved {
-  background: var(--color-cream);
+  background: var(--color-light-bg);
   padding: 5rem 2rem;
 }
 
@@ -377,7 +377,7 @@ function submitNewsletter(submitEvent: Event): void {
   margin: 0 auto;
   padding: 3rem;
   gap: 3rem;
-  background: rgba(255, 255, 255, 0.48);
+  background: rgb(250 249 245 / 54%);
   border: 1px solid rgb(230 225 210 / 70%);
   border-radius: 8px;
 }
@@ -392,7 +392,7 @@ function submitNewsletter(submitEvent: Event): void {
   max-width: 36ch;
   margin: 0;
   color: var(--color-text-muted);
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: 1rem;
   line-height: 1.55;
 }
diff --git a/frontend/rabbi_gerzi/src/views/ElementPage.vue b/frontend/rabbi_gerzi/src/views/ElementPage.vue
index c2ed707..9f2baa0 100644
--- a/frontend/rabbi_gerzi/src/views/ElementPage.vue
+++ b/frontend/rabbi_gerzi/src/views/ElementPage.vue
@@ -332,7 +332,7 @@ function isShortYoutubeHost(hostname: string): boolean {
 <style scoped>
 .element-page {
   min-height: 100vh;
-  background: var(--color-white);
+  background: var(--color-light-bg);
 }
 
 .element-page__main {
@@ -361,8 +361,8 @@ function isShortYoutubeHost(hostname: string): boolean {
 
 .element-page__heading {
   margin: 0;
-  color: #2c2c2c;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: clamp(2.6rem, 4.8vw, 3.2rem);
   font-weight: 400;
   line-height: 1.1;
@@ -371,7 +371,7 @@ function isShortYoutubeHost(hostname: string): boolean {
 
 .element-page__rich-text {
   margin-top: 1.75rem;
-  color: #333333;
+  color: var(--color-text);
   font-family: var(--font-sans);
   font-size: 1.05rem;
   line-height: 1.75;
@@ -389,8 +389,8 @@ function isShortYoutubeHost(hostname: string): boolean {
 .element-page__rich-text :deep(h3),
 .element-page__rich-text :deep(h4) {
   margin: 1.6rem 0 0.65rem;
-  color: #2c2c2c;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-weight: 500;
   line-height: 1.25;
 }
@@ -420,22 +420,24 @@ function isShortYoutubeHost(hostname: string): boolean {
 .element-page__rich-text :deep(blockquote) {
   margin: 1.35rem 0;
   padding: 0.2rem 0 0.2rem 1.1rem;
-  border-left: 3px solid var(--color-olive);
+  border-left: 3px solid var(--color-gold);
   color: var(--color-text-muted);
+  font-family: var(--font-quote);
+  font-style: italic;
 }
 
 .element-page__rich-text :deep(strong) {
-  color: #2c2c2c;
+  color: var(--color-brand-purple);
   font-weight: 700;
 }
 
 .element-page__rich-text :deep(mark) {
   padding: 0 0.16em;
-  background: #fff3a7;
+  background: rgb(201 168 76 / 28%);
 }
 
 .element-page__rich-text :deep(a) {
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 0.16em;
@@ -468,7 +470,7 @@ function isShortYoutubeHost(hostname: string): boolean {
 }
 
 .element-page__rich-text :deep(th) {
-  background: #f6f3eb;
+  background: var(--color-light-bg);
   font-weight: 700;
 }
 
@@ -502,7 +504,8 @@ function isShortYoutubeHost(hostname: string): boolean {
   min-height: 2.75rem;
   padding: 0.7rem 1.15rem;
   color: var(--color-white);
-  background: var(--color-olive);
+  background: var(--color-brand-purple);
+  border: 1px solid var(--color-gold);
   border-radius: 8px;
   font-family: var(--font-sans);
   font-size: 0.95rem;
@@ -517,13 +520,13 @@ function isShortYoutubeHost(hostname: string): boolean {
 
 .element-page__pdf-link:hover,
 .element-page__pdf-link:focus-visible {
-  background: #4d5b3c;
+  background: var(--color-body-text);
   box-shadow: 0 10px 24px rgb(44 44 44 / 12%);
   transform: translateY(-1px);
 }
 
 .element-page__pdf-link:focus-visible {
-  outline: 3px solid rgb(94 107 76 / 38%);
+  outline: 3px solid rgb(201 168 76 / 42%);
   outline-offset: 4px;
 }
 
@@ -542,11 +545,11 @@ function isShortYoutubeHost(hostname: string): boolean {
 .element-page__child-link {
   display: block;
   padding: 1rem 1.2rem;
-  background: var(--color-white);
-  border: 1px solid #e5cf9f;
+  background: var(--color-cream);
+  border: 1px solid rgb(201 168 76 / 54%);
   border-radius: 8px;
-  color: #333333;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: 1.25rem;
   line-height: 1.25;
   text-align: center;
@@ -572,13 +575,13 @@ function isShortYoutubeHost(hostname: string): boolean {
 
 .element-page__child-link:hover,
 .element-page__child-link:focus-visible {
-  border-color: #d4ad5f;
+  border-color: var(--color-gold);
   box-shadow: 0 10px 28px rgb(44 44 44 / 9%);
   transform: translateY(-1px);
 }
 
 .element-page__child-link:focus-visible {
-  outline: 3px solid rgb(212 173 95 / 45%);
+  outline: 3px solid rgb(201 168 76 / 42%);
   outline-offset: 4px;
 }
 
@@ -587,7 +590,7 @@ function isShortYoutubeHost(hostname: string): boolean {
   margin: 0 auto;
   padding: 1rem 1.25rem;
   color: var(--color-text-muted);
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   font-size: 0.95rem;
diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index a2bd66a..318a28c 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -260,26 +260,22 @@ function projectCardStyle(project: Project): string {
     <SiteHeader />
 
     <section class="hero" data-cy="hero">
-      <div class="hero__backdrop">
-        <img src="/assets/sky.png" alt="" class="hero__sky" />
-        <img src="/assets/mountain.png" alt="" class="hero__mountain" />
-        <img src="/assets/man_on_rock.png" alt="" class="hero__hiker" />
-      </div>
       <div class="hero__content">
         <div class="hero__text">
-          <h1 class="hero__headline">
-            Let&rsquo;s upgrade our lives to a
-            <em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah
-            existence.
-          </h1>
-          <p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
+          <p class="hero__eyebrow">PILZNO · RAMAT BET SHEMESH</p>
+          <h1 class="hero__headline">Rabbi Yehoshua Gerzi</h1>
+          <p class="hero__tagline">Create Geula · Elevate Life</p>
+          <p class="hero__lede">
+            Guiding you toward a Geula mindset and an Integrated Torah life
+            rooted in ancient wisdom, warm community, and deliberate growth.
+          </p>
         </div>
-        <div class="hero__portrait-frame">
+        <div class="hero__portrait-panel">
           <img
             src="/assets/portrait.png"
             alt="Rabbi Yehoshua Gerzi"
             class="hero__portrait"
-            data-cy="hero-portrait"
+            data-cy="hero-rabbi-portrait"
           />
         </div>
       </div>
@@ -305,10 +301,10 @@ function projectCardStyle(project: Project): string {
         </h2>
         <p class="discover-path__paragraph">
           Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals
-          to achieve a state of &ldquo;Healthy, Integrated and Balanced Torah
-          Living.&rdquo; His teachings weave together timeless Torah wisdom,
-          mystical insights and practical guidance, making ancient wisdom
-          accessible and transformative for modern lives.
+          to build an Integrated Torah life from a Geula mindset. His teachings
+          weave together timeless Torah wisdom, mystical insights and practical
+          guidance, making ancient wisdom accessible and transformative for
+          modern lives.
         </p>
         <p class="discover-path__paragraph">
           Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of
@@ -539,123 +535,110 @@ function projectCardStyle(project: Project): string {
 .hero {
   position: relative;
   overflow: hidden;
-  min-height: 110vh;
+  min-height: min(760px, calc(100vh - 4rem));
   display: flex;
   align-items: center;
+  color: var(--color-cream);
+  background: var(--color-brand-purple);
 }
 
-.hero__backdrop {
+.hero::after {
+  content: '';
   position: absolute;
-  inset: 0;
-  z-index: 0;
-}
-
-.hero__sky,
-.hero__mountain,
-.hero__hiker {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: none;
-}
-
-.hero__sky {
   top: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center 44%;
-  z-index: 0;
-}
-
-.hero__mountain {
-  bottom: calc(50% - 58.8vw);
-  width: 100vw;
-  max-width: none;
-  z-index: 1;
-}
-
-.hero__hiker {
-  bottom: min(-30vw, -13rem);
-  width: 100vw;
-  max-width: none;
-  z-index: 2;
+  right: 0;
+  width: min(9rem, 22vw);
+  height: min(9rem, 22vw);
+  border-right: 1px solid var(--color-gold);
+  border-bottom: 1px solid var(--color-gold);
 }
 
 .hero__content {
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 0.98fr) minmax(260px, 0.52fr);
   align-items: center;
-  gap: 0.5rem;
+  gap: clamp(2rem, 6vw, 5rem);
   width: 100%;
-  max-width: 1200px;
+  max-width: 1180px;
   margin: 0 auto;
-  padding: 6rem 2rem;
-  transform: translateY(clamp(-15.25rem, calc(-22vh - 20px), -8.25rem));
+  padding: clamp(4rem, 8vw, 7rem) 2rem;
 }
 
 .hero__text {
-  max-width: 36rem;
+  max-width: 44rem;
+}
+
+.hero__eyebrow {
+  margin: 0 0 3rem;
+  color: rgb(250 249 245 / 72%);
+  font-family: var(--font-sans);
+  font-size: 0.82rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1.3;
+  text-transform: uppercase;
+}
+
+.hero__eyebrow::after {
+  content: '';
+  display: block;
+  width: 5rem;
+  height: 2px;
+  margin-top: 1.35rem;
+  background: var(--color-gold);
 }
 
 .hero__headline {
-  font-family: var(--font-serif);
-  font-weight: 400;
-  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
-  line-height: 1.25;
-  color: var(--color-white);
   margin: 0;
+  color: var(--color-cream);
+  font-family: var(--font-display);
+  font-size: clamp(4.25rem, 8vw, 7rem);
+  font-weight: 400;
+  line-height: 0.92;
 }
 
-.hero__headline em {
+.hero__tagline {
+  margin: 1.4rem 0 0;
+  color: var(--color-gold);
+  font-family: var(--font-quote);
+  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
   font-style: italic;
+  line-height: 1.35;
 }
 
-.hero__attribution {
-  margin: 1.5rem 0 0 0;
-  font-size: 0.95rem;
-  color: var(--color-white);
-  opacity: 0.85;
+.hero__lede {
+  max-width: 36rem;
+  margin: 1.8rem 0 0;
+  color: rgb(250 249 245 / 82%);
+  font-family: var(--font-sans);
+  font-size: clamp(1.04rem, 1.8vw, 1.24rem);
+  font-weight: 300;
+  line-height: 1.8;
 }
 
-.hero__portrait-frame {
-  --portrait-frame-size: clamp(200px, 24vw, 350px);
-
-  width: var(--portrait-frame-size);
-  height: var(--portrait-frame-size);
+.hero__portrait-panel {
   position: relative;
-  border-radius: 50%;
-  overflow: visible;
+  align-self: stretch;
   display: flex;
-  align-items: flex-end;
   justify-content: center;
-}
-
-.hero__portrait-frame::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  z-index: 0;
-  width: 110%;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background: var(--color-slate);
-  transform: translateX(-50%);
+  min-height: 28rem;
+  border: 1px solid rgb(201 168 76 / 62%);
+  border-radius: 8px;
+  background: rgb(250 249 245 / 7%);
 }
 
 .hero__portrait {
-  position: relative;
-  z-index: 1;
-  width: 110%;
-  height: auto;
   display: block;
+  align-self: end;
+  width: min(88%, 25rem);
+  height: auto;
+  object-fit: contain;
 }
 
 .discover-path {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
   color: var(--color-white);
   padding: 5rem 2rem;
 }
@@ -669,24 +652,24 @@ function projectCardStyle(project: Project): string {
 .discover-path__icon {
   width: 110px;
   height: auto;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(250 249 245 / 70%);
   margin: 0 auto 2rem;
   display: block;
 }
 
 .discover-path__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
   margin: 0 0 1.5rem 0;
 }
 
 .discover-path__paragraph {
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-weight: 300;
   font-size: 1.05rem;
   line-height: 1.7;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgb(250 249 245 / 85%);
   margin: 0 0 1.25rem 0;
 }
 
@@ -705,10 +688,10 @@ function projectCardStyle(project: Project): string {
 }
 
 .core-teachings__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   text-align: center;
   margin: 0 0 3rem 0;
 }
@@ -729,20 +712,20 @@ function projectCardStyle(project: Project): string {
 .core-teachings__glyph {
   font-size: 3rem;
   line-height: 1;
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   margin-bottom: 1rem;
   font-weight: 300;
 }
 
 .core-teachings__label {
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: 1rem;
   color: var(--color-text-muted);
   margin: 0;
 }
 
 .unique-voice {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
   color: var(--color-white);
   padding: 5rem 2rem;
 }
@@ -756,32 +739,32 @@ function projectCardStyle(project: Project): string {
 .unique-voice__icon {
   width: 140px;
   height: auto;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(250 249 245 / 70%);
   display: block;
   margin: 0 auto 2rem;
 }
 
 .unique-voice__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
   margin: 0 0 1.5rem 0;
 }
 
 .unique-voice__paragraph {
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-weight: 300;
   font-size: 1.05rem;
   line-height: 1.7;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgb(250 249 245 / 85%);
   margin: 0 0 2.5rem 0;
 }
 
 .unique-voice__cta-button {
   background: var(--color-white);
   color: var(--color-text);
-  border: none;
-  border-radius: 9999px;
+  border: 1px solid var(--color-gold);
+  border-radius: 4px;
   padding: 0.85rem 1.75rem;
   font-family: var(--font-sans);
   font-weight: 500;
@@ -810,10 +793,10 @@ function projectCardStyle(project: Project): string {
 }
 
 .testimonials__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   margin: 0 0 2.5rem 0;
 }
 
@@ -821,14 +804,15 @@ function projectCardStyle(project: Project): string {
   position: relative;
   width: min(100%, var(--testimonials-stage-width));
   height: var(--testimonials-card-height);
-  border-radius: 14px;
+  border-radius: 8px;
   margin: 0 auto;
   overflow: hidden;
 }
 
 .testimonials__card {
   background: var(--color-white);
-  border-radius: 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
   padding: 2rem;
   text-align: left;
   width: calc(50% - var(--testimonials-card-gap));
@@ -878,7 +862,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .testimonials__name {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 500;
   font-size: 1.15rem;
   margin: 0 0 1rem 0;
@@ -886,7 +870,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .testimonials__quote {
-  font-family: var(--font-serif);
+  font-family: var(--font-quote);
   font-style: italic;
   font-size: 1rem;
   line-height: 1.6;
@@ -905,7 +889,7 @@ function projectCardStyle(project: Project): string {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
-  background: var(--color-text);
+  background: var(--color-brand-purple);
   color: var(--color-white);
   border: none;
   font-size: 1.25rem;
@@ -916,7 +900,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .testimonials__arrow:hover {
-  background: var(--color-slate);
+  background: var(--color-body-text);
 }
 
 .sponsors {
@@ -931,10 +915,10 @@ function projectCardStyle(project: Project): string {
 }
 
 .sponsors__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.4rem, 2.2vw, 1.85rem);
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   margin: 0 0 3rem 0;
 }
 
@@ -1005,10 +989,10 @@ function projectCardStyle(project: Project): string {
 }
 
 .projects__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   text-align: center;
   margin: 0 0 3rem 0;
 }
@@ -1020,7 +1004,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .projects__card {
-  border-radius: 14px;
+  border-radius: 8px;
   padding: 3rem 2rem;
   aspect-ratio: 16 / 10;
   min-height: 240px;
@@ -1040,18 +1024,18 @@ function projectCardStyle(project: Project): string {
 }
 
 .projects__card-title {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.25rem, 2vw, 1.6rem);
   margin: 0 0 1rem 0;
 }
 
 .projects__card-body {
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-weight: 300;
   font-size: 0.95rem;
   line-height: 1.55;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgb(250 249 245 / 90%);
   margin: 0;
   max-width: 28ch;
 }
@@ -1068,10 +1052,10 @@ function projectCardStyle(project: Project): string {
 }
 
 .journey__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   margin: 0 0 3rem 0;
 }
 
@@ -1089,7 +1073,7 @@ function projectCardStyle(project: Project): string {
   text-align: center;
   padding: 4rem 2rem;
   min-height: 280px;
-  border-radius: 14px;
+  border-radius: 8px;
   color: var(--color-white);
   transition: transform 0.2s ease;
 }
@@ -1099,15 +1083,15 @@ function projectCardStyle(project: Project): string {
 }
 
 .journey__card--olive {
-  background: var(--color-olive);
+  background: var(--color-gold);
 }
 
 .journey__card--slate {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
 }
 
 .journey__card-title {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.4rem, 2.2vw, 1.85rem);
   margin: 0 0 1.5rem 0;
@@ -1115,11 +1099,11 @@ function projectCardStyle(project: Project): string {
 }
 
 .journey__card-body {
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-weight: 300;
   font-size: 1rem;
   line-height: 1.55;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgb(250 249 245 / 90%);
   margin: 0;
   max-width: 30ch;
 }
@@ -1132,8 +1116,9 @@ function projectCardStyle(project: Project): string {
 .get-involved__card {
   max-width: 1100px;
   margin: 0 auto;
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 14px;
+  background: rgb(250 249 245 / 54%);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
   padding: 3rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1142,7 +1127,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .get-involved__heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(1.6rem, 2.6vw, 2.4rem);
   color: var(--color-text);
@@ -1150,7 +1135,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .get-involved__subtext {
-  font-family: var(--font-serif);
+  font-family: var(--font-sans);
   font-size: 1rem;
   line-height: 1.55;
   color: var(--color-text-muted);
@@ -1187,7 +1172,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .get-involved__input:focus {
-  outline: 2px solid var(--color-slate);
+  outline: 2px solid var(--color-brand-purple);
   outline-offset: 2px;
 }
 
@@ -1204,7 +1189,7 @@ function projectCardStyle(project: Project): string {
 }
 
 .get-involved__submit:hover {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
 }
 
 @media (max-width: 768px) {
diff --git a/frontend/rabbi_gerzi/src/views/LoginPage.vue b/frontend/rabbi_gerzi/src/views/LoginPage.vue
index b6b4a5e..5f60348 100644
--- a/frontend/rabbi_gerzi/src/views/LoginPage.vue
+++ b/frontend/rabbi_gerzi/src/views/LoginPage.vue
@@ -77,7 +77,7 @@ async function handleSubmit(): Promise<void> {
 }
 
 .login-card {
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 2.5rem;
@@ -86,9 +86,9 @@ async function handleSubmit(): Promise<void> {
 }
 
 .login-card__title {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.5rem;
-  color: var(--color-slate);
+  color: var(--color-brand-purple);
   text-align: center;
   margin: 0 0 1.5rem;
 }
@@ -117,13 +117,13 @@ async function handleSubmit(): Promise<void> {
   font-family: var(--font-sans);
   font-size: 0.9375rem;
   color: var(--color-text);
-  background: var(--color-white);
+  background: var(--color-light-bg);
   outline: none;
   transition: border-color 0.15s ease;
 }
 
 .login-card__input:focus {
-  border-color: var(--color-olive);
+  border-color: var(--color-gold);
 }
 
 .login-card__error {
@@ -138,7 +138,8 @@ async function handleSubmit(): Promise<void> {
 
 .login-card__submit {
   padding: 0.75rem 1rem;
-  background: var(--color-olive);
+  background: var(--color-brand-purple);
+  border: 1px solid var(--color-gold);
   color: var(--color-white);
   font-family: var(--font-sans);
   font-size: 0.9375rem;
@@ -151,7 +152,7 @@ async function handleSubmit(): Promise<void> {
 }
 
 .login-card__submit:hover:not(:disabled) {
-  background: var(--color-slate);
+  background: var(--color-brand-purple);
 }
 
 .login-card__submit:disabled {
diff --git a/frontend/rabbi_gerzi/src/views/MediaPage.vue b/frontend/rabbi_gerzi/src/views/MediaPage.vue
index c1880cd..11a9c87 100644
--- a/frontend/rabbi_gerzi/src/views/MediaPage.vue
+++ b/frontend/rabbi_gerzi/src/views/MediaPage.vue
@@ -77,7 +77,7 @@ onMounted(() => {
 <style scoped>
 .media-page {
   min-height: 100vh;
-  background: var(--color-white);
+  background: var(--color-light-bg);
 }
 
 .media-page__main {
@@ -91,8 +91,8 @@ onMounted(() => {
 
 .media-page__heading {
   margin: 0;
-  color: #2c2c2c;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: clamp(2.6rem, 4.8vw, 3.2rem);
   font-weight: 400;
   line-height: 1.1;
@@ -107,7 +107,7 @@ onMounted(() => {
   margin: 0 auto;
   padding: 1rem 1.25rem;
   color: var(--color-text-muted);
-  background: var(--color-white);
+  background: var(--color-cream);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   font-size: 0.95rem;
@@ -129,9 +129,9 @@ onMounted(() => {
 .media-page__card {
   min-height: 448px;
   padding: 3.1rem 3rem 2.7rem;
-  background: var(--color-white);
-  border: 1px solid #e5cf9f;
-  border-radius: 17px;
+  background: var(--color-cream);
+  border: 1px solid rgb(201 168 76 / 54%);
+  border-radius: 8px;
   color: inherit;
   text-align: center;
   text-decoration: none;
@@ -143,13 +143,13 @@ onMounted(() => {
 
 a.media-page__card:hover,
 a.media-page__card:focus-visible {
-  border-color: #d4ad5f;
+  border-color: var(--color-gold);
   box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
   transform: translateY(-2px);
 }
 
 a.media-page__card:focus-visible {
-  outline: 3px solid rgb(212 173 95 / 45%);
+  outline: 3px solid rgb(201 168 76 / 42%);
   outline-offset: 4px;
 }
 
@@ -167,8 +167,8 @@ a.media-page__card:focus-visible {
 
 .media-page__card-title {
   margin: 0;
-  color: #333333;
-  font-family: var(--font-serif);
+  color: var(--color-brand-purple);
+  font-family: var(--font-display);
   font-size: clamp(2rem, 3.7vw, 2.4rem);
   font-weight: 400;
   line-height: 1.2;
@@ -177,8 +177,8 @@ a.media-page__card:focus-visible {
 .media-page__card-description {
   max-width: 35rem;
   margin: 2.15rem auto 0;
-  color: #333333;
-  font-family: var(--font-serif);
+  color: var(--color-text);
+  font-family: var(--font-sans);
   font-size: clamp(1.25rem, 2.3vw, 1.45rem);
   line-height: 1.38;
 }