Guemil Icons for Emergency is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Guemil is an open-source icon initiative oriented to represent risks and emergencies. Visually, our icons are rounded and heavy. Also, most of them are suitable for a low-cost stencil application.
For the development of each icon, we follow three principles:
We know that risk and emergency situations should be approached seriously and respectfully. We also know that the early and continuous delivery of meaningful simplicity on each icon demands us to keep a conversational relationship with everyone willing to help, and this kind of relationship is the foundation of open collaboration and iterative improvement.
According to what has been said, our tone of voice has to be serious, slightly casual, respectful, and enthusiastic.
Guemil Icons for Emergency has a presence on most major social media platforms: Twitter, Facebook, Instagram. Our writing for social media should generally follow the style points outlined in Design Principles and Tone of Voice. Here are two additional pointers:
Guemil uses Roboto. This sans-serif font family was designed by Christian Robertson. It is Google’s signature family of fonts, the default font on Android and Chrome OS, and the recommended font for Google’s visual language, Material Design. To download, please visit Google Fonts.
We use as few typeface styles as possible, because we want our icons to keep on playing the leading role of visual communication. We use only the following three:
Roboto Light. Aa Bb Cc De Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Roboto Bold. Aa Bb Cc De Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Roboto Thin. Aa Bb Cc De Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Most of the time we use Robot Light. To maintain the visual balance on the page, the biggest titles use Roboto Thin. And we use Robot Bold exclusively when we need to get the reader's attention, i.e., emphasis.
To differentiate levels and hierarchies, we use a Fibonacci sequence starting at 0.2, and then we add 1 to each successive term.
(0.2) | 0.2 | 0.4 | 0.6 | 1.0 | 1.6 | 2.6 |
---|---|---|---|---|---|---|
1 | 1.2 | 1.4 | 1.6 | 2 | 2.6 | 3.6 |
p | h6 | h5 | h4 | h3 | h2 | h1 |
Roboto Light | Roboto Thin |
In the website, we are using "rem" as the unit of measurement. If you want to adopt the values to a printed document, using "pt" as the unit of measurement, we advise you to multiply each one by 9 (in case of working with adults) or 12 (in case of working with little kids and elderly people).
For animated pieces, we generally follow the style points outlined in Design Principles and Tone of Voice, plus two specific requirements:
#000000
rgb(0,0,0)
#FFFFFF
rgb(255,255,255)
#FFAA00
rgb(255,170,0)
#FF4E00
rgb(255,78,0)
#EB0000
rgb(235,0,0)
#008A22
rgb(0,138,34)
#007BB9
rgb(0,123,185)
Blue, green, red, and yellow are used on traffic and indoor signs, internationally. Also, orange is used internationally on objects and clothing that have to be visible. Here we adjusted each one of the named colours to accomplished the success criterion on the visual presentation of white or black text, that requires a contrast ratio of at least 4.5:1 according to the WCAG 2.1 (Level AA).