💄(frontend) use official Marianne font

Updated styling system to implement the official French font used across all
La Suite products. This enhances brand consistency and improves the visual
identity alignment with other government digital services.

src/frontend/panda.config.ts

@@ -223,6 +223,7 @@ const config: Config = {
       fonts: {
         sans: {
           value: [
+            'Marianne',
             'Source Sans',
             'Source Sans fallback',
             'ui-sans-serif',

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>
   )
 }

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" />

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' },
   },

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',
   },
 })

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,
+      })}
     />
   )
 }