Style

Core Elements

Logo

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.

 

Color

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.

 

Fonts

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.

Graphic components

Core components

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.

Illustration style

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.

Standard Icons

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:

              

Visual language

There are six types of visual language that can be used in Commotion applications:

  1. Descriptive Language is the content contained in the black bar often located at the top of the user interface. This language explains a step in the process and creates a guiding framework. This approach blends instructional and narrative-based content. Descriptive language is themed in black text on a white background or white text on a black background.
  2. Action Language is content that appears in pink and requires action, whether it’s a form field or button to apply a configuration setting. Action-oriented icons should have a pink frame, as demonstrated.
  3. Learning Language is content that appears within one of the two documentation tiers -- inline below fields in grey or as a grey and black tooltip.
  4. Warning Language is content that is very important and notes a serious change in settings, like the pop-up that appears when a user attempts to change the mesh network or channel while already connected to a network.
  5. In-progress Language is content that is attached to either validation or detection points in a process, as demonstrated. The animation overrides the UI with a predominantly white background and a message in purple.
  6. Success and Failure Language describes the most recent successful or failed process completed by the software. For example, after creating a new network, Commotion would tell the user, “You've successfully created XYZ network! Other people can join by choosing XYZ as their network name."

 

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.

Writing

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:

  1. Keep it brief. Be concise, simple and precise. Start with a 30 character limit (including spaces), and don't use more unless absolutely necessary.
  2. Keep it simple. Pretend you're speaking to someone who's smart and competent, but doesn't know technical jargon and may not speak English very well. Use short words, active verbs, and common nouns.
  3. Be friendly. Use contractions. Talk directly to the reader using second person ("you"). If your text doesn't read the way you'd say it in casual conversation, it's probably not the way you should write it. Don't be abrupt or annoying and make the user feel safe, happy and energized.
  4. Put the most important thing first. The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over.
  5. Describe only what's necessary, and no more. Don't try to explain subtle differences. They will be lost on most users.
  6. Avoid repetition. If a significant term gets repeated within a screen or block of text, find a way to use it just once.

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?"