No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Colour tokens

Themes

Primary

ColourNameTokenValueDescription
13.92AAA1.21Fail
soft
$color-primary-soft
#d7ecff {color.blue.200}Use for eg. grid cell background feedback, information containers
9.25AAA1.82Fail
accent
$color-primary-accent
#85c6ff {color.blue.300}Use for eg. secondary pill statuses
3.26AA Large5.17AA
base
$color-primary-base
#006dcc {color.blue.500}Use for eg. primary actions buttons, text links,
2.18Fail7.73AAA
strong
$color-primary-strong
#1950a3 {color.blue.600}Use for eg. as a hover for buttons

Success

ColourNameTokenValueDescription
15.02AAA1.12Fail
soft
$color-success-soft
#e9f5e9 {color.green.200}Use for eg. grid cell background feedback, information containers
11.01AAA1.53Fail
accent
$color-success-accent
#b0dcb0 {color.green.300}Use for eg. secondary pill statuses
6.72AA2.51Fail
base
$color-success-base
#5bb75b {color.green.500}Use for eg. primary status (live), approve button, indicate success
5.31AA3.18AA Large
strong
$color-success-strong
#31a549 {color.green.600}Use for eg. as a hover for buttons

Danger

ColourNameTokenValueDescription
14.34AAA1.18Fail
soft
$color-danger-soft
#fce8e8 {color.red.200}Use for eg. grid cell background feedback, information containers
9.30AAA1.81Fail
accent
$color-danger-accent
#efb1af {color.red.300}Use for eg. for secondary pill statuses
4.17AA Large4.04AA Large
base
$color-danger-base
#da4f49 {color.red.500}Use for eg. primary status (attention), reject button, feedback in forms/grid
3.56AA Large4.74AA
strong
$color-danger-strong
#d5382e {color.red.600}Use for eg. as a hover for buttons

Warning

ColourNameTokenValueDescription
14.82AAA1.14Fail
soft
$color-warning-soft
#ffeed6 {color.orange.200}Use for eg. grid cell background feedback, information containers
12.67AAA1.33Fail
accent
$color-warning-accent
#fddaa9 {color.orange.300}Use for eg. for secondary pill statuses
8.55AAA1.97Fail
base
$color-warning-base
#faa732 {color.orange.500}Use for eg. primary status (pending), feedback in forms/grid
7.48AAA2.26Fail
strong
$color-warning-strong
#f8951d {color.orange.600}Use for eg. as a hover for buttons

Info

ColourNameTokenValueDescription
15.48AAA1.09Fail
soft
$color-info-soft
#e8f8fd {color.cyan.200}Use for eg. grid cell background feedback, information containers
12.99AAA1.30Fail
accent
$color-info-accent
#c9e7f0 {color.cyan.300}Use for eg. for secondary pill statuses
6.66AA2.53Fail
base
$color-info-base
#49afcd {color.cyan.500}Use for eg. primary status (scheduled), info text
4.68AA3.60AA Large
strong
$color-info-strong
#0492ba {color.cyan.600}Use for eg. as a hover for buttons

Default

ColourNameTokenValueDescription
13.92AAA1.21Fail
soft
$color-default-soft
#e5eaed {color.grey.200}Use for eg. large background areas, dashboard, review & send background
12.85AAA1.31Fail
accent
$color-default-accent
#dae2e6 {color.grey.300}Use for eg. secondary pill statuses
7.62AAA2.21Fail
base
$color-default-base
#aaafb3 {color.grey.500}
1.00Fail16.87AAA
strong
$color-default-strong
#1c1d1f {color.grey.800}

Secondary

ColourNameTokenValueDescription
15.89AAA1.06Fail
soft
$color-secondary-soft
#ddfffc {color.teal.200}Use for eg. grid cell background information containers
12.65AAA1.33Fail
accent
$color-secondary-accent
#abebe5 {color.teal.300}Use for eg. for secondary pill statuses
6.75AA2.50Fail
base
$color-secondary-base
#00b8a5 {color.teal.500}Use for eg. primary buttons for onboarding, illustrations
3.71AA Large4.54AA
strong
$color-secondary-strong
#008577 {color.teal.600}Use for eg. as a hover for buttons

Text

ColourNameTokenValueDescription
1.00Fail16.87AAA
base
$color-text-base
#1c1d1f {color.grey.800}Use for eg. main text, icons
2.19Fail7.71AAA
soft
$color-text-soft
#505359 {color.grey.700}Use for eg. text, areas with lesser importance
2.19Fail7.71AAA
label
$color-text-label
#505359 {color.grey.700}Use for eg. column header header in the grid
3.87AA Large4.36AA Large
disabled
$color-text-disabled
#757982 {color.grey.600}Use for eg. disabled text, in disabled buttons contrast with #D5D8DA
3.87AA Large4.36AA Large
placeholder
$color-text-placeholder
#757982 {color.grey.600}Use for eg. text in inputs, search
3.87AA Large4.36AA Large
description
$color-text-description
#757982 {color.grey.600}
16.87AAA1.00Fail
inverse
$color-text-inverse
#ffffff {color.white}Use for eg. text for full coloured buttons, modal action bar

Border

ColourNameTokenValueDescription
12.85AAA1.31Fail
base
$color-border-base
#dae2e6 {color.grey.300}Use for eg. vertical lines in the grid, tiles in the marketplace
3.87AA Large4.36AA Large
accent
$color-border-accent
#757982 {color.grey.600}Use for hover state for small elements such as input, pills
1.00Fail16.87AAA
strong
$color-border-strong
#1c1d1f {color.grey.800}Use for eg. hover tiles, dark lines on the header of pages, navigation

Greys

Greys are used throughout our platforms for text, borders and layout. Greys are the neutral tones used to create contrast and lightness through our platforms.

Grey

ColourNameTokenValueDescription
15.46AAA1.09Fail
100
$color-grey-100
#f4f5f7
13.92AAA1.21Fail
200
$color-grey-200
#e5eaed
12.85AAA1.31Fail
300
$color-grey-300
#dae2e6
11.78AAA1.43Fail
400
$color-grey-400
#d5d8da
7.62AAA2.21Fail
500
$color-grey-500
#aaafb3
3.87AA Large4.36AA Large
600
$color-grey-600
#757982
2.19Fail7.71AAA
700
$color-grey-700
#505359
1.00Fail16.87AAA
800
$color-grey-800
#1c1d1f

Primary Base

Primary base palette is used to drive action and inform users of an objects next step of a workflow. Primary is the base for all our platform statuses requiring attention (RED), a primary action on a page (BLUE), success or placement is live (GREEN), warning or placement is pending action (ORANGE).

Blue

ColourNameTokenValueDescription
15.26AAA1.11Fail
100
$color-blue-100
#eaf5ff
13.92AAA1.21Fail
200
$color-blue-200
#d7ecff
9.25AAA1.82Fail
300
$color-blue-300
#85c6ff
5.57AA3.03AA Large
400
$color-blue-400
#1f97ff
3.26AA Large5.17AA
500
$color-blue-500
#006dcc
2.18Fail7.73AAA
600
$color-blue-600
#1950a3
1.72Fail9.82AAA
700
$color-blue-700
#004480
1.44Fail11.70AAA
800
$color-blue-800
#01396a

Green

ColourNameTokenValueDescription
15.02AAA1.12Fail
200
$color-green-200
#e9f5e9
11.01AAA1.53Fail
300
$color-green-300
#b0dcb0
7.92AAA2.13Fail
400
$color-green-400
#77c377
6.72AA2.51Fail
500
$color-green-500
#5bb75b
5.31AA3.18AA Large
600
$color-green-600
#31a549
3.88AA Large4.34AA Large
700
$color-green-700
#3c893c
2.32Fail7.28AAA
800
$color-green-800
#2b622b

Red

ColourNameTokenValueDescription
14.34AAA1.18Fail
200
$color-red-200
#fce8e8
9.30AAA1.81Fail
300
$color-red-300
#efb1af
5.41AA3.12AA Large
400
$color-red-400
#e1706b
4.17AA Large4.04AA Large
500
$color-red-500
#da4f49
3.56AA Large4.74AA
600
$color-red-600
#d5382e
2.61Fail6.46AA
700
$color-red-700
#b22a24
1.20Fail14.05AAA
800
$color-red-800
#551411

Orange

ColourNameTokenValueDescription
14.82AAA1.14Fail
200
$color-orange-200
#ffeed6
12.67AAA1.33Fail
300
$color-orange-300
#fddaa9
9.72AAA1.73Fail
400
$color-orange-400
#fbb85a
8.55AAA1.97Fail
500
$color-orange-500
#faa732
7.48AAA2.26Fail
600
$color-orange-600
#f8951d
5.76AA2.93Fail
700
$color-orange-700
#da8205
2.49Fail6.77AA
800
$color-orange-800
#844f01

Cyan

ColourNameTokenValueDescription
15.48AAA1.09Fail
200
$color-cyan-200
#e8f8fd
12.99AAA1.30Fail
300
$color-cyan-300
#c9e7f0
9.38AAA1.80Fail
400
$color-cyan-400
#89cbdf
6.66AA2.53Fail
500
$color-cyan-500
#49afcd
4.68AA3.60AA Large
600
$color-cyan-600
#0492ba
2.54Fail6.64AA
700
$color-cyan-700
#136480
1.46Fail11.55AAA
800
$color-cyan-800
#0c3e4f

Purple

ColourNameTokenValueDescription
14.58AAA1.16Fail
200
$color-purple-200
#f4ebfd
10.63AAA1.59Fail
300
$color-purple-300
#d8c6ee
5.84AA2.89Fail
400
$color-purple-400
#ad87db
4.19AA Large4.03AA Large
500
$color-purple-500
#9768d1
2.63Fail6.41AA
600
$color-purple-600
#793dc4
1.73Fail9.74AAA
700
$color-purple-700
#582a91
1.14Fail14.77AAA
800
$color-purple-800
#35175a

Teal

ColourNameTokenValueDescription
15.89AAA1.06Fail
200
$color-teal-200
#ddfffc
12.65AAA1.33Fail
300
$color-teal-300
#abebe5
9.86AAA1.71Fail
400
$color-teal-400
#48dbcc
6.75AA2.50Fail
500
$color-teal-500
#00b8a5
3.71AA Large4.54AA
600
$color-teal-600
#008577
2.66Fail6.34AA
700
$color-teal-700
#006c60
1.23Fail13.72AAA
800
$color-teal-800
#00342e

Yellow

ColourNameTokenValueDescription
15.22AAA1.11Fail
200
$color-yellow-200
#fff3cc
12.87AAA1.31Fail
300
$color-yellow-300
#f6e097
11.59AAA1.46Fail
400
$color-yellow-400
#f2d471
10.55AAA1.60Fail
500
$color-yellow-500
#efc94c
9.20AAA1.83Fail
600
$color-yellow-600
#eab919
5.84AA2.89Fail
700
$color-yellow-700
#ba9311
2.87Fail5.88AA
800
$color-yellow-800
#7c6109
JSON reference
{
  "border": {
    "base": "#dae2e6",
    "accent": "#757982",
    "strong": "#1c1d1f"
  },
  "white": "#ffffff",
  "black": "#000000",
  "grey": {
    "100": "#f4f5f7",
    "200": "#e5eaed",
    "300": "#dae2e6",
    "400": "#d5d8da",
    "500": "#aaafb3",
    "600": "#757982",
    "700": "#505359",
    "800": "#1c1d1f"
  },
  "blue": {
    "100": "#eaf5ff",
    "200": "#d7ecff",
    "300": "#85c6ff",
    "400": "#1f97ff",
    "500": "#006dcc",
    "600": "#1950a3",
    "700": "#004480",
    "800": "#01396a"
  },
  "green": {
    "200": "#e9f5e9",
    "300": "#b0dcb0",
    "400": "#77c377",
    "500": "#5bb75b",
    "600": "#31a549",
    "700": "#3c893c",
    "800": "#2b622b"
  },
  "red": {
    "200": "#fce8e8",
    "300": "#efb1af",
    "400": "#e1706b",
    "500": "#da4f49",
    "600": "#d5382e",
    "700": "#b22a24",
    "800": "#551411"
  },
  "orange": {
    "200": "#ffeed6",
    "300": "#fddaa9",
    "400": "#fbb85a",
    "500": "#faa732",
    "600": "#f8951d",
    "700": "#da8205",
    "800": "#844f01"
  },
  "cyan": {
    "200": "#e8f8fd",
    "300": "#c9e7f0",
    "400": "#89cbdf",
    "500": "#49afcd",
    "600": "#0492ba",
    "700": "#136480",
    "800": "#0c3e4f"
  },
  "purple": {
    "200": "#f4ebfd",
    "300": "#d8c6ee",
    "400": "#ad87db",
    "500": "#9768d1",
    "600": "#793dc4",
    "700": "#582a91",
    "800": "#35175a"
  },
  "teal": {
    "200": "#ddfffc",
    "300": "#abebe5",
    "400": "#48dbcc",
    "500": "#00b8a5",
    "600": "#008577",
    "700": "#006c60",
    "800": "#00342e"
  },
  "yellow": {
    "200": "#fff3cc",
    "300": "#f6e097",
    "400": "#f2d471",
    "500": "#efc94c",
    "600": "#eab919",
    "700": "#ba9311",
    "800": "#7c6109"
  },
  "text": {
    "base": "#1c1d1f",
    "soft": "#505359",
    "label": "#505359",
    "disabled": "#757982",
    "placeholder": "#757982",
    "description": "#757982",
    "inverse": "#ffffff"
  },
  "default": {
    "soft": "#e5eaed",
    "accent": "#dae2e6",
    "base": "#aaafb3",
    "strong": "#1c1d1f"
  },
  "primary": {
    "soft": "#d7ecff",
    "accent": "#85c6ff",
    "base": "#006dcc",
    "strong": "#1950a3"
  },
  "success": {
    "soft": "#e9f5e9",
    "accent": "#b0dcb0",
    "base": "#5bb75b",
    "strong": "#31a549"
  },
  "danger": {
    "soft": "#fce8e8",
    "accent": "#efb1af",
    "base": "#da4f49",
    "strong": "#d5382e"
  },
  "warning": {
    "soft": "#ffeed6",
    "accent": "#fddaa9",
    "base": "#faa732",
    "strong": "#f8951d"
  },
  "info": {
    "soft": "#e8f8fd",
    "accent": "#c9e7f0",
    "base": "#49afcd",
    "strong": "#0492ba"
  },
  "secondary": {
    "soft": "#ddfffc",
    "accent": "#abebe5",
    "base": "#00b8a5",
    "strong": "#008577"
  }
}