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
