7GO
Design System
Stage 1

Colour

Primary
#1750E8
Pressed
#0F3FC2
Delivered
#059669
Waiting
#B45309
Failed
#E02424
Ink
#0F172A
Muted
#64748B
Page
#F8FAFC

Blue is the only brand colour. Green, amber and red mean one thing each and are never used for decoration, so a colour on this platform always carries information.

Type

Page heading

Outfit 700, 24px

Section heading

Outfit 700, 18px
Body text. Long enough to read comfortably on a phone held at arm's length in daylight.
Inter 400, 16px, line height 1.5
Inter 600, 14px
$16.00
Outfit 700, 28px, tabular figures so columns of prices line up
7GO-FEXKVB
Order reference. Wide letter spacing, no 0, O, 1 or I, so it can be read out over the phone

Rules that do not bend

48px minimum tap target
A driver taps this with gloves on, walking
Set
16px minimum input text
Anything smaller makes iPhone zoom in and break the layout
Set
Tabular numbers
Prices and distances line up in a column
Set
Status is never colour alone
There is always a word next to the dot
Set
Safe area respected
Nothing sits under the notch or the home bar
Set