FDIC Design System

Appearance

Guide ​

The FDIC Design System guide helps you build accessible, consistent government interfaces using the system's components and design tokens.

Where to start ​

Follow these steps in order if you are new to the system:

  1. Getting Started — understand what the system provides, install it, and render your first component.
  2. Choosing a Component — find the right component for your use case using decision tables.
  3. Foundations — learn the stable token contract, customization guardrails, and the color, typography, and spacing building blocks that all components share.
  4. Global Header And Page Shell — compose the global header, page header, local navigation, content, feedback, and footer without expanding component APIs.
  5. Testing Strategy — understand the current component, Storybook browser, package, and release validation gates.
  6. Roadmap — understand how v1 limitations move into governed design-system work.
  7. Patterns — assemble components and semantic HTML into governed page sections, hub pages, and recipes.
  8. Form Workflows — build accessible forms with proper validation, error recovery, and workflow protections.
  9. Canonical CMS Filing Reference — copy a downstream reference that uses only the public package and token surface.
  10. Accessibility — review the non-negotiable WCAG 2.2 AA requirements and understand what the system handles for you vs. what you are responsible for.

All guide pages ​