A design system is fundamental to ensuring consistency, scalability, and accessibility in digital products. But how do you build one from scratch while ensuring flexibility and maintainability? CSS Custom Properties and CSS Layers offer a powerful combination to define a structured and manageable foundation, exposing clear CSS APIs for external overrides. In this talk, we will explore—through an example implementation—how to get the most out of a design system and its role in creating a visual identity. We will discuss fundamentals such as design tokens, atomic design principles, and accessibility, including typography, spacing, color palettes, motion guidelines, and strategies for dark mode and accent themes. Additionally, we will address testing to ensure design integrity, such as visual regression testing and pixel diffing.

Technical requirements: a medium understanding of HTML, CSS, and JavaScript.
Target audience: developers and designers interested in building accessible, scalable, and maintainable design systems.
Preferred session duration: 45 minutes.
The session includes practical examples, best practices, and a Q&A segment for further discussion.