/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components), {Image} = _components;
  if (!Image) _missingMdxReference("Image", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["Last year, my team at SparkPost set out to craft a new color palette for our design system, ", _jsx(_components.a, {
        href: "https://design.sparkpost.com/",
        children: "Matchbox"
      }), ". With a new focus on accessibility, and a rapidly growing app, it was clear our palette needed a refresh."]
    }), "\n", _jsx(Image, {
      layout: "fill",
      src: "/images/ColorEvolution.png",
      caption: "SparkPost's color palette over the years",
      alt: "Growth and evolution of SparkPost's color palette over the years"
    }), "\n", _jsx(_components.h2, {
      children: "Colors are hard"
    }), "\n", _jsx(_components.p, {
      children: "Historically, we've always favored a limited palette with few color options. We believe that more choices encourage misuse and can lead to inconsistency in an interface."
    }), "\n", _jsx(_components.p, {
      children: "However, it became apparent that our design system didn't have what we needed to support a growing component library or our array of data visualizations, while meeting accessibility standards. We realized how demanding designing browser-based interfaces can be, where the smallest difference in a color can cause an interface to fail accessibility testing. Our palettes needed a redo – and here's how we did it."
    }), "\n", _jsx(Image, {
      layout: "fill",
      src: "/images/SampleVariance.png",
      caption: "A dropdown menu and date picker illustrating the amount of grays used in common UI elements",
      alt: "A dropdown menu and date picker illustrating the amount of grays used in common UI elements"
    }), "\n", _jsx(_components.h2, {
      children: "Grays"
    }), "\n", _jsx(_components.p, {
      children: "Neutrals are important because they provide visual cues and establish structure and hierarchy to interfaces. These colors will be used more than any other color scale, from typography to drawing boundaries, so it was important for us to get it right."
    }), "\n", _jsx(_components.p, {
      children: "We started with a gray scale of fourteen grays, with the intention of testing it and cutting it down. Using the HSB (hue-saturation-brightness) model, we created grays ranging from a brightness of 24 to 96, with even intervals in between. We chose to start our scale at 24, as opposed to a darker color, because our front end interfaces are predominantly bright and we needed lighter lights more than we needed darker darks."
    }), "\n", _jsx(Image, {
      layout: "fill",
      src: "/images/NeutralScales.png",
      caption: "We removed these muddy midtones",
      alt: "Grayscale showing midtones that we removed"
    }), "\n", _jsx(_components.p, {
      children: "After evaluating this scale with common UI elements and typography, we recognized the need to eliminate muddy midtones, which provide little to no contrast with other colors in the scale."
    }), "\n", _jsx(_components.h2, {
      children: "Midtones"
    }), "\n", _jsx(_components.p, {
      children: "Implementing fewer midtones lowers the risk of a designer or developer using a low-contrast color combination and maximizes the number of available accessible pairings."
    }), "\n", _jsx(Image, {
      layout: "fill",
      src: "/images/Chart.png",
      caption: "Our grayscale colors tested against each other for WCAG compliance",
      alt: "Chart showing our grayscale colors tested against each other for WCAG compliance"
    }), "\n", _jsxs(_components.p, {
      children: ["The chart above shows a color contrast ratios mapping of our grays against each other, highlighting the midtones we removed. We wanted to make sure that the neutrals we chose had a contrast ratio of at least 4.5:1 to our dark or light backgrounds in order to meet ", _jsx(_components.a, {
        href: "https://www.w3.org/TR/WCAG21/#contrast-enhanced",
        children: "WCAG AAA requirements"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Hues"
    }), "\n", _jsx(_components.p, {
      children: "When we were finally happy with our neutral grays, we applied the same brightness scale to our other hues. This ensures that, like our grayscale, our hues would have accessible color pairings within their spectrums. This involved countless hours of tweaking eighty different shades of colors, but the end result was well worth the effort."
    }), "\n", _jsx(Image, {
      layout: "fill",
      src: "/images/Grayscale.png",
      caption: "We used a white layer with the color blending mode to transform colors to a grayscale",
      alt: "Illustration on what a white layer with the color blending mode looks like"
    }), "\n", _jsx(_components.p, {
      children: "Through expanded scales of tints and shades, our designers and developers have the flexibility to consistently build complex interfaces. No more one-off or conflicting custom colors. Anyone who uses our design system has the palette needed to easily create color combinations of their own that are accessible."
    }), "\n", _jsx(_components.h2, {
      children: "Testing"
    }), "\n", _jsxs(_components.p, {
      children: ["With a full color palette in place, we then evaluated whether or not it would work for our users. We continued to tweak our colors through rounds of UI prototyping, and color-blind user interviews. Tools such as ", _jsx(_components.a, {
        href: "https://www.getstark.co/",
        children: "Stark"
      }), " and ", _jsx(_components.a, {
        href: "https://projects.susielu.com/viz-palette",
        children: "Viz Palette"
      }), " were incredibly helpful in this regard."]
    }), "\n", _jsx(_components.p, {
      children: "After testing and further refining our colors, we were confident we created a reliable color system that we could build UIs with."
    }), "\n", _jsx(Image, {
      layout: "fill",
      src: "/images/Examples.png",
      caption: "Example of SparkPost's new colors in use",
      alt: "UI mockups of SparkPost's new colors in use"
    }), "\n", _jsx(_components.h2, {
      children: "Closing Notes"
    }), "\n", _jsx(_components.p, {
      children: "We're really proud of all the work we've done to build a flexible and accessible design system color palette. The color foundations we've established not only improve the experience of all SparkPost users by providing accessible UIs, but help us iterate faster as designers and developers by using a consistent and flexible color system."
    }), "\n", _jsxs(_components.p, {
      children: ["If you want to learn more about our design system, visit our ", _jsx(_components.a, {
        href: "https://design.sparkpost.com/",
        children: "design system's website"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Resources"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3",
          children: "Color in Design Systems"
        }), ", by ", _jsx(_components.a, {
          href: "https://twitter.com/nathanacurtis",
          children: "@nathancurtis"
        })]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://medium.com/carbondesign/because-colors-are-beautiful-52dd4cc39f09",
          children: "Because, colors are beautiful"
        }), ", by ", _jsx(_components.a, {
          href: "https://twitter.com/shixieshi",
          children: "@shixieshi"
        })]
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


How SparkPost's UX team crafted a design system color palette

Creating a Color Palette

Contact