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.
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%
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.
COlor Vision Deficiency
Color palette provides enough contrast for users with all types of color perception defficiency.
Normal Vision
Protanopia
Deuteranopia
Tritanopia
