Design system è una parola che suona enterprise, da Google o Airbnb. In realtà è un concetto semplice: un set di componenti e regole riutilizzabili che rendono il sito coerente e facile da far crescere nel tempo. Per un sito PMI italiano da 6-10 pagine, un design system ben dimensionato fa la differenza tra un progetto che scala con ordine e uno che diventa un Frankenstein di pagine disomogenee. La domanda non è 'mi serve?', ma 'quanto grande deve essere?'.
Un design system è il contratto visivo tra te e chi lavorerà sul sito dopo di te. Anche se quel 'dopo' sei tu stesso tra sei mesi.
Cosa include un design system minimo
Per una PMI non serve quello che hanno Google o IBM. Serve il minimo efficace: palette colori con token semantici (accent, canvas, ink, muted — ogni colore ha un nome di ruolo, non un valore hex), tipografia con massimo 3 font e una scala modular per dimensioni (clamp CSS o scale ratio), sistema di spaziatura coerente (4px o 8px come unità base, usata ovunque), 6-8 componenti UI core (button, input, card, nav, accordion, modal, badge, link). Niente di più complicato all'inizio. Tutto documentato in uno Storybook leggero o anche solo in un file Figma condiviso con naming consistente.
Il risparmio reale, sul lungo termine
Il vero beneficio emerge al mese 6-12 dopo il lancio. Quando aggiungi una nuova pagina (landing campagna stagionale, pagina servizio aggiuntivo, template blog), non riprogetti da zero: componi con i componenti esistenti. Quando cambi il colore accent (rebrand leggero), si aggiorna ovunque dall'unico token. Quando arriva un nuovo template dal marketing, il dev ci mette mezza giornata invece di tre giorni. Su 3 anni, un sito con design system cresce con costi incrementali; uno senza, ogni modifica richiede il tempo della prima.
Il rischio opposto: rigidità che uccide la creatività
L'errore simmetrico al 'niente design system' è 'design system troppo rigido'. Quando ogni elemento è bloccato in un template, il sito diventa noioso e prevedibile. Un buon design system lascia spazio a un 10-15% di eccezioni intenzionali: hero pages con layout custom, campagne seasonal con trattamento grafico unico, microsite di lancio prodotto con regole proprie. La differenza è tra regole e libertà controllata, non tra tutto-o-niente. Le aziende che fanno design system veri (come Airbnb DLS o Mailchimp Refills) hanno una sezione esplicita 'quando rompere le regole'.
Strumenti consigliati per PMI 2026
Non serve Figma Enterprise o pagine Notion infinite. Setup minimo: Figma file con componenti tokenizzati (auto-layout + variants), Tailwind CSS con custom theme (tokens in `tailwind.config.ts`), Storybook leggero per la documentazione visuale (opzionale, non obbligatorio sotto le 15 componenti). Se usi Next.js come noi, shadcn/ui è un ottimo punto di partenza — 40+ componenti base già tokenizzati che puoi modificare senza essere vincolato a una libreria esterna. Evita Material UI per siti brand-critical: i componenti sono ottimi ma trasformano il tuo sito in 'quello di Google' se non riskini pesantemente.
Quando ha senso investire in un design system
Se rispondi sì a 3+ di queste, è investimento sicuro.
- Il sito avrà almeno 8-10 pagine al lancio o nei primi 12 mesi.
- Più persone editeranno il sito (content team, marketing, dev esterni).
- Prevedi landing page multiple per campagne ads stagionali.
- Il brand ha regole visive già definite che vuoi rispettare ovunque.
- Vuoi ridurre i tempi di sviluppo delle nuove pagine del 40-60%.
- Pianifichi di rifare il sito tra 18-24 mesi: un design system ora rende il rifacimento più economico.
Conclusione
Design system per PMI è il 10% degli strumenti e il 90% della disciplina di applicarli. Non serve l'infrastruttura di un'enterprise, serve rigore nel riutilizzare gli stessi 6-8 componenti invece di reinventarli ogni volta. Il sito che ne risulta è coerente, veloce da aggiornare, economico da mantenere. Senza, ogni modifica costa di più del necessario e il sito invecchia velocemente — anche se graficamente è bello quando lo lanci. Il design system è l'investimento che ripaga dopo il secondo anno, non il primo.
- #design system
- #web design
- #componenti UI
- #PMI
