View source for AXA design system color palette

🎨 '''The AXA Design System Color Palette''' is the official set of colors defined by AXA for use across its digital products and interfaces. The palette is built on Bootstrap's color system and provides comprehensive theming through Sass variables and CSS custom properties.

== Overview ==

The AXA color system is organized into several families: a greyscale range, the primary AXA Blue, the secondary AXA Sienna, and additional palettes named Ocean, Apache, Teal, Viridian, and Tosca. Standalone status colors (green, red, yellow) and a base white complete the system. Each color family includes multiple shades numbered from 100 (lightest) to 500 (darkest), with the ''200'' shade typically serving as the base reference value.

=== Theme Colors ===

The following are the main theme-level colors used for Bootstrap component theming:

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#00008f;" | &nbsp;
| Primary (AXA Blue)
| <code>#00008f</code>
|-
| style="background-color:#d24723;" | &nbsp;
| Secondary (AXA Sienna)
| <code>#d24723</code>
|-
| style="background-color:#138636;" | &nbsp;
| Success (Green)
| <code>#138636</code>
|-
| style="background-color:#c91432;" | &nbsp;
| Danger (Red)
| <code>#c91432</code>
|-
| style="background-color:#ffbc11;" | &nbsp;
| Warning (Yellow)
| <code>#ffbc11</code>
|-
| style="background-color:#4976ba;" | &nbsp;
| Info (Ocean)
| <code>#4976ba</code>
|-
| style="background-color:#ffffff; border:1px solid #ccc;" | &nbsp;
| Light / White
| <code>#ffffff</code>
|-
| style="background-color:#343c3d;" | &nbsp;
| Dark (Gray-800)
| <code>#343c3d</code>
|}

== Full Color Reference ==

=== Greyscale ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#fafafa; border:1px solid #ccc;" | &nbsp;
| Gray 100
| <code>#fafafa</code>
|-
| style="background-color:#f0f0f0;" | &nbsp;
| Gray 200
| <code>#f0f0f0</code>
|-
| style="background-color:#e5e5e5;" | &nbsp;
| Gray 300
| <code>#e5e5e5</code>
|-
| style="background-color:#cccccc;" | &nbsp;
| Gray 400
| <code>#cccccc</code>
|-
| style="background-color:#999999;" | &nbsp;
| Gray 500
| <code>#999999</code>
|-
| style="background-color:#757575;" | &nbsp;
| Gray 600
| <code>#757575</code>
|-
| style="background-color:#5f5f5f;" | &nbsp;
| Gray 700
| <code>#5f5f5f</code>
|-
| style="background-color:#343c3d;" | &nbsp;
| Gray 800
| <code>#343c3d</code>
|-
| style="background-color:#111b1d;" | &nbsp;
| Gray 900
| <code>#111b1d</code>
|}

=== AXA Blue ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#5c5cb7;" | &nbsp;
| AXA Blue 100
| <code>#5c5cb7</code>
|-
| style="background-color:#3d3daa;" | &nbsp;
| AXA Blue 200
| <code>#3d3daa</code>
|-
| style="background-color:#1f1f9c;" | &nbsp;
| AXA Blue 300 (Light)
| <code>#1f1f9c</code>
|-
| style="background-color:#00008f;" | &nbsp;
| AXA Blue 400 (Base)
| <code>#00008f</code>
|-
| style="background-color:#00006d;" | &nbsp;
| AXA Blue 500 (Dark)
| <code>#00006d</code>
|}

=== AXA Sienna ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#e28972;" | &nbsp;
| AXA Sienna 100
| <code>#e28972</code>
|-
| style="background-color:#dd7358;" | &nbsp;
| AXA Sienna 200
| <code>#dd7358</code>
|-
| style="background-color:#d75d3d;" | &nbsp;
| AXA Sienna 300 (Light)
| <code>#d75d3d</code>
|-
| style="background-color:#d24723;" | &nbsp;
| AXA Sienna 400 (Base)
| <code>#d24723</code>
|-
| style="background-color:#b03c1d;" | &nbsp;
| AXA Sienna 500 (Dark)
| <code>#b03c1d</code>
|}

=== Status Colors ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#138636;" | &nbsp;
| Green
| <code>#138636</code>
|-
| style="background-color:#c91432;" | &nbsp;
| Red
| <code>#c91432</code>
|-
| style="background-color:#ffbc11;" | &nbsp;
| Yellow
| <code>#ffbc11</code>
|-
| style="background-color:#ffffff; border:1px solid #ccc;" | &nbsp;
| White
| <code>#ffffff</code>
|}

=== AXA Ocean ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#7698cb;" | &nbsp;
| AXA Ocean 100
| <code>#7698cb</code>
|-
| style="background-color:#4976ba;" | &nbsp;
| AXA Ocean 200 (Base)
| <code>#4976ba</code>
|-
| style="background-color:#3a5e94;" | &nbsp;
| AXA Ocean 300
| <code>#3a5e94</code>
|-
| style="background-color:#274168;" | &nbsp;
| AXA Ocean 400
| <code>#274168</code>
|-
| style="background-color:#17273e;" | &nbsp;
| AXA Ocean 500
| <code>#17273e</code>
|}

=== AXA Apache ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#a79666;" | &nbsp;
| AXA Apache 100
| <code>#a79666</code>
|-
| style="background-color:#8a7333;" | &nbsp;
| AXA Apache 200 (Base)
| <code>#8a7333</code>
|-
| style="background-color:#6e5c28;" | &nbsp;
| AXA Apache 300
| <code>#6e5c28</code>
|-
| style="background-color:#4b3e1b;" | &nbsp;
| AXA Apache 400
| <code>#4b3e1b</code>
|-
| style="background-color:#241d0c;" | &nbsp;
| AXA Apache 500
| <code>#241d0c</code>
|}

=== AXA Teal ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#41949f;" | &nbsp;
| AXA Teal 100
| <code>#41949f</code>
|-
| style="background-color:#027180;" | &nbsp;
| AXA Teal 200 (Base)
| <code>#027180</code>
|-
| style="background-color:#015a66;" | &nbsp;
| AXA Teal 300
| <code>#015a66</code>
|-
| style="background-color:#014750;" | &nbsp;
| AXA Teal 400
| <code>#014750</code>
|-
| style="background-color:#002126;" | &nbsp;
| AXA Teal 500
| <code>#002126</code>
|}

=== AXA Viridian ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#738d87;" | &nbsp;
| AXA Viridian 100
| <code>#738d87</code>
|-
| style="background-color:#5b7b73;" | &nbsp;
| AXA Viridian 200 (Base)
| <code>#5b7b73</code>
|-
| style="background-color:#48625c;" | &nbsp;
| AXA Viridian 300
| <code>#48625c</code>
|-
| style="background-color:#32433f;" | &nbsp;
| AXA Viridian 400
| <code>#32433f</code>
|-
| style="background-color:#181f1e;" | &nbsp;
| AXA Viridian 500
| <code>#181f1e</code>
|}

=== AXA Tosca ===

{| class="wikitable" style="text-align:center; width:360px;"
! style="width:80px;" | Color
! style="width:200px;" | Name
! style="width:80px;" | Hex Code
|-
| style="background-color:#ac7074;" | &nbsp;
| AXA Tosca 100
| <code>#ac7074</code>
|-
| style="background-color:#914146;" | &nbsp;
| AXA Tosca 200 (Base)
| <code>#914146</code>
|-
| style="background-color:#743438;" | &nbsp;
| AXA Tosca 300
| <code>#743438</code>
|-
| style="background-color:#6a2f33;" | &nbsp;
| AXA Tosca 400
| <code>#6a2f33</code>
|-
| style="background-color:#321618;" | &nbsp;
| AXA Tosca 500
| <code>#321618</code>
|}

== Sources ==

* [https://designsystem.axa.com/design/colors AXA Design System – Colors]
* [https://designsystem.axa.com/docs/v1.0/foundations/colors/ AXA Design System – Colors Documentation (v1.0)]
* [https://github.com/axa-ch/design-tokens AXA CH Design Tokens on GitHub]