@axa-ch/design-tokens/build/tailwind/tailwind-theme.css

AXA Design Tokens

@theme {
  --font-sans: 'Source Sans Pro', Arial, sans-serif;
  --font-serif: 'Publico Headline', Georgia, serif;

  --font-primary: 'Source Sans Pro', Arial, sans-serif;
  --font-secondary: 'Publico Headline', Georgia, serif;

  --color-base-axa-blue: #00008f;
  --color-base-axa-blue-20: #cccce9;
  --color-base-axa-blue-dark: #000072;
  --color-base-axa-blue-light: #4040ab;
  --color-base-axa-red: #ff1721;
  --color-base-axa-red-20: #ffd1d3;
  --color-base-axa-red-dark: #cc121a;
  --color-base-axa-red-light: #ff5159;
  --color-greyscale-0: #000000;
  --color-greyscale-1: #333333;
  --color-greyscale-2: #5f5f5f;
  --color-greyscale-3: #7f7f7f;
  --color-greyscale-4: #999999;
  --color-greyscale-5: #cccccc;
  --color-greyscale-6: #e5e5e5;
  --color-greyscale-7: #f5f5f5;
  --color-greyscale-8: #fafafa;
  --color-greyscale-9: #ffffff;
  --color-misc-ocean-blue: #4976ba;
  --color-misc-ocean-blue-20: #dbe4f1;
  --color-misc-ocean-blue-dark: #3a5e95;
  --color-misc-ocean-blue-light: #7798cb;
  --color-misc-teal: #027180;
  --color-misc-teal-20: #cce3e6;
  --color-misc-teal-dark: #025a66;
  --color-misc-teal-light: #4195a0;
  --color-misc-viridia-green: #668980;
  --color-misc-viridia-green-20: #e0e7e6;
  --color-misc-viridia-green-dark: #526e66;
  --color-misc-viridia-green-light: #8ca7a0;
  --color-misc-pacific: #00adc6;
  --color-misc-pacific-20: #cceff4;
  --color-misc-pacific-dark: #008a9e;
  --color-misc-pacific-light: #40c2d4;
  --color-misc-greyjoy: #9fbeaf;
  --color-misc-greyjoy-20: #ecf2ef;
  --color-misc-greyjoy-dark: #7f988c;
  --color-misc-greyjoy-light: #b7cec3;
  --color-misc-aqua-green: #9fd9b4;
  --color-misc-aqua-green-20: #ecf7f0;
  --color-misc-aqua-green-dark: #7fae90;
  --color-misc-aqua-green-light: #b7e3c7;
  --color-misc-tosca: #914146;
  --color-misc-tosca-20: #e9d9da;
  --color-misc-tosca-dark: #743438;
  --color-misc-tosca-light: #ad7174;
  --color-misc-azalea: #e196aa;
  --color-misc-azalea-20: #f9eaee;
  --color-misc-azalea-dark: #b47888;
  --color-misc-azalea-light: #e9b0bf;
  --color-misc-cotton-candy: #fad6de;
  --color-misc-cotton-candy-20: #fef7f8;
  --color-misc-cotton-candy-dark: #c8abb2;
  --color-misc-cotton-candy-light: #fbe0e6;
  --color-misc-apache: #bc9d45;
  --color-misc-apache-20: #f2ebda;
  --color-misc-apache-dark: #967e37;
  --color-misc-apache-light: #cdb674;
  --color-misc-dune: #fcd385;
  --color-misc-dune-20: #fef6e7;
  --color-misc-dune-dark: #caa96a;
  --color-misc-dune-light: #fddea4;
  --color-misc-acid: #f0ff93;
  --color-misc-acid-20: #fcffe9;
  --color-misc-acid-dark: #c0cc76;
  --color-misc-acid-light: #f4ffae;
  --color-misc-logan: #9190ac;
  --color-misc-logan-20: #e9e9ee;
  --color-misc-logan-dark: #74738a;
  --color-misc-logan-light: #adacc1;
  --color-misc-igloo: #b5d0ee;
  --color-misc-igloo-20: #f0f6fc;
  --color-misc-igloo-dark: #91a6be;
  --color-misc-igloo-light: #c8dcf2;
  --color-status-malachite: #1cc54e;
  --color-status-malachite-20: #d2f3dc;
  --color-status-malachite-dark: #169e3e;
  --color-status-malachite-light: #55d47a;
  --color-status-shy-tomato: #c91432;
  --color-status-shy-tomato-20: #f4d0d6;
  --color-status-shy-tomato-dark: #a11028;
  --color-status-shy-tomato-light: #d74f65;
  --color-ui-design-axa-blue: #00008f;
  --color-ui-design-axa-blue-20: #cccce9;
  --color-ui-design-axa-blue-dark: #000072;
  --color-ui-design-axa-blue-light: #4040ab;
  --color-ui-design-burnt-sienna: #f07662;
  --color-ui-design-burnt-sienna-20: #fce4e0;
  --color-ui-design-burnt-sienna-dark: #c05e4e;
  --color-ui-design-burnt-sienna-light: #f49889;
  --color-ui-design-black: #000000;
  --color-ui-design-dark-grey: #333333;
  --color-ui-design-medium-grey: #5f5f5f;
  --color-ui-design-grey: #7f7f7f;
  --color-ui-design-light-grey: #999999;
  --color-ui-design-silver: #cccccc;
  --color-ui-design-mercury: #e5e5e5;
  --color-ui-design-wild-sand: #f5f5f5;
  --color-ui-design-alabaster: #fafafa;
  --color-ui-design-white: #ffffff;
  --radius-small: 0.25rem;
  --radius-medium: 0.5rem;
  --radius-large: 1rem;
  --breakpoint-xs: 0px;
  --breakpoint-xs-max: 575.98px;
  --breakpoint-sm: 576px;
  --breakpoint-sm-max: 767.98px;
  --breakpoint-md: 768px;
  --breakpoint-md-max: 991.98px;
  --breakpoint-lg: 992px;
  --breakpoint-lg-max: 1199.98px;
  --breakpoint-xl: 1200px;
  --breakpoint-xl-max: 1439.98px;
  --breakpoint-2xl: 1440px;
  --text-xs: 0.875rem; /* 14px */
  --text-sm: 1rem; /* 16px */
  --text-base: 1.125rem; /* 18px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 1.75rem; /* 28px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.875rem; /* 62px */
  --text-xs--line-height: 1.111;
  --text-sm--line-height: 1.125;
  --text-base--line-height: 1.133;
  --text-lg--line-height: 1.142;
  --text-xl--line-height: 1.161;
  --text-2xl--line-height: 1.166;
  --text-3xl--line-height: 1.208;
  --text-4xl--line-height: 1.214;
  --text-5xl--line-height: 1.3;
  --text-6xl--line-height: 1.5;
  --shadow-box-default: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
  --shadow-box-high: 0px 1px 20px 0px rgba(0, 0, 0, 0.15);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerated: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerated: cubic-bezier(0.4, 0, 1, 1);
}