Foundation
Colour
Colour tokens and swatches from your token file.
.Colour Primitives
| Token | Reference | |
|---|---|---|
| EU Blue-10 | #e8eaf5 | |
| EU Blue-100 | #121345 | |
| EU Blue-30 | #a0a9d8 | |
| EU Blue-50 | #5f6cbc | |
| EU Blue-70 | #3d4ba7 | |
| EU Blue-90 | #003399 | |
| EU Blue-Transparent | #181d4e00 | |
| Green-10 | #e5f4e9 | |
| Green-100 | #005819 | |
| Green-30 | #bfdbc6 | |
| Green-50 | #6bbd84 | |
| Green-70 | #009a44 | |
| Green-90 | #00772d | |
| Neutral-333333 | #333333 | |
| Neutral-606060 | #606060 | |
| Neutral-8D8479 | #8d8479 | |
| Neutral-B6ADA5 | #b6ada5 | |
| Neutral-E0DCD2 | #e0dcd2 | |
| Neutral-FAFAFA | #fafafa | |
| Neutral-White | #ffffff | |
| Orange-10 | #faeae8 | |
| Orange-100 | #bb411d | |
| Orange-30 | #fcae97 | |
| Orange-50 | #fc774d | |
| Orange-70 | #f15a2c | |
| Orange-90 | #d54d24 | |
| State Green-100 | #004d44 | |
| State Green-Pattern 30 | #50706b4d |
Action colors
| Token | Reference | |
|---|---|---|
| eu-primary-fill-default | Orange-100#bb411d | |
| eu-primary-fill-disabled | Orange-30#fcae97 | |
| eu-primary-fill-focus | Orange-100#bb411d | |
| eu-primary-fill-hover | Orange-90#d54d24 | |
| eu-primary-fill-pressed | Orange-90#d54d24 | |
| eu-primary-stroke-focus | EU Blue-100#121345 | |
| eu-primary-text-default | Neutral-White#ffffff | |
| eu-primary-text-disabled | Neutral-B6ADA5#b6ada5 | |
| eu-primary-text-focus | Neutral-White#ffffff | |
| eu-primary-text-hover | Neutral-White#ffffff | |
| eu-primary-text-pressed | Neutral-White#ffffff | |
| eu-secondary-fill-default | Neutral-White#ffffff | |
| eu-secondary-fill-disabled | Neutral-White#ffffff | |
| eu-secondary-fill-focus | Neutral-White#ffffff | |
| eu-secondary-fill-hover | Orange-30#fcae97 | |
| eu-secondary-fill-pressed | Orange-30#fcae97 | |
| eu-secondary-stroke-disabled | Orange-30#fcae97 | |
| eu-secondary-stroke-focus | Orange-70#f15a2c | |
| eu-secondary-text-default | Orange-100#bb411d | |
| eu-secondary-text-disabled | Orange-30#fcae97 | |
| eu-secondary-text-focus | Orange-100#bb411d | |
| eu-secondary-text-hover | Orange-100#bb411d | |
| eu-secondary-text-pressed | Orange-100#bb411d |
Accent colors
| Token | Reference | |
|---|---|---|
| eu-accent-dark | EU Blue-100#121345 | |
| eu-accent-light | EU Blue-10#e8eaf5 | |
| eu-accent-medium | EU Blue-50#5f6cbc |
Text Colours
| Token | Reference | |
|---|---|---|
| eu-heading-color-default | EU Blue-90#003399 | |
| eu-text-color-default | Neutral-333333#333333 |
Background
| Token | Reference | |
|---|---|---|
| eu-bg-default | Neutral-FAFAFA#fafafa | |
| eu-bg-white | Neutral-White#ffffff |
Border
| Token | Reference | |
|---|---|---|
| eu-border-dark | EU Blue-100#121345 | |
| eu-border-light | EU Blue-30#a0a9d8 |
Selection colors
| Token | Reference | |
|---|---|---|
| eu-selection-fill-active | Orange-30#fcae97 | |
| eu-selection-fill-default | Neutral-White#ffffff | |
| eu-selection-fill-focus | Neutral-White#ffffff | |
| eu-selection-fill-hover | Neutral-E0DCD2#e0dcd2 | |
| eu-selection-stroke-active | Orange-100#bb411d | |
| eu-selection-stroke-focus | Orange-70#f15a2c |
Alert
| Token | Reference | |
|---|---|---|
| eu-bg-alert | Green-30#bfdbc6 |
Surface
| Token | Reference | |
|---|---|---|
| eu-surface-accent | EU Blue-10#e8eaf5 | |
| eu-surface-neutral | Neutral-White#ffffff |