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
Buttons
Form Elements
Inputs
Dropdown
Selection Controls
SVG
icons
Get FREE SHIPPING on your first order
Be the first to hear about exclusive new products, recipes and discounts.