I rebuilt the design system behind a defense procurement platform.

The same color meant different things on different screens.

The users work across defense acquisition: budget analysts, program staff, and industry teams. They need to read budget lines, appropriation types, and contract vehicles across ten fiscal years at a time. When I joined, components had become inconsistent and colors had different meanings across screens.

I started by auditing the existing product to see what I needed to keep and what needed to change.

I defined shared rules for color, charts, and program pages.

I reserved specific colors for budget categories.

I kept the interaction color out of charts and gave chart series a fixed color order. The three budget category colors appear only in the Color of Money card. Each category keeps its color wherever that card appears.

Missing figures need to stay visible.

I designed the Requested vs Enacted tooltip to show the request's base and reconciliation amounts, the enacted figure, and the difference. Where enacted figures aren't available, the line stops and the tooltip says "no data." Showing $0 there would imply a known amount.

One page per program

I put the program's identity and owner first, followed by its budget and the companies receiving contracts. Recent news and solicitations sit below. Additional tabs hold the detail. I shortened long descriptions with a "Read more" link and used deadlines like "due in 3 days" so readers don't have to calculate the time left.

Design System 2.0 is in production.

Entity pages, the briefing export with source citations, and the new navigation have shipped using the system. The engineering team implemented the chart standards in Recharts. I'm continuing to work on the platform.