Styleguide

Grids & Guidelines

Breakpoints

Mobile
<650px
Tablet
650-991px
Desktop
>992px
Full Width
2560px
If a component is specified as Full Width, this means it extends full width up to this screen width.
Max Width
Infinite
If a component is specified as Max Width, this means it extends infinitely with the browser window.

Desktop Grid at 1440px Breakpoint

Total Width: 1320px / Offset: 60px / Number of columns: 12 / Gutter Width: 20px / Column Width: 92px

Total Width: 343px
Offset: 16px
Number of columns: 4
Gutter Width: 16px
Column Width: 74px
80
56
40
24
16
8
Ratio: 2x
Multiples: 4
Section Padding: 96px, 48px

A 4px Base Unit provides resonant numbers using a robust, consistant ratio and encourages thoughtful repetition. Repetition breeds familiarity and reinforces a pattern that helps the user make sense of the content and layout.


We use the grid to determine spacing throughout the designs.

Color Palette

Brand Colors

Primary Teal

#0A7E88

Black

#282828

White

#ffffff

Secondary Colors

Dark Grey

#888680

Light Grey

#C0BEB6

Beige

#DDD8CE

Yellow Beige

#F7EEDF

Off White

#FAF7F3

Primary Tint

#E7F2F3

UTILITY

Error

#DA3164

Success

#60880A

Fonts Families & Type Styles

Font Family Font Weight Name Font Weight Value
Helvetica Neue LT Pro 55 Roman 400
Helvetica Neue LT Pro 75 Bold 700
Helvetica Neue LT Pro 53 Extended 400
Helvetica Neue LT Pro 63 Medium Extended 400
Helvetica Neue LT Pro 73 Bold Extended 700

Global Headline Styles

Desktop Mobile
Display
Display

Headline 1

Headline 1

Headline 2

Headline 2

Headline 3

Headline 3

Headline 4

Headline 4

Headline 5
Headline 5
Headline 6 Subhead
Headline 6 Subhead
Headline 7 Subhead
Headline 7 Subhead

Body Copy STyles

Desktop Mobile

Body Large

Body Large

Body Base

Body Base

Body Small

Body Small

Link Large Link Large
Link Base Link Base
Link Small Link Small

Buttons & Form Element Styles

Desktop Mobile

Button Text

Button Text

Buttons, Pagination, & Icons

Primary Secondary Tertiary
Primary Secondary Learn More

Default

Hover Hover Learn More

Hover

Disabled Disabled Learn More

Disabled

ICONS

Use Theme Icons Where Applicable & Style with theme colors

— Replace Cart Icon with Shopping Bag

Review Stars

Forms, Inputs, & Misc.

Input Fields

Form Label (Default)

Form Label (Active)

Disabled

Error

Error Message

Dropdowns

Dropdown (Default)

Dropdown (Active)

Dropdown (Disbaled)

Note:

For expanded dropdown states, it is our recommendation to use native browser UI.

Email Fields

Error Message

Radio

Checkbox

Quantity Selector

Note:

For expanded dropdown states, it is our recommendation to use native browser UI.

Accordions

Want the perfect summer day to last all year round? Bathe your skin with our uplifting Watermelon + Fresh Mint Moisture Loving Body Wash for a luscious treat. Rejuvenate any gloomy day with this nourishing formula that invigorates dehydrated skin. This juicy body wash, made with a blend of Plant-Derived Extracts, leaves you with good vibes and glowing skin!

Note

Use existing caret icons in theme, using Soft Black from color palette for icons