|
1 | 1 | --- |
2 | 2 | title: Welcome to the CFPB Design System |
3 | | -layout: homepage |
| 3 | +layout: variation |
4 | 4 | collection_name: special-pages |
5 | 5 | is_homepage: true |
6 | | ---- |
| 6 | +description: >- |
| 7 | + <div class="content-75 content-last" markdown="1"> |
| 8 | +
|
7 | 9 |
|
8 | | -<div class="content-75 content-last" markdown="1"> |
| 10 | + <p class="lead-paragraph">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.</p> |
9 | 11 |
|
10 | | -<p class="lead-paragraph">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.</p> |
11 | 12 |
|
12 | | -</div> |
| 13 | + </div> |
| 14 | +
|
13 | 15 |
|
14 | 16 | <div class="content-25 content-last" markdown="1"> |
15 | 17 |
|
16 | | - |
| 18 | +
|
| 19 | +  |
| 20 | +
|
17 | 21 |
|
18 | 22 | </div> |
19 | 23 |
|
20 | | -## Getting started |
21 | 24 |
|
22 | | -Start with our [general principles](https://cfpb.github.io/design-system/general-principles), which form the strategic underpinnings for the CFPB’s design and development standards. Also check out our [accessibility principles](https://cfpb.github.io/design-system/guidelines/accessibility-principles), which lay the foundation for ensuring that our web content is available for all users. |
| 25 | + ## Getting started |
| 26 | +
|
| 27 | +
|
| 28 | + Start with our [general principles](https://cfpb.github.io/design-system/general-principles), which form the strategic underpinnings for the CFPB’s design and development standards. Also check out our [accessibility principles](https://cfpb.github.io/design-system/guidelines/accessibility-principles), which lay the foundation for ensuring that our web content is available for all users. |
| 29 | +
|
| 30 | +
|
| 31 | + ### For developers |
23 | 32 |
|
24 | | -### For developers |
25 | 33 |
|
26 | 34 | <div class="content-50 content-last" markdown="1"> |
27 | 35 |
|
28 | | -#### Setup and contribution |
| 36 | +
|
| 37 | + #### Setup and contribution |
29 | 38 |
|
30 | 39 | <p>The Design System provides a set of modular HTML, CSS, and JavaScript patterns that can be integrated into your project. <a href="https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project">Integrate the Design System into your project</a>.</p> |
31 | 40 |
|
32 | 41 | <p> |
33 | 42 |
|
34 | | -Learn how to contribute to the Design System code base and update the documentation. <a href="https://github.com/cfpb/design-system/blob/main/CONTRIBUTING.md">Get started</a>. |
| 43 | + Learn how to contribute to the Design System code base and update the documentation. <a href="https://github.com/cfpb/design-system/blob/main/CONTRIBUTING.md">Get started</a>. |
35 | 44 |
|
36 | 45 | </p> |
37 | 46 |
|
38 | 47 | </div> |
39 | 48 |
|
| 49 | +
|
40 | 50 | <div class="content-50 content-last" markdown="1"> |
41 | 51 |
|
42 | | -#### Using source code |
43 | 52 |
|
44 | | -The Design System also includes the source code for the common components that power the design of [consumerfinance.gov](https://www.consumerfinance.gov). |
| 53 | + #### Using source code |
| 54 | +
|
| 55 | +
|
| 56 | + The Design System also includes the source code for the common components that power the design of [consumerfinance.gov](https://www.consumerfinance.gov). |
45 | 57 |
|
46 | 58 | <p> |
47 | 59 |
|
48 | | -<a href="https://github.com/cfpb/design-system">View source code on GitHub</a></p></div> |
| 60 | + <a href="https://github.com/cfpb/design-system">View source code on GitHub</a></p></div> |
| 61 | +
|
49 | 62 |
|
50 | 63 | <br> |
51 | 64 |
|
52 | | -### For designers |
53 | 65 |
|
54 | | -Check out <a href="https://www.figma.com/community/file/1487539003249310850">CFPB Design System</a> in the Figma Community. |
| 66 | + ### For designers |
| 67 | +
|
| 68 | +
|
| 69 | + Check out <a href="https://www.figma.com/community/file/1487539003249310850">CFPB Design System</a> in the Figma Community. |
| 70 | +
|
55 | 71 |
|
56 | 72 | <br> |
57 | 73 |
|
58 | | -## Browse the Design System |
| 74 | +
|
| 75 | + ## Browse the Design System |
| 76 | +
|
59 | 77 |
|
60 | 78 | <div class="content-33 content-last" markdown="1"> |
61 | 79 |
|
62 | | -### Foundation |
63 | 80 |
|
64 | | -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. |
| 81 | + ### Foundation |
| 82 | +
|
| 83 | + 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. |
65 | 84 |
|
66 | 85 | <p><a href="https://cfpb.github.io/design-system/foundation/">Browse foundation</a></p></div> |
67 | 86 |
|
| 87 | +
|
68 | 88 | <div class="content-33 content-last" markdown="1"> |
69 | 89 |
|
70 | | -### Components |
71 | 90 |
|
72 | | -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. |
| 91 | + ### Components |
| 92 | +
|
| 93 | + 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. |
73 | 94 |
|
74 | 95 | <p><a href="https://cfpb.github.io/design-system/components/">Browse components</a></p> |
75 | 96 |
|
76 | 97 | </div> |
77 | 98 |
|
| 99 | +
|
78 | 100 | <div class="content-33 content-last" markdown="1"> |
79 | 101 |
|
80 | | -### Patterns |
81 | 102 |
|
82 | | -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. |
| 103 | + ### Patterns |
| 104 | +
|
| 105 | + 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. |
83 | 106 |
|
84 | 107 | <p><a href="https://cfpb.github.io/design-system/patterns/">Browse patterns</a></p> |
85 | 108 |
|
86 | 109 | </div> |
87 | 110 |
|
| 111 | +
|
88 | 112 | <div class="content-33 content-last" markdown="1"> |
89 | 113 |
|
90 | | -### Pages |
91 | 114 |
|
92 | | -Find out more about the common page types that we use within our content management system, which are documented for easy reference. |
| 115 | + ### Pages |
| 116 | +
|
| 117 | + Find out more about the common page types that we use within our content management system, which are documented for easy reference. |
93 | 118 |
|
94 | 119 | <p><a href="https://cfpb.github.io/design-system/pages/">Browse pages</a></p> |
95 | 120 |
|
96 | 121 | </div> |
97 | 122 |
|
| 123 | +
|
98 | 124 | <div class="content-33 content-last" markdown="1"> |
99 | 125 |
|
100 | | -### Development |
101 | 126 |
|
102 | | -The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks. |
| 127 | + ### Development |
| 128 | +
|
| 129 | + The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks. |
103 | 130 |
|
104 | 131 | <p><a href="https://cfpb.github.io/design-system/development/">Browse development</a></p> |
105 | 132 |
|
106 | 133 | </div> |
107 | 134 |
|
| 135 | +
|
108 | 136 | <div class="content-33 content-last" markdown="1"> |
109 | 137 |
|
110 | | -### Guidelines |
111 | 138 |
|
112 | | -This section includes guidelines for creating specific product experiences not covered in other sections. |
| 139 | + ### Guidelines |
| 140 | +
|
| 141 | + This section includes guidelines for creating specific product experiences not covered in other sections. |
113 | 142 |
|
114 | 143 | <p><a href="https://cfpb.github.io/design-system/guidelines/">Browse guidelines</a></p> |
115 | 144 |
|
116 | 145 | </div> |
117 | 146 |
|
| 147 | +
|
118 | 148 | <br> |
119 | 149 |
|
120 | 150 | <br> |
121 | 151 |
|
122 | | -## Contribute to the Design System |
123 | 152 |
|
124 | | -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. |
| 153 | + ## Contribute to the Design System |
| 154 | +
|
| 155 | +
|
| 156 | + 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. |
125 | 157 |
|
126 | 158 | <p><a href="https://cfpb.github.io/design-system/updating-this-website/">View instructions for contributing to the Design System</a></p> |
127 | 159 |
|
128 | 160 | <br> |
129 | 161 |
|
| 162 | +
|
130 | 163 | <hr> |
131 | 164 |
|
| 165 | +
|
132 | 166 | <h3 class="h4">About the CFPB Design System</h3> |
133 | 167 |
|
134 | | -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. |
135 | 168 |
|
136 | | -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. |
| 169 | + 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. |
| 170 | +
|
| 171 | + 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. |
| 172 | +
|
137 | 173 |
|
138 | 174 | <h3 class="h4">License</h3> |
139 | 175 |
|
140 | | -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. |
| 176 | + 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. |
141 | 177 |
|
142 | 178 | <h4 class="h5">Trademark notice</h4> |
143 | 179 |
|
144 | | - <p>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, <a href="mailto:cfpb_ip@cfpb.gov">cfpb_ip@cfpb.gov</a>.</p> |
| 180 | + <p>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, <a href="mailto:cfpb_ip@cfpb.gov">cfpb_ip@cfpb.gov</a>.</p> |
| 181 | +--- |
0 commit comments