@axa-ch/design-tokens
Version:
AXA Design Tokens
1,015 lines (1,014 loc) • 22.4 kB
JSON
{
"breakpoints-base-xxl": {
"$value": 1440,
"$type": "number"
},
"breakpoints-base-xl-max": {
"$value": 1439.98,
"$type": "number"
},
"breakpoints-base-xl": {
"$value": 1200,
"$type": "number"
},
"breakpoints-base-lg-max": {
"$value": 1199.98,
"$type": "number"
},
"breakpoints-base-lg": {
"$value": 992,
"$type": "number"
},
"breakpoints-base-md-max": {
"$value": 991.98,
"$type": "number"
},
"breakpoints-base-md": {
"$value": 768,
"$type": "number"
},
"breakpoints-base-sm-max": {
"$value": 767.98,
"$type": "number"
},
"breakpoints-base-sm": {
"$value": 576,
"$type": "number"
},
"breakpoints-base-xs-max": {
"$value": 575.98,
"$type": "number"
},
"breakpoints-base-xs": {
"$value": 0,
"$type": "number"
},
"typography-text-xl": {
"$value": "{typography-text-1}",
"$type": "typography"
},
"typography-text-lg": {
"$value": "{typography-text-2}",
"$type": "typography"
},
"typography-text-sm": {
"$value": "{typography-text-4}",
"$type": "typography"
},
"typography-text-base": {
"$value": "{typography-text-3}",
"$type": "typography"
},
"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": "dimension"
},
"typography-margin-text-3-bottom": {
"$value": "{spacing-base-5}",
"$type": "dimension"
},
"typography-margin-text-2-bottom": {
"$value": "{spacing-base-6}",
"$type": "dimension"
},
"typography-margin-text-1-bottom": {
"$value": "{spacing-base-6}",
"$type": "dimension"
},
"typography-margin-h6-bottom": {
"$value": "{spacing-base-3}",
"$type": "dimension"
},
"typography-margin-h6-top": {
"$value": "{spacing-base-5}",
"$type": "dimension"
},
"typography-margin-h5-bottom": {
"$value": "{spacing-base-3}",
"$type": "dimension"
},
"typography-margin-h5-top": {
"$value": "{spacing-base-5}",
"$type": "dimension"
},
"typography-margin-h4-bottom": {
"$value": "{spacing-base-4}",
"$type": "dimension"
},
"typography-margin-h4-top": {
"$value": "{spacing-base-6}",
"$type": "dimension"
},
"typography-margin-h3-bottom": {
"$value": "{spacing-base-4}",
"$type": "dimension"
},
"typography-margin-h3-top": {
"$value": "{spacing-base-6}",
"$type": "dimension"
},
"typography-margin-h2-bottom": {
"$value": "{spacing-base-5}",
"$type": "dimension"
},
"typography-margin-h2-top": {
"$value": "{spacing-base-7}",
"$type": "dimension"
},
"typography-margin-h1-bottom": {
"$value": "{spacing-base-5}",
"$type": "dimension"
},
"typography-margin-h1-top": {
"$value": "{spacing-base-7}",
"$type": "dimension"
},
"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": "120px",
"$type": "dimension"
},
"spacing-base-9": {
"$value": "80px",
"$type": "dimension"
},
"spacing-base-8": {
"$value": "60px",
"$type": "dimension"
},
"spacing-base-7": {
"$value": "40px",
"$type": "dimension"
},
"spacing-base-6": {
"$value": "28px",
"$type": "dimension"
},
"spacing-base-5": {
"$value": "20px",
"$type": "dimension"
},
"spacing-base-4": {
"$value": "16px",
"$type": "dimension"
},
"spacing-base-3": {
"$value": "12px",
"$type": "dimension"
},
"spacing-base-2": {
"$value": "8px",
"$type": "dimension"
},
"spacing-base-1": {
"$value": "4px",
"$type": "dimension"
},
"shadow-box-high": {
"$value": "{shadow-base-2}",
"$type": "shadow"
},
"shadow-box-default": {
"$value": "{shadow-base-1}",
"$type": "shadow"
},
"shadow-base-2": {
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"blur": "20px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.15)"
},
"$type": "shadow"
},
"shadow-base-1": {
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"blur": "8px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.15)"
},
"$type": "shadow"
},
"radius-base-large": {
"$value": "16px",
"$type": "borderRadius"
},
"radius-base-medium": {
"$value": "8px",
"$type": "borderRadius"
},
"radius-base-small": {
"$value": "4px",
"$type": "borderRadius"
},
"color-ui-design-white": {
"$value": "#ffffff",
"$type": "color"
},
"color-ui-design-alabaster": {
"$value": "#fafafa",
"$type": "color"
},
"color-ui-design-wild-sand": {
"$value": "#f5f5f5",
"$type": "color"
},
"color-ui-design-mercury": {
"$value": "#e5e5e5",
"$type": "color"
},
"color-ui-design-silver": {
"$value": "#cccccc",
"$type": "color"
},
"color-ui-design-light-grey": {
"$value": "#999999",
"$type": "color"
},
"color-ui-design-grey": {
"$value": "#7f7f7f",
"$type": "color"
},
"color-ui-design-medium-grey": {
"$value": "#5f5f5f",
"$type": "color"
},
"color-ui-design-dark-grey": {
"$value": "#333333",
"$type": "color"
},
"color-ui-design-black": {
"$value": "#000000",
"$type": "color"
},
"color-ui-design-burnt-sienna-light": {
"$value": "#f49889",
"$type": "color"
},
"color-ui-design-burnt-sienna-dark": {
"$value": "#c05e4e",
"$type": "color"
},
"color-ui-design-burnt-sienna-20": {
"$value": "#fce4e0",
"$type": "color"
},
"color-ui-design-burnt-sienna": {
"$value": "#f07662",
"$type": "color"
},
"color-ui-design-axa-blue-light": {
"$value": "#4040ab",
"$type": "color"
},
"color-ui-design-axa-blue-dark": {
"$value": "#000072",
"$type": "color"
},
"color-ui-design-axa-blue-20": {
"$value": "#cccce9",
"$type": "color"
},
"color-ui-design-axa-blue": {
"$value": "#00008f",
"$type": "color"
},
"color-status-shy-tomato-light": {
"$value": "#d74f65",
"$type": "color"
},
"color-status-shy-tomato-dark": {
"$value": "#a11028",
"$type": "color"
},
"color-status-shy-tomato-20": {
"$value": "#f4d0d6",
"$type": "color"
},
"color-status-shy-tomato": {
"$value": "#c91432",
"$type": "color"
},
"color-status-malachite-light": {
"$value": "#55d47a",
"$type": "color"
},
"color-status-malachite-dark": {
"$value": "#169e3e",
"$type": "color"
},
"color-status-malachite-20": {
"$value": "#d2f3dc",
"$type": "color"
},
"color-status-malachite": {
"$value": "#1cc54e",
"$type": "color"
},
"color-misc-igloo-light": {
"$value": "#c8dcf2",
"$type": "color"
},
"color-misc-igloo-dark": {
"$value": "#91a6be",
"$type": "color"
},
"color-misc-igloo-20": {
"$value": "#f0f6fc",
"$type": "color"
},
"color-misc-igloo": {
"$value": "#b5d0ee",
"$type": "color"
},
"color-misc-logan-light": {
"$value": "#adacc1",
"$type": "color"
},
"color-misc-logan-dark": {
"$value": "#74738a",
"$type": "color"
},
"color-misc-logan-20": {
"$value": "#e9e9ee",
"$type": "color"
},
"color-misc-logan": {
"$value": "#9190ac",
"$type": "color"
},
"color-misc-acid-light": {
"$value": "#f4ffae",
"$type": "color"
},
"color-misc-acid-dark": {
"$value": "#c0cc76",
"$type": "color"
},
"color-misc-acid-20": {
"$value": "#fcffe9",
"$type": "color"
},
"color-misc-acid": {
"$value": "#f0ff93",
"$type": "color"
},
"color-misc-dune-light": {
"$value": "#fddea4",
"$type": "color"
},
"color-misc-dune-dark": {
"$value": "#caa96a",
"$type": "color"
},
"color-misc-dune-20": {
"$value": "#fef6e7",
"$type": "color"
},
"color-misc-dune": {
"$value": "#fcd385",
"$type": "color"
},
"color-misc-apache-light": {
"$value": "#cdb674",
"$type": "color"
},
"color-misc-apache-dark": {
"$value": "#967e37",
"$type": "color"
},
"color-misc-apache-20": {
"$value": "#f2ebda",
"$type": "color"
},
"color-misc-apache": {
"$value": "#bc9d45",
"$type": "color"
},
"color-misc-cotton-candy-light": {
"$value": "#fbe0e6",
"$type": "color"
},
"color-misc-cotton-candy-dark": {
"$value": "#c8abb2",
"$type": "color"
},
"color-misc-cotton-candy-20": {
"$value": "#fef7f8",
"$type": "color"
},
"color-misc-cotton-candy": {
"$value": "#fad6de",
"$type": "color"
},
"color-misc-azalea-light": {
"$value": "#e9b0bf",
"$type": "color"
},
"color-misc-azalea-dark": {
"$value": "#b47888",
"$type": "color"
},
"color-misc-azalea-20": {
"$value": "#f9eaee",
"$type": "color"
},
"color-misc-azalea": {
"$value": "#e196aa",
"$type": "color"
},
"color-misc-tosca-light": {
"$value": "#ad7174",
"$type": "color"
},
"color-misc-tosca-dark": {
"$value": "#743438",
"$type": "color"
},
"color-misc-tosca-20": {
"$value": "#e9d9da",
"$type": "color"
},
"color-misc-tosca": {
"$value": "#914146",
"$type": "color"
},
"color-misc-aqua-green-light": {
"$value": "#b7e3c7",
"$type": "color"
},
"color-misc-aqua-green-dark": {
"$value": "#7fae90",
"$type": "color"
},
"color-misc-aqua-green-20": {
"$value": "#ecf7f0",
"$type": "color"
},
"color-misc-aqua-green": {
"$value": "#9fd9b4",
"$type": "color"
},
"color-misc-greyjoy-light": {
"$value": "#b7cec3",
"$type": "color"
},
"color-misc-greyjoy-dark": {
"$value": "#7f988c",
"$type": "color"
},
"color-misc-greyjoy-20": {
"$value": "#ecf2ef",
"$type": "color"
},
"color-misc-greyjoy": {
"$value": "#9fbeaf",
"$type": "color"
},
"color-misc-pacific-light": {
"$value": "#40c2d4",
"$type": "color"
},
"color-misc-pacific-dark": {
"$value": "#008a9e",
"$type": "color"
},
"color-misc-pacific-20": {
"$value": "#cceff4",
"$type": "color"
},
"color-misc-pacific": {
"$value": "#00adc6",
"$type": "color"
},
"color-misc-viridia-green-light": {
"$value": "#8ca7a0",
"$type": "color",
"$deprecated": "The color name contains a typo, use \"viridian-green-light\" instead"
},
"color-misc-viridia-green-dark": {
"$value": "#526e66",
"$type": "color",
"$deprecated": "The color name contains a typo, use \"viridian-green-dark\" instead"
},
"color-misc-viridia-green-20": {
"$value": "#e0e7e6",
"$type": "color",
"$deprecated": "The color name contains a typo, use \"viridian-green-20\" instead"
},
"color-misc-viridia-green": {
"$value": "#668980",
"$type": "color",
"$deprecated": "The color name contains a typo, use \"viridian-green\" instead"
},
"color-misc-viridian-green-light": {
"$value": "#8ca7a0",
"$type": "color"
},
"color-misc-viridian-green-dark": {
"$value": "#526e66",
"$type": "color"
},
"color-misc-viridian-green-20": {
"$value": "#e0e7e6",
"$type": "color"
},
"color-misc-viridian-green": {
"$value": "#668980",
"$type": "color"
},
"color-misc-teal-light": {
"$value": "#4195a0",
"$type": "color"
},
"color-misc-teal-dark": {
"$value": "#025a66",
"$type": "color"
},
"color-misc-teal-20": {
"$value": "#cce3e6",
"$type": "color"
},
"color-misc-teal": {
"$value": "#027180",
"$type": "color"
},
"color-misc-ocean-blue-light": {
"$value": "#7798cb",
"$type": "color"
},
"color-misc-ocean-blue-dark": {
"$value": "#3a5e95",
"$type": "color"
},
"color-misc-ocean-blue-20": {
"$value": "#dbe4f1",
"$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": "#ff5159",
"$type": "color"
},
"color-base-axa-red-dark": {
"$value": "#cc121a",
"$type": "color"
},
"color-base-axa-red-20": {
"$value": "#ffd1d3",
"$type": "color"
},
"color-base-axa-red": {
"$value": "#ff1721",
"$type": "color"
},
"color-base-axa-blue-light": {
"$value": "#4040ab",
"$type": "color"
},
"color-base-axa-blue-dark": {
"$value": "#000072",
"$type": "color"
},
"color-base-axa-blue-20": {
"$value": "#cccce9",
"$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"
}
}