Switch to daytime

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.


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

Instagram

TikTok

Facebook

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