Drupal CMS, born out of the Starshot Initiative, has been a major undertaking with many sub-initiatives and focused tracks. One huge piece of the puzzle is Experience Builder (XB) which, among other things, lets you build flexible landing pages using easy and intuitive drag-and-drop tools.

At DrupalCon Barcelona, the Driesnote and the XB session demonstrated how a design system can be used to create a landing page for your website. Those demos looked so amazing, some people didn’t even think they were real. Believe me, they were!

As the project and tech lead for the Starshot Demo Design System project that helped power the Barcelona demos, I got a unique opportunity to be at the bleeding edge of XB’s early development. We took the CivicTheme Design System and extended it for the demo to make it the first design system on Experience Builder.

Let’s dive in and understand what it takes to adapt a design system to work with XB and what you should consider when creating new design systems. We’ll explore:

- History and benefits of design systems and reusable components
- Approaches for creating Single Directory Components (SDCs)
- Thinking about component architecture, props, and slots from a UX perspective
- Trade offs when using specialized vs generalized components
- How to leverage all the power of XB, now and in the future

Experience Builder is a game changer.

Add a robust design system and launch your website into hyperdrive!