Atlassian
Atlassian's design-token palette, sourced from the `@atlaskit/tokens` package — the package that backs every product surface in the Atlassian portfolio (Jira, Confluence, Trello, Bitbucket, Compass, Loom, Statuspage). Nine chromatic families (Blue, Teal, Green, Lime, Yellow, Orange, Red, Magenta, Purple) running 100 → 1000 with 250 / 850 odd-stops, plus two neutral scales (Neutral for light surfaces, DarkNeutral for dark surfaces) and a set of translucent alpha overlays. Atlassian Blue 700 (#1868DB) anchors the primary interactive role on light surfaces; Blue 400 (#669DF1) takes that role on dark surfaces. The Neutral scale supplies the canvas, surface, and text tokens for light mode; DarkNeutral plays the same role in dark mode.
146 swatches 15 light roles 15 dark roles
Swatches
neutral
neutral-0
#FFFFFF
neutral-100
#F8F8F8
neutral-200
#F0F1F2
neutral-300
#DDDEE1
neutral-400
#B7B9BE
neutral-500
#8C8F97
neutral-600
#7D818A
neutral-700
#6B6E76
neutral-800
#505258
neutral-900
#3B3D42
neutral-1000
#292A2E
neutral-1100
#1E1F21
misc
neutral-100-alpha
#17171708
neutral-200-alpha
#0515240F
neutral-300-alpha
#0B120E24
neutral-400-alpha
#080F214A
neutral-500-alpha
#050C1F75
dark-neutral-100-alpha
#BDBDBD0A
dark-neutral-200-alpha
#CECED912
dark-neutral-250-alpha
#D9DAE71A
dark-neutral-300-alpha
#E3E4F21F
dark-neutral-350-alpha
#E8EDFD2E
dark-neutral-400-alpha
#E5E9F640
dark-neutral-500-alpha
#E9F0FB5C
dark-neutral
dark-neutral-0
#18191A
dark-neutral-100
#1F1F21
dark-neutral-200
#242528
dark-neutral-250
#2B2C2F
dark-neutral-300
#303134
dark-neutral-350
#3D3F43
dark-neutral-400
#4B4D51
dark-neutral-500
#63666B
dark-neutral-600
#7E8188
dark-neutral-700
#96999E
dark-neutral-800
#A9ABAF
dark-neutral-900
#BFC1C4
dark-neutral-1000
#CECFD2
dark-neutral-1100
#E2E3E4
blue
blue-100
#E9F2FE
blue-200
#CFE1FD
blue-250
#ADCBFB
blue-300
#8FB8F6
blue-400
#669DF1
blue-500
#4688EC
blue-600
#357DE8
blue-700
#1868DB
blue-800
#1558BC
blue-850
#144794
blue-900
#123263
blue-1000
#1C2B42
teal
teal-100
#E7F9FF
teal-200
#C6EDFB
teal-250
#B1E4F7
teal-300
#9DD9EE
teal-400
#6CC3E0
teal-500
#42B2D7
teal-600
#2898BD
teal-700
#227D9B
teal-800
#206A83
teal-850
#1A5265
teal-900
#164555
teal-1000
#1E3137
green
green-100
#DCFFF1
green-200
#BAF3DB
green-250
#97EDC9
green-300
#7EE2B8
green-400
#4BCE97
green-500
#2ABB7F
green-600
#22A06B
green-700
#1F845A
green-800
#216E4E
green-850
#19573D
green-900
#164B35
green-1000
#1C3329
lime
lime-100
#EFFFD6
lime-200
#D3F1A7
lime-250
#BDE97C
lime-300
#B3DF72
lime-400
#94C748
lime-500
#82B536
lime-600
#6A9A23
lime-700
#5B7F24
lime-800
#4C6B1F
lime-850
#3F5224
lime-900
#37471F
lime-1000
#28311B
yellow
yellow-100
#FEF7C8
yellow-200
#F5E989
yellow-250
#EFDD4E
yellow-300
#EED12B
yellow-400
#DDB30E
yellow-500
#CF9F02
yellow-600
#B38600
yellow-700
#946F00
yellow-800
#7F5F01
yellow-850
#614A05
yellow-900
#533F04
yellow-1000
#332E1B
orange
orange-100
#FFF5DB
orange-200
#FCE4A6
orange-250
#FBD779
orange-300
#FBC828
orange-400
#FCA700
orange-500
#F68909
orange-600
#E06C00
orange-700
#BD5B00
orange-800
#9E4C00
orange-850
#7A3B00
orange-900
#693200
orange-1000
#3A2C1F
red
red-100
#FFECEB
red-200
#FFD5D2
red-250
#FFB8B2
red-300
#FD9891
red-400
#F87168
red-500
#F15B50
red-600
#E2483D
red-700
#C9372C
red-800
#AE2E24
red-850
#872821
red-900
#5D1F1A
red-1000
#42221F
magenta
magenta-100
#FFECF8
magenta-200
#FDD0EC
magenta-250
#FCB6E1
magenta-300
#F797D2
magenta-400
#E774BB
magenta-500
#DA62AC
magenta-600
#CD519D
magenta-700
#AE4787
magenta-800
#943D73
magenta-850
#77325B
magenta-900
#50253F
magenta-1000
#3D2232
purple
purple-100
#F8EEFE
purple-200
#EED7FC
purple-250
#E3BDFA
purple-300
#D8A0F7
purple-400
#C97CF4
purple-500
#BF63F3
purple-600
#AF59E1
purple-700
#964AC0
purple-800
#803FA5
purple-850
#673286
purple-900
#48245D
purple-1000
#35243F
Mode role mappings
Light mode (15 roles)
accent
→ blue-700 accent-hover
→ blue-800 background
→ neutral-0 border
→ neutral-300 error
→ red-700 primary
→ blue-700 primary-hover
→ blue-800 success
→ green-700 surface
→ neutral-100 surface-elevated
→ neutral-0 text-primary
→ neutral-1100 text-secondary
→ neutral-700 text-tertiary
→ neutral-600 warning
→ yellow-700 warning-hover
→ orange-700 Dark mode (15 roles)
accent
→ blue-400 accent-hover
→ blue-500 background
→ neutral-1100 border
→ neutral-800 error
→ red-400 primary
→ blue-400 primary-hover
→ blue-500 success
→ green-400 surface
→ neutral-1000 surface-elevated
→ neutral-900 text-primary
→ neutral-100 text-secondary
→ neutral-300 text-tertiary
→ neutral-400 warning
→ yellow-400 warning-hover
→ orange-400 Provenance
- Source
- https://github.com/pioug/atlassian-frontend-mirror/blob/main/design-system/tokens/src/artifacts/palettes-raw/palette.tsx
- License
Apache-2.0- Attribution
- Atlassian design tokens, Copyright Atlassian Pty Ltd, published under Apache-2.0 in the `@atlaskit/tokens` package. Hex values mirrored from the codegen palette artifact in the public `atlassian-frontend` mirror. Atlassian, Jira, Confluence, Trello, and associated marks are property of Atlassian Pty Ltd.
- Imported
-
2026-05-19(upstream version atlassian-frontend palettes-raw@2026-05) - Notes
- Full Atlassian Design System palette captured 2026-05-19: nine chromatic families (Blue, Teal, Green, Lime, Yellow, Orange, Red, Magenta, Purple) at every documented stop (100, 200, 250, 300, 400, 500, 600, 700, 800, 850, 900, 1000), plus the Neutral scale used for light-mode canvas/surface/text (0, 100, 200, 300..1100) and the DarkNeutral scale used for dark-mode canvas/surface/text (0, 100, 200, 250, 300, 350, 400..1100). Translucent alpha overlays (Neutral{100..500}A and DarkNeutral{100..500,250,350}A) are captured as 8-digit hex values for accessibility-tuned overlays.