STYLE GUIDE - Dhcd.baltimorecity.gov

STYLE GUIDEFEBRUARY 2019

TABLE OF CONTENTSThe Baltimore City Departmentand Housing and CommunityDevelopment’s mission isto improve the quality oflife for all Baltimore Cityresidents by revitalizing andredeveloping communities andensuring access to adequateand affordable housingopportunities in safe, livableand decent neighborhoods.2

4INTRODUCTION6LOGO CONSTRUCTION8PRIMARY LOGO11FILE TYPE USAGE28LOGO MISUSE18COLOR PALETTE20TYPEFACE22BRAND APPLICATIONS24GLOSSARY3

INTRODUCTIONThe Baltimore City Department ofHousing & Community Developmentis a new, stand-alone agencydedicated to consolidating localcommunity development effortswith housing and building codeenforcement. Previously, a single,umbrella organization known asBaltimore Housing administeredall housing matters for the city.Under Mayor Pugh’s leadership,this umbrella agency was separatedinto the Housing Authority ofBaltimore City and the Baltimore CityDepartment of Housing & CommunityDevelopment. As part of thetransition, the new agency wanted afresh, modern look that representstheir focus on affordable housing andcommunity development.4

5

LOGO CONSTRUCTIONThe Baltimore CityDepartment andHousing and CommunityDevelopment’slogo is a distinctivevisual signature thatshowcases various typeof housing and lanscape.6

7

PRIMARY LOGOLOGO ON WHITE8

LOGO COLOR VARIATIONSGrayscale on whiteWhite outlineon dark background (reverse)9

PRIMARY LOGOLOGO ORIENTATIONStacked10Horizontal

MINIMUM WIDTHIt is recommended that the stacked logobe a minimum width of 1 inch for print.The recommended minimum width forthe horizontal logo is 1.3 inches.There is no maximum sizedefined for this logo.LOGO CLEARANCEAlways allow a minimum space around thelogo. This is also known as exclusion zones.11

FILE TYPE USAGEWHICH FILES TO USE Only EPS and PNG formats preservebackground transparency. EPS format is a vector image, while JPGand PNG are raster images. Saving an EPS file as an EPS 8 fileshould eliminate cross-platformproblems and solve uploading issuesfor programs that require PC coding. PNG format is most suitable for webapplications.Refer to the table on this page for detailedusage guidelines.- Recommended File Type- Optional File Type12

DESIGN yExcel DocumentsOnline & EmailsPowerPointPromotional ItemsPublisher DocumentsSilkscreeningVehicle GraphicsVideo/ Quicktime MovieWord DocumentsDESIGN APPLICATIONAdobe After EffectsAdobe IllustratorAdobe IndesignAdobe PhotoshopAdobe Premier ProCinema 4DDreamweaverMicrosoft ExcelMicrosoft PowerPointMicrosoft WordQuarkXpressWordPerfect13

LOGO FORMATS14

EPSJPGPNGHORIZONTAL LOGOSTACKED LOGO15

LOGO MISUSE16DO NOTDO NOTput the skyline mark belowthe department’s nameput the skyline mark to the rightof the department’s nameDO NOTDO NOTstrech or skew the skyline markor wordschange the color of the blocks in theskyline mark

DO NOTDO NOTtake out part of thedepartment’s nameflip the skyline mark horizontallyDO NOTDO NOTadd a drop shadow to theskyline markadd a glow to the skyline mark17

COLOR PALETTEPMS (Pantone) colorsshould be used for spotcolor printing process.UseCMYK for 4 color printing.RGB/HEX should be usedfor on-screen applications.18

BCDHCD GREENPantone Solid 2300 CR165, G187, B73HEX #a5bb49Pantone CMYK 2300 CPC41, M12 Y91, 50%30%20%BCDHCD TEALPantone Solid 7473 CR28, G168, B157HEX #1ca89dPantone CMYK 7473 CPC77, M11, Y45, K080%BCDHCD ORANGEPantone Solid 1235 CR253, G183, B36HEX #fdb724Pantone CMYK 1235 CPC0, M31, Y95, K080%BCDHCD REDPantone Solid 7524 CR192, G81, B61HEX #c0513dPantone CMYK 7524 CPC16, M80, Y80, K980%BCDHCD BLACKPantone Solid Black CR0 G0 B0C0 M0 Y0 K100HEX #00000080%BCDHCD GREY (SECONDARY)Pantone Solid 179-12 CR88 G89 B91C0 M0 Y0 K80HEX #58595b80%19

PRIMARY TYPEFACEAdobe Font (avaliable with Adobe Creative Cloud)URW DINParagraph / body 1234567890!@# % &*() ”:? LightThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for allBaltimore City residents.ItalicThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for allBaltimore City residents.BoldThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for allBaltimore City residents.BlackThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for allBaltimore City residents.20

SECONDARY TYPEFACEGoogle FontLatoParagraph / body 1234567890!@# % &*() ”:? ItalicThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for all BaltimoreCity residents.BoldThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for allBaltimore City residents.BlackThe Baltimore City Department and Housing and CommunityDevelopment’s mission is to improve the quality of life for allBaltimore City residents.21

BRAND APPLICATION22

23

24

25

GLOSSARYRGB(Red, Green, Blue) color mode is for anything that is computer-baseddesign. This includes websites, apps, banner ads, social media, and anyother design created for electronic use.CMYK(Cyan, Magenta, Yellow, Black) color mode is used for print design.This includes logos, business cards, stationary, illustration, packagingand any other designs used for print.VECTORVector images are made up of points, lines, and curves that canbe infinitely scaled without any loss in image quality. They are thepreferred file format for designers and printers.RASTERRaster images are constructed using a fixed number of colored pixelsor individual building blocks to form a complete image. They can’t bedramatically resized without compromising their resolution. Whenstretched to fit a space they weren’t designed to fill, their pixels becomevisibly grainy and the image distorts.PANTONE/PMSPantone is a company that created a system for matching colors,specifically used in specifying printing inks.26

EPSEPS is an image format that stands for Encapsulated PostScript.Although it is used primarily as a vector format, an EPS file can includeboth vector and raster image data. Typically, an EPS file includes asingle design element that can be used in a larger design.JPEG/JPGJPEG is a lossy raster format that stands for Joint Photographic ExpertsGroup, the technical team that developed it. This is one of the mostwidely used formats online, typically for photos, email graphics andlarge web images like banner ads. JPEG images have a sliding scaleof compression that decreases file size tremendously, but increasesartifacts or pixelation the more the image is compressed.PNGPNG is a lossless raster format that stands for Portable NetworkGraphics. Think of PNGs as the next-generation GIF. This format hasbuilt-in transparency, but can also display higher color depths, whichtranslates into millions of colors. PNGs are a web standard and arequickly becoming one of the most common image formats used online.HEXIn coding websites using HTML, a color can be specified using ahexadecimal value in the form of #rrggbb.PDFPDF is a file format created by Adobe that provides an electronic imageof text or text and graphics that looks like a printed document and canbe viewed, printed, and electronically transmitted.27

Microsoft PowerPoint Microsoft Word QuarkXpress WordPerfect 13. LOGO FORMATS 14. EPS JPG PNG HORIZONTAL LOGO STACKED LOGO 15. DO NOT put the skyline mark below the department’s name DO NOT strech or skew the skyline mark or words DO NOT change the color of the blocks in the skyline mark