Typography
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Label
Paragraph text in wysiwyg blog
Paragraph text (P1)
Paragraph text (P2)
This is text used for buttons (P3)
This is text used for buttons (Button)
Primary Palette
Black
#000000
Dark mode background. Used for text, CTA, and elements against light bg
White
#FFFFFF
Website background. Used for text against dark bg / header bar and button bg
Secondary Palette
Blue
#040BF5
Used for brand moments -outlines, hover states, text links, icons
Green
#0B9C3A
Used for scientific information - Science vs. Myth
Pink
#F454BA
Used for Community and Customer Resources moments
Error Red
#D40505
Used for error states
Dark Gray
#414141
Mid Gray
#8C8C8C
Light Gray
#D1D1D1
Dark Red
#752528
Mid Red
#853F37
Light Red
#9B5947
Buttons
Text link
Dropdown
Input
Please enter a valid email address.
Please enter a valid.Thank you for subscribing
Check your email for a confirmation message
Iconography
Favorite
Derm-Tested
Night Mode
Light Mode
Info
FAQ
TikTok
Cruelty-Free
Reef-Safe
Hypoallergenic
Radio Button
Quantity
Dividers
Color: #000000; Dark Mode: #FFFFFF
Color: #414141
Color: #8C8C8C
Color: #D1D1D1
Checkbox
Pagination
Indicators
Article card
Arrow Button Styles
Pagination
Email Input Field
Loading & Default States
Loader Icon
Default Image State
No Image Uploaded
Scroll to Top Button
Hover
When user reaches footer
Pause/Play Button
Toggles (Dropdown)
Product card
GENTLE AMINO POWERWASH
$64
One step to remove sunscreen while treating breakouts, blackheads, and enlarged pores
