Enterprise technology and IT services
IBM Design Language, annotated
IBM’s design language measures clear space in logo heights, icons in pixels and spacing in fixed multiples, with open font files. Quoted with notes, with gaps.
The IBM Design Language covers the logo, color, typography, photography, illustration, icons, and grid of IBM. It is a public website with a dated change log. Its typeface, IBM Plex, is open source, and people can download its color palette as swatch files. The rules for voice and writing are in a different place, the IBM brand center. For the visual parts of a guide, it is one of the most exact public examples.
Best parts, quoted with notes
Logo
Keep the logo separated from other visual elements by a distance equal to its height. This distance is considered the minimum uninterrupted space surrounding the logo.
Has: exact value. Clear space equals the logo's own height, which anyone can measure.
Color
Each of the 10-color families have been divided into 10 swatches ranging from light to dark. RGB and HEX values are provided for digital applications along with Pantone® and CMYK values for print.
Has: exact value. Says which values are for screens and which are for print.
Color
The following color combinations have been eliminated from the color families and should be avoided unless required for specific applications, such as data visualization.
Has: where it applies. Bans certain pairings and names the one use where they are still allowed.
Typography
However, the fonts in these libraries may not have the latest versions, so we always recommend going to the IBM Plex GitHub repo.
Has: real file, reason. Names the source for current font files and why the other copies can lag.
Typography
Write content in sentence case. Title case can be used in proper titles, product names and service names. Avoid the use of all uppercase or “all caps” in your typography, especially for paragraphs or text.
Has: exact value, where it applies. A default, the named exceptions and what to avoid, in three sentences.
Photography and imagery
Everything should be in sharp focus. This crisp approach reinforces a deep interest in everything, and an emphasis on context and detail.
Has: reason, right and wrong. Rule and reason together, with a photo to avoid shown beside it.
Icons and illustration
Use a 2px stroke for all icons to maintain uniformity. Exceptions may be made only for more complex icons or those with unusually dense line work.
Has: exact value, where it applies. Gives the stroke width and says exactly when it can be different.
Layout and templates
All spacing between elements can be defined by the base unit. Use the following multiples of your base unit to construct your layout: 1x, 2x, 3x, 4x, 6x, 8x, 10x, 12x.
Has: exact value. A closed list of spacing multiples that a person or a tool can check.
What it leaves out
- No voice, tone or writing guidance. The FAQ says brand definition and high-level guidance sit in the separate IBM Brand Center. Source
- Logo files are not public: the logo request links on the 8-bar page say "(IBM ID required)". Source
What to take from it
- Measure clear space and spacing in units of the design itself, for example the height of the logo or a base unit.
- Give icon rules as numbers (grid, stroke, corner radius), so that new icons match the set.
- Link the font files and color files from the rules that use them. Say which copies are possibly out of date.