United States
All measurements will be displayed in imperial units
International
All measurements will be displayed in metric units
Brand colors
Brand Primary
@theme__color__primary
Brand Secondary
@theme__color__secondary
Brand Tertiary
@theme__color__primary-alt
Text colors
Headlines Primary
@heading__color__base
Headlines Secondary
@od-heading__color--secondary
Paragraph Primary
@od-p__color--primary
Paragraph Secondary
@od-p__color--secondary
Link
@link__color
Text Field Active
@form-element-input__focus__color
Text Field Placeholder
@form-element-input-placeholder__color
System colors
Primary Button
@button-primary__background
Secondary Button
@button__background
Field Border Color
@form-element-input__border-color
Field Incactive Fill
@form-element-input__disabled__background
Background colors
Page Background
@page__background-color
Product Background
@od-product__background
Primary Background
@od-background__color--primary
Secondary Background
@od-background__color--secondary
Tertiary Background
@od-background__color--tertiary
Overlay Background
@od-overlay__background
State colors
Success
@message-success__color
Error
@error__color
Inactive
@od-state-inactive__color
Active
@od-state-active__color
Order-status colors
Processing/etc.
@od-processing__color
Pending/etc.
@od-pending__color
Complete
@od-complete__color
Canceled/closed/etc.
@od-canceled-closed__color
Other colors
Line Seperator
@od-line-separator
Discount
@od-discount__color