diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index f66633d5..80a0af93 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -223,6 +223,7 @@ const config: Config = {
       fonts: {
         sans: {
           value: [
+            'Marianne',
             'Source Sans',
             'Source Sans fallback',
             'ui-sans-serif',
diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index d007d293..3268b8d0 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -1,4 +1,4 @@
-import { cva, RecipeVariantProps } from '@/styled-system/css'
+import { css, cva, RecipeVariantProps } from '@/styled-system/css'
 import React from 'react'
 
 const avatar = cva({
@@ -19,7 +19,8 @@ const avatar = cva({
       list: {
         width: '32px',
         height: '32px',
-        fontSize: '1.25rem',
+        fontSize: '1.3rem',
+        lineHeight: '1rem',
       },
       placeholder: {
         width: '100%',
@@ -60,7 +61,13 @@ export const Avatar = ({
       className={avatar({ context, notification })}
       {...props}
     >
-      {initial}
+      <span
+        className={css({
+          marginTop: '-0.3rem',
+        })}
+      >
+        {initial}
+      </span>
     </div>
   )
 }
diff --git a/src/frontend/src/components/FeedbackBanner.tsx b/src/frontend/src/components/FeedbackBanner.tsx
index 52cc5daf..7fcdaf03 100644
--- a/src/frontend/src/components/FeedbackBanner.tsx
+++ b/src/frontend/src/components/FeedbackBanner.tsx
@@ -25,7 +25,9 @@ export const FeedbackBanner = () => {
         })}
       >
         <RiErrorWarningLine size={20} aria-hidden="true" />
-        <Text as="p">{t('feedback.context')}</Text>
+        <Text as="p" variant="sm">
+          {t('feedback.context')}
+        </Text>
         <div
           className={css({
             display: 'flex',
@@ -33,7 +35,7 @@ export const FeedbackBanner = () => {
             gap: 0.25,
           })}
         >
-          <A href={GRIST_FORM} target="_blank">
+          <A href={GRIST_FORM} target="_blank" size="sm">
             {t('feedback.cta')}
           </A>
           <RiExternalLinkLine size={16} aria-hidden="true" />
diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx
index 8c0373eb..2d921432 100644
--- a/src/frontend/src/features/home/components/IntroSlider.tsx
+++ b/src/frontend/src/features/home/components/IntroSlider.tsx
@@ -17,12 +17,13 @@ const Heading = styled('h2', {
   base: {
     width: 'fit-content',
     marginBottom: 0,
-    fontSize: '1.5rem',
+    fontSize: '1.3rem',
+    fontWeight: '600',
     marginTop: '0.75rem',
     lineHeight: '2rem',
     maxWidth: '23rem',
     textAlign: 'center',
-    textWrap: 'pretty',
+    textWrap: 'balance',
   },
 })
 
@@ -31,7 +32,7 @@ const Body = styled('p', {
     maxWidth: '23rem',
     textAlign: 'center',
     textWrap: 'pretty',
-    lineHeight: '1.2rem',
+    lineHeight: '1.4rem',
     fontSize: '1rem',
   },
 })
@@ -102,7 +103,7 @@ const Slide = styled('div', {
     alignItems: 'center',
     gap: '0.5rem',
     justifyContent: 'start',
-    minHeight: { base: 'none', xsm: '550px' },
+    minHeight: { base: 'none', xsm: '580px' },
     minWidth: { base: 'none', xsm: '200px' },
     width: { base: '100%', xsm: '22.625rem' },
   },
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index 1b89cec8..e2abace1 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -72,8 +72,8 @@ const LeftColumn = ({ children }: { children?: ReactNode }) => {
           textAlign: 'left',
           alignItems: 'flex-start',
           flexShrink: '1',
-          flexBasis: '36rem',
-          maxWidth: '36rem',
+          flexBasis: '40rem',
+          maxWidth: '40rem',
           padding: '1em 3em',
         },
       })}
@@ -120,14 +120,13 @@ const Separator = styled('div', {
 
 const Heading = styled('h1', {
   base: {
-    fontWeight: '500',
+    fontWeight: '600',
     fontStyle: 'normal',
     fontStretch: 'normal',
     fontOpticalSizing: 'auto',
-    marginBottom: 0,
-    paddingBottom: '0.75rem',
+    paddingBottom: '1.2rem',
     fontSize: '2.3rem',
-    lineHeight: '2.5rem',
+    lineHeight: '2.6rem',
     letterSpacing: '0',
     xsm: {
       fontSize: '3rem',
@@ -139,9 +138,9 @@ const Heading = styled('h1', {
 const IntroText = styled('div', {
   base: {
     marginBottom: '3rem',
-    fontSize: '1.5rem',
-    lineHeight: '1.8rem',
-    textWrap: 'pretty',
+    fontSize: '1.2rem',
+    lineHeight: '1.5rem',
+    textWrap: 'balance',
     maxWidth: '32rem',
   },
 })
diff --git a/src/frontend/src/primitives/A.tsx b/src/frontend/src/primitives/A.tsx
index 637af588..c5de211c 100644
--- a/src/frontend/src/primitives/A.tsx
+++ b/src/frontend/src/primitives/A.tsx
@@ -75,7 +75,13 @@ export const A = ({
   return (
     <Link
       {...props}
-      className={link({ size, externalIcon, underline, footer, color })}
+      className={link({
+        size,
+        externalIcon,
+        underline,
+        footer,
+        color,
+      })}
     />
   )
 }