Documentation and source files for RHD brand standards & design systems.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
RHD Full Logo
RHD Mark
RHD Story + Messaging
RHD Typography
RHD Visual Elements
RHD Visual Guidelines
docs
.gitignore
LICENSE
README.md

README.md

Red Hat Developer Brand Manual

This guide will serve as a home base for the Red Hat Developer story, messaging, and visual brand language. It's a place you can always return to when you have questions about how to best represent Red Hat Developer through messaging or visual elements.


 

Story & Messaging Guidelines

Red Hat Developer will continuously evolve, grow, and expand to adapt to new tools and practices. But there are key elements about Red Hat Developer that will never change. This document captures the foundational story and messaging elements core to the Red Hat Developer story.

Brand Layers

Our brand—our reputation—is most clearly communicated when how we think is aligned with how we look, sound, and act.

 

Organizing Principle

The Organizing Principle is an internal dynamic concept, an overarching idea that defines how we want to look, sound, and act. Whether you're writing headlines for a marketing campaign, creating images for social media, or engaging with community members at an event, this Organizing Principle is a powerful inspirational tool that should help shape the representation of Red Hat Developer.

 

Messaging

This document is a tool for internal use—to refer to whenever you have questions about the story. That said, this story and messaging guide is not meant to limit your creativity, but instead help guide any future content creation, marketing materials, or campaigns.  

Messaging Principles

Messaging Architecture

Supporting Headlines



 

Visual Guidelines

This visual guide will serve as a home base for Red Hat Developer's visual brand language. It's a place you can always return to when you have questions about visual elements for Red Hat Developer, or when you're creating brand materials.

The visual guide is for internal use, to help you ensure you're creating a cohesive visual experience for customers across all brand touchpoints. It's meant to be a living, breathing document—a place where you can continue building your visual language to reflect changes in the brand.

Logo

The Red Hat Developer logo family is a unique system that distinguishes our organization from all others. Use of the logo, typography, and color should follow the guidelines within this document so that we present a consistent image to our various audiences.

Clear Space
When we place other design elements too close to the logo family it can sometimes suggest a relationship between them. Think of the logo family as our signature. The more we keep it intact, the more recognizable and valuable it will be. To maintain the integrity of the Red Hat Developer identity, keep a fixed amount of open space around each logo to help it stand out.

Logo (SVG) Logo (PNG)

Files

Name Usage SVG PNG
Full Logo Full-Color This is the primary version of the logo to be used on light or white backgrounds Logo (SVG) Logo (PNG)
Full Logo Full-Color (black background) This is the primary version of the logo to be used on dark gray or black backgrounds Logo (SVG) Logo (PNG)
Full Logo 4-color This version of the logo should only be used when printing limitations restrict the use of the full-color logo Logo (SVG) Logo (PNG)
Full Logo 4-color (black background) This version of the logo should only be used when printing limitations restrict the use of the full-color logo Logo (SVG) Logo (PNG)
Full Logo White (red background) This version of the logo should be used when printing in black and white (over a dark background), or when the background color is the same as one of the colors in the full-color logo, or whenever the background competes with the full-color logo Logo (SVG) Logo (PNG)
Full Logo Black This version of the logo should be used when printing in black and white (over a light background), or whenever the background competes with the full-color logo but is too light for the white version of the logo Logo (SVG) Logo (PNG)
Mark Full-Color This is the primary version of the logo to be used on light or white backgrounds Symbol (SVG) Symbol (PNG)
Mark Full-Color (black background) This is the primary version of the logo to be used on dark gray or black backgrounds Symbol (SVG) Symbol (PNG)
Mark 4-color This version of the logo should only be used when printing limitations restrict the use of the full-color logo Symbol (SVG) Symbol (PNG)
Mark 4-color (black background) This version of the logo should only be used when printing limitations restrict the use of the full-color logo Symbol (SVG) Symbol (PNG)
Mark White (red background) This version of the logo should be used when printing in black and white (over a dark background), or when the background color is the same as one of the colors in the full-color logo, or whenever the background competes with the full-color logo Symbol (SVG) Symbol (PNG)
Mark Black This version of the logo should be used when printing in black and white (over a light background), or whenever the background competes with the full-color logo but is too light for the white version of the logo Symbol (SVG) Symbol (PNG)

Color Palette

Name HEX RGB CMYK PMS Sample
Light Red #CC0000 204, 0, 0 2, 98, 85, 2 1797 #CC0000
Dark Red #820000 130, 0, 0 2, 98, 85, 42 1815 #820000
Light Yellow #F0AB00 240, 171, 0 0, 30, 100, 0 130 #F0AB00
Dark Yellow #EC7A08 236, 122, 8 0, 55, 90, 0 716 #EC7A08
Light Green #92D400 146, 212, 0 47, 0, 94, 0 375 #92D400
Dark Green #3F9C35 63, 156, 53 78, 2, 98, 9 362 #3F9C35
Light Blue #00B9E4 0, 185, 228 79, 0, 6, 5 306 #00B9E4
Dark Blue #0088CE 0, 136, 206 79, 13, 1, 3 Process Blue #0088CE
Black #000000 0, 0, 0 60, 40, 40, 100 Rich Black #000000
Developer White #F9F9F9 249, 249, 249 0, 0, 0, 0 White #F9F9F9

 

Typography

The relationship between fonts give a brand its identity and its messages a voice. When used effectively, typography plays a critical role in establishing the tone of Red Hat Developer's brand expression. Our typography should follow the Red Hat parent brand guidelines.

 

Typeface Description Example Uses Files
Interstate Interstate is our corporate typeface. It’s part of a large and versatile type family, which allows us to speak in many voices—from big and bold to calm and confident.

Interstate looks best in print and when used for big headlines. We use it for all printed material, like collateral and stationery; for advertising, like printed ads and web banners; and anywhere text is embedded in an image, like diagrams and videos.
Interstate family
Overpass Overpass is an open-licensed alternative to Interstate that is specifically for use on-screen and in our software. Like Interstate, Overpass is based on the FHWA (Federal Highway Administration) series of fonts, which has been used for US Highway signage since 1945.

Overpass can be used in a lot of the same ways as Interstate. We use Overpass for all web text, editable presentations, and product interfaces.
Overpass family
Liberation Liberation is metrically equivalent to the default fonts on non-Linux platforms. That means there are fewer issues with font conflicts and formatting when a document moves between platforms.

Use Liberation Sans for live, editable documents that will be shared outside of Red Hat.

Use Liberation Mono for code samples.
Liberation family

 

Primary Visual Elements

These are the primary visual elements that should be used whenever outward facing visual pieces need additional texture or visual support.

 

Universal Code Block
The Universal Code Block provides visual context for the story behind the Red Hat Developer mark. When the mark needs background texture or additional visual support, the Universal Code Block should be used if possible. When at scale, the mark should be placed on top of the Universal Code Block like a puzzle piece (shown below), but the Universal Code Block can also be blown up or sized down as a layered textural element.

The Universal Code Block should always be left aligned, to communicate that it is an abstraction of code. It can be indented in sections to further communicate this idea, but it doesn't have to be. The Universal Code Block should be grayscale when the logo is present, but can be colorful if it is being used as a stand-alone visual element.

Name SVG PNG
Universal Code Block Light Background Logo (SVG) Logo (PNG)
Universal Code Block Dark Background Logo (SVG) Logo (PNG)

 

Merging Branches
The Merging Branches are inspired by gitbranches, a representation of the everyday development process. This full color version is a blueprint–a starting point for an endlessly flexible visual element. It can be as many or as few colors as needed (pulled from the RHD palette of course). It can contain many branches or few, as long as it is always merging toward a single branch, moving from left to right.

Unlike the Universal Code Block, the logo should never rest on top of the Merging Branches. Instead, it should live in the space around the Merging Branches, wherever makes sense in order to create a strong and balanced composition.

 

 

As an addition treatment, the Merging Branches can be visualized with a tilt-shift with a selective focus (as shown in the email header examples below). This treatment should be used sparingly, or as a dynamic solution when dimensions are not ideal for a strong composition using the full Merging Branches graphic.

 

Logo (SVG) Logo (PNG) Logo (PNG)

 

Secondary Visual Elements

Secondary visual elements can be used for promotional or one-off pieces, subtle or supporting background texture, or any secondary/tertiary level branded piece that may need additional visual support.

 

Morse Code
The visual elements that make the Red Hat Developer mark can be rearranged in infinite combinations to create unique structures of units and paths. When combined with one of the most iconic coding languages–Morse code–we can create visuals with an underlying layer of meaning, a secret treat for those who can see it. Using the international rules of Morse code along with some specific Red Hat Developer Rules, we can create beautiful abstract shapes that contain messages, words, and ideas that resonate with our audiences.

The first rule of the Morse code visual element is: you do not talk about the Morse code visual element. We don't ever want to directly address that there is an underlying meaning in these visuals; it exists only for those who can find it. We know that developers are perceptive, curious, detail-oriented problem solvers. They're our people. This visual treatment is like our secret handshake.

Logo (SVG) Logo (PNG)

Logo (SVG) Logo (PNG)

Credits

  • xxx
  • xxx

License

Copyright (c) 2018 by Red Hat Developer Program.