Styleguide
Grids & Guidelines
Logo
Breakpoints
Desktop Grid at 1440px Breakpoint
Total Width: 1320px / Offset: 60px / Number of columns: 12 / Gutter Width: 20px / Column Width: 92px
Mobile Grid at 375px breakpoint
Offset: 16px
Number of columns: 4
Gutter Width: 16px
Column Width: 74px
4px Base Unit
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
Review Stars
Forms, Inputs, & Misc.
Input Fields
Dropdowns
Dropdown (Default)
Dropdown (Active)
Dropdown (Disbaled)
Note:
For expanded dropdown states, it is our recommendation to use native browser UI.
Email Fields
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