export const GEL = {
'font': {
'light': {
'family': '"AzoSans"',
'filename': 'AzoSans-Regular-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '400',
},
'regular': {
'family': '"AzoSansRegular"',
'filename': 'AzoSans-Regular-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '500',
},
'medium': {
'family': '"AzoSansMedium"',
'filename': 'AzoSans-Regular-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '500',
},
'italic': {
'family': '"AzoSansItalic"',
'filename': 'AzoSans-Italic-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '400',
},
'default': '"Helvetica Neue", Arial, sans-serif',
},
'form': {
'buttonPrimary': {
'border': '0',
'background': '#30a74b',
'color': '#ffffff',
'radius': '0.25rem',
},
'buttonSecondary': {
'border': '.0625rem solid #000000',
'background': '#ffffff',
'color': '#000000',
'radius': '0.25rem',
},
'buttonTertiary': {
'border': '0',
'background': '#000000',
'color': '#ffffff',
'radius': '0.25rem',
},
'buttonMegaNav': {
'border': '.0625rem solid #000000',
'background': '#ffffff',
'color': '#000000',
'borderRadius': '1.125rem',
},
'default': {
'border': '0.0625rem solid #515151',
'background': '#ffffff',
'radius': '0.25rem',
},
'disabled': {
'border': '0.0625rem solid #dedede',
'background': '#ffffff',
'radius': '0.25rem',
},
'focusActive': {
'border': '0.0625rem solid #000000',
'background': '#ffffff',
'radius': '0.25rem',
},
'invalid': {
'border': '0.0625rem solid #d91440',
'background': '#ffffff',
'radius': '0.25rem',
},
'selectedAccent': {
'border': '0.125rem solid #257F39',
'background': '#ffffff',
'radius': '0.25rem',
},
'selectedBlock': {
'border': '0.125rem solid #257F39',
'background': 'rgba(48, 167, 75, 0.05)',
'radius': '0.25rem',
},
'success': {
'border': '0.0625rem solid #109449',
'background': '#ffffff',
'radius': '0.25rem',
},
},
'input': {
'checkbox': {
'border': '0.0625rem solid #b7b7b7',
'radius': '0.25rem',
'borderSelected': '0.125rem solid #257F39',
'backgroundSelected': 'rgba(48, 167, 75, 0.05)',
'checkSelected': '#000',
},
'radio': {
'border': '0.0625rem solid #b7b7b7',
'radius': '50%',
'borderSelected': '0.125rem solid #257F39',
'backgroundSelected': 'rgba(48, 167, 75, 0.05)',
'innerSelected': '#000',
}
},
'text': {
'default': '#000000',
'disabled': '#c5c5c5',
'reversed': '#ffffff',
'error': '#d91440',
'hyperlink': '#257f39',
'muted': '#515151',
'strong': '#000000',
'success': '#257f39',
'warning': '#A26100',
'navigation': {
'link': '#ffffff',
'linkActive': '#000000',
'linkClearance': '#f28500',
'font': {
'fontWeight': '500',
'fontFamily': 'AzoSansRegular,"Helvetica Neue",Arial,sans-serif',
}
}
},
'footer': {
'socialMedia': {
'background': 'initial',
},
'quickLinks': {
'background': '#f7f7f7',
},
'mainLinks': {
'background': '#f7f7f7',
},
'copyright': {
'background': '#f7f7f7',
},
},
'header': {
'navUpperBackground': {
'default': '#000000',
'color': '#ffffff',
},
'navLowerBackground': {
'default': '#1e1e1e',
'desktop': '#000000',
'active': '#ffffff',
'border': '0',
},
'searchBar': {
'radius': '0.25rem',
'color': '#000',
'background': '#fff',
'border': '0.0625rem solid #eaeaea',
},
'shoppingBag': {
'color': '#ffffff',
}
},
'popover': {
'border': '0.0625rem solid #9e9e9e',
'radius': '0.25rem',
},
'utilities': {
'divider': '0.0625rem solid #eaeaea',
'dividerDark': '.0625rem solid #9e9e9e',
'backgroundAccent': '#f7f7f7',
'activeBorder': '0.125rem solid #257f39',
'chipBorderRadius': '0.25rem',
'summaryAlignment': 'flex-start',
},
'reviewStar': {
'filled': '#000000',
'unfilled': '#d1d1d1',
},
'drawer': {
'headerBackground': '#f7f7f7',
'headerBorder': '.0625rem solid #9e9e9e',
},
'plp': {
'facetDivider': '0.0625rem solid #d1d1d1',
'facetTextTransform': 'capitalize',
'facetLetterSpacing': '0.0075rem',
},
'pdp': {
'ribbonTextTransform': 'capitalize',
'ribbonLetterSpacing': '0.0075rem',
},
'countrySelect': {
'logoPosition': 'flex-start',
'headerBackground': '#fff',
'headerBorderBottom': '',
'accordionHeaderTransform': 'capitalize',
'accordionHeaderLetterSpacing': '0.0075rem',
},
'status': {
'informationStatus': {
'border': '0.125rem solid #1d89dd',
'background': '#f4f9fd',
},
'warningStatus': {
'border': '0.125rem solid #d88f31',
'background': '#fdf9f5',
},
'successStatus': {
'border': '0.125rem solid #257f39',
'background': '#f4f9f6',
},
'errorStatus': {
'border': '0.125rem solid #d91440',
'background': '#fdf3f5',
},
}
}

Text Colour

The primary text colour to be used across the site.

The colour used for disabled text.

The colour used for text on an opposite background colour to default.

The text colour used to indicate an error.

The text colour used for all inline and block links across the site.

The text colour used for secondary content, used to compliment the default text colour.

For text that you want to stand out more (often the same as default).

The colour used to indicate success.

To be used to indicate a warning.