Atlassian Design System

Atlassian’s design system: the light and dark themes’ colour tokens (backgrounds, text, borders, icons, links and charts), elevation surfaces and shadows, opacity, the spacing scale, corner radii, border widths and the type styles, from @atlaskit/tokens. Brought into Stoaken by the Stoaken team from Atlassian’s published open-source packages, unchanged, under its licence. Stoaken isn’t affiliated with or endorsed by Atlassian.

Enterprise Accessible Dark mode Web React Open source Semantic tokens Spacing scale Typography scale

1 like1 view520 tokens2 modes

color.icon.brandcolor.icon.accent.redcolor.icon.accent.bluecolor.icon.accent.graycolor.icon.accent.limecolor.icon.accent.tealcolor.icon.accent.greencolor.icon.accent.orangecolor.icon.accent.purplecolor.icon.accent.yellowcolor.icon.accent.magentacolor.icon.dangercolor.icon.subtlecolor.icon.defaultcolor.icon.inversecolor.icon.success

Mode

Colour

460 colours in 52 groups. Hover a swatch for its name.

More colours 47

icon.warning.inverse#292a2e
text.code.accent.1#943d73
text.code.accent.2#1558bc
text.accent.red.bolder#5d1f1a
text.accent.blue.bolder#123263
text.accent.gray.bolder#1e1f21
text.accent.lime.bolder#37471f
text.accent.teal.bolder#164555
text.accent.green.bolder#164b35
text.accent.orange.bolder#693200
text.accent.purple.bolder#48245d
text.accent.yellow.bolder#533f04
text.accent.magenta.bolder#50253f
text.danger.bolder#5d1f1a
text.success.bolder#37471f
text.warning.bolder#693200
text.warning.inverse#292a2e
text.discovery.bolder#48245d
text.information.bolder#123263
border.input.search#0b120e24
border.accent.red.subtle#fd9891
border.accent.blue.subtle#8fb8f6
border.accent.gray.subtle#b7b9be
border.accent.lime.subtle#b3df72
border.accent.teal.subtle#9dd9ee
border.accent.green.subtle#7ee2b8
border.accent.orange.subtle#fbc828
border.accent.purple.subtle#d8a0f7
border.accent.yellow.subtle#eed12b
border.accent.magenta.subtle#f797d2

color.icon 12

brand#1868db
danger#c9372c
subtle#505258
default#292a2e
inverse#ffffff
success#6a9a23
warning#e06c00
disabled#080f214a
selected#1868db
subtlest#6b6e76
discovery#af59e1
information#357de8

color.rovo.background.brand 3

bold#000000
bold hovered#1e1f21
bold pressed#292a2e

color.text.accent 10

red#ae2e24
blue#1558bc
gray#505258
lime#4c6b1f
teal#206a83
green#216e4e
orange#9e4c00
purple#803fa5
yellow#7f5f01
magenta#943d73

color.chart.blue 6

bold#4688ec
bold hovered#357de8
bolder#357de8
bolder hovered#1868db
boldest#1558bc
boldest hovered#123263

color.chart.teal 6

bold#2898bd
bold hovered#227d9b
bolder#227d9b
bolder hovered#206a83
boldest#206a83
boldest hovered#164555

color.chart.orange 6

bold#e06c00
bold hovered#bd5b00
bolder#bd5b00
bolder hovered#9e4c00
boldest#7a3b00
boldest hovered#693200

color.chart.magenta 6

bold#da62ac
bold hovered#cd519d
bolder#cd519d
bolder hovered#ae4787
boldest#943d73
boldest hovered#50253f

color.chart.discovery 4

bold#803fa5
bold hovered#964ac0
default#bf63f3
default hovered#af59e1

color.border 14

bold#7d818a
code#0b120e24
brand#1868db
input#8c8f97
danger#e2483d
default#0b120e24
focused#4688ec
inverse#ffffff
success#6a9a23
warning#e06c00
disabled#0515240f
selected#1868db

color.background 5

code#ffffff
input#ffffff
input hovered#f8f8f8
input pressed#ffffff
disabled#0515240f

color.background.accent.blue 12

bolder#1868db
bolder hovered#1558bc
bolder pressed#144794
subtle#669df1
subtle hovered#8fb8f6
subtle pressed#adcbfb
subtler#cfe1fd
subtler hovered#adcbfb
subtler pressed#8fb8f6
subtlest#e9f2fe
subtlest hovered#cfe1fd
subtlest pressed#adcbfb

color.background.accent.teal 12

bolder#227d9b
bolder hovered#206a83
bolder pressed#1a5265
subtle#6cc3e0
subtle hovered#9dd9ee
subtle pressed#b1e4f7
subtler#c6edfb
subtler hovered#b1e4f7
subtler pressed#9dd9ee
subtlest#e7f9ff
subtlest hovered#c6edfb
subtlest pressed#b1e4f7

color.background.accent.purple 12

bolder#964ac0
bolder hovered#803fa5
bolder pressed#673286
subtle#c97cf4
subtle hovered#d8a0f7
subtle pressed#e3bdfa
subtler#eed7fc
subtler hovered#e3bdfa
subtler pressed#d8a0f7
subtlest#f8eefe
subtlest hovered#eed7fc
subtlest pressed#e3bdfa

color.background.danger 10

bold#c9372c
bold hovered#ae2e24
bold pressed#872821
subtle#fd9891
default#ffeceb
default hovered#ffd5d2
default pressed#ffb8b2
subtler#ffd5d2
subtler hovered#ffb8b2
subtler pressed#fd9891

color.background.success 10

bold#5b7f24
bold hovered#4c6b1f
bold pressed#3f5224
subtle#b3df72
default#efffd6
default hovered#d3f1a7
default pressed#bde97c
subtler#d3f1a7
subtler hovered#bde97c
subtler pressed#b3df72

color.background.discovery 10

bold#964ac0
bold hovered#803fa5
bold pressed#673286
subtle#d8a0f7
default#f8eefe
default hovered#eed7fc
default pressed#e3bdfa
subtler#eed7fc
subtler hovered#e3bdfa
subtler pressed#d8a0f7

elevation.surface 13

raised#ffffff
raised hovered#f0f1f2
raised pressed#dddee1
sunken#f8f8f8
default#ffffff
default hovered#f0f1f2
default pressed#dddee1
overlay#ffffff
overlay hovered#f0f1f2
overlay pressed#dddee1
container#17171708
container hovered#0515240f

color.icon.accent 10

red#c9372c
blue#357de8
gray#7d818a
lime#6a9a23
teal#2898bd
green#22a06b
orange#e06c00
purple#af59e1
yellow#b38600
magenta#cd519d

color.rovo.border 4

blue#1868db
lime#6a9a23
purple#af59e1
saffron#fca700

color.text 13

code#505258
brand#1868db
danger#ae2e24
subtle#505258
default#292a2e
inverse#ffffff
success#4c6b1f
warning#9e4c00
disabled#080f214a
selected#1868db
subtlest#6b6e76
discovery#803fa5

color.chart.gray 6

bold#8c8f97
bold hovered#7d818a
bolder#7d818a
bolder hovered#6b6e76
boldest#505258
boldest hovered#3b3d42

color.chart 4

brand#357de8
brand hovered#1868db
neutral#8c8f97
neutral hovered#7d818a

color.chart.danger 4

bold#872821
bold hovered#5d1f1a
default#e2483d
default hovered#c9372c

color.chart.yellow 6

bold#b38600
bold hovered#946f00
bolder#946f00
bolder hovered#7f5f01
boldest#7f5f01
boldest hovered#533f04

color.chart.warning 4

bold#bd5b00
bold hovered#9e4c00
default#f68909
default hovered#e06c00

color.chart.information 4

bold#1558bc
bold hovered#123263
default#357de8
default hovered#1868db

color.border.accent 10

red#e2483d
blue#357de8
gray#7d818a
lime#6a9a23
teal#2898bd
green#22a06b
orange#e06c00
purple#af59e1
yellow#b38600
magenta#cd519d

color.background.accent.red 12

bolder#c9372c
bolder hovered#ae2e24
bolder pressed#872821
subtle#f87168
subtle hovered#fd9891
subtle pressed#ffb8b2
subtler#ffd5d2
subtler hovered#ffb8b2
subtler pressed#fd9891
subtlest#ffeceb
subtlest hovered#ffd5d2
subtlest pressed#ffb8b2

color.background.accent.lime 12

bolder#5b7f24
bolder hovered#4c6b1f
bolder pressed#3f5224
subtle#94c748
subtle hovered#b3df72
subtle pressed#bde97c
subtler#d3f1a7
subtler hovered#bde97c
subtler pressed#b3df72
subtlest#efffd6
subtlest hovered#d3f1a7
subtlest pressed#bde97c

color.background.accent.orange 12

bolder#bd5b00
bolder hovered#9e4c00
bolder pressed#7a3b00
subtle#fca700
subtle hovered#fbc828
subtle pressed#fbd779
subtler#fce4a6
subtler hovered#fbd779
subtler pressed#fbc828
subtlest#fff5db
subtlest hovered#fce4a6
subtlest pressed#fbd779

color.background.accent.magenta 12

bolder#ae4787
bolder hovered#943d73
bolder pressed#77325b
subtle#e774bb
subtle hovered#f797d2
subtle pressed#fcb6e1
subtler#fdd0ec
subtler hovered#fcb6e1
subtler pressed#f797d2
subtlest#ffecf8
subtlest hovered#fdd0ec
subtlest pressed#fcb6e1

color.background.neutral 9

bold#292a2e
bold hovered#3b3d42
bold pressed#505258
subtle#00000000
subtle hovered#0515240f
subtle pressed#0b120e24
default#0515240f
default hovered#0b120e24
default pressed#080f214a

color.background.selected 6

bold#1868db
bold hovered#1558bc
bold pressed#123263
default#e9f2fe
default hovered#cfe1fd
default pressed#8fb8f6

elevation.rovo.surface 3

overlay#f8f8f8
overlay hovered#f0f1f2
overlay pressed#dddee1

color.link 4

default#1868db
pressed#1558bc
visited#803fa5
visited pressed#48245d

color.rovo.icon 4

blue#1868db
lime#6a9a23
purple#af59e1
saffron#fca700

color.text.code 8

tags#9e4c00
gutter#6b6e76
numbers#7f5f01
strings#4c6b1f
comments#505258
keywords#ae2e24
functions#216e4e
operators#292a2e

color.chart.red 6

bold#f15b50
bold hovered#e2483d
bolder#e2483d
bolder hovered#c9372c
boldest#ae2e24
boldest hovered#5d1f1a

color.chart.lime 6

bold#6a9a23
bold hovered#5b7f24
bolder#5b7f24
bolder hovered#4c6b1f
boldest#4c6b1f
boldest hovered#37471f

color.chart.green 6

bold#22a06b
bold hovered#1f845a
bolder#1f845a
bolder hovered#216e4e
boldest#216e4e
boldest hovered#164b35

color.chart.purple 6

bold#bf63f3
bold hovered#af59e1
bolder#af59e1
bolder hovered#964ac0
boldest#803fa5
boldest hovered#48245d

color.chart.success 4

bold#5b7f24
bold hovered#4c6b1f
default#82b536
default hovered#6a9a23

color.chart.categorical 16

1#357de8
1 hovered#1868db
2#82b536
2 hovered#6a9a23
3#bf63f3
3 hovered#af59e1
4#f68909
4 hovered#e06c00
5#1558bc
5 hovered#123263
6#964ac0
6 hovered#803fa5

color.blanket 3

danger#ef5c4814
default#050c1f75
selected#388bff14

color.background.brand 9

bold#1868db
bold hovered#1558bc
bold pressed#144794
boldest#1c2b42
boldest hovered#123263
boldest pressed#144794
subtlest#e9f2fe
subtlest hovered#cfe1fd
subtlest pressed#adcbfb

color.background.accent.gray 12

bolder#6b6e76
bolder hovered#505258
bolder pressed#3b3d42
subtle#8c8f97
subtle hovered#b7b9be
subtle pressed#dddee1
subtler#dddee1
subtler hovered#b7b9be
subtler pressed#8c8f97
subtlest#f0f1f2
subtlest hovered#dddee1
subtlest pressed#b7b9be

color.background.accent.green 12

bolder#1f845a
bolder hovered#216e4e
bolder pressed#19573d
subtle#4bce97
subtle hovered#7ee2b8
subtle pressed#97edc9
subtler#baf3db
subtler hovered#97edc9
subtler pressed#7ee2b8
subtlest#dcfff1
subtlest hovered#baf3db
subtlest pressed#97edc9

color.background.accent.yellow 12

bolder#946f00
bolder hovered#7f5f01
bolder pressed#614a05
subtle#eed12b
subtle hovered#ddb30e
subtle pressed#efdd4e
subtler#f5e989
subtler hovered#efdd4e
subtler pressed#eed12b
subtlest#fef7c8
subtlest hovered#f5e989
subtlest pressed#efdd4e

color.background.inverse 3

subtle#00000029
subtle hovered#0000003d
subtle pressed#00000052

color.background.warning 10

bold#fbc828
bold hovered#fca700
bold pressed#f68909
subtle#fbd779
default#fff5db
default hovered#fce4a6
default pressed#fbd779
subtler#fce4a6
subtler hovered#fbd779
subtler pressed#fbc828

color.background.information 10

bold#1868db
bold hovered#1558bc
bold pressed#144794
subtle#8fb8f6
default#e9f2fe
default hovered#cfe1fd
default pressed#adcbfb
subtler#cfe1fd
subtler hovered#adcbfb
subtler pressed#8fb8f6

Spacing, type and more

60 tokens in color-scheme: light, drawn as what they are.

font 22

Type styles

Ship it togetherbody.large · 16/24 · 400
Ship it togetherbody.small · 12/16 · 400
Ship it togetherbody.default · 14/20 · 400
Ship it togethermetric.large · 28/32 · 653
Ship it togethermetric.small · 16/20 · 653
Ship it togethermetric.medium · 24/28 · 653
Ship it togetherheading.large · 24/28 · 653
Ship it togetherheading.small · 16/20 · 653
Ship it togetherheading.medium · 20/24 · 653
Ship it togetherheading.xlarge · 28/32 · 653
Ship it togetherheading.xsmall · 14/20 · 653
Ship it togetherheading.xxlarge · 32/36 · 653
Ship it togetherheading.xxsmall · 12/16 · 653

Weights

Aabold653
Aamedium500
Aaregular400
Aasemibold600

Typefaces

The quick brown foxbody · Atlassian Sans
The quick brown foxcode · Atlassian Mono
The quick brown foxbrand.body · Charlie Text
The quick brown foxbrand.heading · Charlie Display
The quick brown foxheading · Atlassian Sans

space 23

negative.400-32px
negative.300-24px
negative.250-20px
negative.200-16px
negative.150-12px
negative.100-8px
negative.075-6px
negative.050-4px
negative.025-2px
00px
0252px
0504px
0756px
1008px
15012px
20016px
25020px
30024px
40032px
50040px
60048px
80064px
100080px

border 3

default: 1px
focused: 2px
selected: 2px

opacity 2

loading: 0.2
disabled: 0.4

elevation 3

raised
overlay
overflow.default

radius 7

xsmall2px
small4px
medium6px
large8px
xlarge12px
xxlarge16px
full9999px

Atlassian Design System is shared by Stoaken Curated under the Apache 2.0 licence. Stoaken hosts it; Stoaken Curated is responsible for what it contains. See something wrong? Use Report.