FREE SHIPPING ON ALL ORDERS!
    • Safety Gates Safety Gates Safety Gates
    • Bedtime Bedtime Bedtime
    • Seating Seating Seating
    • Bath & Potty Bath & Potty Bath & Potty
    • Play Play Play
    • Extensions <br>& Parts Extensions <br>& Parts Extensions
      & Parts
      • SHOP BY AGE
      • Baby (0-12 Months)
      • Toddler (12-24 Months)
      • Child (24+ Months)
  • Blog
    • About Us About Us About Us
    • Press Press Press
    • Contact Us Contact Us Contact Us
    • FAQs FAQs FAQs
  • Product Registration
    • Safety Gates Safety Gates Safety Gates
    • Bedtime Bedtime Bedtime
    • Seating Seating Seating
    • Bath & Potty Bath & Potty Bath & Potty
    • Play Play Play
    • Extensions <br>& Parts Extensions <br>& Parts Extensions
      & Parts
      • SHOP BY AGE
      • Baby (0-12 Months)
      • Toddler (12-24 Months)
      • Child (24+ Months)
  • Blog
    • About Us About Us About Us
    • Press Press Press
    • Contact Us Contact Us Contact Us
    • FAQs FAQs FAQs
  • Product Registration

Style Guide

Colors

  • - #68c7c6 - aqua
  • - #232323 - black
  • - #0f90cd - blue
  • - #9794c8 - purple
  • - #fafafa - snow
  • - #ffffff - white
  • - #efefef - white-smoke
  • - #eec53c - yellow
  • - #deeaea - zircon

Typography (desktop + mobile)

H1 - Desktop - filson-pro - 65px - 900

H1 - Mobile - filson-pro - 50px - 900

H2 - Desktop - filson-pro - 45px - 900

H2 - Mobile - filson-pro - 30px - 900

H3 - Desktop - filson-pro - 30px - 900

H3 - Mobile - filson-pro - 24px - 900

H4 - Desktop - filson-pro - 22px - 700

H4 - Mobile - filson-pro - 18px - 700

body copy, menu links - Desktop - objektiv-mk3 - 16px - 700
body copy, menu links - Mobile - objektiv-mk3 - 16px - 700

Layout & Variables

General Layout Standards

Breakpoint and Container Variables

Breakpoints
$mobile: 640px

Containers
$page_width: 1088px

Miscelleneous

Components

Icons + Assets

All Icons and assets(that exist in code)

- account
- blog
- cart
- facebook
- heart
- instagram
- logo
- menu-arrow
- pinterest
- search
- shipping-l
- shipping-r
- triangle (currently only on styleguide)
- twitter
- youtube

Buttons

All Buttons with unique hovers









Hero Components

description

Category Hero

Hero component with an image, title, and content. Uses collection metafields

Click to see example of component Hero

Shop by Age Hero

Hero component with an image, title, and content. With adjustable background color

Click to see example of component Hero

Cards

Card components, includes product cards, article cards, collection cards

Product Card

Card component - Takes image, hover image, title, link, link text, and button hover color. There is currently not multiple variations to this component (other than button hover colors)

My Cot<sup>®</sup> Pals <br>Portable Toddler Bed My Cot<sup>®</sup> Pals <br>Portable Toddler Bed

My Cot® Pals
Portable Toddler Bed

Product Card - Large

Card component - Takes Product with image, title, price, and displays yotpo stars

MSRP

Category Card

Card component - Takes image, hover image, link, link text, and button hover color. Normal and Small Variants

Normal

Small

Subcategory Card

Card component - Takes image, link, and title (bounces on hover)

Product Title

Product Title

Sliders

description

Product Slider

Slider component - Takes Title and blocks of product cards

slider title!

<br>My Play Mat<sup>™</sup> <br>My Play Mat<sup>™</sup>


My Play Mat™

My Cot<sup>®</sup> Pals <br>Portable Toddler Bed My Cot<sup>®</sup> Pals <br>Portable Toddler Bed

My Cot® Pals
Portable Toddler Bed

My Play<sup>®</sup> Baby <br>Portable Bassinet My Play<sup>®</sup> Baby <br>Portable Bassinet

My Play® Baby
Portable Bassinet

Category Slider

Slider component - Takes blocks of category cards

Subcategory Slider

Slider component - Takes blocks of subcategory cards

Hardware Mounted

Hardware Mounted

Freestanding

Freestanding

Pressure Mounted

Pressure Mounted

Top of Stairs

Top of Stairs

Extensions

Extensions

Forms

Form Components, includes newsletter signup, contact forms

No components yet

Upsells

(home) Upsell

Upsell component - takes image (img), background color (bg_color), content (captured html for content)

Tips & tricks
from real parents.

Visit our Blog

Invalid password
Enter
Thank you
for letting us protect your most treasured little ones.
  • About Us
  • Help Center
  • Contact Us
  • Product Registration
  • MyRegistry Baby Registry
Join our Newsletter!
Sign Up
Join The Regalo Family
  • Warranty & Returns
  • Privacy Policy
  • Terms of Service
  • Accessibility