Pantsuit: The Hillary Clinton UI pattern library

Building a (presidential) design system

Mina Markham
Aug 31, 2016 · 5 min read
Image for post
Image for post
Every good Pantsuit starts with the right patterns.
Image for post
Image for post
Me, deciding on the name “Pantsuit”
Image for post
Image for post
Our phone banking tool and The Briefing are two projects utilizing Pantsuit.
Image for post
Image for post
Mama’s got a brand new Pantsuit.

Modular architecture

Image for post
Image for post
It’s an inverted hanger. Cause Pantsuit. Get it?
.o- // an object, an unstyled design pattern.c- // a component, a styled piece of UI.a- // an alteration, an UI-independent override.t- // a theme, change UI appearance based on theme.is-, .has-, .for- // state-based styles.js- // used for binding behavior to components
Image for post
Image for post
We really love forms. Also, have you signed up to get texts?

A more inclusive system

Image for post
Image for post
Homepage elements before and after color contrast fixes.

Documentation

Image for post
Image for post
// Button// Buttons can and should be clicked. Buttons come in two sizes, small and large. To create a large button, add a class of `c-button-large`. To create a link that looks like a button, add the `c-button-link` class.// .secondary — Use to indicate a secondary call-to-action.// Markup:// buttons.html// Styleguide 5.button
Image for post
Image for post
Documenting all the things!

What’s next?

Image for post
Image for post

Git out the vote

This is the official blog of the Hillary for America…

Mina Markham

Written by

am: Senior Engineer @SlackHQ 🚀 ¶ was: @HFA, @ibmdesign ¶ always: #withher

Git out the vote

This is the official blog of the Hillary for America technology team. We blog about making a better democracy with software. Expect stories on software engineering, digital products, and what it’s like to work on a presidential campaign. https://www.hillaryclinton.com/tech/

Mina Markham

Written by

am: Senior Engineer @SlackHQ 🚀 ¶ was: @HFA, @ibmdesign ¶ always: #withher

Git out the vote

This is the official blog of the Hillary for America technology team. We blog about making a better democracy with software. Expect stories on software engineering, digital products, and what it’s like to work on a presidential campaign. https://www.hillaryclinton.com/tech/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store