design-system.yaml

# INSTRUCTIONS
# folder structure:
# levelX.yaml < contents and settings
# levelX/ < folder with childrens
# important: each level has its dedicated template, from level1 to level4
#
# comments:
# #C to locate all editable content
# #M for links/navigation
# #I for images/media
# #AUTO for parts that will soon be automated, preferably
#
# comment with # to hide something
# delete with caution

# ————————————————————————————————————————————
# CREATEPAGE GATSBY
# ————————————————————————————————————————————
metadata:
  template:
    name: level1
  redirect_from:
    - /design-system-del-paese
    - /design-system-italia
    - /designsystem
    - /italia
  activeLabel: Design system

# ————————————————————————————————————————————
# SEO, OPENGRAPH
# ————————————————————————————————————————————
seo:
  name: "Design system .italia - Designers Italia" #C REMIND "- Designers Italia" #AUTO
  description: "L’insieme di indicazioni e risorse per progettare e realizzare siti e servizi pubblici di qualità, efficienti e accessibili." #C
  image: https://designers.italia.it/images/design-system/ds-beta-naming.png
  canonical: null
  pathname: /design-system/ #M

# ————————————————————————————————————————————
# CONTENT
# ————————————————————————————————————————————
components:

  # ///////////////////
  # HERO
  # ///////////////////
  hero:
    background: primary
    title: "Design system .italia" #C
    subtitle: "L’insieme di indicazioni e risorse per realizzare siti e servizi pubblici di qualità, efficienti e accessibili" #C
    pretext:
      icon:
        icon: sprites.svg#it-help-circle
        size: sm
      text: In breve
    text: | #C
      Qui trovi la documentazione di .italia, il design system del Paese: indicazioni su come iniziare, come contribuire, fondamenti e componenti, per creare il tuo progetto in linea con gli standard della Pubblica Amministrazione, che offra un’esperienza d’uso ottimale e che ti permetta di guadagnare tempo e risorse pur mantenendo alto il livello di qualità.
    img: /images/design-system-cover.svg #I
    alt: "" #C
    imgRatio: 4x3

    # KANGAROO: METADATA
    kangaroo:
      id: metadati-e-link
      titleSr: Metadati e link per approfondire
      tagsLabel: Parliamo di
      color: white
      icon:
        icon: sprites.svg#it-horn
        size: sm
        color: white
      tags: [Design system,Human centred design,Esperienza utente]

      # KANGAROO: CHILDREN SHORTCUTS
      dropdown:
        btnId: dropdownKang
        button:
          addonStyle: dropdown-toggle btn-dropdown
          label: Scopri il design system .italia #C
          iconRight: true
          icon:
            icon: sprites.svg#it-expand
            size: sm
            color: white
            addonClasses: icon-expand ms-2
        list:
          listItems: #AUTO
            - url: "come-iniziare/" #M
              label: "Come iniziare" #C
            - url: "come-contribuire/" #M
              label: "Come contribuire" #C
            - url: "fondamenti/" #M
              label: "Fondamenti" #C
            - url: "componenti/" #M
              label: "Componenti" #C

  # ///////////////////
  # INTRO
  # ///////////////////
  sectionIntro:
    section: true
    id: intro
    headingLevel: 2
    title: Istruzioni e mattoncini per la realizzazione di siti e servizi della PA #C
    background: null
    text: | #C
      Ti diamo il benvenuto in .italia, il primo design system italiano dedicato al mondo delle pubbliche amministrazioni e dei loro fornitori: questo è il punto di partenza per la progettazione di siti e servizi digitali pubblici di qualità, accessibili, inclusivi e fondati sulle reali necessità delle persone.
      Scopri l'insieme delle indicazioni, delle regole e delle risorse alla base delle interfacce digitali dei servizi pubblici italiani.
    moreButton: Leggi di più
    moreButtonClose: Chiudi
    moreText: | #C
      ### Risorse già testate e pronte all’uso
      Impara dall’esperienza altrui e non partire da zero. Tutte le risorse del design system ti danno la possibilità di risolvere le complessità, senza reinventare ogni volta la ruota, perchè già testate e validate e quindi pronte per essere utilizzate. Risparmia, guadagnando qualità.

      #### Qualità, accessibilità e inclusività
      Sono le tre parole chiave per realizzare siti e servizi per la Pubblica Amministrazione. Il design system .italia ti consentirà di farlo rispettando i requisiti previsti dalle [Linee guida di design](/normativa/linee-guida-di-design/), emesse secondo quanto definito dall’articolo 53 del Codice dell’amministrazione digitale.

  # ///////////////////
  # HIGHLIGHTS
  # ///////////////////
  titleText:
    title: Scopri e usa il design system .italia #C

  sectionsMedia: 
    - fullColumn: false # fullwidth vs normal
      full: true # large column vs normal
      noSpace: false 
      centered: true
      background: medium
      title: "Design system .italia v1: video promozionale"
      headingLevel: 3
      hiddenSectionTitle: true # just for screen reader
      id: "coverMedia"
      components:
        - name: MediaPlayer
          lang: it
          url: https://youtu.be/Ys5Kxfdvedg
          poster: /images/community/media-thumbnails/20241021-design-system-italia.jpg # xxx
          subtitles: /files/community/subtitles/20241021-design-system-italia.vtt # xxx
          trascriptionHeadingLevel: 4
          trascriptionLabel: "Trascrizione"
          trascriptionLabelEN: "Transcription"
          trascription: |

            Scarica la [trascrizione in formato ODT](/files/community/subtitles/20241021-design-system-italia.odt)

            ----

            ##### Design system .italia

            Caselle di testo, pulsanti, menu a tendina
            sono alcuni degli elementi più semplici
            di app e siti web.

            Eppure nei servizi pubblici digitali
            componenti come questi sono fondamentali,
            perché consentono alle persone di esercitare i propri diritti
            senza escludere nessuno.

            Il digitale sta cambiando il volto della Pubblica Amministrazione
            e il design system .italia ha un ruolo fondamentale
            in questa trasformazione, perché getta le fondamenta
            per rendere coerenti le esperienze di utilizzo
            dei servizi pubblici digitali, 
            definendone identità, linguaggio e interazioni.

            In pratica è un insieme di indicazioni e risorse
            per realizzare interfacce usabili e accessibili.
            Contribuendo così a una Pubblica Amministrazione più vicina
            semplice e utile per le persone.

            Nel design system .italia infatti c'è tutto quello che serve
            per progettare, prototipare e sviluppare piattaforme digitali
            con più efficacia, minor tempo e costi.
            Dalle indicazioni pratiche su come scrivere i testi
            alle stringhe di codice pronte all'uso.

            È per tutti perché open source: tutti lo possono usare.
            È di tutti perché costruito con l'aiuto della community di Designers Italia.
            Tutti possono contribuire al suo miglioramento.

            Oggi sono già migliaia gli enti che usano il design system .italia,
            ed è importante che domani siano ancora di più.
            Perché è un diritto di tutte le persone poter interagire con siti
            e servizi pubblici digitali di qualità.

            Designers Italia è un progetto a cura del Dipartimento per la Trasformazione Digitale e dell'Agenzia per l'Italia Digitale.
            
  # —
  # HIGHLIGHT LOOP
  # —
  highlightsLoop1 :

    # —
    # HIGHLIGHT BIG IMG
    # —
    - title: Come iniziare #C
      id: come-iniziare
      # img: /images/400x300.png #I
      # alt: Alt lorem ipsum #C
      headingLevel: 3
      background: light # null | light | medium | dark
      big: false
      specular: true
      subtitle: Scopri i primi passi da compiere per progettare e sviluppare soluzioni utilizzando il design system .italia #C
      buttons: #C #I
        - label: Scopri come iniziare #C
          btnStyle: primary
          url: "come-iniziare/" #M
          addonStyle: mb-3
        - label: Per designer #C
          btnStyle: outline-secondary
          url: "come-iniziare/per-designer/" #M
          addonStyle: mb-3
        - label: Per sviluppatori #C
          btnStyle: outline-secondary
          url: "come-iniziare/per-sviluppatori/" #M
          addonStyle: mb-3
        - label: Per responsabili progetto #C
          btnStyle: outline-secondary
          url: "come-iniziare/per-responsabili-progetto/" #M
          addonStyle: mb-3
        
    # —
    # HIGHLIGHT
    # —
    - title: Fondamenti #C
      id: fondamenti
      img: /images/design-system/fondamenti.jpg
      alt: ""
      headingLevel: 3
      background: null  # null | light | medium | dark
      big: true
      specular: true
      subtitle: "Princìpi e guide per progettare" #C
      text: | #C
       Tutto ciò di cui hai bisogno per progettare in modo inclusivo e accessibile. A partire dalla terminologia, dal linguaggio e dal tono di voce da utilizzare, per fare in modo che i contenuti siano comprensibili per tutte le persone. Fino a scoprire come impostare griglie, dimensioni, immagini e illustrazioni per migliorare l’esperienza d’uso.
      buttons: #C #M
        - label: Scopri i fondamenti
          btnStyle: primary
          url: "fondamenti/"
          addonStyle: mb-3

   # —
    # HIGHLIGHT
    # —
    - title: Componenti #C
      id: componenti
      img: /images/design-system/componenti.jpg #I
      alt: "" #C
      headingLevel: 3
      big: true
      background: light
      specular: false
      subtitle: "Gli elementi per realizzare l’interfaccia" #C
      # numbers: #C #I
      #   items:
      #   - icon: sprites.svg#it-tool
      #     number: "55"
      #     label: Componenti
      #   - icon: sprites.svg#it-tool
      #     number: "1800"
      #     label: Varianti
      text: | #C
        Una libreria completa di elementi pronti per essere utilizzati per creare un’interfaccia utente che offra un’esperienza d’uso ottimale. Ogni componente garantisce accessibilità, inclusività e usabilità, senza riservare brutte sorprese.
      buttons: #C #M
        - label: Scopri i componenti
          btnStyle: primary
          url: "componenti/"
          addonStyle: mb-3

    # —
    # HIGHLIGHT BIG IMG
    # —
    - title: Come contribuire #C
      id: come-contribuire
      # img: /images/400x300.png #I
      # alt: Alt lorem ipsum #C
      headingLevel: 3
      background: null # null | light | medium | dark
      big: false
      specular: true
      subtitle: Scopri i passi da compiere per contribuire al design system .italia #C
      buttons: #C #I
        - label: Scopri come contribuire #C
          btnStyle: primary
          url: "come-contribuire/" #M
          addonStyle: mb-3
        - label: Per la documentazione #C
          btnStyle: outline-secondary
          url: "come-contribuire/per-la-documentazione/" #M
          addonStyle: mb-3
        - label: Per il design #C
          btnStyle: outline-secondary
          url: "come-contribuire/per-il-design/" #M
          addonStyle: mb-3
        - label: Per lo sviluppo #C
          btnStyle: outline-secondary
          url: "come-contribuire/per-lo-sviluppo/" #M
          addonStyle: mb-3

    # # —
    # # HIGHLIGHT BIG IMG
    # # —
    # - title: Design pattern #C
    #   id: design-pattern
    #   headingLevel: 3
    #   background: medium # null | light | medium | dark
    #   big: false
    #   specular: true
    #   subtitle: Modelli di progettazione pronti all’uso che ti permettono di trovare la soluzione al problema perchè già efficacemente testati in situazioni simili
    #   text: |
    #     _In stesura_
        
    # # —
    # # HIGHLIGHT
    # # —
    # - title: Showcase #C
    #   id: showcase
    #   headingLevel: 3
    #   big: false
    #   background: dark
    #   specular: true
    #   subtitle: I progetti più significativi realizzati con il design system del Paese #C
    #   text: | #C
    #     _In stesura_

  # # —
  # # IMAGE COVER WITH ICONS
  # # —
  # imageIcons: #I
  #   image: /images/400x300.png
  #   alt: Alt lorem ipsum #C
  #   # icons:
  #   # - icon:
  #   #     icon: sprites.svg#it-presentation
  #   #     color: white
  #   # - icon:
  #   #     icon: sprites.svg#it-telephone
  #   #     color: white
  #   # - icon:
  #   #     icon: sprites.svg#it-piattaforme
  #   #     color: white
  #   # - icon:
  #   #     icon: sprites.svg#it-video
  #   #     color: white
  #   images:
  #   - img: /images/conversation.svg
  #     alt: Alt lorem ipsum #C
  #   # - img: /images/conversation.svg
  #   #   alt: Alt lorem ipsum #C

  # —
  # HIGHLIGHT WITH CARDS
  # —
  highlightCards:
    id: novita
    title: Le ultime notizie e gli approfondimenti sul design system .italia #C
    # text: 
    headingLevel: 3
    background: light
    col4: false # FALSE notizie + Medium | TRUE eventi + media

    # CARDS
    cards:

      - title: "Selezionati nell’ADI Design Index, un passo verso il Compasso d’Oro"
        headingLevel: 4
        customCol: col-lg-4
        text: "UI Kit Italia e il Modello ASL selezionati tra le eccellenze del design italiano nell’ADI Design Index 2024"
        img: /images/community/20241104-adi-design-index.png
        alt: ""
        imgRatio: 21x9
        imgPlaceholder: false
        fullHeight: true
        rounded: true
        url: "/community/notizie/20241104-adi-design-index/"
        dateInfo: 04 novembre 2024
        tags: [Design system, Modelli di sito, UI Kit, Cultura progettuale]
        
      - title: ".italia versione 1: l’inizio di una nuova era per i servizi digitali pubblici"
        headingLevel: 4
        customCol: col-lg-4
        text: "Il design system del Paese matura, offrendo strumenti sempre più completi e affidabili per realizzare servizi accessibili e usabili"
        img: /images/community/20241021-design-system-italia.jpg
        alt: ""
        imgRatio: 21x9
        imgPlaceholder: false
        fullHeight: true
        rounded: true
        url: "/community/notizie/20241021-italia-versione-1/"
        dateInfo: 21 ottobre 2024
        tags: [Design system, Progettazione interfaccia, Sviluppo interfaccia, UI kit, Prototipazione, Open source]

      - title: "Verso Design system .italia: dalle origini al design system aperto della PA"
        headingLevel: 4
        customCol: col-lg-4
        img: /images/community/articoli-di-approfondimento/20240522-verso-design-system-italia-dalle-origini-al-design-system-aperto-della-pa.png
        alt: ""
        imgRatio: 16x9
        imgPlaceholder: false
        fullHeight: true
        rounded: true
        url: https://medium.com/designers-italia/verso-design-system-italia-dalle-origini-al-design-system-aperto-del-paese-66a2d5af6654
        blank: true
        externalLink:
          label: Leggi su Medium
          screenReaderText: " (si apre in una nuova finestra)"
          icon:
            icon: sprites.svg#it-external-link
            size: xs
        moreInfo: di Daniele Tabellini
        tags: [Design system, Interfaccia utente, Accessibilita]


  # # —
  # # HIGHLIGHT LOOP
  # # —
  # highlightsLoop2 :