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.

Mathscapes symbol

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.

Asset Format Download
MS - Symbol - WB* PNG Link - Protected
MS - Symbol - WB SVG Link - Protected
MS - Symbol - WB - Outlined SVG Link - Protected
MS - Symbol - WB - Outlined EPS Link - Protected
MS - Symbol - BW** PNG Link - Protected
MS - Symbol - BW SVG Link - Protected
MS - Symbol - BW - Outlined SVG Link - Protected
MS - Symbol - BW - Outlined EPS Link - Protected
Identity - Symbol assets. Only for internal use. * White on Black, ** Black on White
Mathscapes wordmark against a photo. Photo by Maxim Berg on Unsplash

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.

Asset Format Download
MS - Wordmark - WB* PNG Link - Protected
MS - Wordmark - WB SVG Link - Protected
MS - Wordmark - WB - Outlined SVG Link - Protected
MS - Wordmark - WB - Outlined EPS Link - Protected
MS - Wordmark - BW** PNG Link - Protected
MS - Wordmark - BW SVG Link - Protected
MS - Wordmark - BW - Outlined SVG Link - Protected
MS - Wordmark - BW - Outlined EPS Link - Protected
Identity - Wordmark assets. Only for internal use unless signed consent. * White on Black, ** Black on White

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.

Specimen - Aperçu Pro Regular
Specimen - Aperçu Pro Light

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.

Type scale and Line height options

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.

Line height L* Usage
150% 25cm Paragraph text
125% 20cm Headings
115% 15cm Large text
100% 10cm Very large text**
Line height options; * Minimum distance to be viewed from; ** or to be viewed from small distance or there is a space constraint

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.

Line width Chars Usage
Comfortable 75 Web / Paragraph text
Focus 85 Headings, Letters
Focus+ 100 Long form, Technical paper
Line width options
Asset Format Download
MS - Text Styles* AFDesign Link - Protected
Typography assets, * Import text styles into Affinity Designer from this file

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.

Mathscapes color palette
2 Color Permutations
Asset Format Download
MS - Color Swatch CLR Link
Color Swatch. Can be imported in Affinity Designer
Color R G B Hex H S L
100 Yellow 251 204 33 #FBCC21 47 96 56
110 Orange 235 138 56 #EB8A38 27 82 57
120 Orange Red 225 95 73 #E15F49 9 72 58
130 Red 215 30 71 #D71E47 347 76 48
140 Dark Red 190 33 59 #BE213B 350 70 44
150 Magenta 202 31 125 #CA1F7D 327 73 46
160 Purple 75 49 116 #4B3174 263 41 32
170 Purple Black 42 27 77 #2A1B4D 258 48 20
180 Teal 0 116 126 #00747E 185 100 25
190 Cyan 0 162 188 #00A2BC 188 100 37
200 Cobalt 0 107 167 #006BA7 202 100 33
210 Indigo 19 69 130 #1345B2 213 74 29
220 Blue Black 36 55 77 #24374D 212 36 22
230 Dark Green 16 95 64 #105F40 156 71 22
240 Sap Green 58 108 64 #3A6C40 127 30 33
250 Viridan 0 165 106 #00A56A 159 100 32
260 Gold 242 185 111 #F2B96F 34 83 69
270 Copper 206 123 62 #CE7B3E 25 60 53
280 Brown 135 59 57 #873B39 2 41 38
290 Burnt Sienna 105 48 48 #693030 0 37 30
300 Brown Black 78 51 49 #4E3331 4 23 25
310 Black 26 25 25 #1A1919 0 2 10
320 Grey 132 132 132 #848484 0 0 52
330 White 255 255 255 #FFFFFF 0 100 100
Color codes

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.

Layout examples

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

Standard 1cm grid divided into 4 sub-divisions
1cm isometric cube grid divided into 4 sub-divisions

Written by Gaurav Singh in 2022.