nis2-agile/docs/VERIFICA_GAP_UI_AGID_BOOTSTRAP_ITALIA.md

NIS2 Agile — Verifica & Gap UI vs Standard AGID / Bootstrap Italia

Decisione (utente, 2026-06-11): NIS2 deve allinearsi allo standard AGID / Bootstrap Italia, lo stesso adottato dalla Console V2 di AgileHub (NON allo standard "AGI SaaS dark" Inter/#3B82F6 del piano MIGRATION_UI_V2.md, che resta superato da questa scelta). Regola (fonti certe): i token NIS2 attuali sono letti da public/css/style.css; i token AGID/Bootstrap Italia da fonti documentate (impl. AgileHub V2 + design system ufficiale). Ciò che non è verificato sul sorgente ufficiale è marcato [da verificare]. Nessun valore inventato. Stato: v1 · 2026-06-11 · Tipo: realizzativo (audit + piano).

---

0. TL;DR

• Verificato? Sì, ora: NIS2 (UI V1) NON è conforme ad AGID/Bootstrap Italia. Gap su 5 assi: palette, font, forme (radius/ombre), accessibilità WCAG AA, struttura header/footer PA.
• Distanza: media-alta. La UI attuale usa palette Material/Google (#1a73e8) + system font; AGID richiede Blu Italia #0066CC + Titillium Web + WCAG 2.1 AA + radius 4px.
• Strada consigliata: allineamento a livello di token in style.css (come ha fatto AgileHub con globals.css), NON riscrittura su framework — NIS2 è vanilla HTML/CSS/JS con ~20 pagine + sidebar JS-injected.
• ⚠️ Conflitto da chiudere: esiste un piano UI V2 alternativo (docs/MIGRATION_UI_V2.md, "AGI dark") incompatibile con questa scelta → va archiviato o esplicitamente sostituito.

---

1. Lo standard target — AGID / Bootstrap Italia

1.1 Cos'è (fonte: Designers Italia / AGID)

Bootstrap Italia è il design system ufficiale per i servizi digitali della PA italiana (Designers Italia, AGID), basato su Bootstrap. Obbligatorio l'aspetto coerente + accessibilità WCAG 2.1 AA per la PA.

1.2 Token chiave (impl. AgileHub V2 — verificati nei doc; ufficiali [da verificare] sul sorgente)

Aspetto	Valore target	Fonte
Primary	Blu Italia #0066CC	AgileHub V2 (agid_redesign) + BI ufficiale
Font testo	Titillium Web	AgileHub V2 + BI ufficiale
Font headings/serif	Lora [da verificare]	BI ufficiale (opzionale)
Font monospace	Roboto Mono [da verificare]	BI ufficiale
Radius	4px (flat, poche ombre)	AgileHub V2
Accessibilità	WCAG 2.1 AA (contrasto testo ≥4.5:1, UI/large ≥3:1)	obbligo PA
Componenti	header slim+main, footer istituzionale, card, .btn-primary, form BI	BI ufficiale [da verificare] esatti

Riferimento interno: AgileHub Console V2 = 167 schermate su /v2, build verde, globals.css + design token. LG231 ha il branch pilota feat/v2-pilot-bootstrap-italia. (Quindi esiste già un'implementazione suite da cui copiare i token.)

---

2. Stato attuale NIS2 (UI V1) — token reali (public/css/style.css, 2399 righe)

Token	Valore attuale	Famiglia
--primary	#1a73e8	Google/Material blue (≠ Blu Italia)
--secondary	#34a853	Google green
--warning	#fbbc04	Google yellow
--danger	#ea4335	Google red
--info	#4285f4	Google blue
--font-family	-apple-system, Segoe UI, Roboto…	system font (no Titillium, no Google Fonts caricati)
--sidebar-bg	#1e293b	dark slate
--content-bg	#f1f5f9	light
--card-shadow	ombre morbide multiple	non stile flat AGID
Neutrals	--gray-50…900 (Slate/Tailwind)	ok come scala, ma non i grigi BI

Struttura: ~20 pagine app, ognuna con un blocco <style> inline specifico; sidebar/topbar iniettate via JS (public/js/common.js → loadSidebar()); pagine standalone (login/register/onboarding/landing) senza sidebar. Nessun framework CSS.

---

3. Gap analysis (V1 → AGID/Bootstrap Italia)

#	Asse	Stato V1	Target AGID	Gap	Sforzo
1	Palette	Material (#1a73e8 + Google status)	Blu Italia #0066CC + palette BI	🔴 Alto — cambio primario + tutti gli stati	M
2	Tipografia	system font	Titillium Web (+ Lora/Roboto Mono)	🔴 Alto — caricare font + applicarlo globalmente	S
3	Forme	radius vari + ombre morbide	radius 4px, flat	🟠 Medio — normalizzare radius/ombre	S
4	Accessibilità WCAG 2.1 AA	non verificata (contrasti misti, es. testo grigio su bg)	obbligatoria	🔴 Alto — audit contrasti + focus visibili + alt/aria	M
5	Struttura PA	header/sidebar custom	header slim+main, footer istituzionale, componenti BI	🟠 Medio — opzionale se si resta token-level	M
6	CSS inline per-pagina	~20 blocchi <style>	token centralizzati	🟠 Medio — i colori hardcoded nelle pagine vanno ricondotti ai token	M

⚠️ Nota: il gap su WCAG AA non è solo estetico — è un requisito (PA + coerente coi principi di docs/PRINCIPI_AI_E_CONFORMITA_NORMATIVA.md). Va misurato, non assunto.

---

4. Strategia di adeguamento — 2 opzioni

Opzione A — Allineamento a livello di TOKEN (consigliata)

Riscrivere :root di style.css con i token AGID (Blu Italia, Titillium, radius 4px, grigi BI) + caricare Titillium Web, senza introdurre la libreria Bootstrap Italia. La maggior parte delle pagine usa già le var(--…) → cambiando il :root si propaga.

• ✅ Pro: rischio basso, zero backend (come MIGRATION_UI_V2), riusa l'impianto esistente, copiabile dai token AgileHub V2.
• ⚠️ Contro: NON è "Bootstrap Italia certificato" al 100% (componenti/markup restano custom); è "look AGID-compliant a token". I colori hardcoded nei <style> inline (#1a73e8 ecc.) vanno bonificati uno per uno.

Opzione B — Adozione libreria bootstrap-italia

Integrare il pacchetto ufficiale bootstrap-italia (CSS/JS) e rifare i markup con i componenti BI.

• ✅ Pro: conformità piena (componenti, accessibilità, header/footer istituzionali).
• ⚠️ Contro: riscrittura UI estesa (~20 pagine + sidebar JS), rischio regressioni, effort alto. Coerente solo se NIS2 si rivolge davvero a PA che esigono BI "vero".

Raccomandazione: partire da A (rapido, riallinea il 80% percepito), poi valutare B mirata sulle pagine pubbliche (landing/login) se serve la conformità formale PA.

---

5. Piano realizzativo (Opzione A)

Fase	Attività	Verifica
0	Recuperare i token AGID da AgileHub V2 (globals.css/tailwind) o dal branch feat/v2-pilot-bootstrap-italia di LG231 → single source of truth	token elencati
1	Font: caricare Titillium Web (self-host o Google Fonts), --font-family: 'Titillium Web', system-ui…	render su 3 pagine
2	Palette: :root → --primary:#0066CC + stati BI + grigi BI; mappare i vecchi nomi (--secondary/--info/--danger/--warning)	diff visivo
3	Forme: normalizzare radius→4px, ridurre ombre (flat)	componenti chiave
4	Bonifica inline: grep dei colori hardcoded (#1a73e8, #4285f4, #34a853…) nelle ~20 pagine → sostituire con var(--…)	grep = 0 hardcoded
5	WCAG 2.1 AA: audit contrasti (testo/grigi su bg), focus ring visibili, aria-*/alt mancanti → fix	report contrasti ≥ soglie
6	Verifica: build/serve, screenshot prima/dopo, check su login + 1 dashboard + 1 form; NO modifiche backend	pagine OK, 0 regressioni

Disciplina: zero backend (solo CSS/HTML/font/markup), commit incrementali, verifica visiva su pagina reale (non a memoria). Possibile farlo in worktree isolato (come il piano UI V2 esistente in /tmp/nis2-ui-v2) per non toccare la produzione finché non approvato.

---

6. Cosa serve da te / decisioni aperte

1. Opzione A o B? (consiglio A per iniziare).
2. Sorgente token: confermi che prendo i token AGID dall'implementazione AgileHub V2 (così NIS2 è identico alla suite) anziché dal Bootstrap Italia "vergine"? Se sì mi serve l'accesso al loro globals.css/tailwind (path o repo).
3. Archiviare MIGRATION_UI_V2.md (piano "AGI dark") che ora è in conflitto con questa scelta?
4. Scope: tutte le ~20 pagine o partire dalle pubbliche (landing/login/onboarding) + dashboard?

---

7. Riferimenti

• UI attuale: public/css/style.css, public/js/common.js (loadSidebar)
• Piano UI alternativo (in conflitto): docs/MIGRATION_UI_V2.md
• Impl. AGID suite: agile-services/docs/ (project_dashboard_v2_agid_redesign_2026_06_06), branch LG231 feat/v2-pilot-bootstrap-italia
• Design system ufficiale: Bootstrap Italia / Designers Italia (italia.it/designers) [da verificare] per token esatti
• Conformità/accessibilità: docs/PRINCIPI_AI_E_CONFORMITA_NORMATIVA.md (WCAG come requisito)