Guidelines

Our design system helps us work together to build a great experience for all of our users and team.

Typography

Headings

These constrained set of typographic styles map as much as possible to functional roles so you know when each can be used. Disregard this type scale where needed.

Digital receipts
H0 Desktop  General Sans Medium 96px 100% -3.5px
Digital receipts
H0 Mobile  General Sans Medium 48px 110% -1.6px
Digital receipts
H1 Desktop  General Sans Medium 60px 110% -2px
Digital receipts
H1 Mobile  General Sans Medium 40px 110% -0.8px
Digital receipts
H2 Desktop General Sans Medium 48px 110% -1.8px
Digital receipts
H2 Mobile General Sans Medium 32px 110% -0.6px
Digital receipts
H3 Desktop General Sans Medium 34px 120% -0.8px
Digital receipts
H3 Mobile General Sans Medium 26px 110% -0.6px
Digital receipts
H4 Desktop  General Sans Medium 26px 110% -0.4px
Digital receipts
H4 Mobile  General Sans Medium 24px 110% -0.4px
Digital receipts
H5 Desktop General Sans Medium 20px 110% -0.2px
Digital receipts
H5 Mobile General Sans Medium 18px 110% -0.2px
Digital receipts
H6 Desktop General Sans Medium 18px 110% -0.1px
Digital receipts
H6 Mobile General Sans Medium 16px 110% 0px
Paragraphs & Captions
Make receipts mean more
Text Large Semibold  General Sans Semibold  20px  140%  0px
Make receipts mean more
Text Large Medium  General Sans Medium  20px  140%  0px
Make receipts mean more
Text Large Normal  General Sans Regular  20px  140%  0px
Make receipts mean more
Text Medium Semibold  General Sans Semibold  18px  140%  0px
Make receipts mean more
Text Medium Medium  General Sans Medium  18px  140%  0px
Make receipts mean more
Text Medium Normal  General Sans Regular  18px  140%  0px
Make receipts mean more
Text Regular Semibold  General Sans Semibold  16px  140%  0px
Make receipts mean more
Text Regular Medium  General Sans Medium  16px  140%  0px
Make receipts mean more
Text Regular Normal General Sans Regular  16px  140%  0px
Make receipts mean more
Text Small Semibold General Sans Semibold  14px  140%  0px
Make receipts mean more
Text Small Medium General Sans Medium  14px  140%  0px
Make receipts mean more
Text Small Normal General Sans Regular  14px  140%  0px
Make receipts mean more
Text Tiny Semibold General Sans Semibold  12px  140%  0px
Make receipts mean more
Text Tiny Medium General Sans Medium  12px  140%  0px
Make receipts mean more
Text Tiny Normal General Sans Regular  12px  140%  0px

Colours

Our primary colours are Slip Green and Slip Purple. In most application we use White as a background colour, Black for text with imagery using Slip Green and Slip Purple. When we need a pop of colour we can use our brand colours as a background colour.

Colour Distribution

While certain creative outputs can require heavier use of colours, most will roughly follow this system for colour distribution.

copy
#ffffff
copy
#000000
copy
#E3FDC0
copy
#E0E4FF
Colours

Our primary colour palette runs through our entire brand.

copy
#E3FDC0
copy
#F8FFEF
copy
#F1FEE0
copy
#EAFED0
copy
#A9C683
copy
#5A7F27
copy
#303F18
Slip Green
copy
#E0E4FF
copy
#F7F8FF
copy
#F0F2FF
copy
#E8EBFF
copy
#A3A9D2
copy
#51588F
copy
#1F2237
Slip Purple
System Colours

We use Black and White in most applications. Use greys to create hierarchy.

copy
#FFFFFF
copy
#000000
copy
#fafafa
copy
#f0f0f2
copy
#ddd
copy
#afafaf
copy
#666
copy
#2d2d2d
copy
#121212
White - Black