index.html

---
layout: homepage
category: Overview
redirect_from: "/ui-toolkit/ui-toolkit.html"
---

<div class="content-75 content-first">
<h1>Welcome to the CFPB Design Manual</h1>
<p class="h3" style="font-family: 'AvenirNextLTW01-Regular', Arial, sans-serif; margin-bottom: 0.75em;">
    The CFPB strives to better serve consumers by using plain language;
    relying on simple, user-friendly design;
    and providing easy access to information that
    can help consumers make informed decisions.
</p>
<p class="h3" style="font-family: 'AvenirNextLTW01-Regular', Arial, sans-serif">
    This Design Manual is an open-source resource for CFPB staff to produce effective
    and visually-consistent products that are easy for
    consumers to access, use, and understand.
    The Manual includes our design principles, guidelines for user experience,
    visual identity standards, and code snippets for common user interface elements.
    The Manual will continue to evolve as we learn what works best
    for the CFPB and the people we serve.
</p>
</div>

<div class="content-25 content-last">
<img src="static/img/cfpb_dm_home.png" alt ="Minicon homepage image">
</div>

<div class="content-50 content-first">
<h2><span class="cf-icon cf-icon-settings"></span> Help us make improvements</h2>
<p>
    We have designed the Manual to be open for the public,
    which allows you to help us make improvements by
    <a href="https://github.com/cfpb/design-manual/issues?milestone=&amp;page=1&amp;state=open">
        filing an issue
    </a> or
    <a href="https://github.com/cfpb/design-manual/pulls">
        submitting a pull request
    </a> on GitHub.
    Not on GitHub? Email us your suggestions at
    <a href="mailto:tech@consumerfinance.gov?subject=CFPB%20Design%20Manual%20Feedback">
        tech@consumerfinance.gov
    </a>.
</p>
<p>
    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.
</p>
</div>

<div class="content-50 content-last">
<h2><span class="cf-icon cf-icon-link"></span> Other Resources</h2>
<p>
    We are proud to join the community of organizations that have made their
    design standards public, such as
    <a href="http://www.mozilla.org/en-US/styleguide/">Mozilla</a>,
    the <a href="http://www.bbc.co.uk/gel">BBC</a>, and the UK's
    <a href="https://www.gov.uk/service-manual">Government Digital Service</a>.
    We hope our design manual can serve as a foundation for discussing and
    practicing user-centered design in government.
</p>
</div>