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
- blog
- cart
- heart
- logo
- menu-arrow
- search
- shipping-l
- shipping-r
- triangle (currently only on styleguide)
- 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
MSRP
Learn More
Category Card
Card component - Takes image, hover image, link, link text, and button hover color. Normal and Small Variants
Sliders
description
Product Slider
Slider component - Takes Title and blocks of product cards
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