view all blog posts

Start Building with Emulsify

Randy Oest
Randy OestAugust 10th, 2021

How you integrate a design system into your digital platform dictates how powerful the tool will be for your organization. Design systems are, at best, mistaken for style guides, pattern/image libraries, and other components of brand strategy. At worst, they are relegated to a dusty shelf, only to be trotted out occasionally for reference.

Discover the power of a strong design system to elevate your next website project—and, ultimately, your institutional brand.


Once you've chosen to implement a design system, it can be overwhelming figuring out where to begin. Our "Building with Emulsify" blog series walks you through the key steps that guarantee your organization will get the most out of Emulsify.

Part 1: Storybook

Start with the components—color, fonts, customizations, topography, and layouts—that set the foundation for your new design system. This first step defines a style guide for the rest of the build.

Part 2: Callout Component

And you're off designing! Part 2 constructs basic callouts and brand-friendly variations. As you introduce simple styling to your first components, you will start to see your brand expression come to life.

Part 3: Component Complexity

With your first few tasks completed, you will likely begin to run into common complexities in Drupal's component-driven development—specifically, passing component data between entities and Twig cache tags. Part 3 details these complexities and how to properly map your components for success.

Part 4: Component Grid

There is one final important piece of the component-driven puzzle: the grid. You’ll soon find out that creating a grid/row organism is easy, but these are the key ingredients to learn in the process.

Curious what Emulsify can do for your organization's digital platform? Give us a shout on Slack!

Emulsify is an open-source project that's free for everyone.
Watch an Overview