Guemil Icons for Emergency

Guemil Guidelines

· Design Principles

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:

Open collaboration:
Guemil Icons for Emergency started humbly, as a single designer endeavour. Then it became open. Due to this openness, it is now a team effort with global outreach supported by IIID, DNEM, CIGIDEN, and FONDART.
Meaningful simplicity:
We look for simplicity through thoughtful subtraction of the obvious and addition of the meaningful. That is the reason why we ask people what does each icon mean and not what does it depict.
Iterative improvement:
We need to strive towards making each icon as perspicuous as possible. Our goal for each piece is to get the right meaning in more than 83% of the answers. If we get close enough, we keep on trying, but if we are far from that, we pivot.

I Tone of Voice

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.

H Writing for Social Media

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:

Write short, but smart:
Some social media platforms have a character limit; others don’t. But for the most part, we keep our social media copy short. To write short, we simplify our ideas and reduce the amount of information we share—but not by altering the spelling or punctuation of the words themselves. It is fine to use the shorter version of some words, like “info” for “information.” But we do not use numbers and letters in place of words, like “4” instead of “for” or “u” instead of “you.”
Engagement:
We try to use correct grammar and punctuation—and avoid excessive exclamation points. When appropriate, we employ hashtags. We may use them to promote an event or connect with users at a conference. But we do not use trending topics to promote Guemil Icons for Emergency.

X Typography

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.

How to use Roboto on Guemil?

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).

JMotion Principles

For animated pieces, we generally follow the style points outlined in Design Principles and Tone of Voice, plus two specific requirements:

Loopable:
Due to responsive design requirements, the elements on each animation have to appear in its centre and, once the loop is done, they have to disappear at the same place.
Informative:
As motion tempts attention, it offers an opportunity for sharing information about actions and outcomes related to emergencies and risks.

Colours

We use black and white, and occasionally one of the ensuing colours

BLACK

#000000
rgb(0,0,0)

WHITE

#FFFFFF
rgb(255,255,255)

YELLOW

#FFAA00
rgb(255,170,0)

ORANGE

#FF4E00
rgb(255,78,0)

RED

#EB0000
rgb(235,0,0)

GREEN

#008A22
rgb(0,138,34)

BLUE

#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).