Foundation
Colour
Colour tokens and swatches from your token file.
.Colour Primitives
| Token | Reference | |
|---|---|---|
| Basic-Transparent | #ffffff00 | |
| Basic-White | #ffffff | |
| Blue-10 | #edf8ff | |
| Blue-100 | #0661b8 | |
| Blue-20 | #e1f3ff | |
| Blue-40 | #cae7ff | |
| Blue-60 | #aed7ff | |
| Blue-80 | #94c5ff | |
| Green-10 | #f2fcff | |
| Green-100 | #00646d | |
| Green-20 | #d6f4ef | |
| Green-40 | #aeeadf | |
| Green-60 | #73dbc8 | |
| Green-80 | #007984 | |
| Navy-10 | #edf3f9 | |
| Navy-100 | #00003d | |
| Navy-20 | #dce8f4 | |
| Navy-40 | #b4b6c8 | |
| Navy-80 | #61658b | |
| Navy-90 | #3f415a | |
| Orange-10 | #fdf0e8 | |
| Orange-100 | #d65f15 | |
| Orange-20 | #ffe8cc | |
| Orange-40 | #ffce94 | |
| Orange-80 | #ea7329 | |
| Red-20 | #ffb1bf | |
| Teal-10 | #daf7fa | |
| Teal-100 | #47d7e6 |
Action colors
| Token | Reference | |
|---|---|---|
| wi-hero-fill-default | Orange-80#ea7329 | |
| wi-hero-fill-disabled | Navy-10#edf3f9 | |
| wi-hero-fill-focus | Orange-80#ea7329 | |
| wi-hero-fill-hover | Orange-100#d65f15 | |
| wi-hero-fill-pressed | Orange-10#fdf0e8 | |
| wi-hero-stroke-focus | Navy-100#00003d | |
| wi-hero-text-default | Basic-White#ffffff | |
| wi-hero-text-disabled | Navy-40#b4b6c8 | |
| wi-hero-text-focus | Basic-White#ffffff | |
| wi-hero-text-hover | Basic-White#ffffff | |
| wi-hero-text-pressed | Orange-100#d65f15 | |
| wi-primary-fill-default | Green-80#007984 | |
| wi-primary-fill-disabled | Navy-10#edf3f9 | |
| wi-primary-fill-focus | Green-80#007984 | |
| wi-primary-fill-hover | Green-100#00646d | |
| wi-primary-fill-pressed | Green-20#d6f4ef | |
| wi-primary-stroke-focus | Navy-100#00003d | |
| wi-primary-text-default | Green-10#f2fcff | |
| wi-primary-text-disabled | Navy-40#b4b6c8 | |
| wi-primary-text-focus | Green-10#f2fcff | |
| wi-primary-text-hover | Green-10#f2fcff | |
| wi-primary-text-pressed | Green-100#00646d | |
| wi-secondary-fill-default | Navy-20#dce8f4 | |
| wi-secondary-fill-disabled | Navy-10#edf3f9 | |
| wi-secondary-fill-focus | Navy-20#dce8f4 | |
| wi-secondary-fill-hover | Navy-40#b4b6c8 | |
| wi-secondary-fill-pressed | Navy-10#edf3f9 | |
| wi-secondary-stroke-focus | Navy-80#61658b | |
| wi-secondary-text-default | Navy-80#61658b | |
| wi-secondary-text-disabled | Navy-40#b4b6c8 | |
| wi-secondary-text-focus | Navy-80#61658b | |
| wi-secondary-text-hover | Navy-90#3f415a | |
| wi-secondary-text-pressed | Navy-80#61658b | |
| wi-tertiary-fill-default | Basic-Transparent#ffffff00 | |
| wi-tertiary-fill-disabled | Basic-Transparent#ffffff00 | |
| wi-tertiary-fill-focus | Basic-Transparent#ffffff00 | |
| wi-tertiary-fill-hover | Blue-20#e1f3ff | |
| wi-tertiary-fill-pressed | Navy-10#edf3f9 | |
| wi-tertiary-stroke-default | Navy-80#61658b | |
| wi-tertiary-stroke-disabled | Navy-10#edf3f9 | |
| wi-tertiary-stroke-focus | Navy-80#61658b | |
| wi-tertiary-text-default | Navy-80#61658b | |
| wi-tertiary-text-disabled | Navy-40#b4b6c8 | |
| wi-tertiary-text-focus | Navy-80#61658b | |
| wi-tertiary-text-hover | Navy-80#61658b | |
| wi-tertiary-text-pressed | Navy-80#61658b |
Accent colors
| Token | Reference | |
|---|---|---|
| wi-accent-dark | Blue-100#0661b8 | |
| wi-accent-light | Blue-20#e1f3ff | |
| wi-accent-medium | Blue-80#94c5ff |
Text Colours
| Token | Reference | |
|---|---|---|
| wi-text-10 | Navy-10#edf3f9 | |
| wi-text-100 | Navy-100#00003d | |
| wi-text-20 | Navy-20#dce8f4 | |
| wi-text-40 | Navy-40#b4b6c8 | |
| wi-text-80 | Navy-80#61658b | |
| wi-text-90 | Navy-90#3f415a |
Background
| Token | Reference | |
|---|---|---|
| wi-bg-cold | Blue-20#e1f3ff | |
| wi-bg-colder | Blue-40#cae7ff | |
| wi-bg-default | Green-10#f2fcff | |
| wi-bg-strong | Teal-10#daf7fa | |
| wi-bg-warm | Orange-10#fdf0e8 | |
| wi-bg-white | Basic-White#ffffff |
Border
| Token | Reference | |
|---|---|---|
| wi-border-cold | Blue-100#0661b8 | |
| wi-border-dark | Navy-100#00003d | |
| wi-border-light | Navy-40#b4b6c8 | |
| wi-border-lightest | Blue-10#edf8ff | |
| wi-border-warm | Orange-80#ea7329 |
Selection colors
| Token | Reference | |
|---|---|---|
| wi-selection-fill-active | Orange-40#ffce94 | |
| wi-selection-fill-default | Blue-20#e1f3ff | |
| wi-selection-fill-disabled | Navy-10#edf3f9 | |
| wi-selection-fill-focus | Blue-20#e1f3ff | |
| wi-selection-fill-hover | Orange-10#fdf0e8 | |
| wi-selection-fill-inactive | Navy-10#edf3f9 | |
| wi-selection-stroke-active | Orange-100#d65f15 | |
| wi-selection-stroke-default | Navy-100#00003d | |
| wi-selection-stroke-disabled | Navy-20#dce8f4 | |
| wi-selection-stroke-focus | Navy-100#00003d | |
| wi-selection-stroke-hover | Navy-100#00003d | |
| wi-selection-stroke-inactive | Navy-40#b4b6c8 |
Alert
| Token | Reference | |
|---|---|---|
| wi-bg-alert | Green-60#73dbc8 |