Skip to content

ALL ORDERS SHIP WITH A FREE 5-PACK OF ALMOND CRISPS ($8.99 value) + FREE SHIPPING

Ui Kit Page

Colors

*Note: Yellow should only be used as a decorative element. Do not use on anything that is interactive or as the font-color (unless on a compliant background-color).

light-blue
text-color: $light-blue;

background-color--light-blue

mid-blue
text-color: $mid-blue;

background-color--mid-blue

navy
text-color: $navy;

background-color--navy

yellow
text-color: $yellow;

background-color--yellow

cream
text-color: $cream;

background-color--cream

white
text-color: $white;

background-color--white

greyscale-900
text-color: $greyscale-900;

background-color--greyscale-900

greyscale-800
text-color: $greyscale-800;

background-color--greyscale-800

greyscale-700
text-color: $greyscale-700;

background-color--greyscale-700

greyscale-600
text-color: $greyscale-600;

background-color--greyscale-600

greyscale-500
text-color: $greyscale-500;

background-color--greyscale-500

greyscale-400
text-color: $greyscale-400;

background-color--greyscale-400

secondary-almond
text-color: $secondary-almond;

background-color--secondary-almond

secondary-blueberry
text-color: $secondary-blueberry;

background-color--secondary-blueberry

secondary-cashew
text-color: $secondary-cashew;

background-color--secondary-cashew

secondary-peanut
text-color: $secondary-peanut;

background-color--secondary-peanut

secondary-siracha
text-color: $secondary-siracha;

background-color--secondary-siracha

secondary-cheddar
text-color: $secondary-cheddar;

background-color--secondary-cheddar

error
text-color: $error;

background-color--error

success
text-color: $success;

background-color--success

focus
text-color: $focus;

background-color--focus


Headings

Heading 1

H1 Single-line Script

H1 Multi-line Script

The background color above are just here to visibly see the line height

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Large

Body Base

Body Small

Body Large / Inline link

Body Base / Inline link

Body Small / Inline link


Buttons

Buttons Disabled


Form Elements

Inputs

Dropdown

Selection Controls




SVG

yellow-arrow-down
yellow-arrow-straight
yellow-arrow-up
yellow-checkmark
yellow-circle-flatter
yellow-circle-flattest
yellow-circle-round
yellow-hand
yellow-hastag
yellow-heart
yellow-line-large
yellow-line-medium
yellow-line-small

icons

arrow up
good-measure-icon-arrow-right
good-measure-icon-caret-down
good-measure-icon-caret-right
good-measure-icon-cart
good-measure-icon-menu
good-measure-icon-minus
good-measure-icon-plus
good-measure-icon-search
good-measure-icon-user