Style Guide
Read more

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

Image

Color Concept


Image

Color Palette



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 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.

 
Image Image Image Image Image Image

Accessibility

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