Our Logo

Green

Red

BW

Grey 61% with Red Logo

Grey 61% with Red Logo 500 px wide

Black Monochrome

White Monochrome

Get Sandwich Colours

Lightest Brown 
#FBF7F4
HSL: 25, 46, 97

Darker Brown
Lab: 26, 21.5, 36
#642f01

Dark Brown
Lab: ?, 21.5, 36
#915427

Brown
Lab: 58, 21.5, 36
#bf7c4d
HSL: 25, 47, 53

Light Brown
Lab: ?, 21.5, 36
#d8a159

Lighter Brown
Lab: 82, 3.5, 53
#f0c766

Darker Green
Lab: 32, -39, 34.5
#00580c

Dark Green
Lab: ?, -39, 34.5
#347d30

Green
Lab: 61, -39, 34.5
#5AA352
HSL: 114, 33, 48

Light Green
Lab: ?, -39, 34.5
#86d07c

Lighter Green
Lab: 93, -39, 34.5
#b2fea6

Dark shades should be used to create contrast or depth where needed and for text when on white.

Green 
#5AA352
H:114 S:33 L:48

Yellow
#FFEEA5
H:49 S:35 B:100

Red  
#DF5A49
H:7 S:67 B:87

Blue
#027AC5
H:203 S:54 B:77

The core shades from which the other colors are derived.
Bright shades are used to create extra contrast such as hover states and activating illustrations.

Get Sandwich Text Colors on Light Theme

Minimum (3:1)

Text Light Base
#8c8c8c
Text Light Green
#53994D
Text Light Brown
#BE7B4B

Standard (4.5:1)

Text Base
#6E6E6E
Text Green
#437A3E
Text Brown
#996138

High (7:1)

Text Dark Base
#545454
Text Dark Green
#305A30
Text Dark Brown
#73492B

Get Sandwich Combination (Contrast > 3:1)

BG Green
#5AA352

FG Yellow
#FFEEA5

BG White
#FFFFFF

FG Green
#5AA352

BG Darker Green
#51954B

FG Yellow
#FFEEA5

BG Yellow
#FFEEA5

FG Darker Green
#51954B

BG Yellow
#FFEEA5

FG Red
#DF5A49

BG Red
#DF5A49

FG Yellow
#FFEEA5

Get Sandwich Neutrals

Black
#000000

Gray 50%
#777777

White
#FFFFFF

Secondary Neutrals (alongside the Main Neutrals)

Gray 94%
#212121

Gray 83%
#3b3b3b

Gray 72%
#585858

Gray 28%
#979797

Gray 17%
#b9b9b9

Gray 6%
#dbdbdb

Gray 2%
#FAFAFA

Get Sandwich Light Background

Background
Lab: 99, 0, 0
#fcfcfc

Background
#f7f7f7

Background
#f1f1f1

Background
#ececec

Background
#e6e6e6

Background
#e1e1e1

Background
#dcdcdc

Background
#d6d6d6

Background
Lab: 84, 0, 0
#d1d1d1

Fonts

Heading is PT Serif Caption Bold, line height 1.15

Body text is Catamaran Light and Semi Bold, size 16, line height 1.5

Scale is using 1.250 – Major Third

H1 is 3.052em (48.83px)

H2 is PT Serif Caption 2.441 em (39.06px)

H3 is PT Serif Caption 1.953em (31.25px)

H4 is PT Serif Caption 1.563em (25px)

H5 is PT Serif Caption 1.25em (20px)

 

Blockquote is PT Mono 16px, line height 1.5