@axa-ch/design-tokens
Version:
AXA Design Tokens
986 lines (985 loc) • 22.3 kB
JSON
{
"breakpoints-base-xxl": {
"$value": 1440
},
"breakpoints-base-xl-max": {
"$value": 1439.98
},
"breakpoints-base-xl": {
"$value": 1200
},
"breakpoints-base-lg-max": {
"$value": 1199.98
},
"breakpoints-base-lg": {
"$value": 992
},
"breakpoints-base-md-max": {
"$value": 991.98
},
"breakpoints-base-md": {
"$value": 768
},
"breakpoints-base-sm-max": {
"$value": 767.98
},
"breakpoints-base-sm": {
"$value": 576
},
"breakpoints-base-xs-max": {
"$value": 575.98
},
"breakpoints-base-xs": {
"$value": 0
},
"typography-text-xl": {
"$value": "{typography-text-1}"
},
"typography-text-lg": {
"$value": "{typography-text-2}"
},
"typography-text-sm": {
"$value": "{typography-text-4}"
},
"typography-text-base": {
"$value": "{typography-text-3}"
},
"typography-text-4": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 400,
"fontSize": "14px",
"lineHeight": 1.214
},
"$type": "typography"
},
"typography-text-3": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 400,
"fontSize": "16px",
"lineHeight": 1.5
},
"$type": "typography"
},
"typography-text-2": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 400,
"fontSize": "18px",
"lineHeight": 1.5
},
"$type": "typography"
},
"typography-text-1": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 400,
"fontSize": "20px",
"lineHeight": 1.5
},
"$type": "typography"
},
"typography-secondary-h6-small": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "18px",
"lineHeight": 1.111
},
"$type": "typography"
},
"typography-secondary-h6": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "20px",
"lineHeight": 1.3
},
"$type": "typography"
},
"typography-secondary-h5-small": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "20px",
"lineHeight": 1.208
},
"$type": "typography"
},
"typography-secondary-h5": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "24px",
"lineHeight": 1.208
},
"$type": "typography"
},
"typography-secondary-h4-small": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "24px",
"lineHeight": 1.208
},
"$type": "typography"
},
"typography-secondary-h4": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "28px",
"lineHeight": 1.142
},
"$type": "typography"
},
"typography-secondary-h3-small": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "28px",
"lineHeight": 1.142
},
"$type": "typography"
},
"typography-secondary-h3": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "36px",
"lineHeight": 1.166
},
"$type": "typography"
},
"typography-secondary-h2-small": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "30px",
"lineHeight": 1.133
},
"$type": "typography"
},
"typography-secondary-h2": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "48px",
"lineHeight": 1.125
},
"$type": "typography"
},
"typography-secondary-h1-small": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "36px",
"lineHeight": 1.111
},
"$type": "typography"
},
"typography-secondary-h1": {
"$value": {
"fontFamily": "Publico Headline, Georgia, serif",
"fontWeight": 700,
"fontSize": "62px",
"lineHeight": 1.161
},
"$type": "typography"
},
"typography-primary-h6-small": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "18px",
"lineHeight": 1.111
},
"$type": "typography"
},
"typography-primary-h6": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "20px",
"lineHeight": 1.3
},
"$type": "typography"
},
"typography-primary-h5-small": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "20px",
"lineHeight": 1.208
},
"$type": "typography"
},
"typography-primary-h5": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "24px",
"lineHeight": 1.208
},
"$type": "typography"
},
"typography-primary-h4-small": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "24px",
"lineHeight": 1.208
},
"$type": "typography"
},
"typography-primary-h4": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "28px",
"lineHeight": 1.142
},
"$type": "typography"
},
"typography-primary-h3-small": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "28px",
"lineHeight": 1.142
},
"$type": "typography"
},
"typography-primary-h3": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "36px",
"lineHeight": 1.166
},
"$type": "typography"
},
"typography-primary-h2-small": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "30px",
"lineHeight": 1.133
},
"$type": "typography"
},
"typography-primary-h2": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "48px",
"lineHeight": 1.125
},
"$type": "typography"
},
"typography-primary-h1-small": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "36px",
"lineHeight": 1.111
},
"$type": "typography"
},
"typography-primary-h1": {
"$value": {
"fontFamily": "Source Sans Pro, Arial, sans-serif",
"fontWeight": 700,
"fontSize": "62px",
"lineHeight": 1.161
},
"$type": "typography"
},
"typography-margin-text-4-bottom": {
"$value": "{spacing-base-5}",
"$type": "size"
},
"typography-margin-text-3-bottom": {
"$value": "{spacing-base-5}",
"$type": "size"
},
"typography-margin-text-2-bottom": {
"$value": "{spacing-base-6}",
"$type": "size"
},
"typography-margin-text-1-bottom": {
"$value": "{spacing-base-6}",
"$type": "size"
},
"typography-margin-h6-bottom": {
"$value": "{spacing-base-3}",
"$type": "size"
},
"typography-margin-h6-top": {
"$value": "{spacing-base-5}",
"$type": "size"
},
"typography-margin-h5-bottom": {
"$value": "{spacing-base-3}",
"$type": "size"
},
"typography-margin-h5-top": {
"$value": "{spacing-base-5}",
"$type": "size"
},
"typography-margin-h4-bottom": {
"$value": "{spacing-base-4}",
"$type": "size"
},
"typography-margin-h4-top": {
"$value": "{spacing-base-6}",
"$type": "size"
},
"typography-margin-h3-bottom": {
"$value": "{spacing-base-4}",
"$type": "size"
},
"typography-margin-h3-top": {
"$value": "{spacing-base-6}",
"$type": "size"
},
"typography-margin-h2-bottom": {
"$value": "{spacing-base-5}",
"$type": "size"
},
"typography-margin-h2-top": {
"$value": "{spacing-base-7}",
"$type": "size"
},
"typography-margin-h1-bottom": {
"$value": "{spacing-base-5}",
"$type": "size"
},
"typography-margin-h1-top": {
"$value": "{spacing-base-7}",
"$type": "size"
},
"typography-line-height-10": {
"$value": 1.5,
"$type": "lineHeight"
},
"typography-line-height-9": {
"$value": 1.3,
"$type": "lineHeight"
},
"typography-line-height-8": {
"$value": 1.214,
"$type": "lineHeight"
},
"typography-line-height-7": {
"$value": 1.208,
"$type": "lineHeight"
},
"typography-line-height-6": {
"$value": 1.166,
"$type": "lineHeight"
},
"typography-line-height-5": {
"$value": 1.161,
"$type": "lineHeight"
},
"typography-line-height-4": {
"$value": 1.142,
"$type": "lineHeight"
},
"typography-line-height-3": {
"$value": 1.133,
"$type": "lineHeight"
},
"typography-line-height-2": {
"$value": 1.125,
"$type": "lineHeight"
},
"typography-line-height-1": {
"$value": 1.111,
"$type": "lineHeight"
},
"typography-font-size-10": {
"$value": "62px",
"$type": "fontSize"
},
"typography-font-size-9": {
"$value": "48px",
"$type": "fontSize"
},
"typography-font-size-8": {
"$value": "36px",
"$type": "fontSize"
},
"typography-font-size-7": {
"$value": "30px",
"$type": "fontSize"
},
"typography-font-size-6": {
"$value": "28px",
"$type": "fontSize"
},
"typography-font-size-5": {
"$value": "24px",
"$type": "fontSize"
},
"typography-font-size-4": {
"$value": "20px",
"$type": "fontSize"
},
"typography-font-size-3": {
"$value": "18px",
"$type": "fontSize"
},
"typography-font-size-2": {
"$value": "16px",
"$type": "fontSize"
},
"typography-font-size-1": {
"$value": "14px",
"$type": "fontSize"
},
"typography-font-family-secondary-fallback-2": {
"$value": "serif",
"$type": "fontFamily"
},
"typography-font-family-primary-fallback-2": {
"$value": "sans-serif",
"$type": "fontFamily"
},
"typography-font-family-secondary-fallback-1": {
"$value": "Georgia",
"$type": "fontFamily"
},
"typography-font-family-primary-fallback-1": {
"$value": "Arial",
"$type": "fontFamily"
},
"typography-font-family-secondary": {
"$value": "Publico Headline",
"$type": "fontFamily"
},
"typography-font-family-primary": {
"$value": "Source Sans Pro",
"$type": "fontFamily"
},
"spacing-base-10": {
"$value": 120,
"$type": "spacing"
},
"spacing-base-9": {
"$value": 80,
"$type": "spacing"
},
"spacing-base-8": {
"$value": 60,
"$type": "spacing"
},
"spacing-base-7": {
"$value": 40,
"$type": "spacing"
},
"spacing-base-6": {
"$value": 28,
"$type": "spacing"
},
"spacing-base-5": {
"$value": 20,
"$type": "spacing"
},
"spacing-base-4": {
"$value": 16,
"$type": "spacing"
},
"spacing-base-3": {
"$value": 12,
"$type": "spacing"
},
"spacing-base-2": {
"$value": 8,
"$type": "spacing"
},
"spacing-base-1": {
"$value": 4,
"$type": "spacing"
},
"shadow-box-high": {
"$value": "{shadow-base-2}",
"$type": "boxShadow"
},
"shadow-box-default": {
"$value": "{shadow-base-1}",
"$type": "boxShadow"
},
"shadow-base-2": {
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"x": "0px",
"y": "1px",
"blur": "20px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.15)",
"type": "dropShadow"
},
"$type": "boxShadow"
},
"shadow-base-1": {
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"x": "0px",
"y": "1px",
"blur": "8px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.15)",
"type": "dropShadow"
},
"$type": "boxShadow"
},
"radius-base-large": {
"$value": 16,
"$type": "borderRadius"
},
"radius-base-medium": {
"$value": 8,
"$type": "borderRadius"
},
"radius-base-small": {
"$value": 4,
"$type": "borderRadius"
},
"color-ui-design-white": {
"$value": "{color-greyscale-9}",
"$type": "color"
},
"color-ui-design-alabaster": {
"$value": "{color-greyscale-8}",
"$type": "color"
},
"color-ui-design-wild-sand": {
"$value": "{color-greyscale-7}",
"$type": "color"
},
"color-ui-design-mercury": {
"$value": "{color-greyscale-6}",
"$type": "color"
},
"color-ui-design-silver": {
"$value": "{color-greyscale-5}",
"$type": "color"
},
"color-ui-design-light-grey": {
"$value": "{color-greyscale-4}",
"$type": "color"
},
"color-ui-design-grey": {
"$value": "{color-greyscale-3}",
"$type": "color"
},
"color-ui-design-medium-grey": {
"$value": "{color-greyscale-2}",
"$type": "color"
},
"color-ui-design-dark-grey": {
"$value": "{color-greyscale-1}",
"$type": "color"
},
"color-ui-design-black": {
"$value": "{color-greyscale-0}",
"$type": "color"
},
"color-ui-design-burnt-sienna-light": {
"$value": "{color-ui-design-burnt-sienna}",
"$type": "color"
},
"color-ui-design-burnt-sienna-dark": {
"$value": "{color-ui-design-burnt-sienna}",
"$type": "color"
},
"color-ui-design-burnt-sienna-20": {
"$value": "{color-ui-design-burnt-sienna}",
"$type": "color"
},
"color-ui-design-burnt-sienna": {
"$value": "#f07662",
"$type": "color"
},
"color-ui-design-axa-blue-light": {
"$value": "{color-base-axa-blue-light}",
"$type": "color"
},
"color-ui-design-axa-blue-dark": {
"$value": "{color-base-axa-blue-dark}",
"$type": "color"
},
"color-ui-design-axa-blue-20": {
"$value": "{color-base-axa-blue-20}",
"$type": "color"
},
"color-ui-design-axa-blue": {
"$value": "{color-base-axa-blue}",
"$type": "color"
},
"color-status-shy-tomato-light": {
"$value": "{color-status-shy-tomato}",
"$type": "color"
},
"color-status-shy-tomato-dark": {
"$value": "{color-status-shy-tomato}",
"$type": "color"
},
"color-status-shy-tomato-20": {
"$value": "{color-status-shy-tomato}",
"$type": "color"
},
"color-status-shy-tomato": {
"$value": "#C91432",
"$type": "color"
},
"color-status-malachite-light": {
"$value": "{color-status-malachite}",
"$type": "color"
},
"color-status-malachite-dark": {
"$value": "{color-status-malachite}",
"$type": "color"
},
"color-status-malachite-20": {
"$value": "{color-status-malachite}",
"$type": "color"
},
"color-status-malachite": {
"$value": "#1CC54E",
"$type": "color"
},
"color-misc-igloo-light": {
"$value": "{color-misc-igloo}",
"$type": "color"
},
"color-misc-igloo-dark": {
"$value": "{color-misc-igloo}",
"$type": "color"
},
"color-misc-igloo-20": {
"$value": "{color-misc-igloo}",
"$type": "color"
},
"color-misc-igloo": {
"$value": "#B5D0EE",
"$type": "color"
},
"color-misc-logan-light": {
"$value": "{color-misc-logan}",
"$type": "color"
},
"color-misc-logan-dark": {
"$value": "{color-misc-logan}",
"$type": "color"
},
"color-misc-logan-20": {
"$value": "{color-misc-logan}",
"$type": "color"
},
"color-misc-logan": {
"$value": "#9190AC",
"$type": "color"
},
"color-misc-acid-light": {
"$value": "{color-misc-acid}",
"$type": "color"
},
"color-misc-acid-dark": {
"$value": "{color-misc-acid}",
"$type": "color"
},
"color-misc-acid-20": {
"$value": "{color-misc-acid}",
"$type": "color"
},
"color-misc-acid": {
"$value": "#F0FF93",
"$type": "color"
},
"color-misc-dune-light": {
"$value": "{color-misc-dune}",
"$type": "color"
},
"color-misc-dune-dark": {
"$value": "{color-misc-dune}",
"$type": "color"
},
"color-misc-dune-20": {
"$value": "{color-misc-dune}",
"$type": "color"
},
"color-misc-dune": {
"$value": "#FCD385",
"$type": "color"
},
"color-misc-apache-light": {
"$value": "{color-misc-apache}",
"$type": "color"
},
"color-misc-apache-dark": {
"$value": "{color-misc-apache}",
"$type": "color"
},
"color-misc-apache-20": {
"$value": "{color-misc-apache}",
"$type": "color"
},
"color-misc-apache": {
"$value": "#BC9D45",
"$type": "color"
},
"color-misc-cotton-candy-light": {
"$value": "{color-misc-cotton-candy}",
"$type": "color"
},
"color-misc-cotton-candy-dark": {
"$value": "{color-misc-cotton-candy}",
"$type": "color"
},
"color-misc-cotton-candy-20": {
"$value": "{color-misc-cotton-candy}",
"$type": "color"
},
"color-misc-cotton-candy": {
"$value": "#FAD6DE",
"$type": "color"
},
"color-misc-azalea-light": {
"$value": "{color-misc-azalea}",
"$type": "color"
},
"color-misc-azalea-dark": {
"$value": "{color-misc-azalea}",
"$type": "color"
},
"color-misc-azalea-20": {
"$value": "{color-misc-azalea}",
"$type": "color"
},
"color-misc-azalea": {
"$value": "#E196AA",
"$type": "color"
},
"color-misc-tosca-light": {
"$value": "{color-misc-tosca}",
"$type": "color"
},
"color-misc-tosca-dark": {
"$value": "{color-misc-tosca}",
"$type": "color"
},
"color-misc-tosca-20": {
"$value": "{color-misc-tosca}",
"$type": "color"
},
"color-misc-tosca": {
"$value": "#914146",
"$type": "color"
},
"color-misc-aqua-green-light": {
"$value": "{color-misc-aqua-green}",
"$type": "color"
},
"color-misc-aqua-green-dark": {
"$value": "{color-misc-aqua-green}",
"$type": "color"
},
"color-misc-aqua-green-20": {
"$value": "{color-misc-aqua-green}",
"$type": "color"
},
"color-misc-aqua-green": {
"$value": "#9FD9B4",
"$type": "color"
},
"color-misc-greyjoy-light": {
"$value": "{color-misc-greyjoy}",
"$type": "color"
},
"color-misc-greyjoy-dark": {
"$value": "{color-misc-greyjoy}",
"$type": "color"
},
"color-misc-greyjoy-20": {
"$value": "{color-misc-greyjoy}",
"$type": "color"
},
"color-misc-greyjoy": {
"$value": "#9FBEAF",
"$type": "color"
},
"color-misc-pacific-light": {
"$value": "{color-misc-pacific}",
"$type": "color"
},
"color-misc-pacific-dark": {
"$value": "{color-misc-pacific}",
"$type": "color"
},
"color-misc-pacific-20": {
"$value": "{color-misc-pacific}",
"$type": "color"
},
"color-misc-pacific": {
"$value": "#00ADC6",
"$type": "color"
},
"color-misc-viridia-green-light": {
"$value": "{color-misc-viridia-green}",
"$type": "color"
},
"color-misc-viridia-green-dark": {
"$value": "{color-misc-viridia-green}",
"$type": "color"
},
"color-misc-viridia-green-20": {
"$value": "{color-misc-viridia-green}",
"$type": "color"
},
"color-misc-viridia-green": {
"$value": "#668980",
"$type": "color"
},
"color-misc-teal-light": {
"$value": "{color-misc-teal}",
"$type": "color"
},
"color-misc-teal-dark": {
"$value": "{color-misc-teal}",
"$type": "color"
},
"color-misc-teal-20": {
"$value": "{color-misc-teal}",
"$type": "color"
},
"color-misc-teal": {
"$value": "#027180",
"$type": "color"
},
"color-misc-ocean-blue-light": {
"$value": "{color-misc-ocean-blue}",
"$type": "color"
},
"color-misc-ocean-blue-dark": {
"$value": "{color-misc-ocean-blue}",
"$type": "color"
},
"color-misc-ocean-blue-20": {
"$value": "{color-misc-ocean-blue}",
"$type": "color"
},
"color-misc-ocean-blue": {
"$value": "#4976BA",
"$type": "color"
},
"color-greyscale-9": {
"$value": "#FFFFFF",
"$type": "color"
},
"color-greyscale-8": {
"$value": "#FAFAFA",
"$type": "color"
},
"color-greyscale-7": {
"$value": "#F5F5F5",
"$type": "color"
},
"color-greyscale-6": {
"$value": "#E5E5E5",
"$type": "color"
},
"color-greyscale-5": {
"$value": "#CCCCCC",
"$type": "color"
},
"color-greyscale-4": {
"$value": "#999999",
"$type": "color"
},
"color-greyscale-3": {
"$value": "#7F7F7F",
"$type": "color"
},
"color-greyscale-2": {
"$value": "#5F5F5F",
"$type": "color"
},
"color-greyscale-1": {
"$value": "#333333",
"$type": "color"
},
"color-greyscale-0": {
"$value": "#000000",
"$type": "color"
},
"color-base-axa-red-light": {
"$value": "{color-base-axa-red}",
"$type": "color"
},
"color-base-axa-red-dark": {
"$value": "{color-base-axa-red}",
"$type": "color"
},
"color-base-axa-red-20": {
"$value": "{color-base-axa-red}",
"$type": "color"
},
"color-base-axa-red": {
"$value": "#ff1721",
"$type": "color"
},
"color-base-axa-blue-light": {
"$value": "{color-base-axa-blue}",
"$type": "color"
},
"color-base-axa-blue-dark": {
"$value": "{color-base-axa-blue}",
"$type": "color"
},
"color-base-axa-blue-20": {
"$value": "{color-base-axa-blue}",
"$type": "color"
},
"color-base-axa-blue": {
"$value": "#00008f",
"$type": "color"
},
"animation-easing-accelerated": {
"$value": [0.4, 0, 1, 1],
"$type": "cubicBezier"
},
"animation-easing-decelerated": {
"$value": [0, 0, 0.2, 1],
"$type": "cubicBezier"
},
"animation-easing-standard": {
"$value": [0.4, 0, 0.2, 1],
"$type": "cubicBezier"
},
"animation-duration-large-collapsing": {
"$value": 200,
"$type": "duration"
},
"animation-duration-large-expanding": {
"$value": 300,
"$type": "duration"
},
"animation-duration-medium-collapsing": {
"$value": 200,
"$type": "duration"
},
"animation-duration-medium-expanding": {
"$value": 250,
"$type": "duration"
},
"animation-duration-small": {
"$value": 100,
"$type": "duration"
}
}