Building a Versatile Design System for Pacific Data Hub

An in-depth exploration of how we crafted a comprehensive design system for the Pacific Data Hub that can operates as both a native Drupal theme and a headless Drupal solution using Next.js components. Leveraging Figma for collaborative design and Bootstrap for responsive and accessible components, we developed a unified system presented through two Storybooks—one that documents the React/Next.js components and another generated from Twig templates within the Drupal theme.
We utilised elements from numerous Bootstrap 5, React, and Drupal open source projects to weave this comprehensive solution together, and the result is a hugely time-saving starter kit for a range of dashboard and web application needs.