Presentazione

Regione Toscana Design System (RTDS)

RTDS è il design system di Regione Toscana per siti informativi e servizi digitali: token visivi, componenti UI e pattern di layout condivisi, pensati per essere riusati su prodotti diversi mantenendo coerenza visiva e accessibilità.

Il CSS si distribuisce oggi da pacchetto ZIP con percorso locale — la distribuzione via CDN versionata è l’assetto a regime, ancora in fase di definizione con enti e partner (vedi Personalizzazione del tema). Il markup si integra copiando gli snippet HTML pronti all’uso di ogni componente, reperibili sia dal pannello HTML di questa UI sia dai file già renderizzati nella build statica (dist/core/components/raw/render, dist/servizi/components/raw/render) — è oggi la modalità principale con cui CMS e applicazioni adottano RTDS. Nunjucks e Tailwind CSS v3 sono gli strumenti con cui la libreria è sviluppata internamente.

Come è organizzato

La libreria è divisa in tre parti:

Parte Cosa contiene
Core Token di design, componenti generici (atoms, molecules, organisms, templates) e i componenti specifici del Portale Istituzionale RT
Servizi Widget e componenti applicativi per i servizi digitali (widget-box, widget-search, card-smart, file-upload…), in un’istanza Fractal separata
Fondamenta Le basi di design condivise da Core e Servizi: naming conventions, font, immagini, sprite SVG, personalizzazione del tema, accessibilità

Due ambienti Fractal separati

Core e Servizi sono due istanze Fractal indipendenti, con dev server e build distinti:

Istanza Dev server Build statica
Core npm run startlocalhost:3000 dist/core/
Servizi npm run start:servizilocalhost:3010 dist/servizi/

Le due istanze condividono la stessa cartella components/ — ogni componente è disponibile in entrambe via @handle.

Il dettaglio di questa architettura (cartelle condivise, dual Fractal, struttura di dist/) è documentato in Struttura delle cartelle.

Per iniziare