Style Guide

Go Explore

Grid System

COlumn grid

I have used a simple 4col grid (4 x 64px) with 8px gutters.
A wider side-padding of 40px allows securing the phone on a mount while keeping all UI elements within reach.


Image

Baseline

Regular 8px baseline grid.


Image

Typography


Image
Image

Color Concept

Image

Color Palette

Image

Pure Blue

207° | 100% | 100%

light Blue

207° | 100% | 100% | 15%

mid Blue

207° | 100% | 65%

Dark Blue

207° | 100% | 45%

Abyss Blue

207° | 100% | 30%

Pure Green

83° | 100% | 85%

Mid Green

83° | 100% | 45%

Dark Green

120° | 100% | 20%

Pure Red

19° | 100% | 100%

Light Red

19° | 100% | 100% | 50%

Pure Yellow

48° | 88% | 98%

Pure Red

19° | 100% | 100%

Light Red

19° | 100% | 100% | 50%

Accessibility

CONTRAST CLASS - AAA

I have ensured top contrast class of AAA (>= 1 : 7.1) for all elements that are crucial for the implementation of the main user flow.

ImageImageImageImageImageImage

COlor Vision Deficiency

Color palette provides enough contrast for users with all types of color perception defficiency.

Image

Normal Vision

Image

Protanopia

Image

Deuteranopia

Image

Tritanopia

Image

Achromatopsia