Pa Design System Italia

• Generic Bootstrap 5 without PA context
• Private sector websites
• Accessibility-only audits
• Angular-specific implementation
• Backend/API development

Goals

• Produce interfaces citizens recognize as institutional and trustworthy
• Use Bootstrap Italia components as designed — don't reinvent what exists
• Ensure every page has clear purpose: what service, what action, what outcome
• Maintain visual and structural consistency across all pages of the same ente

Constraints

• Use Bootstrap Italia v2.x only — never mix with vanilla Bootstrap
• Titillium Web as only body font
• PA color palette from Bootstrap Italia variables — no custom brand colors on header/footer/primary actions
• Header: Slim Header + Center Header + Navigation (mandatory stack)
• Footer: standard PA footer (contacts, links, social, legal)
• Breadcrumbs on every page below homepage
• Forms: inline validation with Bootstrap Italia classes, not just on submit
• Icons: Bootstrap Italia SVG sprite only — not FontAwesome
• All assets self-hosted: CSS, JS, fonts, icons served from the project — no CDN in production. GDPR compliance requires no unnecessary third-party requests.
• Language: Italian, formal, clear, action-oriented — no marketing, no anglicisms
• CTAs state the outcome: "Invia la richiesta" not "Submit"

Input Minimi

• Type of ente (Comune, Regione, Ministero, ASL, Università)
• Services to expose
• Target users (cittadini, imprese, professionisti)
• Bootstrap Italia version

Check Before Acting

• package.json — Bootstrap Italia version
• Existing header/footer — standard PA patterns?
• Component usage — Bootstrap Italia or custom HTML?
• SCSS variables — customizations applied?

Checklist

New PA Site

1. Install: npm i bootstrap-italia
2. Load fonts via loadFonts() or CSS
3. Implement standard header (Slim + Center + Navigation)
4. Implement standard footer
5. Add breadcrumbs to every page
6. Build service pages (see examples/public-service-page-example.md)

Review

1. Header/footer compliance
2. Component usage correctness
3. Customization boundaries respected
4. Forms: inline validation, labels, feedback
5. See references/customization-boundaries-and-consistency.md

Gotchas

1. Mixing Bootstrap Italia with vanilla Bootstrap. Both loaded, CSS conflicts. Fix: use ONLY Bootstrap Italia — it includes Bootstrap 5. Remove separate Bootstrap dependency.

2. Custom colors breaking institutional identity. Ente "brand color" replaces PA primary blue. Fix: PA palette for header/footer/primary. Custom accent only for secondary elements.

3. Header without Slim Header. The top bar with ente name and governo.it link is mandatory. Fix: always include full stack: Slim → Center → Navigation.

4. Forms without inline validation. 15-field form, generic error at top on submit. Fix: is-valid/is-invalid/invalid-feedback inline next to each field.

5. Marketing language on service page. "Scopri i nostri fantastici servizi!" Fix: formal, clear. "Servizi per il cittadino" with action-oriented descriptions.

6. CTAs in English. "Submit", "Download" on Italian PA site. Fix: "Invia la richiesta di residenza", "Scarica il modulo".

7. Custom icons instead of Bootstrap Italia sprite. FontAwesome mixed in. Fix: use bootstrap-italia/dist/svg/sprites.svg.

8. No breadcrumbs. User from search has no context. Fix: breadcrumbs on every sub-page.

9. Multi-step process without Stepper. 4-step application as separate pages, no progress. Fix: use Bootstrap Italia Stepper component.

10. Assets loaded from CDN in production. Bootstrap Italia CSS/JS loaded from jsdelivr or unpkg. Violates GDPR — third-party requests expose user IP. Fix: npm i bootstrap-italia, serve from project. CDN only acceptable in development/prototyping, never in production PA sites.

Handoff

• After interface designed → kiro-builder for implementation
• After implementation → kiro-qa for compliance review
• If WordPress-based → load wordpress-theme-engineering
• After site ready → load geo-ai-visibility for discoverability

Memory Guidance

TotalRecall: Component usage decisions, customization boundaries, header/footer configs, form patterns Kore candidates: PA page templates across enti, Bootstrap Italia patterns, institutional navigation, form validation patterns Never save: Specific ente content, individual page text, CSS values from docs

When to Read Support Files

• Using components? Read references/bootstrap-italia-and-component-usage.md
• Building navigation/layouts? Read references/layout-navigation-and-public-service-patterns.md
• Customizing? Read references/customization-boundaries-and-consistency.md
• Building a service page? Read examples/public-service-page-example.md
• Building header/footer? Read examples/institutional-navigation-example.md
• Building forms? Read examples/form-and-feedback-example.md