Design System Styleguide
A comprehensive overview of all design tokens, components, and patterns used in this theme.
Typography
Font Families
Heading Font
Halyard Display Medium
font-family: var(--font-heading-family);
Body Font
Halyard Display Regular
font-family: var(--font-body-family);
Type Scale
Desktop sizes shown. Mobile sizes step down one level (h1 mobile = h2 desktop)
.h0 (10rem / 100px)
.h1 or h1 (6.1rem / 61px)
.h2 or h2 (4.9rem / 49px)
.h3 or h3 (3.9rem / 39px)
.h4 or h4 (3.1rem / 31px)
.h5 or h5 (2.5rem / 25px)
.h6 or h6 (2rem / 20px)
Lead text (large paragraph)
.text-lead (2rem / 20px)
Body text (regular)
p or .text-p (1.6rem / 16px)
Bold text (medium weight)
.text-bold, strong, b (1.6rem / 16px, weight: 500)
Small text
.text-small, small, .caption (1.3rem / 13px)
Extra small text
.text-x-small (1rem / 10px)
Type Scale Comparison
Desktop
- h0: 10rem (100px)
- h1: 6.1rem (61px)
- h2: 4.9rem (49px)
- h3: 3.9rem (39px)
- h4: 3.1rem (31px)
- h5: 2.5rem (25px)
- h6: 2rem (20px)
Mobile (one size down)
- h0: 6.1rem (61px)
- h1: 4.9rem (49px)
- h2: 3.9rem (39px)
- h3: 3.1rem (31px)
- h4: 2.5rem (25px)
- h5: 2rem (20px)
- h6: 1.8rem (18px)
Brand Color Palette
Primary Brand Colors
Orlo Green
--color-orlo-green: #072626
Charcoal
--color-charcoal: #222222
Pearl
--color-pearl: #F6F6F6
Graphite
--color-graphite: #606060
White
--color-white: #FFFFFF
Utility Classes
Ready-to-use classes for backgrounds, text, and borders
.bg-orlo-green - Background with white text
.bg-charcoal - Background with white text
.bg-pearl - Background with charcoal text
.bg-graphite - Background with white text
Grey Scale System
Grey 50
--color-grey-50
Grey 100
--color-grey-100
Grey 200
--color-grey-200
Grey 300
--color-grey-300
Grey 400
--color-grey-400
Grey 500
--color-grey-500
Grey 600
--color-grey-600
Grey 700
--color-grey-700
Grey 800
--color-grey-800
Grey 900
--color-grey-900
State Colors
Success
--color-success: #0A7537
Warning
--color-warning: #B86E00
Error
--color-error: #B32E2E
Info
--color-info: var(--color-orlo-green)
Accessible Color Combinations
All combinations meet WCAG AA standards (4.5:1 minimum contrast ratio)
Charcoal on White
Contrast: 18.1:1 (AAA)
White on Charcoal
Contrast: 18.1:1 (AAA)
White on Orlo Green
Contrast: 17.4:1 (AAA)
Charcoal on Pearl
Contrast: 17.3:1 (AAA)
Graphite on White
Contrast: 7.0:1 (AA)
Graphite on Pearl
Contrast: 6.7:1 (AA)
White on Graphite
Contrast: 7.0:1 (AA)
Color Schemes
Light Scheme
Primary content areas - charcoal text on pearl background
.color-scheme-light
Dark Scheme
Contrast sections - white text on charcoal background
.color-scheme-dark
Primary Scheme
Brand highlights - white text on Orlo Green background
.color-scheme-primary
Inverse Scheme
Clean sections - charcoal text on pure white background
.color-scheme-inverse
Spacing System
Sections Desktop
var(--spacing-sections-desktop)
Sections Mobile
var(--spacing-sections-mobile)
Grid Vertical
var(--grid-desktop-vertical-spacing)
Grid Horizontal
var(--grid-desktop-horizontal-spacing)
Buttons
Button Variables
--buttons-radius: 10px
--buttons-border-width: 0px
--buttons-border-opacity: 1.0
--buttons-shadow-opacity: 0.0
Form Elements
.field__input
input[type="email"]
.select__select
.text-area
.facets__checkbox
Input Variables
--inputs-radius: 0px
--inputs-border-width: 1px
--inputs-border-opacity: 0.55
--inputs-shadow-opacity: 0.0
Card Components
Product Card
Product Card Example
This is a sample product card
--product-card-corner-radius: 0.0rem
--product-card-border-width: 0.0rem
--product-card-shadow-opacity: 0.0
Icon Library
Click on any icon to copy its name
account
apple
arrow
banana
box
bottle
carrot
cart
cart-empty
caret
chat-bubble
check-mark
checkmark
clipboard
close
close-small
copy
dairy
dairy-free
discount
dryer
error
eye
filter
fire
gluten-free
hamburger
heart
info
inventory-status
iron
leaf
leather
lightning-bolt
lipstick
lock
map-pin
minus
nut-free
padlock
pants
pause
paw-print
pepper
perfume
plane
plant
play
plus
price-tag
question-mark
recycle
remove
reset
return
ruler
search
share
serving-dish
shirt
shoe
shopify
silhouette
snapchat
snowflake
star
stopwatch
success
tick
tiktok
truck
tumblr
unavailable
vimeo
washing
youtube
zoom
Badges & Tags
--badge-corner-radius: 0.4rem
Shadows & Effects
Button shadow
Product card shadow
Media shadow
Layout & Grid
Page Width
max-width: var(--page-width)
Grid System
