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)
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Product card
GENTLE AMINO POWERWASH
$64
Skin-refining cleanser to remove impurities, makeup, and sunscreen in one step
