Getting started

The AXA Design System is a toolbox of resources to create beautiful user interfaces, consistent with the AXA Brand guidelines, principles, and best practices. Instead of focusing on pixels, developers can focus on application logic, while designers can focus on the user experience, interactions, and flows.

The AXA Way of Doing Things

When we write, talk and design, we need to think about embodying our principles.

Personnal

Personnal

Building knowledge and trust-based relationships that are empathetic and engaging

Proactive

Proactive

Making things clear and easy, inspiring people to take action

Progressive

Progressive

Being modern in creating an ambitious and positive future for customers, the industry and the AXA business

AXA Design System

The AXA Design System has been conceived in a manner to align with the core AXA principles and to carry forward this message.

 Understanding the AXA Design System

Understanding the AXA Design System

Atoms? Molecules? Organisms? Master the structure approach of AXA Design System.

A perfect start for

Developer

The library provides front-end developers & engineers a collection of reusable Web components to build websites and user interfaces, aligned with the AXA Brand guidelines. Adopting the AXA components library enables you to use consistent markup, styles, and behavior in prototype and production work.

Install and use components

AXA Design System is made up of multiple web components and tools which you can import one by one. All you need to do is install the @axa-ch/ corresponding package.

Here is an example with a button:

$ npm install @axa-ch/button

Import the button-defining script and use a button like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Your awesome title</title>
</head>
<body>
/* Your button component */
<axa-button>I am a button</axa-button>
<script src="node_modules/@axa-ch/button/dist/index.js"></script>
</body>
</html>

⚠️ Important: If this component needs to run in Internet Explorer 11, you need to use our polyfill.

Using React ? not a big deal, we covered this scenario. You need to create a React-ified button with the createElement function from your React.

import { createElement } from 'react';
import createAXAButtonReact from '@axa-ch/button/lib/index.react';
const AXAButtonReact = createAXAButtonReact(createElement);
export default AXAButtonReact;
<AXAButtonReact motionOff onClick={handler}>
I am a Button
</AxaButtonReact>

A perfect start for

Designer

Rapidly build beautiful and accessible experiences. The AXA Design System UI kit contains all resources you need to get started on your AXA digital projects, and save precious time and effort.

Direct on Slack

AXA Design System UI Kit

AXA Design System UI Kit

To design with AXA Design System you need the most recent version of Sketch installed.

Help & Contact

Any question?