About the Pattern Library

The MailChimp Pattern Library is a byproduct of our move to a more responsive, nimble, & intuitive app.

Over the course of two full redesigns and our recent navigation refresh, we've worked to distill most of the MailChimp interface into a set of atomic pieces, forming the pattern library you see here. By documenting and assembling a reference site of our patterns, we were able to speed up our process and solve some internal communication problems. A common lexicon of code and UI elements benefits us in a few ways:

We can build consistently, focusing our energy on workflows and logic, not web forms and list items.

We can reuse code instead of reinventing the wheel or roping in an engineer.

We can see all of our patterns in one place, quickly revealing maintenance issues.

Our pattern library is both a learning tool and a compass to correct our course as we build new things. We share our work here to help others on a similar path.

Just to be clear, this Pattern Library isn’t meant to be a UI framework like Bootstrap—it’s not a definitive guide on how a web application should be built. It’s tailored specifically to our needs, so if you attempt to use it as a foundation for a future project your mileage may vary. Many of the ideas in our library are a greatest hits collection of ideas others have pioneered that we’ve adapted to meet our own challenges. Modify and mangle at will, but know this is not a supported system—it’s a living, learning library.

Constant change, careful growth

We believe iteration is a vital part of the design process. Being able to change fast requires both an efficient workflow and a well defined collection of reusable parts that can assemble new interfaces quickly, without accruing new technical or design debt.

We guard our pattern library jealously, and add new patterns only when the case for doing so is sound. New patterns come at a high cost—they require new design elements, additional code, maintenance, and they increase the cognitive load on users.

Bibliography

We lifted code and inspiration from the work of these brilliant people, to whom we're tremendously grateful.