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 a Treasury webpage outlining policy issues and the Inflation Reduction Act.
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.
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