Design systems are a great way to streamline the web development process and ensure consistency across different applications by documenting shareable UI artefacts. However, implementing a design system in a Drupal theme is challenging.

First, the implementation should not be tied to the business modeling or application state, which would limit its usability and portability. We need UI oriented, front-developer friendly, declarative formats to describe every parts of the design system.

Nowadays, we are fortunate to have SDC for UI components, and an API for icons is coming soon to Core, but design systems are broader than that. So, we also need to describe: styles utilities & helpers, grid & layout systems, icon packs, swappable modes, variables… All this in a Drupal theme.

Finally, this implementation has to be fully available in the Drupal admin UI, within the display builders, without any glue or workaround, by exposing the design system directly to the Drupal API.

Such a full and proper design system implementation will benefit to your theming work, by dramatically increasing its reusability, maintainability & productivity.

As the co-maintainer of SDC, the author of the new Icon API, and the leader of the UI Suite initiative, I will show you how to achieve that step by step, with examples from public design systems (Bootstrap, DaisyUI, USWDS...) and we will discover together what does it mean for the future of Drupal theming and display building.