Pantsuit: The Hillary Clinton UI pattern library

Building a (presidential) design system

Every good Pantsuit starts with the right patterns.
Me, deciding on the name “Pantsuit”
Our phone banking tool and The Briefing are two projects utilizing Pantsuit.
Mama’s got a brand new Pantsuit.

Modular architecture

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
We really love forms. Also, have you signed up to get texts?

A more inclusive system

Homepage elements before and after color contrast fixes.

Documentation

// 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
Documenting all the things!

What’s next?

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/