Branding and Visual Elements
Branding and visual elements strengthen the IEEE reputation and create a consistent experience for users. Users bring their own experience and expectations to any site they visit. If you ignore that, you risk causing confusion and alienation. Consistency facilitates efficient task completion and creates trust in the brand.
IEEE sites should utilize the IEEE color palette to create a more unified look and feel throughout the IEEE digital presence. Although the palette offers a broad range of colors, it is advised to use only two or three colors from either palette predominantly throughout the site. Additional color usage within or outside the palette should be used sparingly and purposefully.
IEEE.org and templates for other IEEE sites were designed using a broad range of colors. This color palette can be referenced in the IEEE Brand Identity Guidelines (PDF, 5 MB) document within the "Brand Basics: Color" section.
Use of these colors on IEEE.org for purposes other than those specified, or use of colors not included on the palette, should be approved by the Experience Design Team.
Additional colors may be used within site page templates. Efforts to incorporate colors from, or complementary to, the IEEE color palette will create a more unified look and feel between the sites.
IEEE Primary Color: IEEE Blue PMS 3015 C
Color plays an important role in representing the IEEE brand. Use IEEE Blue (Pantone specification 3015 C) on all corporate-wide communications. This specific blue has been chosen for its reliability in various printing processes and its similarity to the previous blue used on many IEEE communications. Having been used consistently over time, this color is associated with the IEEE brand.
IEEE Blue PMS 3015 C
(Only the specific tints of this color have been approved for use)
IEEE Expanded Palette: Bright and Dark Colors
An expanded color palette, consisting of a range of bright and dark colors, has been developed to bring the IEEE personality to life as a vibrant and forward-thinking organization. Use the expanded color palette across sub-brands and as accent colors on corporate-level communications.
- This palette allows for flexibility in brand communications where sub-brand, cultural, or product distinction is warranted.
- Use CMYK colors when four-color printing is available
- Use Pantone colors when printing with more than four colors, or fewer than three colors
- Use RGB colors for screen-based applications, such as PowerPoint presentations, HTML emails, and television monitors
- Use Hexadecimal colors when creating websites and any related applications, such as banner advertisements
- Tints of 100%, 80%, 60%, 40%, and 20% are also acceptable
|Primary||Hexadecimal (web)||Pantone (spot)||CMYK (print)||RGB (screen)||RAL (European Equivalent)|
|#00629B||3015 C||C100 M35 Y3 K21||R0 G98 B155||5007|
|Bright||Hexadecimal (web)||Pantone (spot)||CMYK (print)||RGB (screen)||RAL (European Equivalent)|
|#FFA300||137 C||C0 M41 Y100 K0||R225 G163 B0||1003|
|#FFD100||109 C||C0 M9 Y100 K0||R255 G209 B0||1018|
|#78BE20||368 C||C65 M0 Y100 K0||R120 G190 B32||6018|
|#00843D||348 C||C96 M2 Y100 K12||R0 G132 B61||6037|
|#BA0C2F||200 C||C3 M100 Y70 K12||R186 G12 B47||3027|
|#981D97||254 C||C48 M96 Y0 K5||R152 G29 B151||4006|
|#009CA6||320 C||C96 M0 Y31 K2||R0 G156 B166||5018|
|#00629B||3015||C100 M35 Y3 K21||R0 G98 B155||5007|
|#00B5E2||Process Cyan C||C100 M0 Y0 K0||R0 G181 B226||5024|
|#FFFFFF||White||C0 M0 Y0 K0||R255 G255 B255||9016|
|Dark||Hexadecimal (web)||Pantone (spot)||CMYK (print)||RGB (screen)||RAL (European Equivalent)|
|#E87722||158 C||C0 M62 Y95 K0||R232 G119 B34||2011|
|#FFC72C||123 C||C0 M19 Y89 K0||R255 G199 B44||1018|
|#658D1B||370 C||C62 M1 Y100 K25||R101 G141 B27||6018|
|#006341||3425 C||C93 M13 Y85 K44||R0 G99 B65||6016|
|#861F41||208 C||C15 M100 Y37 K45||R134 G31 B65||4002|
|#772583||2612 C||C67 M100 Y0 K5||R119 G37 B131||4006|
|#007377||322 C||C97 M9 Y39 K34||R0 G115 B119||5021|
|#002855||295||C100 M69 Y8 K54||R0 G40 B85||5026|
|#75787B||Cool Gray 9 C||C30 M22 Y17 K57||R117 G120 B123||9023|
|#000000||Process Black||C0 M0 Y0 K100||R0 G0 B0||9017|
Colors And Accessibility
When choosing a website's colors, accessibility should be a top priority. There should be a sufficient contrast between layered colors so that users with disabilities are able to discern different types of color combinations.
Guidelines for Accessibility
- View Web Content Accessibility Guidelines (WCAG) 2.0, level A
- View accessibility roadmap for IEEE sites
Color checkers for Accessibility
Imagery used consistently can support the IEEE brand identity. If imagery is used on your site, it should reflect the six imagery themes below. These themes are based on key pillars of the IEEE brand and reflect the IEEE brand personality and style, as well as IEEE members, areas of expertise, and history.
Real photographs (not clip art or stock images) should be used whenever possible to convey these themes. When real photographs are not available, stock photography that looks real is acceptable, but should only be used in meaningful ways.* Learn more about how to use imagery in the IEEE Brand Identity Guidelines (PDF, 5 MB) within the "Imagery" section on Pages 22 and 23. *Royalty-free images are available to purchase from various stock photography collections on the digital platform and can be purchased for a one-time fee for usage in an unlimited number of applications, an unlimited number of times.
Typography can work together with other design elements to make communications more readable, consistent, and visually appealing.
Digital-based applications and websites are encouraged to use Open Sans. Open Sans is one of the most widely accepted fonts in websites around the world because it was specially designed for screen readability and flexibility on different browsers. Recommendation: For digital-based applications, font size should at least be 15 pixels. The space between the lines of text/copy should at least be 1.5 times the font size (i.e., the line-height should be 1.5).
For PowerPoint presentations, Word documents, etc., Calibri is recommended.
The IEEE typography options can be referenced in the IEEE Brand Identity Guidelines (PDF, 5 MB) document within the "Brand Basics: Typography" section.
The wedge, based on the graphic style of the diamond symbol from the IEEE Master Brand, is also a key element of the IEEE design system. This symbol, which has a long history at IEEE, has been enhanced to create a unique and dynamic look-and-feel system that can be applied across all of the IEEE branded communications. Using this graphic style correctly and consistently will help build a recognizable and powerful brand look and feel, creating equity for the IEEE brand. IEEE.org's content management system defaults to use the wedge design within its page designs. If the Webmaster would like to create an additional design element that uses the wedge, refer to the IEEE Brand Identity Guidelines (PDF, 5 MB) document within the "Design System: The Wedge" section.
How To Use The Letters I-E-E-E When Designing
- IEEE must always be used in the title of an IEEE product, service name, or publication. (For example, IEEE eLearning Library, IEEE Xplore, IEEE Photonics Journal.) The letters I-E-E-E also must appear in any graphic representation, text, or signage that mentions the product. (header/content)
- Only the letters I-E-E-E can be used in the title of an IEEE product, service name, or publication. Do not use the IEEE Master Brand (consisting of the IEEE diamond-shaped logo—the "kite"—followed by the letters I-E-E-E) or any portion of it. (applies to header/content)
- When used in a sentence, title, or name, the letters "IEEE" should always be capitalized. (applies to content)
- The letters I-E-E-E can be in any of the IEEE approved fonts except Univers 75, the font for the Master Brand, or in a font that closely resembles Univers 75. It is recommended that the letters I-E-E-E use the same font as the rest of the name or title. This includes all print, screen, non-screen, and digital-based applications. (applies to graphics)
The following are examples of correct and incorrect usage of the letters I-E-E-E and the IEEE Master Brand in a name or title:
Submit any questions via the IEEE Brand Inquiries Form.