RFP_Attachment_5_CFPB_Design_Guide.pdf

Brand 2.0 | OctOber 2013

Design Style Guide bricka Typewritten Text

RFP: CFP-14-R-00009, ATTACHMENT 5

bricka Typewritten Text bricka Typewritten Text bricka Typewritten Text bricka Typewritten Text

Contents

Introduction

CFPB goals

Design principles

Logo

Principles

Lockups

Variations

Stylistic guidelines

Examples of misuse

Color

Principles

Palette

Typography

Principles

Typefaces

Print hierarchy

Web hierarchy

Typesetting guidelines for the web

Web accessibility

Minicons

Principles

Stylistic guidelines

Asset library

Isocons

Principles

Stylistic guidelines

Asset library

Illustration

Principles

Stylistic guidelines

Beam pattern

Principles

Stylistic guidelines

Photography

Principles

Stylistic guidelines

Video

Principles

Use cases

Stylistic guidelines

For questions about design at the cFPb contact cfpb_design@cfpb.gov .

CFPB De sIgn s T y Le guIDe 3

Introduction the following guidelines represent the graphic expression of the cFPb brand.

This overview is intended to provide guidance and inspiration for designing within the CFPB brand.

When used as the building blocks for visual brand communication, we can be confident the final output will be consistent and recognizable as a cFPb production.

this guide holds our most up-to-date thinking on designing for the visual brand. It is a living document and will continue to evolve as we learn what works best for the cFPb and the people we serve.

We are committed to shedding light on the financial landscape, enforcing consumer protection laws, and empowering Americans to make better decisions in their financial lives.

We are credit wise, not phobic.

the cFPb cannot lead with an abstinence message. If we frame saving as a prerequisite for consumption, we risk alienating many of the consumers who would benefit most from our counsel.

We are focused on goals, not financial products.

Financial institutions think this way, consumers think this way, and it’s a conversation the cFPb needs to join.

In doing so, we can help consumers be savvy as they engage (or re-engage) with the American dream.

CFPB goals

CFPB De sIgn s T y Le guIDe 5

We use our brand to help cultivate a trusted relationship with consumers and enable them to live better financial lives.

We are unique and differentiated.

Financial guidance is a crowded space, but our power, impartiality, and dedication to reaching and empowering all consumers set us apart.

We speak in one voice, with varying expressions.

to grow a trusted relationship with consumers, we must build a consistent and coherent vision, but recognize that different tones, levels of formality, specificity or detail are appropriate in different contexts, depending on the audience, subject matter, media, or forum.

Honest, transparent design that wins the public’s trust.

We establish trust through clear, concise, and approachable design that is always consumer-driven. We demonstrate transparency through our user-friendly online experiences and tools and our dedication to open-source content.

Design to empower users with information.

the cFPb motivates consumers to take the control of their financial decision-making; our designs enable this process. Good design increases transparency and succinctly hands the user all the necessary information, giving consumers control of how they use it. to create an empowering product, designers must rely on introspection and research to discover what path users instinctively take and then cater to those instincts.

Align appearance with purpose.

Maintain consistency and clarity.

Aesthetic integrity is not merely “attractiveness;” it implies the successful integration of design and function. Appearance should align with purpose. Using clear and intuitive design creates a trustworthy tone and a powerful platform for supporting the cFPb’s mission.

Maintaining consistency in design empowers users to seamlessly transfer their knowledge and skills from one product to another.

Focusing on consistency helps uphold aesthetic integrity.

Public service, public trust give the user control

Aesthetic integrity

Design principles these are the strategic underpinnings for the cFPb’s brand and experience.

they should serve as the backbone for the user experience, at once inspiring and binding the design of the cFPb’s offerings.

CFPB Br A nD s T y Le guIDeLIne s 7

Honest, transparent design that wins the public’s trust.

because the cFPb is a data-driven organization, quantitative measures of success should be integral to the design process. With the world’s information doubling every two years, consumers often experience information overload and develop shorter attention spans.

Furthermore, our ability to interpret visual information is greater than that of the written word. Succinct and compelling visualization of data and information gives data a voice and helps us clarify otherwise indigestible numbers.

Design for the widest possible demographic with bias toward clear articulation, plain language, and intuitive design.

Inclusion – It is easy to forget that the people most in need of the cFPb’s message are often the ones who are the most difficult to reach, whether it is because they have no exposure to financial language or simply don’t have access to the Internet. For this reason, we set the bar for clarity very high and aim to reach those most in need.

Accessibility – We design to meet each consumer where he or she

is. We are sensitive to experiential level, timing, and biases and aim to design experiences that are equally accessible to everyone, and equally empowering no matter what the user’s skill set or familiarity. Simple, clean designs are the most effective and wide-reaching.

unify parts of the user experience and transition seamlessly between them.

the best design guides the user’s experience from beginning-to-end and caters to his or her expectations.

Navigation between sections should be intuitive and transitions should be seamless. consistent quality and attention to detail are essential to maintain a cohesive user experience.

Design with data

Inclusion and accessibility

Coherent end-to-end user experience

Logo

CFPB De sIgn s T y Le guIDe 9

The CFPB logo was designed to symbolize vigilance, transparency, and a consumer focus.

consumers are the foundation and focus of our mission and our logo reflects that. A soft beam of light symbolizes our efforts to illuminate the financial landscape and foster transparency in the marketplace.

Principles

10 Logo

Horizontal the horizontal lockup is the primary option and appears on our stationery and website.

Vertical the vertical lockup is useful for square frames or narrow columns.

Lockups

Horizontal

Vertical

CFPB De sIgn s T y Le guIDe 11

Isolated the isolated logo is primarily used for internal-facing communications. For all external communications, the logo needs to be in a lockup with “consumer Financial Protection bureau” to ensure clear communication.

small execution the small execution lockup is used when the logo needs to scale down to less than 0.75” or 54 pixels at 72 dpi. the small execution logo allows “consumer Financial Protection bureau” to remain legible.

Isolated small execution

0.75”

12 Logo spanish logo the Spanish logo should be used for Spanish language materials, such as websites and microsites, publications, and signage.

this is applicable for the horizontal, vertical, and small execution lockups.

one color logo

When the logo is being produced for print formats conditions may not allow for full color. For these rare cases, the one-color logo may be used only in black on a white background.

this is applicable for the horizontal, vertical, isolated, and small execution lockups.

Variations spanish logo one color logo

CFPB De sIgn s T y Le guIDe 13

Clear space there should always be ample space around the logo to ensure maximum impact and keep the mark from looking cluttered.

Isolated logo clear space

Vertical logo clear space

Horizontal logo clear space stylistic guidelines

14 Logo guidelines

Web scale the small execution logo should be used to optimize legibility of the logotype on desktop and mobile applications.

these are our benchmark sizes for web, but variance may be used for specific circumstances or constraints.

Mobile scale Lockup: small execution Height: 40px Padding: 20px

Desktop scale Lockup: small execution Height: 50px Padding: 25px

40px

50px

CFPB De sIgn s T y Le guIDe 15

Print scale the horizontal or vertical lockup should be used for most print applications.

these are our benchmark sizes for 8.5 x 11” documents, including reports, brochures, powerpoints, and forms.

For large-format print pieces, such as posters and banners, where the logo is used with a height greater than 1”, it should be used in increments of 1/2”.

8.5 x 11” documents Lockup: horizontal Height: 0.5” Clear space: 0.25”

8.5 x 11” documents Lockup: vertical Height: 0.77” Clear space: 0.25”

0.5”

0.77”

16 Logo guidelines

Complex backgrounds the logo should be shown on a white background for optimal appearance.

When this is not possible, the logo must be contained in a white rectangle equal to the required clear space.

Color

Pattern

Photo

CFPB De sIgn s T y Le guIDe 17

� 1

� 3

� 2

� 6 examples of misuse

1. Don’t remove the light beam. It is essential to the logo.

2. Don’t stretch or condense. this weakens the brand.

3. Don’t apply a drop shadow.

4. Don’t outline the logo or use other colors. this dilutes brand association.

5. Don’t rotate the symbol. this changes the connotation of the light.

6. Don’t place the logo directly on a colored background or photo without a white bounding box.

� 5

� 4 color

CFPB De sIgn s T y Le guIDe 19

Principles The primary color palette for the CFPB is green and black, including mid-tones and tints, and thoughtful use of whitespace.

A minimal palette, clear hierarchy, good information design, and ample whitespace will ensure a voice of authority and expertise in communication.

20 CoLor

Primary colors the primary color palette for the cFPb is green and black, including mid-tones and tints, and thoughtful use of whitespace.

Palette

CFPB green PMs 361 CMyK 77 / 0 / 100 / 0 rgB 44 / 179 / 74 HeX #2cb34A

CFPB Black PMs bLAcK 6 CMyK 100 / 79 / 44 / 93 rgB 16 / 24 / 32 HeX #101820 green midtone PMs 358 CMyK 32 / 0 / 52 / 0 rgB 173 / 220 / 145 HeX #ADDc91 green tint PMs 361 @ 20% CMyK 14 / 0 / 20 / 0 rgB 219 / 237 / 212 HeX #DbeDD4

CFPB Black White space

CFPB green

CFPB De sIgn s T y Le guIDe 21

Background colors these colors are used primarily for background wells and fields. When alternating between tones, be sure to use enough tones providing enough contrast between adjacent wells.

gray PMs cOOL GrAY 9c CMyK 30 / 22 / 17 / 57 rgB 117 / 120 / 123 HeX #75787b

Dark gray PMs cOOL GrAY 11c CMyK 44 / 34 / 22 / 77 rgB 67 / 72 / 78 HeX #43484e gray 50% PMs cOOL GrAY 5c CMyK 13 / 9 / 10 / 27 rgB 186 / 187 / 189 HeX #bAbbbD gray 80% PMs cOOL GrAY 7c CMyK 20 / 14 / 12 / 40 rgB 145 / 147 / 149 HeX #919395 gray 20% PMs cOOL GrAY 3c CMyK 8 / 5 / 7 / 16 rgB 227 / 228 / 229 HeX #e3e4e5 gray 5% PMs cOOL GrAY 1c @ 50% CMyK 4 / 2 / 4 / 8 @ 50% rgB 248 / 248 / 248 HeX #F8F8F8 gray 10% PMs cOOL GrAY 1c CMyK 4 / 2 / 4 / 8 rgB 241 / 242 / 242 HeX #F1F2F2

22 CoLor red orange PMs 7597 CMyK 0 / 85 / 100 / 4 rgB 209 / 65 / 36 HeX #D12124 gold PMs 1375 CMyK 0 / 45 / 94 / 0 rgB 255 / 147 / 27 HeX #FF9e1b red orange 80% PMs 7597 @ 80% CMyK 11 / 71 / 73 / 1 rgB 218 / 103 / 80 HeX #DA6750 gold 80% PMs 1375 @ 80% CMyK 1 / 35 / 78 / 0 rgB 255 / 177 / 73 HeX #FFb149 red orange 50% PMs 7597 @ 50% CMyK 6 / 43 / 36 / 0 rgB 232 / 160 / 145 HeX #e8A091 gold 50% PMs 1375 @ 50% CMyK 1 / 21 / 47 / 0 rgB 255 / 206 / 141 HeX #FFce8D red orange 20% PMs 7597 @ 20% CMyK 2 / 16 / 10 / 0 rgB 246 / 217 / 211 HeX #F6D9D3 gold 20% PMs 1375 @ 20% CMyK 1 / 7 / 17 / 0 rgB 255 / 236 / 209 HeX #FFecD1 secondary colors these colors are used primarily as accent colors, and should be used to add variety to page content and illustrations.

they should never overpower the core brand colors.

Palette neutral PMs WArM GrAY 10 CMyK 24 / 34 / 35 / 60 rgB 121 / 110 / 101 HeX #796e65 neutral 80% PMs W. GrAY 10 @ 80% CMyK 43 / 40 / 44 / 4 rgB 148 / 139 / 132 HeX #948b84 neutral 50% PMs W. GrAY 10 @ 50% CMyK 28 / 24 / 26 / 0 rgB 188 / 182 / 178 HeX #bcb6b2 neutral 20% PMs W. GrAY 10 @ 20% CMyK 9 / 8 / 9 / 0 rgB 228 / 226 / 224 HeX #e4e2e0

CFPB De sIgn s T y Le guIDe 23

Teal PMs 7721 CMyK 89 / 0 / 43 / 65 rgB 0 / 94 / 93 HeX #005e5D

Teal 80% PMs 7721 @ 80% CMyK 80 / 34 / 49 / 10 rgB 51 / 126 / 125 HeX #337e7D

Teal 50% PMs 7721 @ 50% CMyK 51 / 18 / 30 / 0 rgB 127 / 174 / 174 HeX #7FAeAe

Teal 20% PMs 7721 @ 20% CMyK 19 / 4 / 11 / 0 rgB 204 / 223 / 223 HeX #ccDFDF navy PMs 288 CMyK 100 / 80 / 6 / 32 rgB 0 / 45 / 114 HeX #002D72

Pacific PMs 285 CMyK 90 / 48 / 0 / 0 rgB 0 / 114 / 206 HeX #0072ce navy 80% PMs 288 @ 80% CMyK 78 / 64 / 26 / 7 rgB 51 / 87 / 142 HeX #33578e

Pacific 80% PMs 285 @ 80% CMyK 75 / 34 / 1 / 0 rgB 50 / 142 / 216 HeX #328eD8 navy 50% PMs 288 @ 50% CMyK 48 / 33 / 18 / 0 rgB 127 / 150 / 184 HeX #7F96b8

Pacific 50% PMs 285 @ 50% CMyK 48 / 14 / 3 / 0 rgB 127 / 184 / 230 HeX #7Fb8e6 navy 20% PMs 288 @ 20% CMyK 15 / 10 / 5 / 0 rgB 204 / 213 / 227 HeX #ccD5e3

Pacific 20% PMs 285 @ 20% CMyK 18 / 4 / 2 / 0 rgB 204 / 227 / 245 HeX #cce3F5 typography

CFPB De sIgn s T y Le guIDe 25

Principles A clear typographic hierarchy is critical to the effective communication of our brand.

type should be light and well spaced to reinforce the idea that the cFPb is open, modern, and approachable. this system uses weight, scale, and capitalization to convey the relative importance of each heading within a document.

Aa A b c D e F G H I J K L M N O P Q r S t U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z

012 3 4 5 678 9

26 T y Pogr A PH y

Avenir next

Avenir Next is the primary brand typeface and can be used across all formats from print to digital. Its round and geometric letterforms are approachable and modern.

Avenir is great for titling, pull-quotes and lists, and in some cases can be used for lengthy body copy. Italics are included in the brand typography but should only be used on rare occasion, when necessary for grammatical accuracy.

Typefaces

Avenir next Bold

Avenir next Demi Bold

Avenir next Medium

Avenir next regular aBCdEFGHIJKLMnOPQrSTUV W X YZ abcdefghijklmnopqrs tuv w x yz 0123456789

ABCDeFgHIJKLMnoPQrsTuV WX y Z abcdefghijk lmnopqrs tuv w x yz 0123456789

ABCDEFGHIJKLMNOPQRSTUV WXY Z

abcdefghijk lmnopqrs tuv w x yz 0123456789

AbcDeFGHIJKLMNOPQrStUV W X Y Z abcdefghijk lmnopqrs tuv w x yz 0123456789

CFPB De sIgn s T y Le guIDe 27 georgia

Georgia is the secondary brand typeface and is designed for digital executions. Its high x-height and round letterforms play nicely with Avenir Next.

Georgia is well suited for lengthy body copy. bold is useful for highlighting or titling within body copy. Georgia should not be used for display type or large-scale typography. the Italic weights work nicely at a medium scale for pull-quotes or language with a human tone.

georgia regular georgia Italic georgia Bold georgia Bold italic

A BCDEFGHIJK LMNOPQR STU V W X YZ

abcdefghijk lmnopqrstuv w x yz 0123456789

ABCDEFGHIJKLMNOPQRSTU V W X YZ

abcdefghijklmnopqrst uvwx yz 0123456789

A BCDEFGHIJK LMNOPQR STU V W X Y Z

abcdefghijk lmnopqrstuv w x yz 0123456789

ABCDEFGHIJKLMNOPQRSTU V W X YZ

abcdefghijklmnopqrst uvwx yz 0123456789

28 T y Pogr A PH y this hierarchy should serve as a basis for

8.5 x 11” documents, but appropriate scaling should be explored for content of larger or smaller dimensions.

Print hierarchy

Headers

Header 1 Avenir Next Medium 38 pt / 40 pt

Display Avenir Next Medium 60 pt / 66 pt

Header 2 Avenir Next Demi bold 18 pt / 20 pt

Header 4 Avenir Next Medium 14 pt / 16 pt

Header 3 Avenir Next Demi bold 16 pt / 18 pt

Header 5 Avenir Next Demi bold 10 pt / 12 pt All caps

Header 6 Avenir Next Medium 12 pt / 14 pt

Getting out of debt getting out of debt

Getting out of debt getting out of debt geTTIng ouT oF DeBT

Getting out of debt

Getting out of

CFPB Br A nD s T y Le guIDeLIne s 29 subheader Avenir Next regular 18 pt / 22 pt leading

Use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

Paragraph Avenir Next regular 11 pt / 16 pt leading

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future. School data and relevant financial factors to make a more informed decision for your future.

Bulleted list Avenir Next regular 11 pt / 14 pt leading

§ Use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

§ evaluate the costs and risks involved in paying for school.

§ Use web school data and relevant financial factors to make a more informed decision for your future.

Print hierarchy

Body text

Paragraph Georgia regular 11 pt / 16 pt leading

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

Web school data and relevant financial factors to make a more informed decision for your future.

30 T y Pogr A PH y

Header 1 Avenir Next regular 34 px

Display Avenir Next Demi bold 48 px

Header 2 Avenir Next regular 26 px

Header 4 Avenir Next Medium 18 px

Header 3 Avenir Next regular 22 px

Header 5 Avenir Next Demi bold 14 px, 1px letter spacing All caps

Header 6 Avenir Next Demi bold 12 px, 1px letter spacing All caps

Getting out of debt

Getting out of debt

Getting out of debt

Getting out of debt geTTIng ouT oF DeBT geTTIng ouT oF DeBT

Web hierarchy

Headers getting out of debt consistent scaling, weights, and capitalization are used to create distinction between header levels.

Headers are used in three weights of Avenir Next — Demi bold, Medium, and regular.

CFPB Br A nD s T y Le guIDeLIne s 31

Georgia should be used for the majority of body copy on the web.

Avenir Next may be used for introductory or accent text. For example, Avenir Next is well-suited for use in tables or captions.

Body (sans-serif) Avenir Next regular 16 px / 22 px line height

Body (serif) Georgia regular 16 px / 22 px line height

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

Web hierarchy

Body text

32 T y Pogr A PH y

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed

Getting out of debt If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed

30 px

30 px

20 px

Typesetting getting out of debt

Alignment

Typography should be set flush left.

this provides the eye a constant starting point for each line, making text easier to read.

spacing

Spacing between typographic elements should be open enough to feel light, but close enough to establish the proper relationships between elements. When setting headers and body copy, the white space should be 15 px, 20 px, or 30 px.

Typesetting guidelines for the web

CFPB De sIgn s T y Le guIDe 33

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

Getting out of debt

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

geTTIng ouT oF DeBT

If you have received financial aid offers, use this tool to compare school data and relevant financial factors to make a more informed decision for your future.

15 px

15 px

15 px

Line height

Ample space between lines of type contributes to an open feeling and ensures readability. When setting body copy, the leading should be 1.375 times the type size, or 37.5% larger.

Line length comfortable line length allows the reader's eyes to flow easily from the end of one line to the beginning of the next.

For a single column of text, line length should be an average of 66 characters per line, including spaces, but may range from 50 to 75 characters.

34 T y Pogr A PH y

Web type accessibility

Text contrast

WcA (Web content Accessibility) standards ensure that content is accessible by everyone, regardless of any disability or user device.

to ensure text remains compliant with WcA standards, use only these permitted color combinations.

these options fall within the range of foreground/background color contrast permitted by the Section 508 guidelines.

For more information:

refer to the Section 508 Standards Guide at: http://www.section508.gov this color contrast tool is a useful resource for testing the compliance of any color combination: http://snook.ca/ technical/colour_contrast/colour.html bLAcK ON cFPb GreeN MIDtONe bLAcK ON cFPb GreeN tINt cFPb bLAcK ON WHIte

DArK GrAY ON WHIte

Fully accessible combinations bLAcK ON GrAY 10% bLAcK ON GrAY 5%

WHIte ON cFPb bLAcK

WHIte ON DArK GrAY

CFPB De sIgn s T y Le guIDe 35

Accessible combinations

Fully accessible combinations

Accessible text and background color combinations are shown on the left.

Partially accessible combinations cFPb black text and white text on gray and gray text on white are only accessible for headers sizes above 24 px.

non-accessible combinations

Never set cFPb Green web type on white combinations, as they are not accessible.

undesirable combinations even though cFPb Green and cFPb black are accessible for large scale type, this color combination should never be used for web type.

Display H1 H3 H5H2 H4 H6 Body

GrAY ON WHIte 󠄁 � 󠄁 � � 󠄁 � �

WHIte ON GrAY 󠄁 � 󠄁 � � 󠄁 � � cFPb bLAcK ON GrAY 󠄁 � 󠄁 � � 󠄁 � �

Partially accessible combinations cFPb GreeN ON WHIte

WHIte ON cFPb GreeN cFPb GreeN ON cFPb bLAcK cFPb bLAcK ON cFPb GreeN

� non-accessible combinations

� undesirable combinations

Minicons

CFPB De sIgn s T y Le guIDe 37

Minicons are small-scale icons that visually reinforce an interface action, file type, status, or category.

Minicons are visually simple, quickly recognizable, and easy to understand.

they are almost always used in context with descriptive text and function to reinforce the message of that text.

38 MInICons

Web scale the following primary benchmark sizes should be used for web sizing.

¡ 16px: inline with text

¡ 20px: on buttons

¡ 25px: social media sharing sets

¡ 30px: inline with large text links

¡ 40px: paired with primary headers

Print scale the following primary benchmark sizes should be used for print sizing.

¡ 14pt: inline with text

¡ 21pt: numbers, contact icons

¡ 28pt: numbers, contact icons

¡ 36pt: numbers, contact icons

¡ 48pt: paired with primary headers stylistic guidelines

48pt

40px

36pt

30px

28pt

25px

21pt14pt

20px16pxWeb scale

Print scale

CFPB De sIgn s T y Le guIDe 39 one color negative space knocked out spacing

Color

Minicons should always be one color. If used over a color field, negative space should be knocked out.

Although color usage is flexible, minicons should always be used in high contrast tones relative to the background to maximize legibility.

spacing

Padding varies around minicons of various primary shapes. Square, vertically and horizontally rectangular, diagonal, and most complex minicons can fit within the relative padding bounding box. circular and some complex icons should be slightly larger to offset the visual weight of surrounding negative space.

Complex

DiagonalVertical rectangle squarerelative padding

Horizontal rectangle

Circle

38px

40px

40 MInICons status social Media navigation approved e101

Help Expand e105 e109

Error e103 delete Contract Loading e107 e111 e113 e100 e104 e108e102 e106 e110 e112

YouTube e201

Facebook Twitter e205 e209

LinkedIn e203

Flickr GitHub Email e207 e211 e212 e200 e204 e208e202 e206 e210 e302 e000 e004e002 e006

Left e001

Up e005 right e003 down e007 e008 e012e010 e014

Left e009

Up e013 right e011 down e015 this library is comprised of all approved minicons and will continue to expand when new assets are developed as needed.

Asset library

CFPB Br A nD s T y Le guIDeLIne s 41

Documents

Communications Web e301

Mail e305

Email e303 e300 e304e302 document e401

Upload Copy e405 e409

PdF e403 download Edit e407 e411 e400 e404 e408e402 e406 e410 appendix e419

Supplement e421

Printattach Save e415e413 e417 e418 e420e414e412 e416

Phone e309

Fax e311 e308 e310

42 MInICons

Financial products and objectives e500 e504e502 e506

Bank account e501

Loan e505

Credit card e503

Money transfer e507 e508 e512e510 e514

Mortgage e509

Credit reporting e513 debt collection e511

Money e515 e516 e520e518 e522

Getting fast cash e517

Complaint e521

Contract e519

Getting a credit card e523 e524 e528e526 e530

Vehicle loan e525

Home loan e529

Student loan e527

Getting out of debt e531 e532 e536e534 e538

Building credit e533

Payday loan e537

Prepaid card e535 retirement e539

(continued)

CFPB Br A nD s T y Le guIDeLIne s 43 general web e600 e604e602 e606

Login e601

Search e605

Wifi e603

Share e607 e608 e610

Link e609

External link e611 e612 e614e613 e615

Left e616

Up e618 right e617 down e619 e620 e624e622 e626

Favorite e621

Bookmark e625

Unfavorite e623

Unbook-mark e627 e628 e632e630 e634

Settings e629

Lock e633

Menu e631

Unlock e635 e638

Play e639 e636 data e637 e00X

Clock e00X

Isocons

CFPB De sIgn s T y Le guIDe 45

Isocons are larger-scale feature icons that illustrate values, products, topics, and processes.

Isocons are visually sophisticated graphics, with more detail than a flat icon. by using an isometric view and arrows, isocons are able to go beyond simply showing objects and can indicate important actions and transactions.

46 IsoCons

Basic color approach the basic color approach for isocons uses the primary brand colors. the isocon has black strokes with white fill.

this approach should be used when there are several isocons together on a page.

stylistic guidelines

Basic black & white over green field

Basic black & white over gray field

CFPB De sIgn s T y Le guIDe 47

Web scale

Print scale scaling

Padding varies around each isocon, but all are relatively scaled within a bounding box. these scales represent the maximum and minimum for web and print applications.

Minimum 100 px

Minimum 0.75”

Maximum 200 px

Maximum 2.00”

48 IsoCons

Submit a complaintask CFPB

Consumer review review and route data review and investigate

Company response developers analyze and report this library comprises all currently approved isocons and will continue to expand when new assets are developed, as needed.

Educate

CFPB Br A nD s T y Le guIDeLIne s 49

Mortgage

Bank account or service

Credit card Credit reporting

Getting cash quick Getting out of debt Money transfer

Loan Payday loan news

Illustration

CFPB De sIgn s T y Le guIDe 51

Principles Illustrations are an important tool for introducing the subject matter of a page, event, or topic.

Illustrations are vector-based graphics that support primary headers and text.

they function as the brand's top-level illustration style with high detail and clarity. Illustration is universally relatable and sets a friendly tone when speaking to consumers. the content of an illustration should always be politically and socially neutral.

52 I LLus Tr ATIon guidelines

Form

Illustrations should feature flat elements and avoid showing things in three-dimensions. elements should not be outlined.

Do not scale-up or collage minicons or isocons for use in illustrations.

Composition Illustrations should be compositionally balanced with related headers and text. Reduce “floating” by bleeding illustrations off the edges of the graphic.

Make use of layering and subtle, vector-based background patterns to help ground the illustration.

Form & composition

How to:

Teach your kids to save by pinning.

Have kids? Do they want stuff?

Explain that if they save, they can earn the toy or gadget they want.

O TEAM UP

Choose your favorite kid(s).

Have your child list or find the things they want and their prices.

Create a Pinterest board of all your child's goals.

O PIN

The things that they like.

Share your stories

#MONEYTALK

$ 1

Create a list of chores for your child to earn money. Calculate how long it will take your child to save for their goals.

O SAVE

Make a plan to reach goals.

= 20

WEEKS

OF TAKING

OUT THE

TRASH

(Based on an allowance of $10 a week)

CFPB De sIgn s T y Le guIDe 53

Color

Illustrations should use the full range of primary and secondary colors, but selectively use a maximum of 3-4 colors.

Differentiate components or faces of objects using tints. Illustrations should also make use of 100% white and black.

shading

Shading should be achieved using subtle, solid tints, not gradients, textures, or blurs. Shadows are created using a darker tint of the background color, cast from the top-right corner of an object at a 45º angle.

Color shading beam pattern

CFPB De sIgn s T y Le guIDe 55

Principles Beam patterns are a graphic background element that provide grounding and visual interest.

Using overlaid shapes with 9º angles and the full cFPb Green color palette, the beam pattern provides a bold and engaging graphic reference to the beam concept in our logo.

56 Be A M PAT Tern guidelines

Ideal composition Solid green beam bleeds off the top of the layout. beams alternate direction to create layered beam shapes.

Base shapes

Ideal composition Layered beams anchor to the bottom, leaving plenty of white space above for type. this works especially well for horizontal layouts.

Base shapes beam patterns are created using trapezoids and parallelograms that feature the 9º angle.

Color beam patterns include all three cFPb Green tones. Using transparency increases the strength of the beam metaphor. transparency should be achieved through opacity, not blending modes like multiply / darken / etc.

Large beams that are cut off by the frame of the page

9º trapezoid

9º

-9º triangle

9º

9º

CFPB De sIgn s T y Le guIDe 57

� Poor composition Beams float in white space, leaving little room for content. No transparency used.

� Poor composition All three beams layer in the same direction, weakening the beam metaphor.

Composition beam patterns are composed of overlapping beams that frame areas of white space used for titles, text, and other graphic elements. beams always point horizontally, not vertically.

Photography

CFPB De sIgn s T y Le guIDe 59

Principles Photography is an important tool that helps us relate to consumers, communicate empathy, and build trust.

cFPb images should preserve aesthetic integrity: photographs should never be stretched, free of special effects, and always in full color. Images should be relatable, natural, and shot in a real location.

60 PHoTogr A PH y guidelines editorial editorial photographs capture the events and activities attended by cFPb staff.

these photographs show consumers, our partners, and cFPb employees interacting.

Photos should have a clear focal point, proper lighting, and dynamic composition.

Photographs should not be collaged, staged, unrealistic, or use still lifes to illustrate concepts. Image manipulation should be limited to adjusting levels, contrast, and natural color balance.

Atlanta, GA:

Field Hearing on Mortgage Servicing

Confirmation Day:

Director cordray takes a moment to make calls and share the big news of the day editorial

CFPB De sIgn s T y Le guIDe 61

Assets

An edited selection of our latest editorial photographs is available at flickr.com/ photos/cfpbphotos.

Olivia calderon, from the city of Los Angeles community Development Department, talks about financial empowerment efforts for low-income and unauthorized immigrants at a consumer Advisory board meeting in Los Angeles, california on May 15, 2013.

Director cordray addresses bureau employees in Washington, D.c., at the 2012 All Hands Meeting editorial

Video

CFPB De sIgn s T y Le guIDe 63

Principles Video is a powerful tool that can be used to educate viewers about the financial marketplace and the CFPB's role in regulating it.

cFPb videos must contain strong emotional and creative imagery while maintaining visual simplicity. Video is a complex medium, so it is essential to pay attention to every detail, for example: composition, color treatment, typography and timing. the audience should recognize a cFPb video through its unique visual treatment.

64 V IDeo use cases event

A video that covers a specific event relevant to the Bureau, such as a field hearing, webcast, or conference.

Informational

An industry-facing video that informs viewers about a specific topic through animated slide presentations and voiceovers.

“Miami, FL: Field Hearing on Student Loan borrowers”

“Overview of cFPb’s remittance transfer rule” event

Informational

CFPB De sIgn s T y Le guIDe 65 educational

A video that educates consumers on a specific issue, web tool, or regulation written by the bureau.

Documentary

A documentary-style video that demonstrates how the cFPb has helped consumers and impacted their lives.

“What is HMDA?”

consumer stories educational

Documentary

66 V IDeo guidelines

Logo the horizontal lockup should be used in the introduction and conclusion of a video, centered on a white background without any other visual content.

At any other time, the isolated logo may be used in the bottom-right corner of the frame. the logo must be placed on a white background.

Typography typography should be balanced with other visual content, such as live footage or illustration. type should not overlap other content. Key messages can also be highlighted on their own using display text.

Logo

Typography consumerfinance.gov

CFPB De sIgn s T y Le guIDe 67

Title slides title slides for educational videos should feature clean typography with ample white space. A beam pattern may be used either as the background or anchored to the bottom of the composition.

Animation

Animation should be used to bring on-brand illustrations to life. Animation can also be used enhance the display of information, such as drawing the trajectory of a line chart or the growth of a bar chart.

Defining a collective vision for the financial education field CFPB headquarters, Washington D.C.

Animation`

Title slides Lower third consumerfinance.gov consumer Financial Protection bureau 1700 G Street NW Washington Dc 20552

855-411-cFPb (2372) ttY/tDD 855-729-cFPb (2372) cfpb_design@cfpb.gov