Charts, Pictograms and Infographics
When designing tables, diagrams, and especially pictograms and infographics, it important to make sure that the shape and text elements used create a harmonious overall impression.
The latest information on Mercedes-Benz Brand Design regarding Project Focus can be found on Social Intranet and on the “Brand Design System (BDS)” online portal.
The content of the “Daimler Brand & Design Navigator” online portal applies to activities of subsidiaries with Daimler as part of their company name (according to Corporate Design Guideline A 33.1). For more information on the CI/CD set of rules for Daimler Truck AG, please visit the “Daimler Truck Design Navigator” online portal.
Tables, diagrams, pictograms, or infographics can be used to easily explain complex overall correlations. Thanks to visual data preparation individual information is displayed clearly and in a pleasant way on the web, in print media, etc. Graphical elements are dominated by clear, structured, and tidy illustrations. Tables, diagrams, etc. shall always be illustrated in 2D2D
The abbreviation “2D” stands for “two-dimensional.” The position of every point in a 2D object is ... without shading.
Tables and Diagrams
All tables and diagrams are based on a 1 x 1 mm grid. The base lines run horizontally and in black with a line thickness of 0.25 pt or 0.75 pt to highlight headings. Use the Petrol accent color including its corresponding lighter and darker tones to highlight text, values, or areas. Deep Red must be used very sparingly for highlighting. Tables and diagrams shall be on a white or Light Grey background. Text and digits shall be black on a white background or white on a dark background. Rows and/or columns in tables can be illustrated in Light Grey including the lighter or darker gradations. If a graphic has been included in continuous text, it features a 1 pt thick line at the top as a border from the text copy. The associated table heading shall be positioned below this line. If the tables or diagrams are not included in the text copy (e.g. within a PowerPoint presentation), the table or diagram heading shall be positioned above this line.
Tables | Typeface | Size/spacing | Alignment | Color |
Index figures | Daimler CS Regular | 14 pt/6 mm | Left-aligned | Petrol |
Header | Daimler CS Bold | 9 pt/4 mm | Left-aligned | Black |
Sub-header | Daimler CS Regular | 9 pt/4 mm 7.5 pt/4 mm |
Left-aligned | Black, Petrol |
Continuous text | Daimler CS Regular | 7.5 pt/4 mm | Left-aligned | Black |
Highlighting | Daimler CS Regular Daimler CS Bold |
9 pt/4 mm 7.5 pt/4 mm |
Left-aligned | Black, Petrol |
Diagrams | Typeface | Size/spacing | Alignment | Color |
Index figures | Daimler CS Regular | 14 pt/6 mm | Left-aligned | Petrol |
Header | Daimler CS Bold | 9 pt/4 mm | Left-aligned | Black |
Keys | Daimler CS Regular | 7.5 pt/3 mm | Left-aligned | Black |
Labeling/numbers | Daimler CS Regular | 7.5 pt/4 mm | Left-aligned Right-aligned |
Black, white |
Diagram Variants
Line diagrams are best suited to illustrate upward or downward trends. Preferably they must be designed horizontally. Line thicknesses from 1 pt, 1.5 pt, 2 pt, and 3 pt are available to illustrate the different trends. Line diagrams can also be illustrated as area diagrams.
Bar charts illustrate changes over a certain period. Colored surfaces are positioned next to each other vertically or horizontally. The bar thickness shall be 2 millimeters at minimum. Make sure the bars are not positioned directly next to each other and always keep a free-space.
Rankings can be illustrated very well in bar graphs. Individual elements of additive bar graphs are separated by a line with a thickness of 0.5 pt. The minimum width of the bars must be 3 mm.
Pie charts are very suitable to illustrate distributions and proportions. They are used in doughnut or pie charts. The ring shall be at least 2 mm wide. Individual segments shall be separated by a white line with a thickness of 0.5 pt. When creating these diagrams it is important to note the first element must start at the 12 o’clock line.
Pictograms
Pictograms represent specific objects or complex issues. They must therefore speak a clear and visually unambiguous language, be self-explanatory and internationally understandable. The style for pictograms at Daimler name-bearing subsidiaries is angular; their line thickness is based on the Daimler CS Demi font styleFont Style
Font variants within a font family, e.g. italic, normal, demi-bold, bold or extra bold.. Text elements in pictograms, e.g. the word “Exit”, are in upper case in the Daimler CS Demi font style.
The library “Sustainability” contains 44 pictograms:
[1] Sustainability, [2] strategy (“lane change”), [3] electricity pylon, [4] wind turbine, [5] e-mobility, [6] e-charging station, [7] gas pump, [8] flash, [9] e-battery, [10] plant building, [11] city, [12] climate protection, [13] conservation of resources 1, [14] conservation of resources 2, [15] conservation of resources 3, [16] emission-free vehicle, [17] carbon dioxide, [18] hydrogen, [19] water molecule, [20] hydrogen peroxide, [21] oxygen, [22] solar energy, [23] water consumption, [24] refuse, [25] raw material, [26] recyclable battery, [27] crude oil, [28] natural gas, [29] biomass, [30] electricity, [31] groundwater pollution, [32] soil and groundwater pollution, [33] soil pollution, [34] water bodies, [35] energy efficiency, [36] plant, [37] deciduous tree, [38] coniferous tree, [39] animals, [40] moose, [41] polar bear, [42] water drop (single), [43] water protection and [44] water drops
The library “Coronavirus pandemic” contains 23 pictograms:
[1] Coronavirus, [2] protective measure, [3] mouth-nose-mask (side view), [4] mouth-nose-mask (front view), [5] keep distance, [6] cough into your elbow, [7] do not sneeze into your hand, [8] observe current special regulations for meals, [9] observe special regulations for transport, [10] observe information on site, [11] do not shake hands, [12] in case of cough/fever: stay at home, [13] open doors without skin contact, [14] clean surfaces, [15] avoid grouping, [16] pay attention to signs of illness, [17] ventilate regularly, [18] heal up illness, [19] keep hands under running water, [20] rub soap into hands, [21] rub soap between the fingers, [22] rinse hands thoroughly and [23] dry hands carefully
The library “General” contains 41 pictograms:
[1] Consulting, [2] bookmark, [3] puzzle, [4] willingness to perform, [5] car service station, [6] customer orientation, [7] customer handover, [8] home, [9] continents Africa-Europe, [10] continents North America-South America, [11] continents Asia-Australia, [12] globe, [13] tool, [14] tachometer, [15] compass, [16] stop, [17] circle empty, [18] circle one-quarter filled, [19] circle half-filled, [20] circle three-quarter filled, [21] circle filled, [22] callout 1, [23] callout 2, [24] prohibition, [25] attention, [26] music, [27] target flags, [28] barrier, [29] winners podium, [30] trophy, [31] spyglass, [32] glasses, [33] pen, [34] thumbs up, [35] thumbs down, [36] library, [37] traffic lights, [38] traffic lights red, [39] traffic lights yellow, [40] traffic lights green and [41] calendar
The library “Business” contains 31 pictograms:
[1] Teamwork, [2] integrity, [3] feedback culture, [4] networking, [5] participation, [6] mixed team, [7] piggybank, [8] topic collection, [9] think tank, [10] education, [11] health, [12] balance, [13] sleep, [14] concentration, [15] analysis 1, [16] analysis 2, [17] motivation 1, [18] motivation 2, [19] gear wheels, [20] idea, [21] target circle, [22] checklist, [23] task, [24] certificate, [25] meeting, [26] office workplaces, [27] workplace, [28] business relations, [29] completed, [30] hierarchy and [31] handshake
The library “Mobility” contains 22 pictograms:
[1] car, [2] electric car, [3] plugin hybrid, [4] autonomous car, [5] autonomous driving, [6] autonomous driving (steering wheel), [7] taxi car, [8] van, [9] electric van, [10] car and van, [11] train, [12] delivery vehicle, [13] car key, [14] sharing & services, [15] target, [16] route, [17] pedestrian, [18] bicycle, [19] cyclist, [20] airplane, [21] drone and [22] air taxi
The library “Social media” contains 9 pictograms:
[1] LinkedIn, [2] Twitter, [3] Xing, [4] YouTube, [5] Facebook, [6] Instagram, [7] WhatsApp and [8] Snapchat
The library “Communications” contains 28 pictograms:
[1] Mobile app, [2] listening, [3] microphone, [4] video camera, [5] helpdesk, [6] megaphone, [7] distribution list, [8] speech bubble, [9] dialog, [10] providing information, [11] critical issue 1, [12] critical issue 2, [13] taboo issue 1, [14] taboo issue 2, [15] taboo issue 3, [16] discussion, [17] media wall, [18] presentation, [19] smartphone, [20] tablet, [21] desktop, [22] notebook, [23] digital media, [24] camera, [25] information, [26] document, [27] archive and [28] message
The library “Technology/IT” contains 30 pictograms:
[1] Artificial intelligence, [2] fingerprint, [3] safety, [4] database, [5] block chain, [6] analytics tools, [7] data processing, [8] update, [9] cloud, [10] data protection (cloud), [11] connectivity, [12] link, [13] virtual realityVirtual Reality
“Virtual reality” refers to an all-embracing computer-generated simulation of reality, which is ..., [14] augmented reality, [15] wifi, [16] funnel, [17] cart, [18] play backward, [19] play forward, [20] pause, [21] search, [22] zoom out, [23] zoom in, [24] print, [25] copy, [26] download, [27] upload, [28] lock, [29] share and [30] network
The library “Financing” contains 8 pictograms:
[1] Business transactions, [2] financial responsibility, [3] money, [4] credit card, [5] calculator, [6] bar chart 1, [7] bar chart 2 and [8] bar chart 3
The library “Persons” contains 8 pictograms:
[1] Man and woman (partial view), [2] female persons, [3] individual, [4] female person, [5] group, [6] man (full view), [7] woman (full view) and [8] population
The library “Signage” contains 42 pictograms:
[1] Meeting point, [2] stairs, [3] stairs up, [4] stairs down, [5] waiting zone, [6] escalator up, [7] escalator down, [8] emergency exit left, [9] emergency exit right, [10] wheelchair, [11] lavatory, [12] WC ladies, [13] WC men, [14] waste, [15] elevator, [16] first aid, [17] coffee, [18] meal, [19] wardrobe, [20] smoking area, [21] no smoking, [22] fire extinguisher, [23] phone, [24] ice, [25] construction site, [26] park deck, [27] parking area, [28] accessible WC, [29] lock box, [30] bus stop, [31] shower, [32] shower ladies, [33] shower men, [34] changing room, [35] changing room ladies, [36] changing room men, [37] rest room/break room, [38] taxi, [39] WC, [40] exit, [41] exit left and [42] exit right
The library “Arrows” contains 9 pictograms:
[1] Arrow up right, [2] arrow down left, [3] arrow up left, [4] arrow down right, [5] arrow right, [6] arrow left, [7] arrow up, [8] arrow down and [9] directions
Pictograms can be in the colors black, white, Petrol and Light Grey, including their darker or lighter shades, as well as in the full-tone color Deep Red. In the case of pictograms that draw attention to a prohibition, the pictorial element is combined with a horizontal bar or a circle with horizontal bar in Signal Red. All arrows and figures have straight-cut ends, giving them a direct stylistic relationship with the corporate typefaceCorporate Typeface
The font with which a company or a brand identifies and presents itself externally and internally. ....
Typographic pictograms are combined with a frame. The frame can also be in the form of a direction-indicating element with an arrowhead. Figures on pictograms have angular line ends and thus blend harmoniously into the overall appearance at the Daimler name-bearing subsidiaries. Figures are two-dimensional and can, if necessary, be combined with additional elements, such as a frame, arrow or typography.
Pictograms can be combined into a single graphic to visualize complex set of interrelationships. The individual graphics are aligned proportionally to each other in accordance with the extended grid using the same scaling. For overlays, the distance between individual strokes should correspond to the major outline thickness. In order for the new composition to achieve a clearly recognizable impression, perspective distortions of the lines or changes to the geometric shape of the original files should be avoided.
Corporate pictograms are used in printed media, face-to-face communication, infographics or on-screen presentations etc. as well as for directional and signposting systems.
Infographics
When designing infographics, it important to make sure that the shape and text elements used create a harmonious overall impression.
The following questions should be answered before creating an infographic:
A distinction must be made between simple and complex information. As a general rule, complex relationships should be depicted in a way that is clear and understandable. The reader must be able to get to grips with the issues quickly.
A combination of pictograms, illustrations, photos and text can be used to portray complex information and data in a way that is easy to understand using static or animated infographics. This means that an infographic can stand as content in its own right, or also displayed with complementary text in the context of an article.
Colors
Additionally, the expanded color palette is available for designing infographics. It is advisable to decide on a color scheme in advance. It has proved useful to design infographics using two or three colors that offer a great deal of contrast.
If an infographic features shapes with strong colors on a light background, for example, attention is immediately drawn to the dominant colors. This allows information to be organized better, and a visual hierarchy is created. The expanded color range with lighter and darker shades of orange and green as well as the lighter shades of deep red may only be used for infographics. Transparent colored areas (with no outline) can also be used.
PantonePantone The Pantone matching system (PMS) consists of spot colors (“special colors”) from Pantone LLC. |
CMYKCMYK The abbreviation stands for Cyan, Magenta, Yellow and Black, which form the basis of process-color ... |
HEX | RGBRGB Abbreviation for the additive primary colors of white light, namely red, green and blue. The color ... |
|
Orange | 7563C | 0/32/87/8 | #E69123 | 230/145/35 |
Orange +20K | 0/40/95/20 | #CD780A | 205/120/10 | |
Orange +40K | 0/50/95/40 | #96500A | 150/80/10 | |
Orange 80% | 6/28/60/1 | #EBA550 | 235/165/80 | |
Orange 60% | 6/23/44/1 | #F0BE7D | 240/190/125 | |
Orange 40% | 5/16/27/1 | #F5D2AA | 245/210/170 | |
Orange 20% | 4/9/13/0 | #FAE6D2 | 250/230/210 | |
Green | 2277C | 63/0/97/20 | #6EA046 | 110/160/70 |
Green +20K | 75/10/97/40 | #285A19 | 40/90/25 | |
Green +40K | 80/10/97/60 | #143C14 | 20/60/20 | |
Green 80% | 63/10/85/2 | #8CB46E | 140/180/110 | |
Green 60% | 50/10/65/1 | #AAC891 | 170/200/145 | |
Green 40% | 40/10/50/0 | #C8DCB4 | 200/220/180 | |
Green 20% | 25/10/25/0 | #E1EBDC | 225/235/220 | |
Deep Red | 202 | 10/100/60/50 | #71180C | 113/24/12 |
Deep Red +20K | 10/100/60/70 | #5A130A | 90/19/10 | |
Deep Red +40K | 10/100/60/90 | #440E07 | 68/14/7 | |
Deep Red 80% | 31/60/58/21 | #8C463C | 140/70/60 | |
Deep Red 60% | 25/44/37/10 | #AA736E | 170/115/110 | |
Deep Red 40% | 18/30/21/3 | #C8A0A0 | 200/160/160 | |
Deep Red 20% | 9/14/9/1 | #E6D2D2 | 230/210/210 | |
Signal Red | 485 | 0/100/100/20 | #FF0000 | 255/0/0 |
Typography
The standard font used is Daimler CS, with all font styles being available. No more than two or three font styles should generally be combined. Capital letters may be used for key words. A mixed style (capitals/lower case) is prescribed for headlines and longer texts.
Every infographic requires a header that is usually set in the largest font sizeFont Size
The unit of measurement for the font size is the point (pt). so that readers immediately register the topic. The header should be brief and informative, with the volume of text kept to a minimum. The best infographics have the biggest impact thanks to their appealing and convincing presentation.
Pictograms
If an infographic is mainly created using pictograms, these should always be kept in the same style in order to ensure uniformity and promote recognition. Because pictograms represent concrete items or circumstances, they must speak a clear and unambiguous language, and be both self-explanatory and internationally understandable.
The icons from Pictogram library are used. When creating new pictograms for items or circumstances that are not available, the design idiom and line widths of the existing pictograms must be used.
Graphical Elements
Within an infographic, a visual hierarchy should guide the observer through the diversity of information on display. If elements are sized randomly and differentiated using color for no apparent reason, the infographic’s message will be difficult to decipher. The design of infographics should be consistent, for example by using filled symbols instead of line drawings. This style should then be used for the entire topic. The same applies to the visual idiom used, the font styles and the selected combination of colors. This makes the infographic tidy and legible.
If pictograms are combined with photos, you should work with a colored space that covers no more than a third of the imageImage
The publicly perceived image of a company, brand, product or service. Determined primarily by ... format. The pictogramPictogram
A graphical figure with an internationally understandable meaning. can be depicted in Petrol or white depending on the contrast. Pictograms should always be combined with information text and not stand alone. Vertical, horizontal and diagonal lines can bring text and shapes together as a unit.
If the infographic is overfilled with too many elements, this can overwhelm the reader and make it more difficult for them to receive and process information. Less is more!
Photos
If photos are integrated into infographics, only motifs with single-color backgrounds should be used. If multiple photos are used they should all have the same visual idiom. It is important to maintain a particular style. Photos that clearly do not fit into the set can distract from the information being conveyed.
Animation
Animations should be used prudently and sparingly. The timing of all elements should be coordinated to create a harmonious overall experience. Excessive animations can distract the observer from the actual message. The animation should be uniform and not overly hectic or choppy. It should feature soft transitions and smooth changes in what is being displayed.
Provider/Privacy
Mercedes-Benz AG
Mercedesstraße 120
70372 Stuttgart, Germany
Phone +49 7 11 17-0
dialog@mercedes-benz.com
Represented by the Board of Management: Ola Källenius (Chairman), Jörg Burzer, Renata Jungo Brüngger, Sabine Kohleisen, Markus Schäfer, Britta Seeger, Hubertus Troska, Harald Wilhelm
Chairman of the Supervisory Board: Bernd Pischetsrieder
Court of Registry: Stuttgart, Commercial Register No.: 762873
VAT Registration Number: DE321281763
Legal Notice
Cookies
Privacy Statement