United States Department of Agriculture

A custom Figma system built to support USDA-branded digital products with reusable components and accessible, USWDS-aligned styling.

USDA Design Kit

Overview

The USDA Design Kit was created in Figma to provide a consistent, scalable foundation for designing USDA digital tools. While it followed guidance from the U.S. Web Design System (USWDS) for foundational elements like typography, spacing, and color contrast, the kit itself was built around custom USDA styles and components including branded headers, footers, cards, buttons, and form elements.

This kit served as a centralized source of truth for design across both public- and internal-facing USDA applications.

Problem / Solution

USDA projects needed to follow accessibility and federal UX standards, but also required a distinct visual identity and set of reusable interface patterns not included in the core USWDS library. Without a dedicated design kit, design efforts were fragmented, inconsistencies emerged across products, and prototyping was slow.

The USDA Design Kit was developed to:

  • Establish a unified visual language using USDA-specific branding

  • Build and maintain custom UI components (cards, alerts, headers, footers, etc.) optimized for USDA user flows

  • Link to USWDS for core tokens like typography, spacing, and color contrast

  • Enable fast, consistent mockups for both public and admin-facing applications

  • Improve team efficiency by reducing design duplication and centralizing reusable styles

UX Considerations

USWDS-adjacent foundation: Kit structure followed USWDS guidance on accessibility and grid logic, while applying USDA-specific branding and patterns.

Custom components: Built out reusable, branded components including navigation, page templates, content cards, and form elements.

Brand consistency: Applied USDA visual identity (colors, fonts, spacing) across all screens and variants while maintaining accessibility standards.

Dual-use support: Designed with flexibility to support both public-facing user flows and complex administrative interfaces.

Team-wide efficiency: Organized with variants, auto layout, and shared styles to streamline collaboration and ensure consistent output across teams.

Previous
Previous

Bootstrap Design Kit

Next
Next

CMS Design Kit