Design tokens

Design tokens are the single source of truth to name and store design decisions.

Neutral selected-state tokens

When the platform-dst-tokens-finesse feature flag is enabled, color tokens for selected states use neutral colors instead of blue.

All tokens Code Examples Changelog

Component examples

Button

This primary button uses a background token, text token, and other tokens to create a brand appearance.

Buttons and other components can have multiple possible interaction states, which require specific tokens to be applied for each state.

import { B300, B400, B500, N0 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

// default state
color: token('color.text.inverse', N0),
background: token('color.background.selected.bold', B400),

// hovered state
&:hover {
  background: token('color.background.selected.bold.hovered', B300),
}

// pressed state
&:active {
  background: token('color.background.selected.bold.pressed', B500),
}

Modal dialogs use a surface token and shadow token to illustrate elevation. The surface token ensures no content shows underneath the modal.

Modal dialog

This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution.

import { N0, N30A, N60A, N800 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

color: token('color.text'),
background: token('elevation.surface.overlay', N0),
boxShadow: token(
  'elevation.shadow.overlay',
  `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`,
),

Tag

In the tag example, we can see the use of accent colors. Accent colors are available for text, icons, borders, and backgrounds. Apply accent tokens where colors do not have a specific meaning tied to them.

purple TagpurpleLight Tag

import { N800, P100, P500, P75 } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

// purple tag
color: token('color.text.accent.purple.bolder',N800),
background: token('color.background.accent.purple.subtle', colors.P100),

// light purple tag
color: token('color.text.accent.purple', P500),
background: token('color.background.accent.purple.subtler', P75),

Table

An overflow shadow can be applied on horizontal scrollable tables to indicate there is hidden content that can be scrolled back into view.

			ID
George Washington	None, Federalist	1789-1797	1
John Adams	Federalist	1797-1801	2

import { N50A, N60A } from '@atlaskit/theme/colors';
import { token } from '@atlaskit/tokens';

// left and right shadow styles
boxShadow: token(
  'elevation.shadow.overflow',
  `2px 0px 8px ${N50A}, 1px 0px 0px ${N60A}`,
),

Chart examples

Use chart color tokens for chart elements that represent the data. Read our data visualization color guideline for guidance on color usage in charts.

Line chart

//  This is using echarts-for-react to generate graphs and it's using canvas under the hood

  const chartOptions = {
    textStyle: {
      color: getTokenValue('color.text.subtle', 'N500'),
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: {
        lineStyle: {
          color: getTokenValue('color.border', 'N40'),
        },
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: getTokenValue('color.border', 'N40'),
        },
      },
    },
    series: [
      {
        data: [22, 33, 50, 53, 69, 83, 82],
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            color: getTokenValue('color.chart.success', 'G400'),
          },
          emphasis: {
            color: getTokenValue('color.chart.success.hovered', 'G500'),
          },
        },
      },
    ],
  };

Pie chart

//  This is using echarts-for-react to generate graphs and it's using canvas under the hood
  const data = [
    {
      value: 27,
      name: 'New subs',
      itemStyle: {
        color: getTokenValue('color.chart.categorical.1', '#1D9AAA'),
      },
      emphasis: {
        itemStyle: {
          color: getTokenValue(
            'color.chart.categorical.1.hovered',
            '#1D7F8C',
          ),
        },
      },
    },
    {
      value: 27,
      name: 'Upsells',
      itemStyle: {
        color: getTokenValue('color.chart.categorical.2', '#5E4DB2'),
      },
      emphasis: {
        itemStyle: {
          color: getTokenValue(
            'color.chart.categorical.2.hovered',
            '#352C63',
          ),
        },
      },
    },
    {
      value: 23,
      name: 'Enterprise',
      itemStyle: {
        color: getTokenValue('color.chart.categorical.3', '#D97008'),
      },
      emphasis: {
        itemStyle: {
          color: getTokenValue(
            'color.chart.categorical.3.hovered',
            '#B65C02',
          ),
        },
      },
    },
    {
      value: 11,
      name: 'Support',
      itemStyle: {
        color: getTokenValue('color.chart.categorical.4', '#943D73'),
      },
      emphasis: {
        itemStyle: {
          color: getTokenValue(
            'color.chart.categorical.4.hovered',
            '#50253F',
          ),
        },
      },
    },
    {
      value: 8,
      name: 'Premium',
      itemStyle: {
        color: getTokenValue('color.chart.categorical.5', '#09326C'),
      },
      emphasis: {
        itemStyle: {
          color: getTokenValue(
            'color.chart.categorical.5.hovered',
            '#082145',
          ),
        },
      },
    },
    {
      value: 4,
      name: 'Renewals',
      itemStyle: {
        color: getTokenValue('color.chart.categorical.6', '#8F7EE7'),
      },
      emphasis: {
        itemStyle: {
          color: getTokenValue(
            'color.chart.categorical.6.hovered',
            '#8270DB',
          ),
        },
      },
    },
  ];

Bar chart

//  This is using echarts-for-react to generate graphs and it's using canvas under the hood
const data = [
  80, 55, 55, 80, 85, 52, 39, 53, 75, 58, 76, 52, 52, 78, 79, 77, 78,
];
const options = {
  series: [
    {
      data: data.map((item, index) => ({
        value: item,
        itemStyle: {
          color:
            index === data.length - 1
              ? getTokenValue('color.chart.brand', B200)
              : getTokenValue('color.chart.neutral', N100),
          emphasis: {
            color:
              index === data.length - 1
                ? getTokenValue('color.chart.brand.hovered', B300)
                : getTokenValue('color.chart.neutral.hovered', N200),
          },
        },
      })),
    },
  ],
}

Border examples

Radius

Use the default radius of radius.small if in doubt. If you are nesting elements, ensure the outer element has the largest radius.

radius.xlarge

radius.large

radius.small

Pairing examples

These pairing examples are some ways you can mix and match our tokens. If you decide to use a combination of tokens that’s not listed here, make sure to check the contrast to ensure it passes WCAG AA guidelines, (opens new window).

Neutral

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.neutral.bold'),
border: `1px solid ${token('color.border')}`,
hoverBackgroundColor: token('color.background.neutral.bold.hovered'),
activeBackgroundColor: token('color.background.neutral.bold.pressed'),
iconColor: token('color.icon.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.neutral'),
border: `1px solid ${token('color.border')}`,
hoverBackgroundColor: token('color.background.neutral.hovered'),
activeBackgroundColor: token('color.background.neutral.pressed'),
iconColor: token('color.icon'),

// subtle styles
color: token('color.text'),
backgroundColor: token('color.background.neutral.subtle'),
border: `1px solid ${token('color.border')}`,
hoverBackgroundColor: token('color.background.neutral.subtle.hovered'),
activeBackgroundColor: token('color.background.neutral.subtle.pressed'),
iconColor: token('color.icon'),

Brand

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.brand.bold'),
border: `1px solid ${token('color.border.brand')}`,
hoverBackgroundColor: token('color.background.brand.bold.hovered'),
activeBackgroundColor: token('color.background.brand.bold.pressed'),
iconColor: token('color.icon.inverse'),

Information

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.information.bold'),
border: `1px solid ${token('color.border.information')}`,
hoverBackgroundColor: token('color.background.information.bold.hovered'),
activeBackgroundColor: token('color.background.information.bold.pressed'),
iconColor: token('color.icon.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.information'),
border: `1px solid ${token('color.border.information')}`,
hoverBackgroundColor: token('color.background.information.hovered'),
activeBackgroundColor: token('color.background.information.pressed'),
iconColor: token('color.icon.information'),

Success

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.success.bold'),
border: `1px solid ${token('color.border.success')}`,
hoverBackgroundColor: token('color.background.success.bold.hovered'),
activeBackgroundColor: token('color.background.success.bold.pressed'),
iconColor: token('color.icon.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.success'),
border: `1px solid ${token('color.border.success')}`,
hoverBackgroundColor: token('color.background.success.hovered'),
activeBackgroundColor: token('color.background.success.pressed'),
iconColor: token('color.icon.success'),

Warning

Text

// bold styles
color: token('color.text.warning.inverse'),
backgroundColor: token('color.background.warning.bold'),
border: `1px solid ${token('color.border.warning')}`,
hoverBackgroundColor: token('color.background.warning.bold.hovered'),
activeBackgroundColor: token('color.background.warning.bold.pressed'),
iconColor: token('color.icon.warning.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.warning'),
border: `1px solid ${token('color.border.warning')}`,
hoverBackgroundColor: token('color.background.warning.hovered'),
activeBackgroundColor: token('color.background.warning.pressed'),
iconColor: token('color.icon.warning'),

Danger

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.danger.bold'),
border: `1px solid ${token('color.border.danger')}`,
hoverBackgroundColor: token('color.background.danger.bold.hovered'),
activeBackgroundColor: token('color.background.danger.bold.pressed'),
iconColor: token('color.icon.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.danger'),
border: `1px solid ${token('color.border.danger')}`,
hoverBackgroundColor: token('color.background.danger.hovered'),
activeBackgroundColor: token('color.background.danger.pressed'),
iconColor: token('color.icon.danger'),

Discovery

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.discovery.bold'),
border: `1px solid ${token('color.border.discovery')}`,
hoverBackgroundColor: token('color.background.discovery.bold.hovered'),
activeBackgroundColor: token('color.background.discovery.bold.pressed'),
iconColor: token('color.icon.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.discovery'),
border: `1px solid ${token('color.border.discovery')}`,
hoverBackgroundColor: token('color.background.discovery.hovered'),
activeBackgroundColor: token('color.background.discovery.pressed'),
iconColor: token('color.icon.discovery'),

Selected

Text

// bold styles
color: token('color.text.inverse'),
backgroundColor: token('color.background.selected.bold'),
border: `1px solid ${token('color.border.selected')}`,
hoverBackgroundColor: token('color.background.selected.bold.hovered'),
activeBackgroundColor: token('color.background.selected.bold.pressed'),
iconColor: token('color.icon.inverse'),

// default styles
color: token('color.text'),
backgroundColor: token('color.background.selected'),
border: `1px solid ${token('color.border.selected')}`,
hoverBackgroundColor: token('color.background.selected.hovered'),
activeBackgroundColor: token('color.background.selected.pressed'),
iconColor: token('color.icon.selected'),

Elevations

There are five general-purpose surface elevations: default, container, raised, overlay and sunken. Raised and overlay elevations require a combination of a surface color and a matching shadow. Rovo overlay surface tokens are also available for Rovo-specific overlay surfaces.

Sunken

Default

Container

Raised

Overlay

Rovo overlay

// Sunken
label: 'Sunken',
backgroundColor: token('elevation.surface.sunken'),

// Default
label: 'Default',
backgroundColor: token('elevation.surface'),
border: `1px solid ${token('color.border')}`,

// Container
label: 'Container',
backgroundColor: token('elevation.surface.container'),
shadow: 'none',

// Raised
backgroundColor: token('elevation.surface.raised'),
shadow: token('elevation.shadow.raised'),

// Overlay
backgroundColor: token('elevation.surface.overlay'),
shadow: token('elevation.shadow.overlay'),

// Rovo overlay
backgroundColor: token('elevation.rovo.surface.overlay'),
shadow: token('elevation.shadow.overlay'),

Spacing examples

Negative values

Occasionally you may need a negative space value, for example a negative margin breaking content out of its container. In this situation, use the CSS calc function to multiply a space token by -1.

Note: Avoid performing any other calculations on space tokens, such as adding, subtracting, or dividing. Avoid multiplying space tokens by values other than -1. The new spacing scale provides a range of space values to suit many use cases.

A container with an inset

import { token } from '@atlaskit/tokens';

// Container styles
paddingInline: token('space.200', '16px'),

// Divider styles
marginInline: token('space.negative.200', '-16px'),

Was this page helpful?

We use this feedback to improve our documentation.