Visual System
Primary Visual Elements
These are the primary visual elements that should be used whenever outward facing visual pieces need additional texture or visual support. All images are Copyright (c) 2018-2020 by Red Hat Developer Program.
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 |  |  |
| Universal Code Block Dark Background |  |  |
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. </br>
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.
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.
