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.
Getting started
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
Foundation
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
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
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.
Pages
Find out more about the common page types that we use within our content management system, which are documented for easy reference.
Development
The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks.
Guidelines
This section includes guidelines for creating specific product experiences not covered in other sections.
Get started as a developer
Setup and contribution
The Design System provides a set of modular HTML, CSS, and JavaScript patterns that can be integrated into your project. Integrate the Design System into your project.
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 Decap CMS, which allows for editing of pages in a web browser, without needing to use git or other command-line tools.
View instructions for contributing to the Design System
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.
License
All content, apart from CFPB trademarked properties, 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.
Trademark Notice
The CFPB’s logo and the standard characters Consumer Financial Protection Bureau, CFPB, Know Before You Owe, and Money as You Grow are registered trademarks owned by the CFPB. Nothing on this website shall be construed as granting any license to use any trademark displayed on the website without the express written permission of the CFPB. Your use of these registered trademarks must comply with intellectual property laws. You may not use the CFPB trademarks to state or imply an association with or endorsement of your goods, services, or activities, nor in any manner that infringes upon the CFPB trademarks. Requests to use the CFPB trademarks should be made to the Office of the General Counsel, cfpb_ip@cfpb.gov.