DFPI Brand Book

DESIGN BRAND GUIDELINES

Brand guidelines establish guides to ensure we present ourselves consistently to our audiences. Working together, we can strengthen our communications now and make them even better for the future. BRAND GUIDELINES This document includes all of the elements you may need—logos, typefaces, colors, and more—to create a consistent tone, look, and feel for DFPI. We invite you to absorb this information and reference it often to become an informed keeper of the brand.

BRAND GUIDELINE CONTENTS SECTION 0 1 BRAND INTRODUCTION SECTION 02 BRAND LOGO DESIGN SECTION 03 BRAND TYPOGRAPHY SECTION 04 BRAND COLOR SYSTEM SECTION 05 BRAND VISUALS SECTION 06 BRAND GRID SYSTEM SECTION 07 BRAND SUMMARY

SECTION 01 BRAND INTRODUCTION

ABOUT US The Department of Financial Protection and Innovation protects California consumers by regulating financial activity, licensing financial service providers, and enforcing state laws that help create a fair and resilient marketplace. The Department also reviews consumer complaints, takes legal action against bad actors, and examines licensees to make sure they’re in compliance with the law. Key to the work of DFPI is ensuring that consumers understand their rights and know how to get help. The Department provides financial education resources, consumer alerts about financial fraud and scams, and an online search function so you can make sure your financial provider is licensed with us. The passage of the California Consumer Financial Protection Law (CCFPL), which went into effect Jan. 1, 2021, also expanded DFPI oversight to include credit repair and consumer credit companies, debt collectors, debt relief companies, private student loan servicers, and others. Thanks to the new law, the DFPI can now investigate all claims of unlawful, unfair, deceptive and abusive practices by financial service providers, adding even more protections to California consumers. MISSION We are a national leader with a mission to protect consumers, foster trust, innovation, and fairness in the financial marketplace. VISION Serve Californians by effectively overseeing financial service providers, enforcing laws and regulations, promoting innovation and fair, honest business practices, enhancing consumer awareness, and protecting consumers by preventing potential marketplace risks, fraud, and abuse.

SECTION 02 BRAND LOGO OVERVIEW

BRAND MAIN LOGO DFPI’s combination logo makes it very modern, clean, and professional. There is one monoline version of this logo. Full Logo Logo symbol 77 Mm 77 Mm Monoline Logo 125 Mm

Whenever you use the logo, it should be surrounded by clear space to ensure its visibility and impact. No graphic elements of LOGO CLEAR SPACE any kind should invade this zone. When using the logo, maintain a clear margin the same size as the “X” all the way around and the letter “X” represents Logo Icon. Full logo 50% clear space Full construction

BRAND IMAGERY The following images are examples of improper use and alterations of our logo. Proper use ensures the integrity of BRAND LOGO MISUSE the design and brand unity. Don’t apply effect on the logo Don’t use logo on same background Don’t apply gradient to logo Don’t rotate the logo design Don’t distort or skew logo Don’t use logo in a shape.

LOGO COLOR VARIATIONS

SECTION 03 BRAND TYPOGRAPHY

BRAND TYPOGRAPHY Typography enables us to create a particular context and have a specific personality. Careful use of typography reinforces our personality and ensures clarity and harmony in all of the communications. Print PRIMARY PRINT TYPEFACE ARIAL Bold 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 0 1 2 3 4 5 6 7 8 9 Light 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 0 1 2 3 4 5 6 7 8 9

BRAND TYPOGRAPHY Typography enables us to create a particular context and have a specific personality. Careful use of typography reinforces our personality and ensures clarity and harmony in all of the communications. Digital PRIMARY TYPEFACE SECONDARY TYPEFACE GOTHAM SEGOE UI Bold Bold 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 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 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 Medium Semibold 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 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 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 Book Regular 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 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 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 Light Italic 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 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 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9

TYPOGRAPHY FONT LEADING HEADLINES THIS IS A HEADLINE Should be used sparingly in marketing communications to draw attention to important text. When Gotham - Bold | 32 pt type and 42 pt leading legibility/contrast is an issue, use the block behind the text. HEADING THIS IS A HEADING Should be used in multipage documents and websites to denote a new section. Gotham- Bold | 24 pt type and 28 pt leading SUBHEADLINES Should be used under headlines or headers when THIS IS A SUBHEADLINE necessary. Subheadlines may also be used as the first sentence of a paragraph in marketing communications. Gotham- Semi Bold | 13 pt type and 14 pt leading BODY COPY THIS IS BODY COPY Should be used for supportive messaging Segoe UI - Regular | 10 pt type and 14 pt leading

SECTION 04 BRAND COLOR SYSTEM

COLOR SYSTEM PRIMARY COLORS COLOR CODE COLOR CODE Color plays a vital role in the DFPI brand identity and are Hex : #AA8A00 Hex : #002D72 recommended for various media. These colors are this Rgb : 170, 138, 0 Rgb : 46, 102, 132 brand's core colors that will be used across all digital and marketing material. SECONDARY COLORS COLOR CODE COLOR CODE COLOR CODE COLOR CODE COLOR CODE Hex : #009CDE Hex : #DBB716 Hex : #E1EAF1 Hex : #000000 Hex : #B9FAF8 Rgb : 0, 156, 222 Rgb : 219, 183, 22 Rgb : 225, 234, 241 Rgb : 0, 0, 0 Rgb : 185, 250, 248 COLOR CODE COLOR CODE COLOR CODE COLOR CODE Hex : #107E7D Hex : #95190C Hex : #A7C957 Hex : #A8407E Rgb : 16, 126, 125 Rgb : 149, 25, 12 Rgb : 167, 201, 87 Rgb : 168, 64, 126

SECTION 05 BRAND VISUALS

BRAND PHOTOGRAPHY These are the approved photos and images that we can use in marketing materials like website, flyers, Billboards and EXECUTIVE Social media, etc. These images should illustrate our committment to diversity, equity and inclusion.

BRAND PHOTOGRAPHY These are the approved photos and images that we can use in marketing materials like website, flyers, Billboards and Social media, etc. These images should illustrate our committment to diversity, equity and inclusion. EXECUTIVE

These are the approved photos and images that we can use in marketing materials like website, flyers, Billboards and BRAND PHOTOGRAPHY Social media, etc. These images should illustrate our committment to diversity, equity and inclusion. INDUSTRY

These are the approved photos and images that we can use in marketing materials like website, flyers, Billboards and BRAND PHOTOGRAPHY Social media, etc. These images should illustrate our committment to diversity, equity and inclusion. CONSUMER SERVICES/FINANCIAL PROTECTION

These are the approved photos and images that we can use in marketing materials like website, flyers, Billboards and BRAND PHOTOGRAPHY Social media, etc. These images should illustrate our committment to diversity, equity and inclusion. CONSUMER SERVICES/FINANCIAL PROTECTION

These are the approved photos and images that we can use in marketing materials like website, flyers, Billboards and BRAND PHOTOGRAPHY Social media, etc. These images should illustrate our committment to diversity, equity and inclusion. LEGAL

BRAND IMAGERY Social Icons Web Icons Data Visualization

SECTION 06 BRAND GRID SYSTEM

BRAND GRID SYSTEM This Brand Grid System shows an approved layout with a typography grid for DFPI web or printed articles. This Article Grid System supports our brand's desired layout configuration. ARTICLE GRID SYSTEM INTRODUCTION Gotham 24pt to 36pt Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nonummy nibh euismod tincidunt ut laoreet dolore magna nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi aliquam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis sed diam nonummy nibh euismod tincidunt ut laoreet dolore nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis hendrerit in vulputate velit esse molestie consequat, nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Gotham WHO WE ARE 18pt to 16pt Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Segoe UI exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 12pt to 10pt in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

BRAND BUSINESS CARD Our logo must be used in its approved format and should not be modified. Altering the logo weakens the integrity and consistency of our brand. Here are some examples of approved usages of the logo. USAGE These business cards will be used for all official contact and communication of the Department of Financial Protection and Innovation. CHRISTOPHER ACTING COMMISSIONER W www.DFPI.com E info@DFPI.com P 123 1234 1234

BRAND LETTERHEAD Our logo must be used in its approved format and should not be modified. Altering the logo weakens the integrity and consistency of our brand. Here are some examples of approved usages of the logo. Mr, John Smith Organization Street address City name USAGE Dear Sir, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt This letterhead will be used for all official communication. ut laoreet dolore magna aliquam erat volutpat. Ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. W www.DFPI.com E info@DFPI.com P 123 1234 1234

SECTION 07 BRAND SUMMARY

BRAND SUMMARY OUR IDENTITY IS THE TOTAL EFFECT OF YOUR LOGOS, PRODUCTS, BRAND NAMES, TRADEMARKS, ADVERTISING, BROCHURES, AND PRESENTATIONS. IT IS THE VISUAL REPRESENTATION OF OUR BRAND. The DFPI brand, including the logo, name, colors, and identifying elements, are valuable company assets. Our brand is an essential element and must be consistent. Minor variations and alterations will undermine and compromise our visual brand. The guidelines set in this document are not meant to inhibit but to improve the creative process. By following these guidelines, the materials you create will represent the DFPI cohesively to the outside world.

BRAND GLOSSARY JPEG/JPG PNG PDF JPEG is a lossy raster format that stands for Joint PNG is a lossless raster format that stands for Portable PDF stands for Portable Document Format and is an Photographic Experts Group, the technical team that Network Graphics. Think of PNGs as the next-generation image format used to display documents and graphics developed it. This format is one of the most widely used GIF. This format has built-in transparency but can also correctly, no matter the device, application, operating formats online, typically for photos, email graphics, and display higher color depths, translating into millions of system, or web browser. PDF files have a robust vector large web images like banner ads. JPEG images have a colors. PNGs are a web standard and are quickly graphics foundation at their core but can also display sliding scale of compression that decreases file size becoming one of the most common image formats used everything from raster graphics to form fields to tremendously but increases artifacts or pixelation the online. spreadsheets. Because it's a nearly universal standard, PDF more compressed the image. files are often the file format requested by printers to send a final design into production. Both Adobe Photoshop and Illustrator can export straight to PDF, making it easy to start your design and get it ready for printing. AI LOSSY EPS AI is a proprietary vector image format that stands for TIFF is a lossless raster format that stands for Tagged Image Adobe Illustrator. The format is based on both the EPS and File Format. Because of its extremely high quality, this format EPS is an image format that stands for Encapsulated PDF standards developed by Adobe. Like those formats, AI is used in photography and desktop publishing. You’ll likely PostScript. Although it is used primarily as a vector format, files are primarily a vector-based format, though they can encounter TIFF files when you scan a document or take a an EPS file can include both vector and raster image data. also include embedded or linked raster images. AI files can photo with a professional digital camera. Do note that TIFF Typically, an EPS file includes a single design element that be exported to PDF and EPS files (for easy reviewing and files can also function as a “container” for JPEG images. can be used in a larger design. printing) and JPEG, PNG, GIF, TIFF, and PSD (for web use These files will be much smaller than traditional TIFF files, and further editing). which are typically very large.