diff --git a/src/app/associations/page.tsx b/src/app/associations/page.tsx
index e4760a9..fb50f0a 100644
--- a/src/app/associations/page.tsx
+++ b/src/app/associations/page.tsx
@@ -14,7 +14,7 @@ export default async function AssociationsPage() {
   const associations = await getAllAssociations()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
+    <main className="page-layout flex flex-col items-center gap-section">
       <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
 
       <div className="w-full max-w-300">
diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx
index 0fdae58..60286f0 100644
--- a/src/app/chi-siamo/page.tsx
+++ b/src/app/chi-siamo/page.tsx
@@ -14,7 +14,8 @@ export const metadata: Metadata = {
 
 export default function ChiSiamoPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
+    // Narrower content column (1200px, as in Figma): `page-container` caps its padding on this variable
+    <main className="flex w-full flex-col gap-section pb-section [--container-page:75rem]">
       <VisionSection />
       <ProblemSection />
       <AnswerSection />
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 256adc9..c5aa405 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function Contact() {
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-60 px-4 py-49 md:gap-75">
+    <main className="page-layout flex flex-col items-center gap-section">
       <Hero
         title="Contattaci"
         description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 61037c1..cc12de4 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -14,7 +14,7 @@ export default async function FAQsPage() {
   const categories = await getAllFaqs()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-24 px-4 py-49">
+    <main className="page-layout flex flex-col items-center gap-section">
       <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
       <FaqsTabs categories={categories} />
     </main>
diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 1b6a4e1..b3c35c1 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -27,30 +27,28 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className="w-full">
-      <div className="flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
-        <div className="flex w-full flex-col items-center gap-5 text-center">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-14">
-            Groups
-          </h2>
-          <GroupSearch />
-        </div>
+    <main className="page-layout flex min-h-svh flex-col items-center gap-block">
+      <div className="flex w-full flex-col items-center gap-6 text-center">
+        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
+          Groups
+        </h2>
+        <GroupSearch />
+      </div>
 
-        <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
-          {groups.map((group) => (
-            <CardIcon
-              key={group.title}
-              title={group.title}
-              description={group.caption}
-              href={group.href}
-              icon={group.icon}
-              cta={group.cta}
-              align="start"
-              className="w-full max-w-108"
-              size="compact"
-            />
-          ))}
-        </div>
+      <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
+        {groups.map((group) => (
+          <CardIcon
+            key={group.title}
+            title={group.title}
+            description={group.caption}
+            href={group.href}
+            icon={group.icon}
+            cta={group.cta}
+            align="start"
+            className="w-full max-w-108"
+            size="compact"
+          />
+        ))}
       </div>
     </main>
   )
diff --git a/src/app/guides/page.tsx b/src/app/guides/page.tsx
index e9d039f..36326e2 100644
--- a/src/app/guides/page.tsx
+++ b/src/app/guides/page.tsx
@@ -26,29 +26,27 @@ export const metadata: Metadata = {
 
 export default function GuidesHome() {
   return (
-    <main className="w-full">
-      <div className="flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
-        <div className="flex w-full flex-col items-center gap-5 text-center">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-14">
-            Guide
-          </h2>
-        </div>
+    <main className="page-layout flex min-h-svh flex-col items-center gap-block">
+      <div className="flex w-full flex-col items-center gap-5 text-center">
+        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
+          Guide
+        </h2>
+      </div>
 
-        <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
-          {guides.map((guide) => (
-            <CardIcon
-              key={guide.title}
-              title={guide.title}
-              description={guide.caption}
-              href={guide.href}
-              icon={guide.icon}
-              cta={guide.cta}
-              align="start"
-              className="w-full max-w-108"
-              size="compact"
-            />
-          ))}
-        </div>
+      <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
+        {guides.map((guide) => (
+          <CardIcon
+            key={guide.title}
+            title={guide.title}
+            description={guide.caption}
+            href={guide.href}
+            icon={guide.icon}
+            cta={guide.cta}
+            align="start"
+            className="w-full max-w-108"
+            size="compact"
+          />
+        ))}
       </div>
     </main>
   )
diff --git a/src/app/matricole/guida/page.tsx b/src/app/matricole/guida/page.tsx
index 91334bf..09926d0 100644
--- a/src/app/matricole/guida/page.tsx
+++ b/src/app/matricole/guida/page.tsx
@@ -22,8 +22,8 @@ export default async function GuidaMatricolaPage() {
   const formattedDate = new Intl.DateTimeFormat("it-IT", { dateStyle: "long" }).format(new Date(guida.date))
 
   return (
-    <main className="mx-auto flex min-h-svh w-full max-w-500 flex-col items-center justify-center gap-10">
-      <div className="mx-12 flex flex-col items-center lg:gap-6">
+    <main className="page-container flex min-h-svh flex-col items-center justify-center gap-block py-section">
+      <div className="flex flex-col items-center gap-6">
         <h2 className="typo-display-medium lg:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-center text-transparent lg:leading-33">
           Guida della Matricola
         </h2>
diff --git a/src/app/matricole/page.tsx b/src/app/matricole/page.tsx
index 9d1e36d..2e7355e 100644
--- a/src/app/matricole/page.tsx
+++ b/src/app/matricole/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function MatricolePage() {
   return (
-    <main className="w-full">
+    <main className="flex w-full flex-col gap-section pb-section">
       <MatricoleIntro />
       <MatricoleGuides />
       <FAQsPage />
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 532b729..390f82b 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 
 export default function NotFound() {
   return (
-    <main className="relative isolate flex min-h-screen w-full items-center justify-center overflow-hidden">
+    <main className="relative isolate flex min-h-svh w-full items-center justify-center overflow-hidden px-gutter">
       <section className="relative flex h-full w-full items-center justify-center">
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
           <Image src={notFoundBackground} alt="" aria-hidden priority className="h-auto w-full max-w-4xl select-none" />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0296908..a2612c0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,7 @@ import { Projects } from "@/components/home/projects"
 
 export default function Home() {
   return (
-    <main className="w-full">
+    <main className="flex w-full flex-col gap-section pb-section">
       <Hero />
       <Materials />
       <Projects />
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index fbfb0d7..5120d5a 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -19,7 +19,7 @@ export default async function Home() {
   const deprecated = projects.filter((project) => project.category === "deprecated")
 
   return (
-    <main className="w-full">
+    <main className="flex w-full flex-col gap-section pb-section">
       <CommunityNews projects={news} />
       <Collection projects={general} />
       <Upload />
diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx
index 0e718fc..84fd5ef 100644
--- a/src/components/chi-siamo/answer-section.tsx
+++ b/src/components/chi-siamo/answer-section.tsx
@@ -23,7 +23,7 @@ const cards = [
 
 export function AnswerSection() {
   return (
-    <section id="cosa-facciamo" className="mx-auto flex w-full max-w-330 scroll-mt-32 flex-col gap-10 px-6 md:gap-14">
+    <section id="cosa-facciamo" className="page-container flex scroll-mt-32 flex-col gap-block">
       <div className="flex flex-col gap-4">
         <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
           La nostra risposta
diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx
index 4a2fbf4..7212a28 100644
--- a/src/components/chi-siamo/history-section.tsx
+++ b/src/components/chi-siamo/history-section.tsx
@@ -23,7 +23,7 @@ const blocks = [
 
 export function HistorySection() {
   return (
-    <section className="mx-auto grid w-full max-w-330 gap-6 px-6 md:grid-cols-2">
+    <section className="page-container grid gap-6 md:grid-cols-2">
       {blocks.map((block) => (
         <Glass key={block.title} className="flex flex-col items-start gap-6 rounded-rectangles p-6 sm:p-8">
           <GradientIcon icon={block.icon} className="size-10" />
diff --git a/src/components/chi-siamo/numbers-section.tsx b/src/components/chi-siamo/numbers-section.tsx
index 947591b..a4e5412 100644
--- a/src/components/chi-siamo/numbers-section.tsx
+++ b/src/components/chi-siamo/numbers-section.tsx
@@ -13,7 +13,7 @@ const stats = [
 
 export function NumbersSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14">
+    <section className="page-container flex flex-col gap-block">
       <div className="flex flex-col gap-4">
         <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
           I numeri
diff --git a/src/components/chi-siamo/path-section.tsx b/src/components/chi-siamo/path-section.tsx
index 2b83534..3967c25 100644
--- a/src/components/chi-siamo/path-section.tsx
+++ b/src/components/chi-siamo/path-section.tsx
@@ -18,7 +18,7 @@ const steps = [
 
 export function PathSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14">
+    <section className="page-container flex flex-col gap-block">
       <h2 className="typo-headline-medium md:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent md:text-start">
         Il tuo percorso, sempre al tuo fianco
       </h2>
diff --git a/src/components/chi-siamo/problem-section.tsx b/src/components/chi-siamo/problem-section.tsx
index d2bb57d..85daeee 100644
--- a/src/components/chi-siamo/problem-section.tsx
+++ b/src/components/chi-siamo/problem-section.tsx
@@ -9,7 +9,7 @@ const questions = [
 
 export function ProblemSection() {
   return (
-    <section className="mx-auto grid w-full max-w-330 items-center gap-10 px-6 lg:grid-cols-2 lg:gap-16">
+    <section className="page-container grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
       <div className="flex min-w-0 flex-col gap-6">
         <h2 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
           Il problema
diff --git a/src/components/chi-siamo/support-section.tsx b/src/components/chi-siamo/support-section.tsx
index 8f3493c..3d099ef 100644
--- a/src/components/chi-siamo/support-section.tsx
+++ b/src/components/chi-siamo/support-section.tsx
@@ -4,7 +4,7 @@ import { GradientIcon } from "@/components/gradient-icon"
 
 export function SupportSection() {
   return (
-    <section className="mx-auto w-full max-w-330 px-6">
+    <section className="page-container">
       <Glass className="grid items-center gap-10 rounded-rectangles border-white/50 bg-background-blur p-6 sm:p-10 lg:grid-cols-2 lg:gap-16">
         <div className="flex min-w-0 flex-col gap-6">
           <GradientIcon icon={FiHeart} className="size-10" />
diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx
index ec6ba6d..895b233 100644
--- a/src/components/chi-siamo/vision-section.tsx
+++ b/src/components/chi-siamo/vision-section.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"
 
 export function VisionSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col items-center gap-6 px-6 pt-52 text-center md:pt-57.5">
+    <section className="page-container flex flex-col items-center gap-6 pt-page-top text-center">
       <h1 className="typo-display-small sm:typo-display-medium lg:typo-display-large max-w-260 text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
         Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "}
         <span className="text-blue-secondary">informazioni.</span>
diff --git a/src/components/contact/collabora-section.tsx b/src/components/contact/collabora-section.tsx
index e035b39..979a42a 100644
--- a/src/components/contact/collabora-section.tsx
+++ b/src/components/contact/collabora-section.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"
 
 export function CollaboraSection() {
   return (
-    <section className="flex w-full flex-row justify-center gap-8 px-6 min-[1616px]:justify-start min-[1616px]:px-36">
+    <section className="flex w-full flex-row justify-center min-[1616px]:justify-start">
       <div className="flex max-w-[959] flex-col gap-6">
         <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
           Vuoi sviluppare un progetto insieme a noi?
diff --git a/src/components/contact/email-section.tsx b/src/components/contact/email-section.tsx
index dfa71c1..3cf2840 100644
--- a/src/components/contact/email-section.tsx
+++ b/src/components/contact/email-section.tsx
@@ -43,19 +43,21 @@ const contactCards: ContactCardData[] = [
 
 export function EmailSection() {
   return (
-    <section className="flex w-full flex-col gap-6 px-6 min-[1616px]:px-36">
-      <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent min-[1616px]:text-start">
-        Hai una richiesta specifica?
-      </h2>
-      <p className="typo-body-large md:typo-headline-small pb-6 text-center text-text-primary min-[1616px]:text-start">
-        Per tutto il resto,{" "}
-        <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
-          puoi scriverci direttamente
-        </a>
-        .
-        <br />
-        Qui sotto trovi i contatti in base al tipo di richiesta.
-      </p>
+    <section className="flex w-full flex-col gap-block">
+      <div className="flex flex-col gap-6">
+        <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent min-[1616px]:text-start">
+          Hai una richiesta specifica?
+        </h2>
+        <p className="typo-body-large md:typo-headline-small text-center text-text-primary min-[1616px]:text-start">
+          Per tutto il resto,{" "}
+          <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
+            puoi scriverci direttamente
+          </a>
+          .
+          <br />
+          Qui sotto trovi i contatti in base al tipo di richiesta.
+        </p>
+      </div>
 
       <div className="flex w-full flex-wrap justify-center gap-12 xl:gap-16 min-[1616px]:justify-start">
         {contactCards.map((card) => (
diff --git a/src/components/contact/groups-section.tsx b/src/components/contact/groups-section.tsx
index 37440fc..a0666a7 100644
--- a/src/components/contact/groups-section.tsx
+++ b/src/components/contact/groups-section.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"
 
 export function GroupsSection() {
   return (
-    <section className="flex w-full flex-col items-center gap-21 px-6 min-[1616px]:flex-row min-[1616px]:items-end min-[1616px]:px-36">
+    <section className="flex w-full flex-col items-center gap-block min-[1616px]:flex-row min-[1616px]:items-end">
       <div className="flex flex-col gap-6 text-center min-[1616px]:min-w-158 min-[1616px]:flex-1 min-[1616px]:text-start">
         <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
           Hai mille dubbi sul Poli?
diff --git a/src/components/faqs/faqs-tabs.tsx b/src/components/faqs/faqs-tabs.tsx
index ea36a7e..0b82f28 100644
--- a/src/components/faqs/faqs-tabs.tsx
+++ b/src/components/faqs/faqs-tabs.tsx
@@ -32,12 +32,15 @@ export function FaqsTabs({ categories }: { categories: FaqCategory[] }) {
   }))
 
   return (
-    <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
+    <div className="mx-auto flex w-full max-w-255 flex-col gap-section">
       {tabs.length === 0 ? (
         <p className="typo-body-large text-center">Nessuna FAQ disponibile al momento.</p>
       ) : (
         <Tabs defaultValue={tabs[0]?.value} className="flex w-full flex-col items-center">
-          <TabsNavigation items={tabs} className="max-md:-mx-2 mb-19 max-md:w-[calc(100%+1rem)] max-md:rounded-none" />
+          <TabsNavigation
+            items={tabs}
+            className="max-md:-mx-2 mb-block max-md:w-[calc(100%+1rem)] max-md:rounded-none"
+          />
           {tabs.map((tab) => (
             <TabsContent value={tab.value} key={tab.value} className="w-full min-w-0">
               <AccordionList items={tab.accordionItems} defaultValue={tab.accordionItems[0]?.value} />
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 58568b4..d3bce5d 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -7,8 +7,8 @@ import { CardMultipleIcons } from "../card-multiple-icons"
 
 export function Footer() {
   return (
-    <footer className="w-full px-8">
-      <h2 className="typo-headline-medium md:typo-display-large mt-18 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-center text-transparent md:mt-30.5">
+    <footer className="w-full px-gutter">
+      <h2 className="typo-headline-medium md:typo-display-large bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-center text-transparent">
         Keep in touch!
       </h2>
 
@@ -74,7 +74,7 @@ export function Footer() {
         />
       </div>
 
-      <div className="mx-auto mt-11 grid max-w-5xl grid-flow-row-dense grid-cols-[max-content_max-content] items-baseline justify-around gap-y-7 **:h-min **:w-fit md:mt-25 md:gap-y-11">
+      <div className="mx-auto mt-block grid max-w-5xl grid-flow-row-dense grid-cols-[max-content_max-content] items-baseline justify-around gap-y-7 **:h-min **:w-fit md:gap-y-11">
         <div className="typo-title-medium md:typo-headline-small contents text-text-primary underline *:col-start-1">
           <Link href="/join">Unisciti a noi!</Link>
           <Link href="/contact">Contattaci</Link>
@@ -89,7 +89,7 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="typo-body-small md:typo-body-large mt-12 mb-10.5 w-full text-center text-text-secondary md:mt-36 md:mb-10">
+      <div className="typo-body-small md:typo-body-large mt-section mb-10 w-full text-center text-text-secondary">
         <p id="copyright">PoliNetwork 2016-{new Date().getFullYear()} - All rights reserved</p>
       </div>
     </footer>
diff --git a/src/components/groups/extra-groups.tsx b/src/components/groups/extra-groups.tsx
index 6140f2f..53ac1ab 100644
--- a/src/components/groups/extra-groups.tsx
+++ b/src/components/groups/extra-groups.tsx
@@ -12,38 +12,40 @@ export async function ExtraGroups() {
   )
 
   return (
-    <main className="mx-auto flex min-h-svh w-full min-w-0 max-w-7xl flex-col gap-16 px-6 py-50 md:gap-0">
-      <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
-        <Link
-          href="/groups"
-          aria-label="Indietro"
-          className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiArrowLeft className="size-5" />
-        </Link>
-        <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
-          <h1 className="typo-title-large md:typo-display-medium text-text-primary">Gruppi Extra</h1>
-        </div>
-      </header>
+    <main className="page-layout flex min-h-svh min-w-0 flex-col items-center">
+      <div className="flex w-full min-w-0 max-w-7xl flex-col gap-block">
+        <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
+          <Link
+            href="/groups"
+            aria-label="Indietro"
+            className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiArrowLeft className="size-5" />
+          </Link>
+          <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
+            <h1 className="typo-title-large md:typo-display-medium text-text-primary">Gruppi Extra</h1>
+          </div>
+        </header>
 
-      {extraGroups.length > 0 ? (
-        <div className="flex flex-col gap-3 md:mt-25.75">
-          {extraGroups.map((g) => (
-            <CardCourseGroup
-              key={g.key}
-              groupName={g.title}
-              waLink={g.waLink}
-              waGroupId={g.waGroupId}
-              tgLink={g.tgLink}
-              tgGroupId={g.tgGroupId}
-            />
-          ))}
-        </div>
-      ) : (
-        <p className="typo-body-medium text-center text-text-secondary md:mt-25.75">
-          Nessun gruppo extra disponibile al momento.
-        </p>
-      )}
+        {extraGroups.length > 0 ? (
+          <div className="flex flex-col gap-3">
+            {extraGroups.map((g) => (
+              <CardCourseGroup
+                key={g.key}
+                groupName={g.title}
+                waLink={g.waLink}
+                waGroupId={g.waGroupId}
+                tgLink={g.tgLink}
+                tgGroupId={g.tgGroupId}
+              />
+            ))}
+          </div>
+        ) : (
+          <p className="typo-body-medium text-center text-text-secondary">
+            Nessun gruppo extra disponibile al momento.
+          </p>
+        )}
+      </div>
     </main>
   )
 }
diff --git a/src/components/groups/groups-result.tsx b/src/components/groups/groups-result.tsx
index c1b3ba6..2f3063b 100644
--- a/src/components/groups/groups-result.tsx
+++ b/src/components/groups/groups-result.tsx
@@ -41,14 +41,14 @@ function GroupSection({ title, groups }: { title: string; groups: VisibleGroup[]
   if (merged.length === 0) return null
 
   return (
-    <div className="flex flex-col gap-4 md:mt-16.25 md:gap-0">
+    <div className="flex flex-col gap-4 md:gap-6">
       <div className="relative flex items-center justify-center md:static md:justify-between">
         <p className="typo-body-large md:typo-headline-small text-center text-text-primary md:text-left">{title}</p>
         <p className="typo-label-small md:typo-label-medium -translate-y-1/2 absolute top-1/2 right-0 rounded-full border border-white/50 bg-background-blur px-3 py-1 text-text-secondary md:static md:translate-y-0 md:rounded-buttonsM md:border-0 md:py-2">
           {merged.length} Gruppi
         </p>
       </div>
-      <div className="flex flex-col gap-3 md:mt-6.75">
+      <div className="flex flex-col gap-3">
         {merged.map((g) => (
           <GroupCard key={g.key} group={g} />
         ))}
@@ -102,64 +102,66 @@ export async function GroupsResult({
     courseGroups.length > 0
 
   return (
-    <main className="mx-auto flex min-h-svh w-full min-w-0 max-w-7xl flex-col gap-8 px-6 py-52 md:gap-0">
-      <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
-        <Link
-          href={stepHref({ school: schoolSlug, level })}
-          replace
-          aria-label="Indietro"
-          className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiArrowLeft className="size-5" />
-        </Link>
-        <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
-          <h1 className="typo-title-large md:typo-display-medium text-text-primary">{courseName}</h1>
-          <p className="typo-label-large md:typo-headline-small text-text-secondary md:text-text-primary">
-            Laurea {currentLevel.name}
-          </p>
-        </div>
-        <Link
-          href="/groups"
-          aria-label="Chiudi"
-          className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiX className="size-5" />
-        </Link>
-      </header>
+    <main className="page-layout flex min-h-svh min-w-0 flex-col items-center">
+      <div className="flex w-full min-w-0 max-w-7xl flex-col gap-block">
+        <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
+          <Link
+            href={stepHref({ school: schoolSlug, level })}
+            replace
+            aria-label="Indietro"
+            className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiArrowLeft className="size-5" />
+          </Link>
+          <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
+            <h1 className="typo-title-large md:typo-display-medium text-text-primary">{courseName}</h1>
+            <p className="typo-label-large md:typo-headline-small text-text-secondary md:text-text-primary">
+              Laurea {currentLevel.name}
+            </p>
+          </div>
+          <Link
+            href="/groups"
+            aria-label="Chiudi"
+            className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiX className="size-5" />
+          </Link>
+        </header>
 
-      {(mergedSiteGroups.length > 0 ||
-        mergedSchoolGroups.length > 0 ||
-        mergedLevelGroups.length > 0 ||
-        mergedGeneralCourseGroups.length > 0) && (
-        <div className="flex flex-row flex-wrap gap-3 md:mt-25.75">
-          {mergedSiteGroups.map((g) => (
-            <GroupCard key={g.key} group={g} stacked />
-          ))}
-          {mergedSchoolGroups.map((g) => (
-            <GroupCard key={g.key} group={g} stacked />
-          ))}
-          {mergedLevelGroups.map((g) => (
-            <GroupCard key={g.key} group={g} secondary stacked />
-          ))}
-          {mergedGeneralCourseGroups.map((g) => (
-            <GroupCard key={g.key} group={g} secondary stacked />
-          ))}
-        </div>
-      )}
+        {(mergedSiteGroups.length > 0 ||
+          mergedSchoolGroups.length > 0 ||
+          mergedLevelGroups.length > 0 ||
+          mergedGeneralCourseGroups.length > 0) && (
+          <div className="flex flex-row flex-wrap gap-3">
+            {mergedSiteGroups.map((g) => (
+              <GroupCard key={g.key} group={g} stacked />
+            ))}
+            {mergedSchoolGroups.map((g) => (
+              <GroupCard key={g.key} group={g} stacked />
+            ))}
+            {mergedLevelGroups.map((g) => (
+              <GroupCard key={g.key} group={g} secondary stacked />
+            ))}
+            {mergedGeneralCourseGroups.map((g) => (
+              <GroupCard key={g.key} group={g} secondary stacked />
+            ))}
+          </div>
+        )}
 
-      {cohorts.map((cohort) => (
-        <GroupSection
-          key={cohort}
-          title={`Gruppi ${cohortLabelText(cohort)}`}
-          groups={groupsByCohort.get(cohort) ?? []}
-        />
-      ))}
+        {cohorts.map((cohort) => (
+          <GroupSection
+            key={cohort}
+            title={`Gruppi ${cohortLabelText(cohort)}`}
+            groups={groupsByCohort.get(cohort) ?? []}
+          />
+        ))}
 
-      {!hasAnyGroup && (
-        <p className="typo-body-medium text-center text-text-secondary md:mt-16.25">
-          Nessun gruppo disponibile al momento per questo corso.
-        </p>
-      )}
+        {!hasAnyGroup && (
+          <p className="typo-body-medium text-center text-text-secondary">
+            Nessun gruppo disponibile al momento per questo corso.
+          </p>
+        )}
+      </div>
     </main>
   )
 }
diff --git a/src/components/guides/general-guides.tsx b/src/components/guides/general-guides.tsx
index 48b6290..9a15127 100644
--- a/src/components/guides/general-guides.tsx
+++ b/src/components/guides/general-guides.tsx
@@ -5,35 +5,35 @@ import { LOREM_GUIDES } from "@/components/guides/constants"
 
 export function GeneralGuides() {
   return (
-    <main className="mx-auto flex min-h-svh w-full min-w-0 max-w-7xl flex-col gap-8 px-6 py-52 md:gap-0">
-      <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
-        <Link
-          href="/guides"
-          replace
-          aria-label="Indietro"
-          className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiArrowLeft className="size-5" />
-        </Link>
-        <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
-          <h1 className="typo-title-large md:typo-display-medium text-text-primary">Guide Generali</h1>
-        </div>
-        <Link
-          href="/guides"
-          aria-label="Chiudi"
-          className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiX className="size-5" />
-        </Link>
-      </header>
+    <main className="page-layout flex min-h-svh min-w-0 flex-col items-center">
+      <div className="flex w-full min-w-0 max-w-7xl flex-col gap-block">
+        <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
+          <Link
+            href="/guides"
+            replace
+            aria-label="Indietro"
+            className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiArrowLeft className="size-5" />
+          </Link>
+          <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
+            <h1 className="typo-title-large md:typo-display-medium text-text-primary">Guide Generali</h1>
+          </div>
+          <Link
+            href="/guides"
+            aria-label="Chiudi"
+            className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiX className="size-5" />
+          </Link>
+        </header>
 
-      {LOREM_GUIDES.length > 0 ? (
-        <AccordionList items={LOREM_GUIDES} className="md:mt-25.75" />
-      ) : (
-        <p className="typo-body-medium text-center text-text-secondary md:mt-16.25">
-          Nessuna guida disponibile al momento.
-        </p>
-      )}
+        {LOREM_GUIDES.length > 0 ? (
+          <AccordionList items={LOREM_GUIDES} />
+        ) : (
+          <p className="typo-body-medium text-center text-text-secondary">Nessuna guida disponibile al momento.</p>
+        )}
+      </div>
     </main>
   )
 }
diff --git a/src/components/guides/guides-result.tsx b/src/components/guides/guides-result.tsx
index bf98f20..f1c57f2 100644
--- a/src/components/guides/guides-result.tsx
+++ b/src/components/guides/guides-result.tsx
@@ -29,38 +29,40 @@ export async function GuidesResult({
   const courseName = humanizeSlug(course)
 
   return (
-    <main className="mx-auto flex min-h-svh w-full min-w-0 max-w-7xl flex-col gap-8 px-6 py-52 md:gap-0">
-      <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
-        <Link
-          href={stepHref({ school: schoolSlug, level })}
-          replace
-          aria-label="Indietro"
-          className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiArrowLeft className="size-5" />
-        </Link>
-        <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
-          <h1 className="typo-title-large md:typo-display-medium text-text-primary">{courseName}</h1>
-          <p className="typo-label-large md:typo-headline-small text-text-secondary md:text-text-primary">
-            Laurea {currentLevel.name}
-          </p>
-        </div>
-        <Link
-          href="/guides"
-          aria-label="Chiudi"
-          className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiX className="size-5" />
-        </Link>
-      </header>
+    <main className="page-layout flex min-h-svh min-w-0 flex-col items-center">
+      <div className="flex w-full min-w-0 max-w-7xl flex-col gap-block">
+        <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
+          <Link
+            href={stepHref({ school: schoolSlug, level })}
+            replace
+            aria-label="Indietro"
+            className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiArrowLeft className="size-5" />
+          </Link>
+          <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
+            <h1 className="typo-title-large md:typo-display-medium text-text-primary">{courseName}</h1>
+            <p className="typo-label-large md:typo-headline-small text-text-secondary md:text-text-primary">
+              Laurea {currentLevel.name}
+            </p>
+          </div>
+          <Link
+            href="/guides"
+            aria-label="Chiudi"
+            className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
+          >
+            <FiX className="size-5" />
+          </Link>
+        </header>
 
-      {LOREM_GUIDES.length > 0 ? (
-        <AccordionList items={LOREM_GUIDES} className="md:mt-25.75" />
-      ) : (
-        <p className="typo-body-medium text-center text-text-secondary md:mt-16.25">
-          Nessuna guida disponibile al momento per questo corso.
-        </p>
-      )}
+        {LOREM_GUIDES.length > 0 ? (
+          <AccordionList items={LOREM_GUIDES} />
+        ) : (
+          <p className="typo-body-medium text-center text-text-secondary">
+            Nessuna guida disponibile al momento per questo corso.
+          </p>
+        )}
+      </div>
     </main>
   )
 }
diff --git a/src/components/header/desktop-layout.tsx b/src/components/header/desktop-layout.tsx
index f4a8007..c08c2de 100644
--- a/src/components/header/desktop-layout.tsx
+++ b/src/components/header/desktop-layout.tsx
@@ -21,7 +21,7 @@ export const DesktopLayout = ({ logoOnly = false }: { logoOnly?: boolean }) => {
   const customHoverEffectClass = "hover:underline focus-visible:underline decoration-1 decoration-blue-secondary "
 
   return (
-    <div className="fixed inset-x-6 top-10 z-20 mx-auto box-border max-w-261.25 rounded-full">
+    <div className="fixed inset-x-gutter top-10 z-20 mx-auto box-border max-w-261.25 rounded-full">
       <Glass className="pointer-events-none absolute inset-0 rounded-full" />
 
       <NavigationMenu
diff --git a/src/components/header/mobile-layout.tsx b/src/components/header/mobile-layout.tsx
index ff9fe72..bd5c1bc 100644
--- a/src/components/header/mobile-layout.tsx
+++ b/src/components/header/mobile-layout.tsx
@@ -19,7 +19,7 @@ export const MobileLayout = ({ logoOnly = false }: { logoOnly?: boolean }) => {
   }, [logoOnly])
 
   return (
-    <Glass className="fixed inset-x-6 top-14 z-20 box-border rounded-[36px] px-6 py-5">
+    <Glass className="fixed inset-x-gutter top-14 z-20 box-border rounded-[36px] px-6 py-5">
       <div className={cn("flex w-full items-center", logoOnly ? "justify-center" : "justify-between")}>
         <Logo href={logoOnly ? "https://polinetwork.org" : "/"} />
         {!logoOnly && (
diff --git a/src/components/home/about-us.tsx b/src/components/home/about-us.tsx
index f879f91..615309e 100644
--- a/src/components/home/about-us.tsx
+++ b/src/components/home/about-us.tsx
@@ -4,8 +4,8 @@ import { Button } from "@/components/ui/button"
 
 export function AboutUs() {
   return (
-    <section className="mx-auto flex min-h-screen w-full max-w-4xl flex-col items-center justify-center gap-16 px-7.5 py-12 text-center sm:gap-24">
-      <h1 className="typo-headline-medium sm:typo-display-large bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
+    <section className="page-container flex flex-col items-center gap-block text-center">
+      <h1 className="typo-headline-medium sm:typo-display-large max-w-4xl bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
         PoliNetwork unisce gli studenti del Poli: gruppi, risorse e supporto, tutti in un'unica community.
       </h1>
 
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
index 6f28b27..236b2b8 100644
--- a/src/components/home/hero.tsx
+++ b/src/components/home/hero.tsx
@@ -5,8 +5,8 @@ import { GroupSearch } from "./group-search"
 
 export function Hero() {
   return (
-    <section className="flex min-h-screen flex-col gap-10 px-6 pt-67 pb-15 sm:px-12">
-      <div className="flex flex-1 flex-col items-center justify-center gap-17.5 text-center">
+    <section className="page-container flex min-h-svh flex-col gap-block pt-page-top pb-gutter">
+      <div className="flex flex-1 flex-col items-center justify-center gap-block text-center">
         <h1 className="typo-display-small sm:typo-display-medium md:typo-display-large w-fit max-w-4xl bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
           Trova gruppi, risorse e supporto tra gli studenti del Polimi
         </h1>
diff --git a/src/components/home/materials.tsx b/src/components/home/materials.tsx
index 102a8a1..8396d88 100644
--- a/src/components/home/materials.tsx
+++ b/src/components/home/materials.tsx
@@ -36,7 +36,7 @@ const quickLinks = [
 
 export function Materials() {
   return (
-    <section className="mx-auto flex max-w-400 flex-col-reverse gap-24 p-11 py-28 sm:px-20 2xl:flex-row 2xl:items-start 2xl:gap-32">
+    <section className="page-container flex flex-col-reverse gap-block 2xl:flex-row 2xl:items-start 2xl:gap-32">
       <div className="flex grow flex-col gap-4 sm:gap-6 2xl:gap-8 2xl:pt-44">
         {/* Desktop Cards */}
         <div className="hidden gap-4 sm:grid sm:grid-cols-2 sm:gap-12 2xl:gap-20">
diff --git a/src/components/home/projects.tsx b/src/components/home/projects.tsx
index b66fafc..3ecaccb 100644
--- a/src/components/home/projects.tsx
+++ b/src/components/home/projects.tsx
@@ -31,7 +31,7 @@ const featuredCards = [
 
 export function Projects() {
   return (
-    <section className="mx-auto flex max-w-400 flex-col gap-24 p-11 py-40 sm:px-20 2xl:flex-row 2xl:items-start 2xl:gap-32">
+    <section className="page-container flex flex-col gap-block 2xl:flex-row 2xl:items-start 2xl:gap-32">
       <div className="flex flex-col items-center gap-8 text-center sm:items-start sm:text-start">
         <h2 className="typo-display-large sm:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent leading-[0.8] sm:py-6 md:whitespace-nowrap">
           15+ Projects
diff --git a/src/components/layout/TextChildrenSection.tsx b/src/components/layout/TextChildrenSection.tsx
index be1436c..e1c3352 100644
--- a/src/components/layout/TextChildrenSection.tsx
+++ b/src/components/layout/TextChildrenSection.tsx
@@ -73,14 +73,7 @@ export default function TextChildrenLayout({
         : "min-[1616px]:flex-row"
 
   return (
-    <section
-      className={cn(
-        "flex w-full flex-col gap-6 px-6 md:px-36",
-        flexDirection,
-        flexDirectionDesktop,
-        classNames.section
-      )}
-    >
+    <section className={cn("flex w-full flex-col gap-block", flexDirection, flexDirectionDesktop, classNames.section)}>
       <div className={cn("flex flex-col gap-6", classNames.textDiv)}>
         <h2
           className={cn(
diff --git a/src/components/layout/TextImageSection.tsx b/src/components/layout/TextImageSection.tsx
index 6e7ac7d..764de62 100644
--- a/src/components/layout/TextImageSection.tsx
+++ b/src/components/layout/TextImageSection.tsx
@@ -102,7 +102,7 @@ export default function TextImageLayout({
   return (
     <section
       className={cn(
-        "flex w-full items-center gap-27 px-6 text-center md:px-36 min-[1616px]:items-center",
+        "flex w-full items-center gap-block text-center min-[1616px]:items-center",
         "flex-col",
         verticalOrientation === "bt" && "flex-col-reverse",
         "min-[1616px]:flex-row",
diff --git a/src/components/layout/TextOnlySection.tsx b/src/components/layout/TextOnlySection.tsx
index da6cbbd..fe9e4c8 100644
--- a/src/components/layout/TextOnlySection.tsx
+++ b/src/components/layout/TextOnlySection.tsx
@@ -60,7 +60,7 @@ export default function TextOnlyLayout({
   return (
     <section
       className={cn(
-        "flex w-full flex-col items-center gap-8 px-6 md:px-36 min-[1616px]:flex-row min-[1616px]:items-start",
+        "flex w-full flex-col items-center gap-block min-[1616px]:flex-row min-[1616px]:items-start",
         classNames.section
       )}
     >
diff --git a/src/components/matricole/faqs.tsx b/src/components/matricole/faqs.tsx
index 9643cab..0e2653b 100644
--- a/src/components/matricole/faqs.tsx
+++ b/src/components/matricole/faqs.tsx
@@ -4,7 +4,7 @@ import { accordionItems } from "./constants"
 
 export function FAQsPage() {
   return (
-    <section className="mx-auto flex w-full max-w-400 flex-col items-center justify-center gap-16 px-9 py-32 sm:gap-20 sm:py-38">
+    <section className="page-container flex flex-col items-center gap-block">
       <h2 className="typo-headline-medium sm:typo-display-medium text-center text-text-primary">
         Domande Frequenti tra le Matricole
       </h2>
diff --git a/src/components/matricole/guides.tsx b/src/components/matricole/guides.tsx
index d952b32..582567a 100644
--- a/src/components/matricole/guides.tsx
+++ b/src/components/matricole/guides.tsx
@@ -4,8 +4,8 @@ import { guides, hub, materiali, techTools } from "./constants"
 
 export function MatricoleGuides() {
   return (
-    <section className="flex w-full flex-col items-center px-6 sm:px-10">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 text-start sm:gap-13">
+    <section className="page-container">
+      <div className="flex w-full flex-col gap-6 text-start sm:gap-13">
         <h3 className="typo-title-large sm:typo-display-medium">Guide e Utility</h3>
 
         <div className="grid w-full gap-6 sm:grid-cols-2">
diff --git a/src/components/matricole/intro.tsx b/src/components/matricole/intro.tsx
index a0c7363..1e58d7a 100644
--- a/src/components/matricole/intro.tsx
+++ b/src/components/matricole/intro.tsx
@@ -1,24 +1,19 @@
 import { CardIcon } from "@/components/card-icon"
+import { Hero } from "@/components/ui/hero"
 import { resources } from "./constants"
 
 export function MatricoleIntro() {
   return (
-    <section className="flex w-full flex-col items-center px-6 pt-40 pb-32 sm:px-10 sm:pb-13">
-      <div className="mx-auto flex w-full max-w-7xl flex-col items-center">
-        <div className="flex w-full max-w-200 flex-col items-center gap-6 text-center">
-          <h1 className="typo-display-large md:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-8 text-transparent">
-            Matricole
-          </h1>
-          <p className="typo-title-large md:typo-headline-small w-full text-text-primary">
-            Ecco una raccolta curata di risorse utili, guide e strumenti per supportare il tuo percorso.
-          </p>
-        </div>
+    <section className="page-container flex flex-col items-center gap-section pt-page-top">
+      <Hero
+        title="Matricole"
+        description="Ecco una raccolta curata di risorse utili, guide e strumenti per supportare il tuo percorso."
+      />
 
-        <div className="mt-30 hidden w-full gap-6 sm:grid sm:grid-cols-2">
-          {resources.map((resource) => (
-            <CardIcon key={resource.title} {...resource} align="start" className="h-full min-h-50" size="compact" />
-          ))}
-        </div>
+      <div className="hidden w-full gap-6 sm:grid sm:grid-cols-2">
+        {resources.map((resource) => (
+          <CardIcon key={resource.title} {...resource} align="start" className="h-full min-h-50" size="compact" />
+        ))}
       </div>
     </section>
   )
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
index 6134501..c863396 100644
--- a/src/components/projects/collection.tsx
+++ b/src/components/projects/collection.tsx
@@ -18,7 +18,7 @@ export function Collection({ projects }: { projects: Project[] }) {
   const visibleProjects = expanded ? projects : projects.slice(0, INITIAL_PROJECT_COUNT)
 
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-12 px-4 sm:gap-22">
+    <section className="page-container flex flex-col items-center gap-block">
       <div className="flex flex-col items-center gap-8">
         <h2 className="typo-headline-medium sm:typo-display-medium text-center">
           Esplora la raccolta completa dei progetti
diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx
index ee7440e..cbaa0e2 100644
--- a/src/components/projects/community-news.tsx
+++ b/src/components/projects/community-news.tsx
@@ -8,10 +8,10 @@ type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
 
 export function CommunityNews({ projects }: { projects: Project[] }) {
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
+    <section className="page-container flex flex-col items-center gap-section pt-page-top">
       <Hero title="Projects" description=" Esplora e contribuisci ai progetti degli studenti" />
 
-      <div className="mx-auto flex w-full flex-col gap-14 sm:w-fit">
+      <div className="mx-auto flex w-full flex-col gap-block sm:w-fit">
         <div className="flex flex-col items-center gap-2 sm:items-start">
           <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">
             Le novità della community
diff --git a/src/components/projects/deprecated.tsx b/src/components/projects/deprecated.tsx
index 34a0fd0..f20a5d9 100644
--- a/src/components/projects/deprecated.tsx
+++ b/src/components/projects/deprecated.tsx
@@ -17,8 +17,8 @@ export function Deprecated({ projects }: { projects: Project[] }) {
   const visibleProjects = expanded ? projects : projects.slice(0, INITIAL_PROJECT_COUNT)
 
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center px-4 py-49">
-      <div className="flex w-full flex-col gap-14 sm:w-fit">
+    <section className="page-container flex flex-col items-center">
+      <div className="flex w-full flex-col gap-block sm:w-fit">
         <div className="flex flex-col items-center gap-2 sm:items-start">
           <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">Progetti deprecati</h3>
           <p className="typo-body-large text-center sm:text-left">
diff --git a/src/components/projects/upload.tsx b/src/components/projects/upload.tsx
index 5bcd90b..22d0980 100644
--- a/src/components/projects/upload.tsx
+++ b/src/components/projects/upload.tsx
@@ -26,7 +26,7 @@ const cards = [
 
 export function Upload() {
   return (
-    <section className="mx-auto flex min-h-screen max-w-300 flex-col items-center justify-center gap-12 px-4 py-16 md:flex-row md:gap-24 md:px-12 lg:gap-48">
+    <section className="page-container flex flex-col items-center justify-center gap-block md:flex-row md:gap-24 lg:gap-48">
       <div className="flex max-w-xs flex-col items-start gap-8">
         <div className="flex flex-col gap-2">
           <h2 className="typo-headline-medium md:typo-display-medium">Hai un'idea?</h2>
diff --git a/src/components/wizard/wizard-shell.tsx b/src/components/wizard/wizard-shell.tsx
index f4adad5..99e5965 100644
--- a/src/components/wizard/wizard-shell.tsx
+++ b/src/components/wizard/wizard-shell.tsx
@@ -33,8 +33,8 @@ export function WizardShell({
   const router = useRouter()
 
   return (
-    <main className="flex min-h-svh w-full min-w-0 flex-col items-center px-6 py-50 md:py-52">
-      <Glass className="relative m-auto flex min-h-146 w-full max-w-7xl flex-col gap-10 border-0 bg-transparent p-4 backdrop-blur-none md:min-h-157 md:gap-15 md:rounded-rectangles md:border md:border-white/50 md:bg-background-blur md:px-25 md:py-12.5 md:backdrop-blur-md">
+    <main className="page-layout flex min-h-svh min-w-0 flex-col items-center">
+      <Glass className="relative m-auto flex min-h-146 w-full max-w-7xl flex-col gap-10 border-0 bg-transparent p-0 backdrop-blur-none md:min-h-157 md:gap-15 md:rounded-rectangles md:border md:border-white/50 md:bg-background-blur md:px-25 md:py-12.5 md:backdrop-blur-md">
         <div className="flex shrink-0 items-end gap-4 md:gap-6">
           <ButtonIcon
             variant="glass"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 98dafe8..cfa55a0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -11,6 +11,37 @@
 @theme {
   --breakpoint-1xl: 85rem; /* 1360px */
   --breakpoint-3xl: 90rem; /* 1440px */
+
+  /*
+   * Fluid page spacing. Each value grows linearly from the 402px (mobile) to the 1728px (desktop)
+   * Figma frame and is clamped outside that range, so spacing keeps the same proportions on every
+   * screen instead of jumping at breakpoints. Use them as regular spacing utilities
+   * (`px-gutter`, `pt-page-top`, `gap-section`, `gap-block`, ...).
+   */
+  --spacing-gutter: clamp(1.5rem, 0.742rem + 3.017vw, 4rem); /* 24px → 64px, page side margins */
+  --spacing-page-top: clamp(10.5rem, 9.742rem + 3.017vw, 13rem); /* 168px → 208px, clears the fixed header */
+  --spacing-section: clamp(6rem, 4.484rem + 6.033vw, 11rem); /* 96px → 176px, between page sections */
+  --spacing-block: clamp(2.5rem, 1.894rem + 2.413vw, 4.5rem); /* 40px → 72px, heading → content in a section */
+
+  --container-page: 90rem; /* 1440px, max content width */
+}
+
+/*
+ * Full-width element whose content is centered and capped at `--container-page`, with at least
+ * `--spacing-gutter` on each side. The cap is applied through padding (not max-width) so that
+ * section backgrounds and <ShapeLayer>s keep spanning the whole viewport.
+ */
+@utility page-container {
+  width: 100%;
+  padding-inline: max(var(--spacing-gutter), calc((100% - var(--container-page)) / 2));
+}
+
+/* `page-container` for a whole <main>: also clears the fixed header and leaves room before the footer. */
+@utility page-layout {
+  width: 100%;
+  padding-inline: max(var(--spacing-gutter), calc((100% - var(--container-page)) / 2));
+  padding-top: var(--spacing-page-top);
+  padding-bottom: var(--spacing-section);
 }
 
 @layer base {