diff --git a/src/components/component-view/component-view.js b/src/components/component-view/component-view.js
index aab091685c..9de781d47f 100644
--- a/src/components/component-view/component-view.js
+++ b/src/components/component-view/component-view.js
@@ -40,28 +40,28 @@ function ComponentView({
 
   const { viewer, accordionLabel, accordionSrLabel } = viewerData;
 
-  const ICON_EXTERNAL = {
-    icon: "sprites.svg#it-external-link",
+  const ICON_INFO = {
+    icon: "sprites.svg#it-info-circle",
     size: "sm",
-    color: "primary",
-    addonClasses: "align-middle me-4 mb-1",
+    color: "white",
+    addonClasses: "align-middle",
     ariaLabel: " (Link esterno)",
   };
 
   const ICON_COPY_CODE = {
     icon: "sprites.svg#it-copy",
     size: "sm",
-    color: "primary",
-    addonClasses: "align-middle me-4 mb-1 mt-1",
+    color: "white",
+    addonClasses: "align-middle",
     ariaLabel: " Copia il codice negli appunti",
   };
 
   const ICON_FULLSCREEN = {
-    icon: "sprites.svg#it-fullscreen",
+    icon: "sprites.svg#it-external-link",
     size: "sm",
-    color: "primary",
-    addonClasses: "align-middle me-4 mb-1",
-    ariaLabel: " Mostra in una finestra dedicata",
+    color: "white",
+    addonClasses: "align-middle",
+    ariaLabel: " Apri l'anteprima in una nuova finestra",
   };
 
   const ICON_SUCCESS = {
@@ -129,10 +129,10 @@ function ComponentView({
   const collId = `${uuid}-collapse`;
   const [wrappedCode, setWrappedCode] = useState(false);
 
-  const [previewWidth, setPreviewWidth] = useState(" viewer-desktop");
+  const [previewWidth, setPreviewWidth] = useState(" viewer-full");
   const changeResolution = (e) => {
     e.preventDefault();
-    const res = e.target.textContent; // mobile, tablet, desktop
+    const res = e.target.textContent; // mobile, tablet, full
     setPreviewWidth(` viewer-${res}`);
   };
 
@@ -147,9 +147,18 @@ function ComponentView({
     ));
   }
 
-  const componentStyles = classNames(
-    "border-bottom d-flex flex-column align-items-center",
-    { "pb-4": responsiveButtonsItems },
+  const componentStyles = classNames("d-flex flex-column align-items-center", {
+    "me-lg-4 me-xl-5": componentViewerData?.variants,
+  });
+
+  const accordionHeadingStyle =
+    "d-flex justify-content-between align-items-center";
+
+  const accordionContainerStyle = classNames(
+    "accordion accordion-left-icon py-2 border-bottom-0",
+    {
+      "me-lg-4 me-xl-5": componentViewerData?.variants,
+    },
   );
 
   const accordionStyle = classNames("accordion-collapse collapse", {
@@ -159,7 +168,9 @@ function ComponentView({
 
   const accordionButtonStyle = classNames(
     "accordion-button border-top-0 collapsed",
-    { collapsed: accordionOpen },
+    {
+      collapsed: accordionOpen,
+    },
   );
 
   const BSIExampleUrl = `/examples/${source}/${slugify(
@@ -170,35 +181,46 @@ function ComponentView({
     <div id={uuid} className="pb-4 mb-5">
       {contentTrimmed && (
         <div className={componentStyles}>
-          <span className="visually-hidden">Inizio componente:</span>
+          <div className="w-100 d-flex align-items-end justify-content-end py-3">
+            {responsiveButtonsItems && (
+              <div className="responsive-buttons d-none d-lg-block">
+                {viewer.responsiveLabel && (
+                  <span className="me-4">{viewer.responsiveLabel}</span>
+                )}
+                <div
+                  className="btn-group"
+                  role="group"
+                  aria-label={viewer.responsiveAriaLabel}
+                >
+                  {responsiveButtonsItems}
+                </div>
+              </div>
+            )}
+            <div className="ms-2">
+              <a
+                href={BSIExampleUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="btn btn-xs btn-primary p-2"
+              >
+                <Icon {...ICON_FULLSCREEN} />
+              </a>
+            </div>
+          </div>
+          <span className="visually-hidden">Inizio anteprima:</span>
           <iframe
             id={`${idPrefix}-iframe`}
             src={BSIExampleUrl}
             title={`Variante: ${variantName}`}
-            className={`w-100 rounded border shadow-sm iframe-example ${previewWidth}`}
+            className={`w-100 iframe-example rounded border shadow-sm ${previewWidth}`}
           />
-          <span className="visually-hidden">Fine componente.</span>
-          {responsiveButtonsItems && (
-            <div className="responsive-buttons d-none d-lg-block">
-              <div className="d-flex align-items-center justify-content-center pb-2 pt-4 mt-2">
-                {viewer.label && (
-                  <span className="small pe-3 text-secondary fw-semibold">
-                    {viewer.label}
-                  </span>
-                )}
-                {responsiveButtonsItems}
-              </div>
-            </div>
-          )}
+          <span className="visually-hidden">Fine anteprima.</span>
         </div>
       )}
       {contentTrimmed && accordionShow && (
-        <div className="accordion accordion-left-icon" id={accId}>
+        <div className={accordionContainerStyle} id={accId}>
           <div className="accordion-item">
-            <div
-              className="d-flex justify-content-between align-items-center"
-              id={headId}
-            >
+            <div className={accordionHeadingStyle} id={headId}>
               <h2 id={`${idPrefix}-codeViewer`} className="accordion-header ">
                 <button
                   className={accordionButtonStyle}
@@ -216,27 +238,20 @@ function ComponentView({
                   <Button
                     onClick={(e) => copyToClipboard(e, contentTrimmed)}
                     aria-label={accordionSrCopyLabel}
-                    addonStyle="p-0 shadow-none"
+                    addonStyle="shadow-none btn btn-xs btn-secondary p-2 me-2"
                   >
                     <Icon {...ICON_COPY_CODE} />
                   </Button>
                 )}
-                <a
-                  href={BSIExampleUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="Mostra il solo componente in una finestra dedicata"
-                >
-                  <Icon {...ICON_FULLSCREEN} />
-                </a>
                 {accordionUrl && (
                   <a
                     href={accordionUrl}
                     target="_blank"
                     rel="noreferrer"
                     aria-label={accordionSrLabel}
+                    className="shadow-none btn btn-xs btn-primary p-2"
                   >
-                    <Icon {...ICON_EXTERNAL} />
+                    <Icon {...ICON_INFO} />
                   </a>
                 )}
               </div>
@@ -249,8 +264,11 @@ function ComponentView({
               role="region"
               aria-labelledby={headId}
             >
-              <div className="accordion-body p-0">
-                <div aria-hidden="true" className="d-flex flex-row-reverse">
+              <div className="accordion-body p-0 position-relative">
+                <div
+                  aria-hidden="true"
+                  className="position-absolute end-0 split-code-checkbox"
+                >
                   {contentTrimmed && (
                     <Checkbox
                       id={`${idPrefix}-wrap`}
diff --git a/src/components/component-view/component-view.scss b/src/components/component-view/component-view.scss
index 743f42a65b..50aa7b4bf0 100644
--- a/src/components/component-view/component-view.scss
+++ b/src/components/component-view/component-view.scss
@@ -1,10 +1,29 @@
+@import "../../scss/bootstrap-breakpoints";
+
 pre {
     max-height:70vh;
+    padding-top: 3rem !important;
 }
 .accordion.accordion-left-icon .accordion-header .accordion-button::before {
     width:1rem;
 }
-
+.split-code-checkbox {
+    .form-check {
+        label {
+            color: white;
+            font-size: 1rem !important;
+            background-color: rgb(43, 43, 43);
+            &::after {
+                border-color: white !important;
+            }
+        }
+    }
+}
+.responsive-buttons {
+    .btn-group > .btn-group:not(:first-child), .btn-group > .btn:not(:first-child) {
+        margin-left: -2px!important;
+    }
+}
 .iframe-example {
     transition-property: height, max-width, width;
     transition-duration: 500ms;
@@ -13,14 +32,40 @@ pre {
         min-height: 350px;
     }
 }
-
 .viewer-mobile {
     max-width: 360px;
 }
 .viewer-tablet {
     max-width: 768px;
 }
-.viewer-desktop {
+.viewer-full {
     max-width: 1280px;
 }
 
+//mobile only ------------------------------------------------------------------------------------------
+@include media-breakpoint-down(sm) {
+    .notification {
+        bottom: 40px;
+    }
+}
+  
+//Small tablet ------------------------------------------------------------------------------------------
+@include media-breakpoint-up(sm) {
+    .notification {
+        bottom: 40px;
+    }
+}
+
+//Tablet landscape --------------------------------------------------------------------------------------
+@include media-breakpoint-up(lg) {
+    .component-viewer .no-left-margin {
+    margin-left: -1.5rem;
+    }
+}
+
+//Laptop ------------------------------------------------------------------------------------------------
+@include media-breakpoint-up(xl) {
+    .component-viewer .no-left-margin {
+        margin-left: -3rem;
+    }
+}
diff --git a/src/data/component-viewer.yaml b/src/data/component-viewer.yaml
index 06c6d805dd..c278c046e7 100644
--- a/src/data/component-viewer.yaml
+++ b/src/data/component-viewer.yaml
@@ -1,15 +1,19 @@
 accordionLabel: "Codice Bootstrap Italia"
-accordionSrLabel: Apri la documentazione del componente sul sito Boostrap Italia
-accordionSrCopyLabel: Copia negli appunti il codice del componente Bootstrap Italia
+accordionSrLabel: Apri la documentazione sul sito Boostrap Italia (si apre in una nuova finestra)
+accordionSrCopyLabel: Copia negli appunti il codice Bootstrap Italia
 viewer:
-  label: "Risoluzione "
+  responsiveAriaLabel: "Scegli la risoluzione per l'anteprima:"
+  responsiveLabel: "Anteprima:"
   responsiveButtons:
     - label: "mobile"
-      addonStyle: btn-me btn-xs btn-outline-secondary small
+      addonStyle: btn-xs 
+      btnStyle: secondary     
       ariaLabel: Visualizzazione anteprima mobile 360px
     - label: "tablet"
-      addonStyle: btn-me btn-xs btn-outline-secondary small
+      addonStyle: btn-xs 
+      btnStyle: secondary
       ariaLabel: Visualizzazione anteprima tablet 768px
-    - label: "desktop"
-      addonStyle: btn-xs btn-outline-secondary small
+    - label: "full"
+      addonStyle: btn-xs
+      btnStyle: secondary
       ariaLabel: Visualizzazione anteprima desktop
diff --git a/src/data/content/community.yaml b/src/data/content/community.yaml
index 5282a20c5c..5a49ed882a 100644
--- a/src/data/content/community.yaml
+++ b/src/data/content/community.yaml
@@ -318,6 +318,30 @@ components:
 
       #CARD MEDIUM
 
+      - title: "Scrivere (semplice) per la PA: qualità nella comunicazione e diritti delle persone"
+        headingLevel: 4
+        customCol: col-lg-4
+        img: /images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png
+        alt: ""
+        imgRatio: 16x9
+        imgPlaceholder: false
+        fullHeight: false
+        rounded: true
+        url: https://medium.com/designers-italia/scrivere-semplice-per-la-pa-qualit%C3%A0-nella-comunicazione-e-diritti-delle-persone-ff28bf02bfad
+        blank: true
+        externalLink:
+          label: Leggi su Medium
+          screenReaderText: "l'articolo completo"
+          icon:
+            icon: sprites.svg#it-external-link
+            size: xs
+        moreInfo: di Daniela Iozzo
+        chips:
+          - color: secondary
+            label: Contenuti e linguaggio
+            url: "#"
+            blank: false
+
       - title: "Progettare strumenti per la trasformazione digitale degli enti locali"
         headingLevel: 4
         customCol: col-lg-4
@@ -373,6 +397,41 @@ components:
             size: xs
         moreInfo: di Marco Maria Pedrazzo
 
+      - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese"
+        headingLevel: 4
+        img: /images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp
+        alt: ""
+        imgRatio: 16x9
+        imgPlaceholder: false
+        fullHeight: true
+        rounded: true
+        url: https://medium.com/designers-italia/progettare-con-qualita-accessibilita-al-centro-del-design-system-del-paese-5e3599170099
+        blank: true
+        externalLink:
+          label: Leggi su Medium
+          screenReaderText: " l'articolo completo"
+          icon:
+            icon: sprites.svg#it-external-link
+            size: xs
+        moreInfo: di Daniele Tabellini e Fabrizio Caccavello
+
+      - title: "Accessibili, usabili e inclusivi: per una progettazione etica dei servizi pubblici digitali"
+        headingLevel: 4
+        img: /images/community/articoli-di-approfondimento/20220128-accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-digitali.webp
+        alt: ""
+        imgRatio: 16x9
+        imgPlaceholder: false
+        fullHeight: true
+        rounded: true
+        url: https://medium.com/designers-italia/accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-pubblici-digitali-186ed6ebc469
+        blank: true
+        externalLink:
+          label: Leggi su Medium
+          screenReaderText: " l'articolo completo"
+          icon:
+            icon: sprites.svg#it-external-link
+            size: xs
+        moreInfo: di Mauro Filippi
     # MEDIA
 
     - id: media
diff --git a/src/data/content/design-system/fondamenti/tipografia.yaml b/src/data/content/design-system/fondamenti/tipografia.yaml
index 62722e59e3..15929c850f 100644
--- a/src/data/content/design-system/fondamenti/tipografia.yaml
+++ b/src/data/content/design-system/fondamenti/tipografia.yaml
@@ -131,6 +131,7 @@ components:
 
         - name: TextImageCta
           title: Titillium Web
+          noSpace: true
           headingLevel: 3
           text: |
               Titillium Web è il nostro **carattere principale**. Disponibile in diverse varianti, è un carattere geometrico che garantisce flessibilità nel design. È raccomandato per titoli, sottotitoli, elementi interattivi e brevi paragrafi di testo.
@@ -146,6 +147,7 @@ components:
         
         - name: TextImageCta
           title: Lora
+          noSpace: true
           headingLevel: 3
           text: |
               Lora è il carattere tipografico nato espressamente per facilitare la **lettura dei testi** su dispostivi digitali. Essendo un font con le grazie (*serif*), è raccomandato per paragrafi di testo più lunghi.
@@ -161,6 +163,7 @@ components:
 
         - name: TextImageCta
           title: Roboto Mono
+          noSpace: true
           headingLevel: 3
           text: |
             Roboto Mono, variante monospaziata della famiglia Roboto, è un carattere ideato per la **visualizzazione di dati tecnici**. La sua uniformità dei caratteri è utile per rappresentare numeri, codici, calcoli matematici, e fornire esempi di stringhe di linguaggi di programmazione.
diff --git a/src/data/content/index.yaml b/src/data/content/index.yaml
index d3dde83904..37bb66dce7 100644
--- a/src/data/content/index.yaml
+++ b/src/data/content/index.yaml
@@ -74,7 +74,7 @@ components:
         - label: test usabilità
         - label: rispettare
         - label: accessibilità
-        - label: design system del Paese
+        - label: design system
 
   sectionIntro:
     title: In evidenza
@@ -264,16 +264,16 @@ components:
       tags: [Design system, Progettazione interfaccia, Sviluppo interfaccia]
 
 
-    - title: "Progettare strumenti per la trasformazione digitale degli enti locali"
+    - title: "Scrivere (semplice) per la PA: qualità nella comunicazione e diritti delle persone"
       headingLevel: 3
       customCol: col-lg-4
-      img: /images/community/articoli-di-approfondimento/20230522-progettare-strumenti-per-la-trasformazione-digitale-degli-enti-locali-1198x673.png
+      img: /images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png
       alt: ""
       imgRatio: 16x9
       imgPlaceholder: false
       fullHeight: false
       rounded: true
-      url: https://medium.com/designers-italia/progettare-strumenti-per-la-trasformazione-digitale-degli-enti-locali-c9c55463a67a
+      url: https://medium.com/designers-italia/scrivere-semplice-per-la-pa-qualit%C3%A0-nella-comunicazione-e-diritti-delle-persone-ff28bf02bfad
       blank: true
       externalLink:
         label: Leggi su Medium
@@ -281,10 +281,10 @@ components:
         icon:
           icon: sprites.svg#it-external-link
           size: xs
-      moreInfo: di Ilaria Scarpellini
+      moreInfo: di Daniela Iozzo
       chips:
         - color: secondary
-          label: Service design
+          label: Contenuti e linguaggio
           url: "#"
           blank: false
 
diff --git a/src/data/content/norme-e-riferimenti.yaml b/src/data/content/norme-e-riferimenti.yaml
index bd9976b671..c176809b58 100644
--- a/src/data/content/norme-e-riferimenti.yaml
+++ b/src/data/content/norme-e-riferimenti.yaml
@@ -236,56 +236,63 @@ components:
     cards:
 
    #CARD MEDIUM
-      - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese"
+
+      - title: "Scrivere (semplice) per la PA: qualità nella comunicazione e diritti delle persone"
         headingLevel: 4
-        img: /images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp
-        alt: descrizione immagine
+        customCol: col-lg-4
+        img: /images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png
+        alt: ""
         imgRatio: 16x9
         imgPlaceholder: false
-        fullHeight: true
+        fullHeight: false
         rounded: true
-        url: https://medium.com/designers-italia/progettare-con-qualita-accessibilita-al-centro-del-design-system-del-paese-5e3599170099
+        url: https://medium.com/designers-italia/scrivere-semplice-per-la-pa-qualit%C3%A0-nella-comunicazione-e-diritti-delle-persone-ff28bf02bfad
         blank: true
         externalLink:
-          label: Leggi su medium
-          screenReaderText: " l'articolo completo"
+          label: Leggi su Medium
+          screenReaderText: "l'articolo completo"
           icon:
             icon: sprites.svg#it-external-link
             size: xs
-        moreInfo: di Daniele Tabellini e Fabrizio Caccavello
+        moreInfo: di Daniela Iozzo
+        chips:
+          - color: secondary
+            label: Contenuti e linguaggio
+            url: "#"
+            blank: false
 
-      - title: "Accessibili, usabili e inclusivi: per una progettazione etica dei servizi pubblici digitali"
+      - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese"
         headingLevel: 4
-        img: /images/community/articoli-di-approfondimento/2022-medium-filippi-etica.webp
+        img: /images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp
         alt: descrizione immagine
         imgRatio: 16x9
         imgPlaceholder: false
         fullHeight: true
         rounded: true
+        url: https://medium.com/designers-italia/progettare-con-qualita-accessibilita-al-centro-del-design-system-del-paese-5e3599170099
         blank: true
-        url: https://medium.com/designers-italia/accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-pubblici-digitali-186ed6ebc469
         externalLink:
           label: Leggi su medium
           screenReaderText: " l'articolo completo"
           icon:
             icon: sprites.svg#it-external-link
             size: xs
-        moreInfo: di Mauro Filippi
+        moreInfo: di Daniele Tabellini e Fabrizio Caccavello
 
-      - title: "Ripartire da approccio e processo: la progettazione di servizi pubblici digitali"
+      - title: "Accessibili, usabili e inclusivi: per una progettazione etica dei servizi pubblici digitali"
         headingLevel: 4
-        img: /images/community/articoli-di-approfondimento/2021-medium-zaia-processo.webp
+        img: /images/community/articoli-di-approfondimento/2022-medium-filippi-etica.webp
         alt: descrizione immagine
         imgRatio: 16x9
         imgPlaceholder: false
         fullHeight: true
         rounded: true
-        url: https://medium.com/designers-italia/ripartire-da-approccio-e-processo-la-progettazione-di-servizi-pubblici-digitali-fb62858e2c6d
         blank: true
+        url: https://medium.com/designers-italia/accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-pubblici-digitali-186ed6ebc469
         externalLink:
           label: Leggi su medium
           screenReaderText: " l'articolo completo"
           icon:
             icon: sprites.svg#it-external-link
             size: xs
-        moreInfo: di Francesco Zaia
+        moreInfo: di Mauro Filippi
diff --git a/static/images/community/articoli-di-approfondimento/2022-medium-filippi-etica.webp b/static/images/community/articoli-di-approfondimento/20220128-accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-digitali.webp
similarity index 100%
rename from static/images/community/articoli-di-approfondimento/2022-medium-filippi-etica.webp
rename to static/images/community/articoli-di-approfondimento/20220128-accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-digitali.webp
diff --git a/static/images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp b/static/images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp
similarity index 100%
rename from static/images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp
rename to static/images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp
diff --git a/static/images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png b/static/images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png
new file mode 100644
index 0000000000..f35727fdda
Binary files /dev/null and b/static/images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png differ
diff --git a/static/images/community/eventi/2023/20231115-il-design-system-del-paese-per-realizzare-siti-e-servizi-dei-comuni-1200x627.png b/static/images/community/eventi/2023/20231115-il-design-system-del-paese-per-realizzare-siti-e-servizi-dei-comuni-1200x627.png
index 92a6b14865..9855f8deb8 100644
Binary files a/static/images/community/eventi/2023/20231115-il-design-system-del-paese-per-realizzare-siti-e-servizi-dei-comuni-1200x627.png and b/static/images/community/eventi/2023/20231115-il-design-system-del-paese-per-realizzare-siti-e-servizi-dei-comuni-1200x627.png differ