Skip to content

Treasury Design System

I joined the Treasury as a product designer during the COVID-19 crisis. Right as the administration was rolling out stimulus programs. My office needed to stand up trustworthy, working software to support these programs asap.

I worked with developers and content strategists who launched several sites in record time. But there was a problem: each team was reinventing the wheel for design. Different colors, fonts, sizes, and button styles made our sites look inconsistent and unprofessional.

After some research, I remixed the U.S. Web Design System to help our teams ship higher quality software faster. Our version has official branding, a library of accessible components, and a detailed user guide. I built the components in Figma, wrote documentation, and conducted accessibility audits on our existing apps. Over a dozen projects use the design system, but you can see it in action on treasury.gov or bep.gov.

Cover and Headings pages of the Treasury Design System.
Buttons and Cards pages of the Treasury Design System.
a screenshot of the Treasury design system documentation outlining how to use brand colors.
a screenshot of the Treasury design system documentation outlining how to use form controls alongside the bep.gov home page.

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

Accordion Guidelines

  • When to use: Use to organize and hide content to avoid overwhelming users, especially when they only need specific pieces of information.
  • When not to use: Avoid for critical information that everyone must see or for low content volume where condensing adds unnecessary cognitive load.
a screenshot of a Treasury webpage outlining policy issues and the Inflation Reduction Act.
a screenshot of data visualizations within the Treasury design system.
a mockup of someone visiting the treasury.gov website.
a mockup of potential enhancements to treasury.gov including data widgets and task-based navigation.
 

Results

Next Project: U.S. Citizenship and Immigration Services