Welcome to the CFPB Design System
The Design System is an open-source resource for teams at the Consumer Financial Protection Bureau (CFPB). It's intended to help teams produce consistent, effective, and accessible products for the American public.
Our general principles form the strategic underpinnings for the CFPB’s design and development standards. Our accessibility principles lay the foundation for ensuring that our web content is available for all users.
Browse the Design System
This section includes our visual identity standards, such as color, grid, and typography. It forms the foundation for the CFPB’s website and external-facing materials.
Components contain the key building blocks of the design system that, when combined, can be used to create a website. Examples of components include buttons, text inputs, tables, and alerts.
Patterns are combinations of components used in conjunction to achieve a goal. Interaction patterns are best practice design solutions to common user tasks. Layout patterns are used by designers to organize content into clear, accessible web pages.
Find out more about the common page types that we use within our content management system, which are documented for easy reference.
The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks.
This section includes guidelines for creating specific product experiences not covered in other sections.
Get started as a developer
Setup and contribution
Learn how to contribute to the Design System code base and update the documentation. Get started.
Using source code
The Design System also includes the source code for the common components that power the design of consumerfinance.gov.
Contribute to the Design System
We strongly encourage you to participate in the growth and maintenance of the Design System. To make contribution easier, the Design System is built on a tool called Netlify CMS, which allows for editing of pages in a web browser, without needing to use git or other command-line tools.
About the CFPB Design System
Our design system has been created to work with a wide range of devices and browsers. Following a modern, mobile first responsive approach, sites built with our Design System easily adapt to a wide range of screen sizes, all while carefully following accessibility best practices. As a work of the United States government, all code is open source and in the public domain. We encourage you to use this framework in your own projects and to contribute back.
All content has been released as open source under the CC0 1.0 Universal Public Domain Dedication, and we’d love for other agencies, developers, or groups to adapt it for their own use.