Fast, Free Shipping Over $99* Shop now

Celebrate Dad, with a gift to make him feel rad! Shop now!

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

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

button

primary

important

secondary

secondary-white

full-width

Fills width of parent

tall

disabled

pill

Message

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus.

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus.

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus.

Form Elements

Input

Standard

Standard, Required

Right Icon

Assistive Text

Here is some assistive text.

Assistive Text, No Icon

Here is some assistive text.

Resizeable

Error

Here is an error message about what went wrong.

Validation Success

Disabled

Checkbox

Radio Button

Select

Product Summary

class="product-summary"

  • Basic Product

    Wee Gallery

    Cartes de poussette "Je vois"

    $20.99

Product Summary Horizontal

class="product-summary product-summary--horizonatal"

  • Basic Product

    Wee Gallery

    Cartes de poussette "Je vois"

    $20.99

Inline Form

With Visible Submit Button

With Icon Submit Button

With class="inline-form--centered"

Tag

With default text

Lire

Montre

Compatibilité

Boutique

Gardez une trace

With text: 'Override text'

Override text

Without icon

No icon

Drawer

Basic Implementation

Drawer Title Left

This content is given a height and background to show scrolling.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Drawer Title Right

This content is given a height and background to show scrolling.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

With Footer

This footer is designed to be sticky.

Drawer Title Left

This content is given a height and background to show scrolling.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

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.