Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Data Visualization

Data helps us make informed decisions. Therefore, data should be clear; it should not be overly decorative and it should be presented in a meaningful way. Below are a few standards that we’ve set for telling visual data stories.

Charts

Stylistically, our charts and graphs draw inspiration from a more grown-up, editorial style.

Line Charts

Example of line chart figure 1 Example of line chart figure 2

Notes

Use solid lines to indicate actual trends in data. Use dotted lines for showing a general trait like an average or projection.

Lines should be 2pts in weight and straight, never curved.

Use dots on a line to highlight a selected data point.

Bar Charts

Example of bar graph figure 1 Example of bar graph figure 2 Example of bar graph figure 8

Notes

Don’t apply rounded corners.

The space between bars should always be 50% of the width of the bars.

Generally, categories in stacked bar charts should use one of our pre-configured categorical color combos. Avoid using the same hue to represent categories. If subcategories need to be made, use our hatch pattern if applicable.

Scatter Plot Charts

Example of a scatter plot figure 1

Notes

Use the color combos to determine the color of the points. Points should be 8px by 8px.

When using multiple sets or categories, cycle through multiple shapes so that the data can be more easily differentiated. Generally, the order is: circle, square, triangle, diamond, upside-down triangle.

Meter Charts

Example of meter charts figure 1 Example of meter charts figure 2

Notes

Data in these charts always add up to 100%. If there is more than one category represented, always use of the categorical color combos.

The layout can be unique from chart to chart but the bars themselves always have a height (or width if vertical) that’s a multiple of eight (or four but that is the exception).

Limit representation to fewer than six categories. If you must represent more than six categories, consider truncating data to include the top four categories and then include smaller data sets in an 'other' category.

Pie Charts Not recommended

Example of pie charts figure 1
Example of pie charts figure 1

Notes

Avoid using pie charts, as research shows this is not the most effective way of displaying and relating data. Instead, use a percent bar graph. If you must use a pie chart, always use a categorical color combo.

Palette

Categorical Color Combos

The colors for our complex charts come from our predefined categorical combos. Generally, we try to vary value, saturation, and hue between categories. When building a data story, choose from one of the established combos for visual harmony and accessibility optimization. Feel free to use more than one combo when creating multiple charts on a page.

Categorical Combo 1
Categorical Combo 4
Categorical Combo 2
Categorical Combo 5
Categorical Combo 3
Categorical Combo 6

Proto-palette

These colors are the building blocks we use to craft pre-defined combinations and sub-palettes within data visualization. We do not use these directly in charts and graphs. Using pre-defined groupings will help foster consistency, predictability, and accessibility. See the guides in each section to learn how to choose colors for specified usage.

Pumpkin hue spectrum
Based on Yam & Pumpkin
Apricot hue spectrum
Based on Squash & Apricot
Apple hue spectrum
Based on Cucumber & Apple
Teal hue spectrum
Based on Kale
Blueberry hue spectrum
Based on Cornflower
Eggplant hue spectrum
Dragonfruit hue spectrum
Based on Radish & Dragonfruit
Grey hue spectrum
Based on Parsnip & Peppercorn

Creating Categorical Color Combos

When choosing colors to create a new categorical combo, try to pick colors across the spectrum to make use of different hues, tints, and tones.

For accessibility, avoid a sequence that uses adjacent hues and be sure to pick a variety of lightnesses.

Color Spectrum Chart

Simple Data

When you need to use color to enhance a singular data point (like in a meter) use one of the pre-defined accent colors in this section.

If more than one color may be used to represent data, use one of the pre-defined categorical color combos.

When pairing our accent colors for accessibility, make sure the visual presentation has a contrast ratio of at least 3:1 against adjacent colors.

Apple

For the most part, Apple is used to convey ‘positive’ values or success.

It should not be used for conveying a progression. This includes things like representing completion of account setup, percentage of available sends or seats, etc.

Audience interaction example using the color Apple.

Plum

Plum represents itself as neutral. As such, use it for things that do not convey strong positive or negative values.

Subscriber graph example using the color Plum.

Apricot

Apricot also represents itself as neutral. As such, use it for things that do not convey strong positive or negative values.

Keep in mind that a similar color, Squash, often represents a 'warning' state. When using Apricot, ensure the association with a warning state isn't too strong.

Pumpkin

Pumpkin can carry a negative connotation. Use pumpkin sparingly, and as an accent to help when at-a-glance comparisons are needed.

Avoid using Pumpkin as the primary color when surfacing negative values in graphs and charts.

Open rate example using the color Pumpkin.

Parsnip

Parsnip is used as the background color to indicate 'unfilled' space. Use it to indicate the possible breadth of a value.

Open rate and map example using the color Parsnip.

Grids

X-Axis Baseline

The baseline (when applicable) is a 2pt, Peppercorn line.

The points are represented with ticks. Avoid getting too crowded with the x-axis labels. If need be, skip a few labels but keep the ticks so that the labels are legible.

If there is no ‘y’ dimension, it is appropriate to use a 1pt y-axis line (similar to a typical x-axis grid line).

Typical x-axis

Typical x-axis graph

X-axis without baseline

Graph of X-axis without baseline

Compressed x-axis

Graph of compressed x-axis

X-axis without y-axis

Graph of X-axis without y-axis

Y-Axis

The y-axis is usually represented with a label and a 1pt Peppercorn-a15 grid line.

Always label the lowest value, even if it’s 0. This will make clear whether the chart is truncating the y-axis data.

Graph of Y-axis example

Sample Spacing

Example of spacing in graph

Fly-over

Overview

The fly-over should not only activate on hover. It should present itself when a highlightable portion of a chart is selectable. On mobile, a user should be able to tap on a portion of the graph to make it appear.

The fly-over is not always necessary but is recommended unless there’s another piece of the UI that highlights the selected data and ties those two things together.

Flyover example

Flag

The flag is Peppercorn at 90% opacity. It should be centered at the data it points to and pinned to the highest reasonable point of a chart.

Pole

The pole is Peppercorn at 100% opacity and should be centered to the flag. In cases where the fly-over is near the edge of a chart, you may adjust the positioning of the flag on the pole.

If the chart has fewer than two items to call out, you may eliminate the pole and just use the flag.