Contributing to the CFPB Design System
- Design System principles
- Documentation change request
- Component change or addition request
- After change request creation and submission
The CFPB Design System (DS) is an open-source resource for designing and developing at the CFPB. It’s intended to help teams produce consistent, effective and accessible products for the American public.
Design System principles
The Design System represents the Bureau (not just www.consumerfinance.gov)
- The Design System is a product
- There are products that use it, of which www.consumerfinance.gov is one
- Its documentation applies to all of our current and future products and services
- Anywhere we’re building a website, we should be able to use the Design System for it
The Design System holds the CFPB's fundamental components, those we want to encourage the use and reuse of
- Patterns and components “graduate” into the Design System
- It’s the foundation, but not the limits
- It’s the default, but not the only (or every) option
- Patterns that were created for specific products (and are not for global use) should not be included
The Design System should be CMS agnostic
- We shouldn’t include any of www.consumerfinance.gov specific code into our Design System code
- Doing so would bake the CMS choice into our design patterns, and we don’t want to do that
The Design System should include code
- We should have the CSS and JavaScript
- We should always include HTML examples
Documentation change request
Documentation changes can be suggested by visiting the CFPB Design System public GitHub repo and creating a website documentation change issue.
The GItHub issue will have some additional information for you to supply. Be sure to include what content you would like to see changed and what page(s) would be affected, what your reason for the changes or additions are, and any relevant data or research you may have that would necessitate or support the change.
Component change or addition request
If you would like to see an update or change to an existing component or a new component please visit the CFPB Design System public GitHub repository and create a component change/addition issue. The issue will have some additional information for you to include.
Before filling out the information be sure that you can answer “yes” to one of the following questions:
Existing components:
- Is the proposed change due to any accessibility or usability issue with the existing component?
- Does the change alter the existing component in only one major way (e.g. color change)? If so, consider if it should be a variation of the existing component rather than a replacement.
Adding a new component:
- Is the proposed component currently being used on more than one page type on www.consumerfinance.gov? Alternatively, can you provide examples of multiple places where the proposed component could be used?
- Are existing Design System components not sufficiently able to serve your product or users’ needs, thus requiring the need to create a new component?
- Is the proposed component different in more than one major way from existing components in the Design System? If the proposed component is different from an existing component in only one way (e.g. color), it would likely be better to add it as a variant of the existing component.
If you were able to answer “yes” to any of the above questions the next steps are to prepare your change for review by adding the following information to the GitHub issue.
GitHub issue details:
For component update or new additions, please be sure to include the following:
- Indicate if your change request is for making a change to an existing component or for adding a new one to the Design System
- Add any data or research you have to show that the proposed change is accessible and usable
- Supply any design and development context for your request you may have (e.g. Figma concepts, code samples, etc)
- Include if you can design and build the proposed change or if you will need to request that someone make the changes for you
- Draft documentation for the proposed change to be included in the Design System website (can be included in the issue or as a comment)
After change request creation and submission
Submitting the request via GitHub issue will trigger a review of the proposed change from at least one member of each discipline responsible for supporting the Design System. Communication about your change request will be handled via the GitHub issue in our Design System public GitHub repository.