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.

Homepage image

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.

Browse foundation

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.

Browse components

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.

Browse patterns

Pages

Find out more about the common page types that we use within our content management system, which are documented for easy reference.

Browse pages

Development

The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks.

Browse development

Guidelines

This section includes guidelines for creating specific product experiences not covered in other sections.

Browse guidelines



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.

View source code on GitHub



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 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.

Edit page