A style tile is a collection of visual elements such as a colour palette, typography, button style to help communicate the visual language to stakeholders. It bridges the gap between a mood board and a high fidelity wireframe. It is also very useful in getting feedback at an early design stage.
The idea of Atomic Design is adopted to maximise the speed of the design process. It meant creating a system of pieces which come together to create elements and templates that can be used over and over again. Atoms are the fundamentals as shown in the style tile below which includes colour palettes, fonts, individual elements (i.e buttons, headers etc) and anything else that could be combined with other atoms to create a molecule.
Typography: Monserrat was the typeface chosen as it is ideal for modern web designs displayed on various devices. It is less formal than futura with geometric simplicity, a nice large x-height (making it clearer to read) and has more character than Helvetica or Arial. It also has a wide variety of font styles (18 to be exact) to choose from thus making it versatile.
Colour: Blue (especially lighter blue) is calming, the turquoise gives off a tranquil sense and trustworthiness. The darker blue also demonstrates professionalism. Silver was chosen as a colour to give a professional feel to the brand that is soothing, calming and purify. It gives a sense of safety, which is important to a transportation brand. Red would be user sparingly as an accent colour which stands out on the page to draw the user’s attention especially for the call to action (CTA). It is important to note the red used wasn’t jarring as it was desaturated to avoid negative connotations (such as danger).
Iconography: The icons used were “filled” as oppose to “outlined”. This is to give this icons more visual weight to avoid them being lost on the main landing page which describes key information such as the website’s USP.