Service

Design systems and theming

Component libraries built as Single Directory Components, documented in Storybook, and used by the site rather than filed next to it.

What you get

  • Component library as Single Directory Components
  • Storybook with accessibility addon
  • Base theme and per-brand sub-themes
  • Twig and JSX story parity
  • Asset build pipeline wired into CI
  • Component documentation for editors

A design system earns its cost when the same component is used in fifty places and changing it is one edit. It stops earning when the library and the site drift apart — when Storybook shows one button and production renders another.

So the components in Storybook are the components the site renders: the same Twig, the same props, the same schema. Drupal 11's Single Directory Components make that practical, with each component's template, schema, styles and behaviour living in one folder.

This site is built that way. Its component library is at web/themes/custom/zenosoft/components, and every section you have scrolled past came out of it.

Questions we get asked

Usually not. A component layer can be introduced alongside an existing theme and grown section by section, which is also how you keep the project fundable — each phase ships something.

Part of it. Components are the right place to get keyboard behaviour, focus order and labelling right once, and Storybook's accessibility addon catches regressions where they are cheap to fix.