# 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)