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.
Baseline
Regular 8px baseline grid.
Typography
Color Concept
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.
Accessibility
COlor Vision Deficiency
Color palette provides enough contrast for users with all types of color perception defficiency.
Normal Vision
Protanopia
Deuteranopia
Tritanopia
