Use pictograms to communicate in a glance, offer interactivity, or simplify complex ideas. Shown here are examples for many use cases such as websites, product UI’s, signage, events, and merchandise. When used appropriately, they become an elegant addition to the IBM experience.
Productive and expressive pictograms are two distinct types of artwork that work best in different contexts. Productive pictograms are the go-to pictogram type for most contexts; they work across a variety of scales and environments whether physical or digital. They’re illustrative and simple, allowing for one or many to be used to convey complex ideas.
Expressive pictograms represent a more dynamic option to the standard pictogram, using gradients, layering and transparency to build a sense of depth and movement in the artwork. Due to their visual complexity, expressive pictograms should be used selectively and only in scenarios that call for a graphic with strong presence.
Pictograms are used in a range of sizes, the minimum being 48px while the maximum size may vary based on application. Use pictograms at their original sizes or scale at accepted increments.
Pictograms are optically aligned to the center of the icon grid within the boundary box. Centering ensures all pictograms will be aligned correctly when exported and used side by side.
Pictograms can be represented in a circular or rectangular container calculated based on the padding size.
When designing with pictograms, all artwork should include minimum padding based on 1/4 of the scaled grid size. The padding can be increased by increments of 1/4 grid units.
Pictograms on backgrounds must always pass color contrast requirements. When pairing pictograms with backgrounds, follow color family rules to ensure that the pictogram does not clash with or blend into the background. Dark background colors should range between values 70–100 while light backgrounds should not exceed values 10–20.
Expressive pictograms have four color themes: dark, light, monochromatic dark, and monochromatic light. To ensure accessibility, use the color theme that corresponds with the pictogram’s background color.
|Background color value||Pictogram theme|
|30–50||Monochromatic light (Black)|
|50–70||Monochromatic dark (White)|