From 110e062e563924f3b80230b6546637659b25d6bd Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 21 Mar 2025 16:33:21 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20use=20official=20Maria?=
 =?UTF-8?q?nne=20font?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                    |  1 +
 src/frontend/src/components/Avatar.tsx          | 13 ++++++++++---
 src/frontend/src/components/FeedbackBanner.tsx  |  6 ++++--
 .../features/home/components/IntroSlider.tsx    |  9 +++++----
 src/frontend/src/features/home/routes/Home.tsx  | 17 ++++++++---------
 src/frontend/src/primitives/A.tsx               |  8 +++++++-
 6 files changed, 35 insertions(+), 19 deletions(-)

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