Logo Usage Guidelines
The Probation L.I.D.S. logo is an important expression of its brand identity. By applying the logo in a consistent manner, the recognition and visibility of the brand is strengthened. These few simple rules will help you use the logo to communicate the brand most effectively.
The Probation L.I.D.S. Logo
This is the Probation Leadership Institute for Directors & Supervisors logo. It is the primary graphic device and should be the first choice when choosing a graphic element to represent the brand.
Primary – Preferred Version
Minimum Height
Digital: 120 pixels
Print: .5 inches
Logo Clearance
When using the logo in a design or placing it next to other visual elements, it should have plenty of room to breathe. This maximizes the visibility & impact of the logo. The minimum amount of space that the logo must have on all sides is 1/5 the height of the logo.
For example: If the logo is sized 200px tall, there should be at least 40px of clearspace on all sides.
Inverted
This version is to be used on black backgrounds. The same clearance rules apply.
Color
The logo colors should be applied across all communications to uphold brand consistency. The primary and inverted logo use 6 colors (the yellow colors are the same for both).
#000000
CMYK 75, 68, 67, 90
#000066
CMYK 100, 98, 21, 30
#00349b
CMYK 100, 90, 4, 1
#ffb400
CMYK 0, 33, 100, 0
#ffcc46
CMYK 0, 20, 83, 0
#ffd946
CMYK 1, 12, 84, 0
#ffffff
CMYK 0, 0, 0, 0
#000066
CMYK 100, 98, 21, 30
#00349b
CMYK 100, 90, 4, 1
#ffb400
CMYK 0, 33, 100, 0
#ffcc46
CMYK 0, 20, 83, 0
#ffd946
CMYK 1, 12, 84, 0
Black and White Logos
These should only be used when it is not possible to use color.
#000000
CMYK 75, 68, 67, 90
#424242
CMYK 67, 60, 59, 45
#b7b7b7
CMYK 29, 23, 23, 0
#cccccc
CMYK 20, 15, 16, 0
#dedede
CMYK 11, 9, 9, 0
#ffffff
CMYK 0, 0, 0, 0
#b7b7b7
CMYK 29, 23, 23, 0
#cccccc
CMYK 20, 15, 16, 0
#dedede
CMYK 11, 9, 9, 0
Incorrect Usage of Logo
- Do not reverse logo.
- Do not apply other colors.
- Do not rotate any single part of the logo.
- Do not stretch or alter the proportions of the logo.
- Do not change the arrangement of the logo.
- Do not apply gradients, shadows, or other effects.
Digital Accessibility
Digital accessibility involves designing and building websites, tools and technologies that allow access to all visitors, no matter what their abilities or disabilities.
ITD follows the Web Content Accessibility Guidelines (WCAG) 2.1, which are international standards that define how to make web content more accessible. WCAG only requires logos to have text alternatives. However, even though logos are exempt from other WCAG guidelines, ITD still strives to create designs that are accessible to all users, including those with disabilities.
Our goal with accessibility isn’t simply WCAG conformance but to present the best possible experience for users.
When using logos digitally make sure to include an alternate text attribute:
Alt Text
To comply with the WCAG guidelines always provide text-alternatives when using any logo digitally.
For example:
Logos with a hyperlink
Logos often function as hyperlinks, following the best practice of linking to the homepage. It is important to use appropriate markup in the html to make it accessible. The link element (aka anchor tag) supports the function of naming from child content. The logo image is the child of the link, and so the alt text of the logo will become the text for the link. To be a meaningful link, the alt text should describe where the link will go.
For example:
<img src=”images/logo.png” alt=”Alameda County Homepage”></a>
If you are linking the logo in an older application or system that will not allow setting or changing the alt text of the logo image, you can fall back to using an aria-label attribute on the anchor tag. The aria-label attribute on an anchor tag will hide the child content (the image) from assistive technology and the aria-label value will become the text for the link.
For example:
<img src=”images/logo.png” alt=”Alameda County logo”></a>
If adding an aria-label is not possible, we suggest that you don’t place a link on the logo, and instead provide a text link.