Four Kitchens is thrilled to announce the official release of the new version of Emulsify—Emulsify Design System! Emulsify® is a free, open-source website design system that combines a robust build system, component library, and style guide. Emulsify helps organizations scale their designs across multiple properties while reducing cost, streamlining workflows, and improving accessibility.

The Emulsify build system—a development environment and component library powered by Storybook and Webpack—enables design and development teams to save time by creating reusable, customizable components and automating accessibility testing. Organizations can also use the new Emulsify to create a Gatsby-powered style guide that documents best practices for component usage, branding guidelines, and more. Emulsify supports projects in multiple development languages.

Emulsify Drupal

Emulsify Drupal is a component library, build system, and Drupal 8 theme powered by Storybook and Webpack. This is the replacement for the original Emulsify, maintaining all the same benefits like component-driven development, atomic design organization, and Twig functions for easily applying BEM styles (and more!), while benefitting from the new features of Storybook and Webpack. We recently released the beta version of Emulsify Drupal, and it is ready to be actively used in projects. We’re also actively working on similar starter projects for other environments like WordPress and React.

Emulsify Gatsby theme

The Emulsify Gatsby theme is a new addition to the Emulsify ecosystem that can generate a fully customizable style guide powered by Gatsby, Markdown/MDX, and Theme UI. Create documentation pages using Markdown or MDX, including pages for your components. You can easily showcase your project’s components using built-in Storybook support and syntax highlighting for code documentation. With the power of Gatsby themes and Theme UI, you can customize anywhere—from simple CSS changes to full template overrides for a custom style guide.

We recently released a working alpha version of this project, and aim to have a beta within the next couple of months. We’re also aiming to support other content sources besides Markdown—like Drupal, WordPress, and Contentful—in future updates. 

See Emulsify in action

The new version of Emulsify was presented at MidCamp in March 2020. Web Chefs Evan and Brian walked attendees through the new features using our fictional “Western Pennsylvania University” example to show how higher ed institutions can benefit from a design system. Watch the video below to see whole presentation:

Or use the links below to jump to a specific section of the video: 

  1. Definition of a component library (1:03)
  2. Breakdown of the new Emulsify component library (1:43)
  3. Definition of a design system (7:27)
  4. Demo of Emulsify Design System in action (14:06)

Get started

Ready to build a design system for your organization? Check out the links below to get started with Emulsify:

Sign up for the Emulsify newsletter at Emulsify.info to stay up to date with development news.

Looking for help building a design system or want to learn if Emulsify is right for your organization or university? Contact the Web Chefs.