The full logo is made up of several parts. There is the name or logotype “Commotion”. Then, there are several pink circles that represent “nodes” in the mesh network. The o’s in the word Commotion also represent nodes. These nodes are connected by pink lines, forming a mini mesh network.
The full logo should be used whenever there is enough horizontal space to do so. There are other versions of the logo where the full-size logo doesn't fit.
There is the mid-sized logo and the tiny-logo, which should be used when the space doesn’t allow for the whole Commotion word to be spelled out.
Since a mesh network is flexible and can change shape, so can the logo. The main difference between the digital and print version of the mid logo is that the digital version has a slight drop shadow. This helps it to stand out more on a screen. Otherwise they are exactly the same.
The color palette consists of two primary colors and a set of secondary colors. The primary colors are used for most of the logo and typographic applications. ‘Commotion’ and nodes in the logo are always black and the mesh is generally pink. Depending on the application, the mesh lines may change colors.
The secondary colors will be applied depending on the needs of the various user interfaces and the utility of the network.
There are two fonts that are recommended for use with the Commotion brand: Avenir and ASAP. Avenir is made for print, and is recommended when designing anything that will be printed. ASAP, on the other hand, was made for viewing on screen and therefore anything that is designed to be digital should use ASAP.
ASAP is a free and open-source font that can be downloaded here. Avenir can be purchased from numerous font stores. (If you are unable to acquire Avenir, use ASAP instead.)
Headings should be large and easy to read. The subhead should be in all capital letters and in one of the colors from the color palette above. A subhead should be about 1/3 of the size of the heading.
Body copy should also be about 1/3 of the size of the heading and in black. To make the text easier to read, allow for some extra line spacing.
The core components of the Commotion identity are simple but can be used to make other images. These parts are “the nodes,” and “the line.”
Be creative with these parts and make graphs diagrams or icons or any other graphic that is needed.
For illustrations that are more complex than a simple node and line, we recommend using a thick black outline and adding shading and color using the outlined palette and blocks of color and dot patterns of various sizes and colors.
We recommend using the following seven standard icons throughout Commotion to represent common processes and menus. You should use these icons whenever practical. This icon set may evolve over time as Commotion and its community grows.
If a certain platform's guidlines recomend native icon use or you are unable to use custom elements, use your platform's native iconography instead. For example, the Create a network and Join a network icons could replaced with native icons if needed:
There are six types of visual language that can be used in Commotion applications:
With the exception of learning language, these messages should be clearly displayed within the application and give the user the option to close or collapse the message. The messages should not disappear based on an arbitrary timeout.
Learning Language can appear as a tooltip (on hover or tap) or persistently below form fields. In the early UI mockups, the designers chose to place the tooltips in the right-hand gutter on a desktop-sized screen. On a mobile device, it would not be practical to place the tooltips in the gutter, so a designer might decide to provide an option to expand the below-field Learning Language to show more information and provide links to external documentation.
The words you use in your application are important. They can either help new users effectively use mesh networks or discourage them from even getting started. Commotion applications should speak to the most basic computer user and guide them through processes while teaching potentially new concepts. See the Common language section for a detailed list of terms to use consistently in the user interface. Advanced terminology that requires significant prior knowledge to understand should be reserved for the advanced area of your software.
Here are useful writing tips from the Android Design guidelines:
Here are some examples of good writing that you may use for Commotion:
"It looks like there is a mesh network you can join! Select a network below or create a new mesh network."
“You're connected to Sparkles mesh network. Your node name is Josh21 and you are using Channel 5. You're connected to 5 nodes and 2 clients are connected to you. You aren't connected to the internet.”
"There aren't any nearby mesh networks. Would you like to create a new mesh network?"