Style Guide
Colours
Primary Colours
Snuggle Bugz's main colour palette for web.
Charcoal
#373a3c
Charcoal Light
#565b5e
Charcoal Dark
#14171f
White
#ffffff
Soft Grey
#f4f6fa
Grey
#979dab
Soft Pink
#ffeaed
Red
#ba0c2f
Red Light
#a95759
Red Dark
#8f0521
Black
#000000
Validation, Focus State, & Assistive Text Colours
Used when validating forms & focusing on elements for accessibility.
Assistive
#373a3c
Validated
#4bbba7
Focused
#ff99ab
Warning
#ffa95a
Secondary Pastels
Rarely used on the site, meant mainly for social assets - but can be implemented as long as they don't overtake main brand colours.
Pastel Beige
#efded7
Pastel Dark Beige
#ccaea3
Pastel Light Peach
#ffcccc
Pastel Peach
#f2aeaa
Pastel Burgundy
#a95759
Pastel Yellow
#fdfbf4
Additional Colours
Additional colours used throughout the website for specific elements.
Cool Lightest Grey
#f0f2f6
Light Accent Grey
#e7e8ea
Light Grey
#d8dde0
Cool Light Grey
#dedfe8
Cool Medium Grey
#c9ced8
Medium Grey
#bfc3cb
Dark Grey
#666d7d
Midnight Black
#0c102c
Light Grayish Blue
#eff1f4
Nestled Colours
Nestled main colour palette for web.
Nestled Blue
#9ed5cb
Nestled Light Blue
#ebfcfb
Nestled Grey
#d8d2cb
Nestled Black
#3d3935
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
link
primary
Link Linksecondary
Link Linksecondary-white
underlined
Link Linkbutton
primary
important
secondary
secondary-white
full-width
Fills width of parent
tall
disabled
pill
Message
Info
Error
Success
Warning
Form Elements
Input
Standard
Standard, Required
Right Icon
Assistive Text
Assistive Text, No Icon
Resizeable
Error
Validation Success
Disabled
Checkbox
Radio Button
Select
Product Summary
class="product-summary"
-
Basic Product
Product Summary Horizontal
class="product-summary product-summary--horizonatal"
-
Basic Product
Inline Form
With Visible Submit Button
With Icon Submit Button
With
class="inline-form--centered"
Tag
With default text
With
text: 'Override text'
Without icon
Carousel
Default
With Pagination
show_controls: true
Modal
Basic Implementation
Alternative Implementation
When the dialog element can't be inside a wyatt-modal component:
Pass a css selector as a value to data-modal-open, to find another dialog element.
This example opens the store locations.
Drawer
Basic Implementation
With Footer
This footer is designed to be sticky.
Alternative Implementation
When the drawer element can't be inside a wyatt-drawer component:
Pass a css selector as a value to data-drawer-open, to find another drawer element.
This example opens the cart.