Visual System — Rules and resources for consistency in graphic design

Identity

Our identity is simple, less, and functional. There are two variations – the symbol is just the letter M in Aperçu Pro Regular, and the wordmark is shortened name of the company in the same font. Either of these variations should be used on any communication or artifact from Mathscapes. But preferably not both of them together in the same view.

Both variations should be in solid color from our color palette without diluting or mixing them, provided enough contrast is achieved with the background. None of these variations can have an outline, shadow, or other effects. However, producing identity marks on a physical surface can use spot printing, embossing, engraving, etching, embroidery.

Either of the variations can be used against the solid, photograph, or any other relevant background for the purpose. When used against a picture, you should add a transparent overlay to the photo whose opacity should be as much, so the symbol or wordmark is legible.

Note: If you are our partner and would like to use Mathscapes wordmark, please contact on this email.

Typography

We rely on as less design as possible to achieve clean typography. We use san serifs – Aperçu Pro Regular and Aperçu Pro Light for all text.

Fallback font: Arial or Helvetica as available.

Type is the most important element after the content, more than colors. And it is only imperative to have consistent rules to produce neat typography. We have three essential attributes to decide when you are compositing – font size, line height, and line width. The font sizes are determined by the dimensions of the artboard, its purpose, and the levels in the hierarchy. As much as possible, restrict the levels to three.

First, the base size is determined, and then other sizes can be calculated by multiplying the type scale ratio, i.e., 1.375 to the previous size, and rounding off to its ceiling. The line-height is determined by the font size and purpose of the text. The body paragraph is generally 150% for a comfortable reading experience.

Third but not any less important is the line width, which determines the average characters packed within a line. It is determined by the kind of look and feels you need to achieve and, of course, the amount of space we have.

Colors

We have a good range of colors to pick for different needs, and more colors can be created by mixing. The brand itself does not rely much on colors to create its identity. However, their usage and consistency will help in recognizing Mathscapes. The primary choice of colors depends on the need and the context. Otherwise, neutral tones are used.

When constructing any material, it is important that you pick exact colors from the above list.

Layout and Composition

We use two framework levels to create layout and composition before placing content. The first level is a set of guides – that contains margin and a set of columns and pairs spaced by gutters. The second level is a lower level grid to create illustrations or technical drawings. The first level gives us a modular grid where the number of columns and rows can be chosen as desired, and the pieces of content can be placed on the cells, as shown below. Until we have frozen more detailed rules, we can put them as we like.

The second level grid is optional to use, for illustration and technical drawings.

Written by Gaurav Singh in 2022.