diff --git a/src/components/table/table.scss b/src/components/table/table.scss
index 480026613f..a4bf63d5ea 100644
--- a/src/components/table/table.scss
+++ b/src/components/table/table.scss
@@ -1,5 +1,12 @@
 @import "../../scss/bootstrap-breakpoints";
 
+.table-img-responsive {
+  img {
+    max-width:100%;
+    min-width:280px;
+  }
+}
+
 .table {
   font-size: 1rem;
   > :not(:first-child) {
diff --git a/src/data/content/design-system/fondamenti/colori.yaml b/src/data/content/design-system/fondamenti/colori.yaml
new file mode 100644
index 0000000000..32f6f82cba
--- /dev/null
+++ b/src/data/content/design-system/fondamenti/colori.yaml
@@ -0,0 +1,1085 @@
+# ————————————————————————————————————————————
+# CREATEPAGE GATSBY
+# ————————————————————————————————————————————
+metadata:
+  template:
+    name: design-system-index
+
+seo:
+  name: Colori
+  description: "Usiamo un sistema di colori per garantire coerenza visiva a siti e servizi e orientare le persone verso azioni e informazioni importanti, rendendo i contenuti accessibili a tutti."
+  image: null
+  twitterImage: null
+  canonical: null
+  pathname: /design-system/fondamenti/colori/
+
+# navPreFooter:
+#   navOtherPrevNext:
+#     next:
+#       label: Next page
+#       url: "#"
+#       blank: false
+#       specular: true
+#       icon:
+#         icon: "sprites.svg#it-arrow-right"
+#         size: "sm"
+#         align: "middle"
+#         color: "primary"
+#         hidden: true
+#         addonClasses: flex-shrink-0 ms-3
+
+components:
+  hero:
+    background: null
+    title: Colori
+    column: true
+    subtitle: "Usiamo un sistema di colori per garantire coerenza visiva a siti e servizi e orientare le persone verso azioni e informazioni importanti, rendendo i contenuti accessibili a tutti."
+    tag:
+      label: Fondamenti #C
+      addonClasses: mt-3 text-uppercase
+   # pretext:
+   #   icon:
+   #     icon: sprites.svg#it-info-circle
+   #     size: sm
+   #   text: In breve
+   # text: |
+   #   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus feugiat ante sit amet semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
+
+     # KANGAROO: METADATA
+    kangaroo:
+      id: kangarooHero
+      noPadding: true
+      titleSr: Metadati e link per approfondire
+      navposition:
+        items:
+          - title: Ti trovi in
+            tooltip: "La sezione di Designers Italia cui appartiene questa pagina"
+            icon:
+              icon: "sprites.svg#it-folder"
+              size: "sm"
+              align: "middle"
+              color: "secondary"
+            label: Fondamenti #C
+            url: "../../" #M
+      otherInfo:
+        items:
+          - title: Rispettando
+            tooltip: "Norme e riferimenti che i contenuti di questa pagina ti aiutano a rispettare"
+            icon:
+              icon: "sprites.svg#it-pa"
+              size: "sm"
+              align: "middle"
+              color: "secondary"
+            label: Linee guida di design #C
+            url: "/norme-e-riferimenti/linee-guida-di-design" #M
+      personalInfo:
+         items: #C
+          - title: Sei
+            tooltip: "Se non ti riconosci in questi profili non preoccuparti: potrai scoprire informazioni utili per saperne di più. In alternativa, naviga la sezione superiore per approfondire il contesto"
+            icon:
+              icon: "sprites.svg#it-user"
+              size: "sm"
+              align: "middle"
+              color: "secondary"
+            label: Designer, Developer, Qui per curiosità #C
+          - title: Vuoi
+            tooltip: "Obiettivi di progettazione per cui sono utili i contenuti di questa pagina"
+            icon:
+              icon: "sprites.svg#it-flag"
+              size: "sm"
+              align: "middle"
+              color: "secondary"
+            label: Progettare e sviluppare l'interfaccia utente #C
+      tagsLabel: Parliamo di
+      color: secondary
+      icon:
+        icon: sprites.svg#it-horn
+        size: sm
+        color: secondary
+      tags: [Colori, Progettazione interfaccia]
+
+  sectionsEditorial :
+    - full: true
+      title:  Principi
+      text: I principi che guidano l'uso dei colori
+      background: null
+      paddingLeft: true
+      components:
+        - name: TextImageCta
+          title: Rispetta i ruoli
+          noSpace: true
+          headingLevel: 3
+          text: |
+            Ciascun colore della palette ha un ruolo e funzione specifica. Ad esempio, il colore primario è associato a elementi di azione mentre un colore neutro è riservato a elementi di supporto o sfondi. Il rispetto di questi ruoli assicura coerenza visiva e chiarezza nella fruizione dei contenuti.
+        - name: TextImageCta
+          title: Applica con parsimonia
+          headingLevel: 3
+          noSpace: true
+          text: |
+            I colori contribuiscono alla creazione di una gerarchia visiva che mette in evidenza ciò che è davvero importante nel contesto della pagina. Non sono quindi elementi puramente decorativi, ma strumenti essenziali per orientare e semplificare l'esperienza utente attraverso lo stimolo visivo. 
+        - name: TextImageCta
+          noSpace: true
+          title: Garantisci un contrasto minimo
+          headingLevel: 3
+          text: |
+            Assicurati che il rapporto di contrasto del testo e degli elementi interattivi nel
+            tuo servizio soddisfi i requisiti previsti dagli standard WCAG 2.1.
+
+    - full: true
+      title: Come usare i colori
+      paddingLeft: true
+      noSpace: true
+      text: Suggerimenti pratici su come utilizzare al meglio la palette di colori.
+      background: null
+      components:
+
+        - name: TextImageCta
+          title: Tipologie di colori
+          headingLevel: 3
+          nospace: true
+          text: |
+            Sono previste quattro tipologie di colori:
+
+            - **colore primario** (_primary color_), il colore "Blu Italia" è il colore ufficiale del design system del Paese e rappresenta l'identità dei prodotti digitali della Pubblica Amministrazione centrale; è utilizzato anche per elementi interattivi, come link o pulsanti;
+            - **colore di risalto** (_accent color_), è associato a elementi interattivi in alternativa al colore primario, il suo uso è raccomandato esclusivamente su sfondi saturi per ragioni di accessibilità;
+            - **colori di sistema** (_system colors_), utilizzati per i messaggi che informano l’utente sullo stato del sistema (avvisi, errori, notifiche);
+            - **colori neutri** (_neutral colors_), sono usati per elementi tipografici, sfondi, bordi e separatori nella maggior parte dei componenti.
+
+        - name: Table
+          title: Combinazioni
+          responsive: table-responsive-md
+          addonClasses: mb-5 table-img-responsive
+          head:
+            - tag:
+                label: Va bene
+                addonClasses: bg-success
+            - tag:
+                label: Non va bene
+                addonClasses: bg-danger
+          rows:
+            - cols: 
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/colors-usage-good.png)
+                  
+                  Utilizzare il colore `primary` sullo sfondo `primary.lighter`. Utilizzare il colore `inverse` su uno sfondo saturo come `primary`, `secondary` o `emphasis`.
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/colors-usage-wrong.png)
+                 
+                  Utilizzare il colore `primary` su uno sfondo come `primary.light`. Utilizzare colore `accent` o `primary` su sfondi saturi e scuri come `secondary` e `emphasis`.
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/colors-usage-system-good.png)
+                  
+                  Utilizzare il colore principale di sistema per il testo su sfondo `light`.  
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/colors-usage-system-wrong.png)
+                  
+                  Utilizzare i colori `base` o `secondary` per il testo su sfondo `success`, `warning` e `alert`.
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/colors-usage-accent-good.png)
+
+                  Utilizzare il colore `accent` come sfondo o testo in combinazione con `inverse`.  
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/colors-usage-accent-wrong.png)
+                  
+                  Utilizzare colori di testo `secondary` o `muted` su uno sfondo `accent`.
+ 
+        - name: TextImageCta
+          title: Accessibilità
+          headingLevel: 3
+          noSpace: false
+          text: |
+            Il colore influisce sull’accessibilità del prodotto. 
+            
+            I colori contribuiscono alla creazione di una gerarchia visiva ma non devono essere usati come unico elemento di distinzione per rappresentare o differenziare informazioni o elementi interattivi, secondo il criterio [1.4.1](https://www.w3.org/Translations/WCAG21-it/#use-of-color) delle WCAG 2.1. 
+
+            Devi inoltre garantire un contrasto minimo di colore tra gli elementi e tra gli elementi e i loro sfondi per soddisfare ii criteri [1.4.3](https://www.w3.org/Translations/WCAG21-it/#contrast-minimum) e [1.4.11](https://www.w3.org/Translations/WCAG21-it/#non-text-contrast). 
+            Il contrasto minimo per soddisfare questi due criteri è:
+            - 4.5:1 tra il colore del testo e il colore del suo sfondo;
+            - 3:1 tra il colore del testo grande (considerato maggiore di 24px) e il colore del suo sfondo;
+            - 3:1 tra i colori di elementi grafici e di interfaccia e il colore o i colori di sfondo o contigui;
+            Nessun contrasto minimo è invece richiesto per elementi disabilitati e decorativi.
+
+            Per testare i contrasti di colore hai a disposizione molti strumenti di verifica da usare nelle diverse fasi di progettazione e sviluppo; ti suggeriamo a titolo di esempio [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
+
+            Se usi i design token del design system i contrasti di colore per i testi sono stati già verificati e segnalati in UI Kit Italia.
+          ctas:
+            - label: "Vai al fondamento Accessibilità" #C
+              url: "/design-system/fondamenti/accessibilita/" #M
+              blank: false #M #C true if new tab for external links
+              icon:
+                icon: sprites.svg#it-arrow-right #C #I #it-arrow-right | it-external-link for external links
+                color: primary
+                align: middle
+                hidden: true
+                size: sm
+                addonClasses: ms-2
+
+    - full: true
+      paddingLeft: true
+      title: Palette
+      noSpace: true
+      background: null
+      text: 'Pensata per un design semplice e minimalista, la palette è costituita dal colore principale per ciascuna tipologia e dalle relative varianti monocromatiche.' 
+      components:
+        - name: TextImageCta
+          title: 
+
+        # Colore primario
+        - name: Table
+          title: Colore primario
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-7.png)
+              - tag: 
+                  label: '#0066cc'  
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold
+              - text: |
+                  210, 72%, 57%
+              - text: |
+                  5.56:1
+        - name: Table
+          title: Tutte le varianti
+          headingLevel: 4
+          addonClasses: mb-5
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-1.png)
+              - tag:  
+                  label: '#f2f7fc'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 62%, 97%
+              - text: |
+                  1.07:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-2.png)
+              - tag: 
+                  label: '#bfdfff'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 100%, 87%
+              - text: |
+                  1.38:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-3.png)
+              - tag: 
+                  label: '#94c4f5' 
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold 
+              - text: |
+                  210, 83%, 77%
+              - text: |
+                  1.83:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-4.png)
+              - tag: 
+                  label: '#6aaaeb'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 76%, 67%
+              - text: |
+                  2.45:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-5.png)
+              - tag: 
+                  label: '#4392E0'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 72%, 57%
+              - text: |
+                  3.26:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-6.png)
+              - tag:
+                  label: '#207ad5'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 74%, 48%
+              - text: |
+                  4.31:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-7.png)
+              - tag: 
+                  label: '#0066cc'  
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold
+              - text: |
+                  210, 100%, 40%
+              - text: |
+                  5.56:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-8.png)
+              - tag:
+                  label: '#004d99'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 74%, 30%
+              - text: |
+                  8.32:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-9.png)
+              - tag:
+                  label: '#004080'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 100%, 25%
+              - text: |
+                  10.26:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-blue-10.png)
+              - tag:
+                  label: '#003366'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  210, 100%, 20%
+              - text: |
+                  10.26:1
+
+        # Colore accento
+        - name: Table
+          title: Colore di risalto
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-8.png)
+              - tag: 
+                  label: '#089994'  
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold
+              - text: |
+                  178, 90%, 32%
+              - text: |
+                  3.5:1
+        - name: Table
+          title: Tutte le varianti
+          headingLevel: 4
+          responsive: table-responsive-md
+          addonClasses: mb-5
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-1.png)
+              - tag:
+                  label: '#ccfffd' 
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold 
+              - text: |
+                  178, 100%, 90%
+              - text: |
+                  1.08:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-2.png)
+              - tag:
+                  label: '#a3f5f2'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  178, 80%, 80%
+              - text: |
+                  1.24:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-3.png)
+              - tag: 
+                  label: '#79ece8'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold
+              - text: |
+                  178, 75%, 70%
+              - text: |
+                  1.41:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-4.png)
+              - tag: 
+                  label: '#52e0db'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold
+              - text: |
+                  178, 70%, 60%
+              - text: |
+                  1.60:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-5.png)
+              - tag:  
+                  label: '#2bd6d0'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  178, 68%, 50%
+              - text: |
+                  1.80:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-6.png)
+              - tag:
+                  label: '#0bcbc5'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  178, 90%, 42%
+              - text: |
+                  2.02:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-7.png)
+              - tag: 
+                  label: '#09afa9'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold 
+              - text: |
+                  178, 90%, 36%
+              - text: |
+                  2.72:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-8.png)
+              - tag:
+                  label: '#089994'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  178, 90%, 32%
+              - text: |
+                  3.5:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-9.png)
+              - tag: 
+                  label: '#077f7b'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  178, 90%, 26%
+              - text: |
+                  4.84:1
+            - cols:
+              - text: |
+                    ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-accent-10.png)
+              - tag: 
+                  label: '#05615e'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  178, 90%, 20%
+              - text: |
+                    7.29:1
+             
+        # Colori di sistema
+        - name: Table
+          title: Colori di sistema
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-8.png)
+              - tag: 
+                  label: '#cc7a00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 25%
+              - text: |
+                  4.97:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-6.png)
+              - tag: 
+                  label: '#089994'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 40%
+              - text: |
+                  3.3:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-6.png)
+              - tag: 
+                  label: '#cc334d'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 50%
+              - text: |
+                  5.06:1
+        - name: Table
+          title: Tutte le varianti
+          addonClasses: mb-5
+          headingLevel: 4
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-1.png)
+              - tag: 
+                  label: '#c8f6e7'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 72%, 87%
+              - text: |
+                  1.18:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-2.png)
+              - tag: 
+                  label: '#99eed2'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 72%, 77%
+              - text: |
+                  1.35:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-3.png)
+              - tag:
+                  label: '#6ee7bf'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 72%, 67%
+              - text: |
+                  1.51:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-4.png)
+              - tag: 
+                  label: '#43e0ac'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 72%, 57%
+              - text: |
+                  1.68:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-5.png)
+              - tag: 
+                  label: '#22d499' 
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 72%, 48%
+              - text: |
+                  1.91:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-6.png)
+              - tag: 
+                  label: '#00cc88'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 40%
+              - text: |
+                  2.1:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-7.png)
+              - tag: 
+                  label: '#00b377'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 35%
+              - text: |
+                  2.72:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-8.png)
+              - tag: 
+                  label: '#008055'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 25%
+              - text: |
+                  4.97:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-9.png)
+              - tag: 
+                  label: '#006644'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 20%
+              - text: |
+                  7.03:1
+            - cols:
+              - text: |
+                    ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-emerald-10.png)
+              - tag: 
+                  label: '#004d33'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 15%
+              - text: |
+                    9.95:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-1.png)
+              - tag: 
+                  label: '#f6e4c8'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 87%
+              - text: |
+                  1.24:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-2.png)
+              - tag:
+                  label: '#eecd9a'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold 
+              - text: |
+                  36, 72%, 77%
+              - text: |
+                  1.51:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-3.png)
+              - tag: 
+                  label: '#e7b66e'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 67%
+              - text: |
+                  1.85:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-4.png)
+              - tag:
+                  label: '#e0a243'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 57%
+              - text: |
+                  2.22:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-5.png)
+              - tag:
+                  label: '#d48d22'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 48%
+              - text: |
+                  2.75:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-6.png)
+              - tag:
+                  label: '#cc7a00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 40%
+              - text: |
+                  3.3:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-7.png)
+              - tag: 
+                  label: '#b36b00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 35%
+              - text: |
+                  4.18:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-8.png)
+              - tag: 
+                  label: '#995c00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 30%
+              - text: |
+                  5.4:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-9.png)
+              - tag:
+                  label: '#804d00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 35%
+              - text: |
+                  5.5:1
+            - cols:
+              - text: |
+                    ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-orange-10.png)
+              - tag: 
+                  label: '#663d00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 20%
+              - text: |
+                    9.4:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-1.png)
+              - tag: 
+                  label: '#fbeff1'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 96%
+              - text: |
+                  1.12:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-2.png)
+              - tag:
+                  label: '#ebadb8'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 90%
+              - text: |
+                  1.35:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-3.png)
+              - tag: 
+                  label: '#e08593'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 80%
+              - text: |
+                  1.87:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-4.png)
+              - tag: 
+                  label: '#d65c70'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 70%
+              - text: |
+                  2.64:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-5.png)
+              - tag: 
+                  label: '#d65c70'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 60%
+              - text: |
+                  3.73:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-6.png)
+              - tag:
+                  label: '#cc334d'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 50%
+              - text: |
+                  5.06:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-7.png)
+              - tag:
+                  label: '#b32d43'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 60%, 44%
+              - text: |
+                  6.22:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-8.png)
+              - tag:
+                  label: '#992639'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 100%, 37%
+              - text: |
+                  7.8:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-9.png)
+              - tag: 
+                  label: '#7a1f2e'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 100%, 30%
+              - text: |
+                  10.17:1
+            - cols:
+              - text: |
+                    ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-red-10.png)
+              - tag: 
+                  label: '#661a26'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  350, 100%, 25%
+              - text: |
+                  12.06:1
+            
+        # Colori di sistema
+        - name: Table
+          title: Colori neutri
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-9.png)
+              - tag: 
+                  label: '#cc7a00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  160, 100%, 25%
+              - text: |
+                  4.97:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-7.png)
+              - tag:
+                  label: '#089994'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 40%
+              - text: |
+                  3.3:1
+        - name: Table
+          title: Tutte le varianti
+          headingLevel: 4
+          responsive: table-responsive-md
+          head:
+            - text: Anteprima
+            - text: HEX
+            - text: HSL
+            - text: Contrasto su sfondo bianco
+          rows:
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-1.png)
+              - tag: 
+                  label: '#fafafa'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 98%
+              - text: |
+                  1.04:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-2.png)
+              - tag:
+                  label: '#f5f5f5'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 96%
+              - text: |
+                  1.09:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-3.png)
+              - tag: 
+                  label: '#e5e5e5'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 90%
+              - text: |
+                  1.25:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-4.png)
+              - tag: 
+                  label: '#d4d4d4'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 83%
+              - text: |
+                  1.48:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-5.png)
+              - tag:
+                  label: '#a3a3a3'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 64%
+              - text: |
+                  2.52:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-6.png)
+              - tag: 
+                  label: '#737373'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 45%
+              - text: |
+                  4.74:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-7.png)
+              - tag: 
+                  label: '#525252'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 32%
+              - text: |
+                  7.81:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-8.png)
+              - tag: 
+                  label: '#404040'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 25%
+              - text: |
+                  10.36:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-9.png)
+              - tag: 
+                  label: '#262626'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 15%
+              - text: |
+                  15.13:1
+            - cols:
+              - text: |
+                    ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-gray-10.png)
+              - tag: 
+                  label: '#1a1a1a'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  0, 0%, 10%
+              - text: |
+                    17.4:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-1.png)
+              - tag: 
+                  label: '#f6e4c8'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 87%
+              - text: |
+                  1.24:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-2.png)
+              - tag: 
+                  label: '#eecd9a'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 77%
+              - text: |
+                  1.51:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-3.png)
+              - tag: 
+                  label: '#e7b66e'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 67%
+              - text: |
+                  1.85:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-4.png)
+              - tag: 
+                  label: '#e0a243'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 57%
+              - text: |
+                  2.22:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-5.png)
+              - tag: 
+                  label: '#d48d22'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 72%, 48%
+              - text: |
+                  2.75:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-6.png)
+              - tag: 
+                  label: '#cc7a00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 40%
+              - text: |
+                  3.3:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-7.png)
+              - tag: 
+                  label: '#b36b00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 35%
+              - text: |
+                  4.18:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-8.png)
+              - tag: 
+                  label: '#995c00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 30%
+              - text: |
+                  5.4:1
+            - cols:
+              - text: |
+                  ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-9.png)
+              - tag: 
+                  label: '#804d00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 35%
+              - text: |
+                  5.5:1
+            - cols:
+              - text: |
+                    ![Riquadro di anteprima del colore](/images/design-system/fondamenti/color-slate-10.png)
+              - tag: 
+                  label: '#663d00'
+                  addonClasses: neutral-1-bg-a1 text-black font-monospace fw-semibold  
+              - text: |
+                  36, 100%, 20%
+              - text: |
+                    9.4:1
+
diff --git a/src/data/dsnav.yaml b/src/data/dsnav.yaml
index c6ef2a7e3c..ef6ef226ab 100644
--- a/src/data/dsnav.yaml
+++ b/src/data/dsnav.yaml
@@ -62,7 +62,7 @@ list:
       - label: "—"
         disabled: true
       - label: "Colori"
-        disabled: true
+        url: "/design-system/fondamenti/colori/"
       - label: "Tipografia"
         url: "/design-system/fondamenti/tipografia/"
       - label: "Griglia"
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 85de69067d..a9b5657676 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -8,6 +8,12 @@ p, .content ul {
   max-width: 75ch;
 }
 
+p code {
+  background-color: $color-background-muted;
+  padding: 2px 4px;
+  border-radius: $border-radius;
+}
+
 .design-system .text-image-cta .content img {
   border: 1px solid hsl(210, 4%, 78%);
 }
@@ -65,4 +71,4 @@ div.chips-list-wrapper {
   .video-js .vjs-control {
     width: 3.5em;
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/vars.scss b/src/scss/vars.scss
index f566bd9cc8..738fa28380 100644
--- a/src/scss/vars.scss
+++ b/src/scss/vars.scss
@@ -94,9 +94,9 @@
 	--kangaroo-tags-hover-color:var(--simple-cta-color-hover);
 	--kangaroo-negative-element-color: #FFF;
 	//section editorial
-	--section-editorial-y-padding:96px;
-	--section-editorial-y-padding-desk:96px;
-	--section-editorial-intro-text-size: 1.333333333333rem;
+	--section-editorial-y-padding: 96px;
+	--section-editorial-y-padding-desk: 96px;
+	--section-editorial-intro-text-size: 1.25rem;
 
 	//-search-main
 	--search-main-border: 1px solid #C5C7C9;
diff --git a/static/images/design-system/colore.png b/static/images/design-system/colore.png
new file mode 100644
index 0000000000..01ad90bfcd
Binary files /dev/null and b/static/images/design-system/colore.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-1.png b/static/images/design-system/fondamenti/color-accent-1.png
new file mode 100644
index 0000000000..bca6e11e09
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-1.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-10.png b/static/images/design-system/fondamenti/color-accent-10.png
new file mode 100644
index 0000000000..c0a6b1df51
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-10.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-2.png b/static/images/design-system/fondamenti/color-accent-2.png
new file mode 100644
index 0000000000..10d6cce0b8
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-2.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-3.png b/static/images/design-system/fondamenti/color-accent-3.png
new file mode 100644
index 0000000000..6f3739681f
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-3.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-4.png b/static/images/design-system/fondamenti/color-accent-4.png
new file mode 100644
index 0000000000..0a9619983c
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-4.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-5.png b/static/images/design-system/fondamenti/color-accent-5.png
new file mode 100644
index 0000000000..651f65aaa7
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-5.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-6.png b/static/images/design-system/fondamenti/color-accent-6.png
new file mode 100644
index 0000000000..6253da7602
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-6.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-7.png b/static/images/design-system/fondamenti/color-accent-7.png
new file mode 100644
index 0000000000..d8a163b6a0
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-7.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-8.png b/static/images/design-system/fondamenti/color-accent-8.png
new file mode 100644
index 0000000000..fdeaf92109
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-8.png differ
diff --git a/static/images/design-system/fondamenti/color-accent-9.png b/static/images/design-system/fondamenti/color-accent-9.png
new file mode 100644
index 0000000000..0325295897
Binary files /dev/null and b/static/images/design-system/fondamenti/color-accent-9.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-1.png b/static/images/design-system/fondamenti/color-blue-1.png
new file mode 100644
index 0000000000..5b9bfe8f45
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-1.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-10.png b/static/images/design-system/fondamenti/color-blue-10.png
new file mode 100644
index 0000000000..331ed30979
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-10.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-2.png b/static/images/design-system/fondamenti/color-blue-2.png
new file mode 100644
index 0000000000..2b9aeaa1b5
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-2.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-3.png b/static/images/design-system/fondamenti/color-blue-3.png
new file mode 100644
index 0000000000..d1f8464a06
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-3.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-4.png b/static/images/design-system/fondamenti/color-blue-4.png
new file mode 100644
index 0000000000..4bb01eb327
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-4.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-5.png b/static/images/design-system/fondamenti/color-blue-5.png
new file mode 100644
index 0000000000..16adff7eb8
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-5.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-6.png b/static/images/design-system/fondamenti/color-blue-6.png
new file mode 100644
index 0000000000..a0eac15b41
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-6.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-7.png b/static/images/design-system/fondamenti/color-blue-7.png
new file mode 100644
index 0000000000..1394389784
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-7.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-8.png b/static/images/design-system/fondamenti/color-blue-8.png
new file mode 100644
index 0000000000..bd28457b40
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-8.png differ
diff --git a/static/images/design-system/fondamenti/color-blue-9.png b/static/images/design-system/fondamenti/color-blue-9.png
new file mode 100644
index 0000000000..2bcabc905e
Binary files /dev/null and b/static/images/design-system/fondamenti/color-blue-9.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-1.png b/static/images/design-system/fondamenti/color-emerald-1.png
new file mode 100644
index 0000000000..6fee1a7fe5
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-1.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-10.png b/static/images/design-system/fondamenti/color-emerald-10.png
new file mode 100644
index 0000000000..f7d29cc32d
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-10.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-2.png b/static/images/design-system/fondamenti/color-emerald-2.png
new file mode 100644
index 0000000000..91ed6c88cf
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-2.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-3.png b/static/images/design-system/fondamenti/color-emerald-3.png
new file mode 100644
index 0000000000..8928304174
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-3.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-4.png b/static/images/design-system/fondamenti/color-emerald-4.png
new file mode 100644
index 0000000000..8928304174
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-4.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-5.png b/static/images/design-system/fondamenti/color-emerald-5.png
new file mode 100644
index 0000000000..ea8b5834be
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-5.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-6.png b/static/images/design-system/fondamenti/color-emerald-6.png
new file mode 100644
index 0000000000..2e15afc042
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-6.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-7.png b/static/images/design-system/fondamenti/color-emerald-7.png
new file mode 100644
index 0000000000..6651b600f1
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-7.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-8.png b/static/images/design-system/fondamenti/color-emerald-8.png
new file mode 100644
index 0000000000..f433bdf680
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-8.png differ
diff --git a/static/images/design-system/fondamenti/color-emerald-9.png b/static/images/design-system/fondamenti/color-emerald-9.png
new file mode 100644
index 0000000000..ad16392b4d
Binary files /dev/null and b/static/images/design-system/fondamenti/color-emerald-9.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-1.png b/static/images/design-system/fondamenti/color-gray-1.png
new file mode 100644
index 0000000000..60e2fa03b7
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-1.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-10.png b/static/images/design-system/fondamenti/color-gray-10.png
new file mode 100644
index 0000000000..f52d33aacb
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-10.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-2.png b/static/images/design-system/fondamenti/color-gray-2.png
new file mode 100644
index 0000000000..6ff01b8291
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-2.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-3.png b/static/images/design-system/fondamenti/color-gray-3.png
new file mode 100644
index 0000000000..f543fe725a
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-3.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-4.png b/static/images/design-system/fondamenti/color-gray-4.png
new file mode 100644
index 0000000000..93b0045564
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-4.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-5.png b/static/images/design-system/fondamenti/color-gray-5.png
new file mode 100644
index 0000000000..c14c357273
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-5.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-6.png b/static/images/design-system/fondamenti/color-gray-6.png
new file mode 100644
index 0000000000..dbd905adff
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-6.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-7.png b/static/images/design-system/fondamenti/color-gray-7.png
new file mode 100644
index 0000000000..a1e16ab562
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-7.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-8.png b/static/images/design-system/fondamenti/color-gray-8.png
new file mode 100644
index 0000000000..bd81bedde4
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-8.png differ
diff --git a/static/images/design-system/fondamenti/color-gray-9.png b/static/images/design-system/fondamenti/color-gray-9.png
new file mode 100644
index 0000000000..ddb7479261
Binary files /dev/null and b/static/images/design-system/fondamenti/color-gray-9.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-1.png b/static/images/design-system/fondamenti/color-orange-1.png
new file mode 100644
index 0000000000..e31d0194c4
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-1.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-10.png b/static/images/design-system/fondamenti/color-orange-10.png
new file mode 100644
index 0000000000..44b7a755cb
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-10.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-2.png b/static/images/design-system/fondamenti/color-orange-2.png
new file mode 100644
index 0000000000..c8186db6e1
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-2.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-3.png b/static/images/design-system/fondamenti/color-orange-3.png
new file mode 100644
index 0000000000..d224b30baa
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-3.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-4.png b/static/images/design-system/fondamenti/color-orange-4.png
new file mode 100644
index 0000000000..cb933fc55c
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-4.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-5.png b/static/images/design-system/fondamenti/color-orange-5.png
new file mode 100644
index 0000000000..cb933fc55c
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-5.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-6.png b/static/images/design-system/fondamenti/color-orange-6.png
new file mode 100644
index 0000000000..a9cb16492d
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-6.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-7.png b/static/images/design-system/fondamenti/color-orange-7.png
new file mode 100644
index 0000000000..165f9ca7ef
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-7.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-8.png b/static/images/design-system/fondamenti/color-orange-8.png
new file mode 100644
index 0000000000..3fbd5f9d5c
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-8.png differ
diff --git a/static/images/design-system/fondamenti/color-orange-9.png b/static/images/design-system/fondamenti/color-orange-9.png
new file mode 100644
index 0000000000..ca398bc971
Binary files /dev/null and b/static/images/design-system/fondamenti/color-orange-9.png differ
diff --git a/static/images/design-system/fondamenti/color-red-1.png b/static/images/design-system/fondamenti/color-red-1.png
new file mode 100644
index 0000000000..f0dc99e708
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-1.png differ
diff --git a/static/images/design-system/fondamenti/color-red-10.png b/static/images/design-system/fondamenti/color-red-10.png
new file mode 100644
index 0000000000..a4c6c074d9
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-10.png differ
diff --git a/static/images/design-system/fondamenti/color-red-2.png b/static/images/design-system/fondamenti/color-red-2.png
new file mode 100644
index 0000000000..cc29339ea2
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-2.png differ
diff --git a/static/images/design-system/fondamenti/color-red-3.png b/static/images/design-system/fondamenti/color-red-3.png
new file mode 100644
index 0000000000..1d17b5c469
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-3.png differ
diff --git a/static/images/design-system/fondamenti/color-red-4.png b/static/images/design-system/fondamenti/color-red-4.png
new file mode 100644
index 0000000000..d7a88b1719
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-4.png differ
diff --git a/static/images/design-system/fondamenti/color-red-5.png b/static/images/design-system/fondamenti/color-red-5.png
new file mode 100644
index 0000000000..ddbb03dc55
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-5.png differ
diff --git a/static/images/design-system/fondamenti/color-red-6.png b/static/images/design-system/fondamenti/color-red-6.png
new file mode 100644
index 0000000000..b15cd5aa58
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-6.png differ
diff --git a/static/images/design-system/fondamenti/color-red-7.png b/static/images/design-system/fondamenti/color-red-7.png
new file mode 100644
index 0000000000..ff0c849fab
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-7.png differ
diff --git a/static/images/design-system/fondamenti/color-red-8.png b/static/images/design-system/fondamenti/color-red-8.png
new file mode 100644
index 0000000000..67e2d8072b
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-8.png differ
diff --git a/static/images/design-system/fondamenti/color-red-9.png b/static/images/design-system/fondamenti/color-red-9.png
new file mode 100644
index 0000000000..be878aaeb4
Binary files /dev/null and b/static/images/design-system/fondamenti/color-red-9.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-1.png b/static/images/design-system/fondamenti/color-slate-1.png
new file mode 100644
index 0000000000..64d1e00457
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-1.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-10.png b/static/images/design-system/fondamenti/color-slate-10.png
new file mode 100644
index 0000000000..4a83829c97
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-10.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-2.png b/static/images/design-system/fondamenti/color-slate-2.png
new file mode 100644
index 0000000000..ff49d00da2
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-2.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-3.png b/static/images/design-system/fondamenti/color-slate-3.png
new file mode 100644
index 0000000000..e9c9433047
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-3.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-4.png b/static/images/design-system/fondamenti/color-slate-4.png
new file mode 100644
index 0000000000..027caa6934
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-4.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-5.png b/static/images/design-system/fondamenti/color-slate-5.png
new file mode 100644
index 0000000000..953caf1ba4
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-5.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-6.png b/static/images/design-system/fondamenti/color-slate-6.png
new file mode 100644
index 0000000000..cede4a8743
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-6.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-7.png b/static/images/design-system/fondamenti/color-slate-7.png
new file mode 100644
index 0000000000..ccc11ca24d
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-7.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-8.png b/static/images/design-system/fondamenti/color-slate-8.png
new file mode 100644
index 0000000000..a27d08824a
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-8.png differ
diff --git a/static/images/design-system/fondamenti/color-slate-9.png b/static/images/design-system/fondamenti/color-slate-9.png
new file mode 100644
index 0000000000..ee5fc86084
Binary files /dev/null and b/static/images/design-system/fondamenti/color-slate-9.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-accent-good.png b/static/images/design-system/fondamenti/colors-usage-accent-good.png
new file mode 100644
index 0000000000..8d993d3471
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-accent-good.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-accent-wrong.png b/static/images/design-system/fondamenti/colors-usage-accent-wrong.png
new file mode 100644
index 0000000000..b3b75c8c7a
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-accent-wrong.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-accent.png b/static/images/design-system/fondamenti/colors-usage-accent.png
new file mode 100644
index 0000000000..b540622a43
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-accent.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-good.png b/static/images/design-system/fondamenti/colors-usage-good.png
new file mode 100644
index 0000000000..98eaffcbe6
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-good.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-system-good.png b/static/images/design-system/fondamenti/colors-usage-system-good.png
new file mode 100644
index 0000000000..7a1dc64de9
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-system-good.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-system-wrong.png b/static/images/design-system/fondamenti/colors-usage-system-wrong.png
new file mode 100644
index 0000000000..4179cbc189
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-system-wrong.png differ
diff --git a/static/images/design-system/fondamenti/colors-usage-wrong.png b/static/images/design-system/fondamenti/colors-usage-wrong.png
new file mode 100644
index 0000000000..5965368ed9
Binary files /dev/null and b/static/images/design-system/fondamenti/colors-usage-wrong.png differ