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.