The AXA CH Design Tokens project exports design tokens for use in multiple technologies. The following technologies are supported:
- CSS Variables + Media Queries with @custom-media
- SCSS Variables
- JS/TS Variables
- Tailwind Config
If you need our design tokens for a web project you might check this Online demo
The project supports the following design tokens:
- Animation: Variables needed to handle component animations.
- Breakpoints/Media Queries: AXA viewport breakpoints and additional media query utilities.
- Color: AXA colors.
- Radius: Box radius variables.
- Shadow: Box shadow variables.
- Spacing: AXA Design System spacing variables.
- Typography: AXA Design System font styles.
To install the AXA CH Design Tokens, run the following command:
npm i @axa-ch/design-tokens
To use the AXA CH Design Tokens in your project, import them based on your technology. Here are some implementation examples that may inspire you:
You can import the CSS variables into your files as follows:
@import url('@axa-ch/design-tokens/tokens.css');
.component {
width: var(--spacing-base-3);
}
Note that for CSS media queries via @custom-media you will need a postCSS plugin
@import url('@axa-ch/design-tokens/tokens.css');
.component {
width: var(--spacing-base-3);
@media (--mq-respond-up-sm) {
width: var(--spacing-base-6);
}
}
If you want to simply import the pre-bundled css variables without relying on a build process, you can import the minified tokens.min.css
file as follows:
<link
rel="stylesheet"
href="@axa-ch/design-tokens/tokens.min.css"
/>
Note that the css above doesn't contain @custom-media
variables because this directive is not yet supported by any modern browser.
You can import the SCSS variables into your files as follows:
@use '@axa-ch/design-tokens/tokens.scss';
.component {
width: tokens.$spacing-base-3;
@media (tokens.$mq-respond-up-sm) {
width: tokens.$spacing-base-6;
}
}
In case you want to import and scope the css variables into your SCSS application, without relying on the :root
global selector, you might want to use our mixins as follows:
@use '@axa-ch/design-tokens/tokens.scss';
.component {
// scope the css variables under the .component class
@include tokens.get-animation-css-vars;
@include tokens.get-breakpoints-css-vars;
@include tokens.get-color-css-vars;
@include tokens.get-radius-css-vars;
@include tokens.get-shadow-css-vars;
@include tokens.get-spacing-css-vars;
@include tokens.get-typography-css-vars;
}
You can import the JS variables into your files as follows:
import * as tokens from '@axa-ch/design-tokens';
console.log(tokens.ColorBaseAxaBlue);
You can extend your tailwind.config.js
file as follows:
module.exports = {
presets: [require('@axa-ch/design-tokens/tailwind.config')],
// ...
};
You can import the tokens.json
into figma via Tokens Studio Plugin.
This will allow to sync your figma library with the tokens exposed in this project.