My Cart
colors
typography
layout
cta
icons
fields
FAQ modal
swiper

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-order-label__bg--progress
Pending/etc. 

@od-order-label__bg--warning
Complete 

@od-order-label__bg--success
Canceled/closed/etc. 

@od-order-label__bg--error

Other colors

Line Seperator 

@od-line-separator
Discount 

@od-discount__color