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

Shop by Age Hero

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

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)

Product Card - Large

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

Category Card

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

Subcategory Card

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

Sliders

description

Product Slider

Slider component - Takes Title and blocks of product cards

slider title!

Category Slider

Slider component - Takes blocks of category cards

Subcategory Slider

Slider component - Takes blocks of subcategory cards

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)

Importance of Being JPMA Certified

Read Blog