- ID
- N800
- Color
- #172B4D
Colors
Where appropriate, we enable people to introduce their own color palettes. Our products adapt intelligently and flexibly to cater for the user's preference. We are also committed to complying with AA standard contrast ratios . To accomplish this, you should choose primary, secondary and extended colors that ensure sufficient color contrast between elements. This allows users with low vision to see and use the interface.
Primary color palette
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most visual elements all the way from marketing to product. If you'd like to use these colors you can download our palette here.
We use N800 primarily for body text and headings. B400, otherwise known as "Pacific Bridge" is used for primary actions and buttons, links, global navigation, indicates progress, and represents authentication. N0 is used for page backgrounds and things that are white.
- ID
- B400
- Color
- #0052CC
- ID
- N0
- Color
- #FFFFFF
Secondary color palette
Our secondary palette is made up of red, yellow, green, and purple. These colors are not used equally - see the Color System below for more information.
We use R300 primarily to indicate errors and to indicate destructive actions. Y300 indicates warnings and blocked progress and can be found in lozenges and banners. Use N800 for any text placed on top of Y300. G300 is used to represent success in flags and inline messages, while P300 is used to indicate help, information, and Prince songs.
- ID
- R300
- Color
- #FF5630
- ID
- Y300
- Color
- #FFAB00
- ID
- G300
- Color
- #36B37E
- ID
- T300
- Color
- #00B8D9
- ID
- P300
- Color
- #6554C0
Neutrals
Muted and neutral palettes are derived from purple. Their varying degrees of saturation allow for the appropriate level of warmth across marketing and product.
- ID
- N900
- Name
- Slate
- Color
- #091E42
- ID
- N800
- Name
- Squid Ink
- Color
- #172B4D
- ID
- N700
- Name
- Snorlax
- Color
- #253858
- ID
- N600
- Name
- Pet rock
- Color
- #344563
- ID
- N500
- Name
- Mick Fanning
- Color
- #42526E
- ID
- N400
- Name
- Concrete jungle
- Color
- #505F79
- ID
- N300
- Name
- Clooney
- Color
- #5E6C84
- ID
- N200
- Name
- Bling Bling
- Color
- #6B778C
- ID
- N100
- Name
- Humboldt Fog
- Color
- #7A869A
- ID
- N90
- Name
- Meredith
- Color
- #8993A4
- ID
- N80
- Name
- Spooky ghost
- Color
- #97A0AF
- ID
- N70
- Name
- Blanche
- Color
- #A5ADBA
- ID
- N60
- Name
- Sentinel
- Color
- #B3BAC5
- ID
- N50
- Name
- Karl
- Color
- #C1C7D0
- ID
- N40
- Name
- Jolly Fun Time
- Color
- #DFE1E5
- ID
- N30
- Name
- Northeast Snow
- Color
- #EBECF0
- ID
- N20
- Name
- Gram's Hair
- Color
- #F4F5F7
- ID
- N10
- Name
- Wash me
- Color
- #FAFBFC
- ID
- N0
- Name
- White
- Color
- #FFF
Color | Web | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
N900 |
|
||||||||||||||
N800 |
|
||||||||||||||
N700 |
|
||||||||||||||
N500 |
|
||||||||||||||
N300 |
|
||||||||||||||
N200 |
N100 |
|
N90 |
|
N50 |
|
N40 |
|
N30 |
|
N20 |
|
N10 |
|
|
Neutral alphas
We use N900 as a basis for the RGB values to avoid shadows from desaturating other colors that appear beneath transparent neutral colors and is a number between 0.0 (fully transparent) and 1.0 (fully opaque). The alpha palette can be used for shadows to represent layering, 'blankets' that cover the UI when a model is active, and elements that darken the background they are placed on such as buttons and badges. Try to avoid using the alpha palette for text colors and make sure that you account for varying text and background combinations when using the alpha palette as a background for text.
A good example of this would be tags sitting in a text field. Both tags and text fields have a grey background as their default state, and to contrast the pair we added an alpha color to the tags to bring the depth that was needed for them to coincide with each other.
- ID
- N900 (1.0)
- Name
- Slate
- Color
- rgba(9, 30, 66, 1)
- ID
- N800A (0.95)
- Name
- Squid Ink
- Color
- rgba(9, 30, 66, 0.95)
- ID
- N700A (0.89)
- Name
- Snorlax
- Color
- rgba(9, 30, 66, 0.89)
- ID
- N600A (0.82)
- Name
- Pet rock
- Color
- rgba(9, 30, 66, 0.82)
- ID
- N500A (0.77)
- Name
- Mick Fanning
- Color
- rgba(9, 30, 66, 0.77)
- ID
- N400A (0.71)
- Name
- Concrete jungle
- Color
- rgba(9, 30, 66, 0.71)
- ID
- N300A (0.66)
- Name
- Clooney
- Color
- rgba(9, 30, 66, 0.66)
- ID
- N200A (0.64)
- Name
- Bling Bling
- Color
- rgba(9, 30, 66, 0.60)
- ID
- N100A (0.60)
- Name
- Humboldt Fog
- Color
- rgba(9, 30, 66, 0.64)
- ID
- N90A (0.48)
- Name
- Meredith
- Color
- rgba(9, 30, 66, 0.48)
- ID
- N80A (0.42)
- Name
- Spooky ghost
- Color
- rgba(9, 30, 66, 0.42)
- ID
- N70A (0.36)
- Name
- Blanche
- Color
- rgba(9, 30, 66, 0.36)
- ID
- N60A (0.31)
- Name
- Sentinel
- Color
- rgba(9, 30, 66, 0.31)
- ID
- N50A (0.25)
- Name
- Karl
- Color
- rgba(9, 30, 66, 0.25)
- ID
- N40A (0.13)
- Name
- Jolly Fun Time
- Color
- rgba(9, 30, 66, 0.13)
- ID
- N30A (0.08)
- Name
- Northeast Snow
- Color
- rgba(9, 30, 66, 0.08)
- ID
- N20A (0.04)
- Name
- Gram's Hair
- Color
- rgba(9, 30, 66, 0.04)
- ID
- N10A (0.02)
- Name
- Wash me
- Color
- rgba(9, 30, 66, 0.02)
- ID
- N0A (0.0)
- Name
- White
- Color
- rgba(9, 30, 66, 0.0)
Extended Palette
The extended palette consists of all the useable tints and shades of each color in the palette. They are all helpfully named and numbered for easy reference. Usage of these colors varies depending on the element, but they come in handy for illustrations and components in product.
Red
Red is mainly used for backgrounds in messages and in error states.
- ID
- R500
- Name
- Dragon’s Blood
- Color
- #BF2600
- ID
- R400
- Name
- Red Dirt
- Color
- #DE350B
- ID
- R300
- Name
- Poppy Surprise
- Color
- #FF5630
- ID
- R200
- Name
- Salmon Sashimi
- Color
- #FF7452
- ID
- R100
- Name
- Alexandria
- Color
- #FF8F73
- ID
- R75
- Name
- Alameda Antique
- Color
- #FFBDAD
- ID
- R50
- Name
- Rosie
- Color
- #FFEBE5
Rosie #FFEBE5 - Remembering Rosie. To honor Rosie we have named a color in our product palette after her. Like Rosie and her legacy, Rosie will be woven throughout Atlassian products and design for many years to come. Like its namesake it will leave that corner of the world which it has touched just a little bit brighter by its beauty and grace.
Alexandria #FF8F73 - Alexandria has made a huge impact at Atlassian, so we've named a color of her choice after her. As Alex does, this color brings a moment of lightness, promise, strength, and happiness wherever it is found.
Color | Web |
---|---|
R500 |
|
R400 |
|
R300 |
|
R200 |
|
R100 |
|
R75 |
|
R50 |
|
Yellow
Yellow indicates warning or impeded progress.
- ID
- Y500
- Name
- Debrito
- Color
- #FF8B00
- ID
- Y400
- Name
- Cheezy Blasters
- Color
- #FF991F
- ID
- Y300
- Name
- Golden State
- Color
- #FFAB00
- ID
- Y200
- Name
- Pub Mix
- Color
- #FFC400
- ID
- Y100
- Name
- Cowbell
- Color
- #FFE380
- ID
- Y75
- Name
- Dandelion Whisper
- Color
- #FFF0B2
- ID
- Y50
- Name
- James Blonde
- Color
- #FFFAE5
Color | Web |
---|---|
Y500 |
|
Y400 | |
Y300 |
|
Y200 |
|
Y100 |
|
Y75 | |
Y50 |
Green
Normally used to Indicate success, or to celebrate a win. You can see green use lozenges, badges, toggles, and messages.
- ID
- G500
- Name
- Keen Green
- Color
- #006644
- ID
- G400
- Name
- Slime
- Color
- #00875A
- ID
- G300
- Name
- Our Kellie
- Color
- #36B37E
- ID
- G200
- Name
- Green Tea
- Color
- #57D9A3
- ID
- G100
- Name
- Cloverleaf
- Color
- #79F2C0
- ID
- G75
- Name
- Mintie
- Color
- #ACF5D2
- ID
- G50
- Name
- The smell
- Color
- #E3FCEF
Color | Web |
---|---|
G500 |
|
G400 |
|
G300 |
|
G200 |
|
G100 | |
G75 |
|
G50 |
|
Teal
Mobile - Accent colors for text fields and cursors, text selection, progress bars, selection controls, buttons, sliders, and links.
Normally used in illustrations and as an accent color.
- ID
- T500
- Name
- Shabby Chic
- Color
- #008DA6
- ID
- T400
- Name
- Prom Dress
- Color
- #00A3BF
- ID
- T300
- Name
- Tamarama
- Color
- #00B8D9
- ID
- T200
- Name
- Mermaid Net
- Color
- #00C7E5
- ID
- T100
- Name
- Hairy Fairy
- Color
- #79E2F2
- ID
- T75
- Name
- Arctic Chill
- Color
- #B3F5FF
- ID
- T50
- Name
- Grandma's Sofa
- Color
- #E6FCFF
Color | Web |
---|---|
T500 | |
T400 | |
T300 | |
T200 |
|
T100 | |
T75 |
|
T50 |
|
Blue
Blue is used to indicate authentication, connectivity, and progress. You can find blue in the following components and patterns: messages, buttons, navigation, lozenges, badges, tabs, and the date picker.
- ID
- B500
- Name
- Chore Coat
- Color
- #0747A6
- ID
- B400
- Name
- Pacific Bridge
- Color
- #0052CC
- ID
- B300
- Name
- Sodium Explosion
- Color
- #0065FF
- ID
- B200
- Name
- Coogee
- Color
- #2684FF
- ID
- B100
- Name
- Arvo Breeze
- Color
- #4C9AFF
- ID
- B75
- Name
- Schwag
- Color
- #B3D4FF
- ID
- B50
- Name
- Pixie Dust
- Color
- #DEEBFF
Color | Web |
---|---|
B500 |
|
B400 |
|
B300 |
|
B200 | |
B100 |
|
B75 |
|
B50 |
Purple
Indicates help and support. And is used in messages, lozenges and image callouts.
- ID
- P500
- Name
- Prince
- Color
- #403294
- ID
- P400
- Name
- Snozzberry
- Color
- #5243AA
- ID
- P300
- Name
- Teletubby
- Color
- #6554C0
- ID
- P200
- Name
- Pastelli
- Color
- #8777D9
- ID
- P100
- Name
- Herky Jerk
- Color
- #998DD9
- ID
- P75
- Name
- Phantom mist
- Color
- #C0B6F2
- ID
- P50
- Name
- Lavender Secret
- Color
- #EAE6FF
Color | Web |
---|---|
P500 |
|
P400 | |
P300 |
|
P200 |
|
P100 | |
P75 |
|
P50 |
Color System
The following guidelines outline when to use colors in product. We've developed a color system that helps users find people, identify status, see actions, to locate help, and to indicate next steps. The consistent use of color keeps cognitive loads low and makes for a unified and engaging user experience.
Team / people | Inactive | Activity | Success | Progress blocked | Failure / removed | Help | |
---|---|---|---|---|---|---|---|
Navigation |
|
||||||
Mentions |
|
||||||
Connectivity |
|
||||||
Progress to be done |
|
||||||
Priority |
|
||||||
Review |
|
||||||
Inline comments | |||||||
Builds and deployments | |||||||
Diff (code differences) |
|
|
|||||
Diff (file differences) |
|
||||||
State |
|
||||||
Information |