The Natural History Museums of Los Angeles County
NHMLAC sought to unify their brand across four websites. To do this, we built a themeable component-based design system and flexible Drupal templates to develop a consistent but evolving brand.
An interface inventory
Before jumping into code to build what we knew would become a large system, we conducted an exhaustive interface inventory process to identify common styles and components as well as remove stray styles and refine inconsistencies across the design.
The result of this was a clear system of components, their variants, and the color and typographic themes that could be applied to them.
A living styleguide
A design system can take many forms. It can be a series design files, static front-end components separate from production code, or it can be a living component library directly integrated into the production product. We opted for the latter approach, using Twig in Fractal to build our components, and then directly importing the same Twig files into our Drupal templates. This direct use of the styleguide in production code means the two will never drift apart, an issue that is hard to avoid in the other approaches.
