Primary Palette

Our primary palette is comprised of neutrals, white, and green to bring boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits.


We will use Green (P 100) for primary actions, buttons, text links, for indicating progress and representing authentication.

PRIMARY

NAME

P 100

HEX

#1B4642

NAME

P 50

HEX

#AED2C0

NAME

P 0

HEX

#FAF7EF

NAME

P 0

HEX

#FAF7EF

Secondary Palette

Description about the secondary palette.

NAME

S 100

HEX

#EFDA86

NAME

S 50

HEX

#FFEEA7

NAME

S 0

HEX

#242725

NAME

S 50

HEX

#FFEEA7

Neutrals

Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product. Typically they are used for text and subtle backgrounds when we don't want to draw too much attention to a particular touchpoint or convey information such as "to do" or "disabled".

Dark neutrals

Dark neutrals are very effective for creating contrast and are therefore the primary color used for typography.

NAME

N 900

HEX

#0E1E40

NAME

N 800

HEX

#293756

NAME

N 700

HEX

#374561

NAME

N 600

HEX

#45526C

Mid neutrals

Use mid-neutrals to create depth in components such as modal dialog blankets and cards. Avoid mid-neutrals as background colors because there is usually not enough contrast to remain AA compliant. The mid-neutrals N500 to N100 can be used for subtle text and icons on light-neutral backgrounds.

NAME

N 500

HEX

#0E1E40

NAME

N 100

HEX

#0E1E40

NAME

N 400

HEX

#293756

NAME

N 300

HEX

#374561

NAME

N 200

HEX

#45526C

Light neutrals

We use light neutrals as subtle backgrounds to indicate various interactive states such as hover and disabled, or simply to create secondary attention towards a component. You'll find light neutrals in buttons, text fields, tags, and illustrations. Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness and are therefore often used as a background color.

NAME

N 80

HEX

#C2C7CF

NAME

N 0

HEX

#FFFFFF

NAME

N 60

HEX

#DFE1E5

NAME

N 40

HEX

#EBECF0

NAME

N 20

HEX

#F4F5F7

Error

Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing the farmer by the retailer from the send message feature.

NAME

Error-dark

HEX

#B42318

NAME

Error

HEX

#F04438

NAME

Error-light

HEX

#FEF3F2

Warning

Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.

NAME

warning-dark

HEX

#B2852F

NAME

warning

HEX

#CE9F44

NAME

warning-light

HEX

#FEF8EC

Success

Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.

NAME

Success-dark

HEX

#3B9140

NAME

Success

HEX

#46AE4D

NAME

Success-light

HEX

#F0F9F1

Info

Use this color for an information state.

NAME

Info-dark

HEX

#205BA1

NAME

Info

HEX

#2973CC

NAME

Info-light

HEX

#EEF4FC