Color Palette
Brand Palette
To use the colours in this palette, use the palette("palette",value) map. (e.g. palette("primary",500) for #4b71fc).
| Primary | Secondary | Tertiary | Accent | |
|---|---|---|---|---|
| 50 | #edf1ff | #ebebec | #f1f8fe | #eee6f9 |
| 100 | #dbe3fe | #d7d6d9 | #e3f1fc | #dcccf3 |
| 200 | #b7c6fe | #aeadb3 | #c7e2f8 | #b999e6 |
| 300 | #93aafd | #86848c | #abd3f5 | #9566da |
| 400 | #6f8dfd | #5d5b66 | #8fc4f1 | #7233cd |
| 500 | #4b71fc | #34313f | #72b5ed | #4e00c0 |
| 600 | #3e5ed6 | #2b2935 | #5f97c9 | #4100a3 |
| 700 | #334caf | #23212b | #4d7aa5 | #350086 |
| 800 | #273a8a | #1b1922 | #3b5c82 | #280069 |
| 900 | #1b2763 | #121118 | #293f5d | #1c004c |
Basic Palette
These palettes only have one value, which means you can use the palette("color") map with one parameter. The default value for our palette map is 500.
| White | Black | |
|---|---|---|
| 500 | #fff | #000 |
Grey Palette
To use the colours in this palette, use the palette("grey",value) map. For the alternate palette, prefix the value with an "a" (e.g. palette("grey",a500) for #919596).
| Grey | Alternate | |
|---|---|---|
| 50 | #fbfbfc | #f4f5f5 |
| 100 | #f6f7f9 | #e9eaea |
| 200 | #edeff3 | #d3d5d5 |
| 300 | #e4e7ed | #bdc0c0 |
| 400 | #dbdfe7 | #a7abab |
| 500 | #d1d7e0 | #919596 |
| 600 | #afb4be | #797d7f |
| 700 | #8e919c | #626568 |
| 800 | #6d6e7a | #4b4c52 |
| 900 | #4c4b58 | #34343b |
States Palette
To use the colours in this palette, use the palette("palette",value) map. (e.g. palette("success", 500) for #65c96d). Prefix your value with "a" for alternate values (e.g. palette("warning", a600) for #f1b900.
| Success | Error | Warning | |
|---|---|---|---|
| 50 | #f0faf1 | #fef0ec | #fefbec |
| 100 | #e1f5e2 | #fce0d8 | #fdf6d9 |
| 200 | #c2eac5 | #f9c0b1 | #faecb2 |
| 300 | #a3dfa8 | #f6a08a | #f8e28b |
| 400 | #84d48b | #f38063 | #f5d864 |
| 500 | #65c96d | #f0603c | #f2ce3d |
| 600 | #5baa64 | #cb563d | #ccae3d (Alt: #f1b900) |
| 700 | #518c5b | #a54d3e | #a68f3e (Alt: #f1a500) |
| 800 | #486e51 | #80443e | #80703e (Alt: #f19100) |
| 900 | #3e5048 | #5a3b3f | #5a513f (Alt: #f17c00) |
Order Status Colors
You can call these using the color("orderStatus","value") function. E.g. color("orderStatus", "awaitingFulfilment") returns #6eccfc.
| orderStatus | |
|---|---|
| awaitingFulfilment | #6eccfc |
| awaitingPayment | #ff8800 |
| awaitingPickup | #b186cb |
| awaitingShipment | #ca2f3a |
| cancelled | #3c4043 |
| completed | #95db89 |
| declined | #955831 |
| disputed | #9960ff |
| partiallyShipped | #3e62a1 |
| pending | #acb4be |
| shipped | #95db89 |
| refunded | #ffb800 |
| verificationRequired | #e89fae |