Four Kitchens

Emulsify Design System and Gatsby

You need website stakeholders to access, understand, and implement the design elements they need for any project. Enter Emulsify, which harnesses the capabilities of Gatsby to deliver a full-service style guide that democratizes digital development.

The problem

For complex organizations, managing digital development poses an assortment of challenges. Whether you work at a university or a corporation with multiple subsidiaries, you need to establish design standards for a core website that provides an overarching experience for your audience

In addition, you have to support the divergent demands of every department. Often, each of these teams will require websites that are distinctive but must simultaneously remain visually consistent with the organization. Your team can use a component library to build new projects, but the user experience is often confusing to anyone without development skills

IT teams often struggle to empower teams to create projects that suit their department’s needs and conform to established design guidelines. Plus, as your websites grow, the required lead time to onboard new developers and resolve the production bottleneck grows longer. Lacking a comprehensive, centralized resource to consult, new hires are slow to acclimate to your organization’s design and development practices

As demand for digital features grows, your stakeholders tap into their budgets to outsource their unmet design needs. Quickly, your website properties become the Wild West as departments publish new features that lack the feel and functionality of your site. Worse than that, you run the risk of legal consequences as your organization’s established standards for accessibility compliance go overlooked.

The solution

Four Kitchens developed Emulsify Design System to resolve issues around quickly developing new landing pages and features while ensuring design consistency. But more than providing a documentation layer between your technology stack and UI, Emulsify provides organizations with a single source of truth for every digital project

Emulsify and Gatsby style guide: The documentation layer
Emulsify’s documentation layer between your technology stack and UI provides organizations with a single source of truth for every digital project.

Along with describing each digital component used by your digital properties, Emulsify includes implementation instructions in a branded, clearly designed interface. Not only can your organization access and implement all the resources to create a web page, but each component is also presented in a way that’s understandable and flexible to every member of your team.

How Gatsby themes fuel Emulsify as a style guide generator

Based on the development framework React, Gatsby recently introduced themes. More flexible than the platform’s pre-configured starters, these plugins resolve the issue of tying your site’s frontend with its technology stack

Rather than forcing organizations to worry about overwriting their UI during platform updates, themes allow your site’s configuration to become an installable package. As a result, your site’s functionality can be managed as a standalone product and reused on other websites

Emulsify uses Gatsby’s themes to generate a style guide that your organization can use with any new website. Like installing a WordPress plugin or a Drupal module, you can apply your style guide to establish a framework for development. With the power of Gatsby, Emulsify allows developers to maintain a “middle layer” between your site’s frontend and backend without impacting your existing UI.

Emulsify levels the playing field across your organization

At complex organizations, some departments may not have the same amount of resources in terms of their digital development capabilities. For example, the business school at a large university may have the funding and staff to create better web experiences. Conversely, a smaller college within the university tied to the arts may not enjoy the same flexibility

Emulsify allows your teams to share resources across your entire organization. When a development team from one department creates a new feature, it’s added to the style guide with documentation that outlines its use. Plus, with a style guide providing guardrails, you can rest easy knowing each component will comply with design and accessibility standards.

Emulsify’s style guide capabilities are customizable and flexible

A design system with Emulsify’s style guide generation capabilities depends on wide adoption. In contrast with a traditional component library, you can ensure your style guide looks aligned with the organization it serves

Gatsby and Emulsify style guide: organizational alignment
Achieve true organizational alignment with a style guide that can be easily adopted across your teams.

Gatsby’s capabilities allow your style guide’s UI to remain separate from its theme. Consequently, you can customize your style guide’s look and feel to ensure it becomes an integral part of your organization

Designers and developers love a component library like Storybook, but its UI is limited to a specific purpose. With Emulsify, your style guide will serve your organization while also making sense to more users such as content managers and executives.

Emulsify streamlines content creation and development

In addition to extending the reach of your development resources while allowing for much-needed control, Emulsify also supports writing content. The design system now supports Markdown to allow your site editors to incorporate text into your organization’s style guide. But through the plugin capabilities of Gatsby, Emulsify will also support content from WordPress, Drupal, and Contentful going forward

Gatsby’s extensive capabilities are at the root of Emulsify’s ability to organize and centralize your organization’s development. Instead of waiting for new projects to be built, your teams are empowered to create components that are consistent with your design. Plus, each new feature your teams develop will remain accessible for every audience

If this powerful meeting point of flexibility, customizability, and security sounds like what your organization needs, let’s talk.