Costruire un Design System Accessibile con l’approccio CSS APIs

Abstract

Un design system è fondamentale per garantire coerenza, scalabilità e accessibilità nei prodotti digitali. Ma come si costruisce uno da zero, assicurando flessibilità e manutenibilità? CSS Custom Properties e CSS Layers offrono una combinazione potente per definire una base strutturata e gestibile, esponendo CSS API chiare per override esterni. In questo talk esploreremo, grazie ad un’implementazione di esempio, come ottenere il massimo da un design system e il suo ruolo nella creazione di un’identità visiva. Parleremo di fondamenti come token di design, principi di atomic design e accessibilità, includendo tipografia, spaziature, palette colori, motion guidelines e strategie per dark mode, e accent themes. Inoltre parleremo di test per garantire l’integriità del design, come visual regression testing e pixel diffing.