← Brands · [email protected]

Atlassian

Atlassian Pty Ltd is the Australian software company behind Jira, Confluence, Bitbucket, Trello, Compass, Loom, and Statuspage. The brand voice is open, optimistic, and "team-first" — direct without being formal, warm without being saccharine. Atlassian Design is the system that backs every product surface; the `@atlaskit/tokens` palette is its authoritative color source. The signature mark is the blue chevron-A in Atlassian Blue 700 (#1868DB); product UIs render on a clean neutral canvas with that blue as the primary interactive color on light surfaces and a calibrated Blue 400 (#669DF1) on dark surfaces. Sub-brands in the Atlassian portfolio (Trello in particular — see the separate `trello@1` atom — plus Jira, Confluence, Bitbucket) inherit the Atlassian Design product surface language while carrying their own signature marks.

1 palette 3 fonts 0 assets 10 rules atlassianatlaskitjiraconfluencebitbuckettrellodesign-system

Preview prompt

Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/atlassian/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.

Downloads

All converter outputs for [email protected]. Served from /dist/brands/atlassian/1.0.0/.

W3C Design Tokens

3 files

Cross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.

JSON

1 file

Plain JSON mirror of the resolved brand — palette, fonts, roles, rules.

brand.json json/brand.json

CSS variables

1 file

CSS custom properties on :root with prefers-color-scheme dark.

tokens.css css/tokens.css

SCSS

1 file

SCSS variables + Sass maps for swatches, roles, and fonts.

_tokens.scss scss/_tokens.scss

Tailwind config

1 file

Tailwind v3 theme.extend.colors + fontFamily.

tailwind.config.cjs tailwind/tailwind.config.cjs

Figma Tokens

1 file

Figma Tokens plugin JSON (Tokens Studio compatible).

tokens.json figma/tokens.json

Swift

1 file

Swift enums for SwiftUI / UIKit color + font tokens.

BrandTokens.swift swift/BrandTokens.swift

Kotlin / Compose

1 file

Kotlin objects for Jetpack Compose color + typography tokens.

BrandTokens.kt kotlin/BrandTokens.kt

Markdown guide

1 file

Human-readable brand guide. Same source as the on-page Brand Guide.

brand-guide.md markdown/brand-guide.md

Brand Guide

Inline rendering of the Markdown brand guide. Same source as the markdown/brand-guide.md download.

Atlassian

[email protected]

Atlassian Pty Ltd is the Australian software company behind Jira, Confluence, Bitbucket, Trello, Compass, Loom, and Statuspage. The brand voice is open, optimistic, and "team-first" — direct without being formal, warm without being saccharine. Atlassian Design is the system that backs every product surface; the @atlaskit/tokens palette is its authoritative color source. The signature mark is the blue chevron-A in Atlassian Blue 700 (#1868DB); product UIs render on a clean neutral canvas with that blue as the primary interactive color on light surfaces and a calibrated Blue 400 (#669DF1) on dark surfaces. Sub-brands in the Atlassian portfolio (Trello in particular — see the separate trello@1 atom — plus Jira, Confluence, Bitbucket) inherit the Atlassian Design product surface language while carrying their own signature marks.

Tags: atlassian, atlaskit, jira, confluence, bitbucket, trello, design-system

Atoms

Palette

Atlassian · [email protected] · Apache-2.0

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.

Fonts

Role	Font	License	Classification
`heading`	Inter `([email protected])`	OFL-1.1	sans-serif
`body`	Inter `([email protected])`	OFL-1.1	sans-serif
`mono`	JetBrainsMono Nerd Font `([email protected])`	OFL-1.1	monospace

Swatches

ID	Name	Value
`neutral-0`	Neutral 0	`#FFFFFF`
`neutral-100`	Neutral 100	`#F8F8F8`
`neutral-200`	Neutral 200	`#F0F1F2`
`neutral-300`	Neutral 300	`#DDDEE1`
`neutral-400`	Neutral 400	`#B7B9BE`
`neutral-500`	Neutral 500	`#8C8F97`
`neutral-600`	Neutral 600	`#7D818A`
`neutral-700`	Neutral 700	`#6B6E76`
`neutral-800`	Neutral 800	`#505258`
`neutral-900`	Neutral 900	`#3B3D42`
`neutral-1000`	Neutral 1000	`#292A2E`
`neutral-1100`	Neutral 1100	`#1E1F21`
`neutral-100-alpha`	Neutral 100 Alpha	`#17171708`
`neutral-200-alpha`	Neutral 200 Alpha	`#0515240F`
`neutral-300-alpha`	Neutral 300 Alpha	`#0B120E24`
`neutral-400-alpha`	Neutral 400 Alpha	`#080F214A`
`neutral-500-alpha`	Neutral 500 Alpha	`#050C1F75`
`dark-neutral-0`	Dark Neutral 0	`#18191A`
`dark-neutral-100`	Dark Neutral 100	`#1F1F21`
`dark-neutral-200`	Dark Neutral 200	`#242528`
`dark-neutral-250`	Dark Neutral 250	`#2B2C2F`
`dark-neutral-300`	Dark Neutral 300	`#303134`
`dark-neutral-350`	Dark Neutral 350	`#3D3F43`
`dark-neutral-400`	Dark Neutral 400	`#4B4D51`
`dark-neutral-500`	Dark Neutral 500	`#63666B`
`dark-neutral-600`	Dark Neutral 600	`#7E8188`
`dark-neutral-700`	Dark Neutral 700	`#96999E`
`dark-neutral-800`	Dark Neutral 800	`#A9ABAF`
`dark-neutral-900`	Dark Neutral 900	`#BFC1C4`
`dark-neutral-1000`	Dark Neutral 1000	`#CECFD2`
`dark-neutral-1100`	Dark Neutral 1100	`#E2E3E4`
`dark-neutral-100-alpha`	Dark Neutral 100 Alpha	`#BDBDBD0A`
`dark-neutral-200-alpha`	Dark Neutral 200 Alpha	`#CECED912`
`dark-neutral-250-alpha`	Dark Neutral 250 Alpha	`#D9DAE71A`
`dark-neutral-300-alpha`	Dark Neutral 300 Alpha	`#E3E4F21F`
`dark-neutral-350-alpha`	Dark Neutral 350 Alpha	`#E8EDFD2E`
`dark-neutral-400-alpha`	Dark Neutral 400 Alpha	`#E5E9F640`
`dark-neutral-500-alpha`	Dark Neutral 500 Alpha	`#E9F0FB5C`
`blue-100`	Blue 100	`#E9F2FE`
`blue-200`	Blue 200	`#CFE1FD`
`blue-250`	Blue 250	`#ADCBFB`
`blue-300`	Blue 300	`#8FB8F6`
`blue-400`	Blue 400	`#669DF1`
`blue-500`	Blue 500	`#4688EC`
`blue-600`	Blue 600	`#357DE8`
`blue-700`	Blue 700	`#1868DB`
`blue-800`	Blue 800	`#1558BC`
`blue-850`	Blue 850	`#144794`
`blue-900`	Blue 900	`#123263`
`blue-1000`	Blue 1000	`#1C2B42`
`teal-100`	Teal 100	`#E7F9FF`
`teal-200`	Teal 200	`#C6EDFB`
`teal-250`	Teal 250	`#B1E4F7`
`teal-300`	Teal 300	`#9DD9EE`
`teal-400`	Teal 400	`#6CC3E0`
`teal-500`	Teal 500	`#42B2D7`
`teal-600`	Teal 600	`#2898BD`
`teal-700`	Teal 700	`#227D9B`
`teal-800`	Teal 800	`#206A83`
`teal-850`	Teal 850	`#1A5265`
`teal-900`	Teal 900	`#164555`
`teal-1000`	Teal 1000	`#1E3137`
`green-100`	Green 100	`#DCFFF1`
`green-200`	Green 200	`#BAF3DB`
`green-250`	Green 250	`#97EDC9`
`green-300`	Green 300	`#7EE2B8`
`green-400`	Green 400	`#4BCE97`
`green-500`	Green 500	`#2ABB7F`
`green-600`	Green 600	`#22A06B`
`green-700`	Green 700	`#1F845A`
`green-800`	Green 800	`#216E4E`
`green-850`	Green 850	`#19573D`
`green-900`	Green 900	`#164B35`
`green-1000`	Green 1000	`#1C3329`
`lime-100`	Lime 100	`#EFFFD6`
`lime-200`	Lime 200	`#D3F1A7`
`lime-250`	Lime 250	`#BDE97C`
`lime-300`	Lime 300	`#B3DF72`
`lime-400`	Lime 400	`#94C748`
`lime-500`	Lime 500	`#82B536`
`lime-600`	Lime 600	`#6A9A23`
`lime-700`	Lime 700	`#5B7F24`
`lime-800`	Lime 800	`#4C6B1F`
`lime-850`	Lime 850	`#3F5224`
`lime-900`	Lime 900	`#37471F`
`lime-1000`	Lime 1000	`#28311B`
`yellow-100`	Yellow 100	`#FEF7C8`
`yellow-200`	Yellow 200	`#F5E989`
`yellow-250`	Yellow 250	`#EFDD4E`
`yellow-300`	Yellow 300	`#EED12B`
`yellow-400`	Yellow 400	`#DDB30E`
`yellow-500`	Yellow 500	`#CF9F02`
`yellow-600`	Yellow 600	`#B38600`
`yellow-700`	Yellow 700	`#946F00`
`yellow-800`	Yellow 800	`#7F5F01`
`yellow-850`	Yellow 850	`#614A05`
`yellow-900`	Yellow 900	`#533F04`
`yellow-1000`	Yellow 1000	`#332E1B`
`orange-100`	Orange 100	`#FFF5DB`
`orange-200`	Orange 200	`#FCE4A6`
`orange-250`	Orange 250	`#FBD779`
`orange-300`	Orange 300	`#FBC828`
`orange-400`	Orange 400	`#FCA700`
`orange-500`	Orange 500	`#F68909`
`orange-600`	Orange 600	`#E06C00`
`orange-700`	Orange 700	`#BD5B00`
`orange-800`	Orange 800	`#9E4C00`
`orange-850`	Orange 850	`#7A3B00`
`orange-900`	Orange 900	`#693200`
`orange-1000`	Orange 1000	`#3A2C1F`
`red-100`	Red 100	`#FFECEB`
`red-200`	Red 200	`#FFD5D2`
`red-250`	Red 250	`#FFB8B2`
`red-300`	Red 300	`#FD9891`
`red-400`	Red 400	`#F87168`
`red-500`	Red 500	`#F15B50`
`red-600`	Red 600	`#E2483D`
`red-700`	Red 700	`#C9372C`
`red-800`	Red 800	`#AE2E24`
`red-850`	Red 850	`#872821`
`red-900`	Red 900	`#5D1F1A`
`red-1000`	Red 1000	`#42221F`
`magenta-100`	Magenta 100	`#FFECF8`
`magenta-200`	Magenta 200	`#FDD0EC`
`magenta-250`	Magenta 250	`#FCB6E1`
`magenta-300`	Magenta 300	`#F797D2`
`magenta-400`	Magenta 400	`#E774BB`
`magenta-500`	Magenta 500	`#DA62AC`
`magenta-600`	Magenta 600	`#CD519D`
`magenta-700`	Magenta 700	`#AE4787`
`magenta-800`	Magenta 800	`#943D73`
`magenta-850`	Magenta 850	`#77325B`
`magenta-900`	Magenta 900	`#50253F`
`magenta-1000`	Magenta 1000	`#3D2232`
`purple-100`	Purple 100	`#F8EEFE`
`purple-200`	Purple 200	`#EED7FC`
`purple-250`	Purple 250	`#E3BDFA`
`purple-300`	Purple 300	`#D8A0F7`
`purple-400`	Purple 400	`#C97CF4`
`purple-500`	Purple 500	`#BF63F3`
`purple-600`	Purple 600	`#AF59E1`
`purple-700`	Purple 700	`#964AC0`
`purple-800`	Purple 800	`#803FA5`
`purple-850`	Purple 850	`#673286`
`purple-900`	Purple 900	`#48245D`
`purple-1000`	Purple 1000	`#35243F`

Mode role mappings

Light mode

Role	Swatch	Hex
`background`	`neutral-0`	`#FFFFFF`
`surface`	`neutral-100`	`#F8F8F8`
`surface-elevated`	`neutral-0`	`#FFFFFF`
`text-primary`	`neutral-1100`	`#1E1F21`
`text-secondary`	`neutral-700`	`#6B6E76`
`text-tertiary`	`neutral-600`	`#7D818A`
`primary`	`blue-700`	`#1868DB`
`primary-hover`	`blue-800`	`#1558BC`
`accent`	`blue-700`	`#1868DB`
`accent-hover`	`blue-800`	`#1558BC`
`warning`	`yellow-700`	`#946F00`
`warning-hover`	`orange-700`	`#BD5B00`
`error`	`red-700`	`#C9372C`
`success`	`green-700`	`#1F845A`
`border`	`neutral-300`	`#DDDEE1`

Dark mode

Role	Swatch	Hex
`background`	`neutral-1100`	`#1E1F21`
`surface`	`neutral-1000`	`#292A2E`
`surface-elevated`	`neutral-900`	`#3B3D42`
`text-primary`	`neutral-100`	`#F8F8F8`
`text-secondary`	`neutral-300`	`#DDDEE1`
`text-tertiary`	`neutral-400`	`#B7B9BE`
`primary`	`blue-400`	`#669DF1`
`primary-hover`	`blue-500`	`#4688EC`
`accent`	`blue-400`	`#669DF1`
`accent-hover`	`blue-500`	`#4688EC`
`warning`	`yellow-400`	`#DDB30E`
`warning-hover`	`orange-400`	`#FCA700`
`error`	`red-400`	`#F87168`
`success`	`green-400`	`#4BCE97`
`border`	`neutral-800`	`#505258`

Brand semantic roles

Colors

Role	Swatch	Hex
`identity`	`neutral-0`	`#FFFFFF`
`on-identity`	`neutral-1100`	`#1E1F21`
`primary`	`blue-700`	`#1868DB`
`primary-hover`	`blue-800`	`#1558BC`
`accent`	`blue-700`	`#1868DB`
`accent-hover`	`blue-800`	`#1558BC`
`mark`	`blue-700`	`#1868DB`
`success`	`green-700`	`#1F845A`
`warning`	`yellow-700`	`#946F00`
`error`	`red-700`	`#C9372C`
`text-primary-light`	`neutral-1100`	`#1E1F21`
`text-primary-dark`	`neutral-100`	`#F8F8F8`
`background-light`	`neutral-0`	`#FFFFFF`
`background-dark`	`neutral-1100`	`#1E1F21`
`surface-light`	`neutral-100`	`#F8F8F8`
`surface-dark`	`neutral-1000`	`#292A2E`
`text-secondary-light`	`neutral-700`	`#6B6E76`
`text-tertiary-light`	`neutral-600`	`#7D818A`
`border-light`	`neutral-300`	`#DDDEE1`

Typography

Role	Font role key
`display`	`heading`
`prose`	`body`
`code`	`mono`

Rules

🛑 error (8)

`colorChoice` → `roles.colors.primary`

allowed: blue-700, blue-800, blue-400
forbidden: red-700, green-700, yellow-700, orange-700, magenta-700, purple-700

Atlassian Design's documented color.background.brand token resolves to Blue 700 on light surfaces and Blue 400 on dark surfaces; Blue 800 is the pressed/active variant. Other chromatic 700-stops are reserved for status, tag, and data-viz roles and must not stand in for the primary interactive color.

`forbiddenTreatment` → `logo`

treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo

Atlassian's brand-use guidance prohibits stretching, rotating, recoloring, outlining, or applying decorative effects to the Atlassian wordmark, the chevron-A mark, and the marks of portfolio products (Jira, Confluence, Bitbucket, Trello, Compass, Loom, Statuspage).

`contrastRatio` → `text-primary`

against: background
minRatio: 4.5
standard: WCAG-AA

Atlassian Design publishes WCAG 2.1 AA as its baseline conformance target. Neutral 1100 (#1E1F21) on Neutral 0 (#FFFFFF) clears AA at ~18:1, and Neutral 100 (#F8F8F8) on Neutral 1100 clears AA at ~17:1 — both light and dark mode primary text/background pairs satisfy the floor.

`contextRestriction` → `roles.colors.identity`

forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

Atlassian's trademark guidance forbids using the Atlassian name, marks, or distinctive color treatment in third-party company names, domains, merchandise, or any context that implies affiliation or endorsement. The same constraint governs portfolio marks (Jira, Confluence, Bitbucket, Trello).

`contextRestriction` → `roles.colors.error`

forbiddenContexts: confirmation, data-viz-positive
allowedContexts: error-state, destructive-action, validation-failure

Atlassian Design's color.text.danger and color.background.danger.bold tokens resolve to Red 700 on light and Red 400 on dark. Reusing those swatches for confirmation or positive data points inverts the established semantic meaning across the portfolio.

`fontPairing` → `typography.display`

requires: prose
minSizeRatio: 1.5

Atlassian's type scale maintains at least a 1.5× ratio between heading and body to preserve the hierarchy that Atlassian Design's components depend on for scannability across dense product surfaces.

`accessibilityRequirement` → `*`

standard: WCAG-AA
criterion: 1.4.3

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Atlassian Design's accessibility commitment treats AA as the floor for all product surfaces and the design tokens that back them.

`variantSelection` → `logo`

use: logo-light
when: backgroundColorScheme="dark"

On dark surfaces, use Atlassian's documented light-fill variant of the chevron mark and wordmark. Inverting the blue mark on the fly produces an off-brand teal that does not match Atlassian's published assets.

⚠️ warning (1)

`enumMembership` → `typography.heading.fontWeight`

allowed: 400, 500, 600, 700

Atlassian Design's documented type ramp anchors on Regular (400), Medium (500), SemiBold (600), and Bold (700) — the weights Charlie Display and the documented sans substitute both ship. Heavier or lighter cuts are not part of the defined ramp.

💡 recommendation (1)

`compositionConstraint` → `roles.colors.primary`

pairsWith: neutral-0, neutral-100, neutral-1100
doesNotPairWith: red-700, magenta-700, purple-700

Atlassian Blue is calibrated to read on the Neutral 0 / 100 canvas and on the Neutral 1100 dark canvas. Placing it adjacent to red-700, magenta-700, or purple-700 at equal weight produces chromatic conflict that fights the focused, team-first voice of the brand surface.

Provenance

Source: https://atlassian.design/
License: Proprietary — All Rights Reserved (design tokens Apache-2.0)
Attribution: Atlassian Design tokens are licensed Apache-2.0 (see the atlassian-frontend mirror referenced in the matching palette atom). The Atlassian wordmark, the blue chevron-A mark, the Charlie Display proprietary typeface, and the Atlassian, Jira, Confluence, Bitbucket, Trello, Compass, Loom, and Statuspage trademarks are property of Atlassian Pty Ltd.
Imported: 2026-05-19
Notes: The Trello brand has a separate atom (trello@1) that catalogues its signature Trello Blue. This Atlassian atom catalogues the parent design-system palette and the cross-portfolio rules; it does NOT imply formal inheritance — Trello, Jira, Confluence, and Bitbucket are referenced descriptively, not via Zod-level cross-references. Atlassian's proprietary Charlie Display typeface is not publicly licensed; Inter is used as the open rendering substitute for sans (heading, body).

Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.

Components — same template, themed by Atlassian

Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.

Atlassian

A clear hierarchy in Atlassian's typeface

Tertiary heading — supporting structure

Body copy renders in the brand's prose font on the brand's background. Inline links and highlighted phrases pick up the brand's primary and highlight roles. Code spans like brand.references.palette fall back to the monospace face.

A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.

Bulleted list

Bullet markers inherit the brand's primary color.
Item spacing reads as a deliberate vertical rhythm.
Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.

Numbered list

Open the brand's resolved spec.
Apply roles to the component template.
Render the surface in the brand's identity.
Audit the output against the typed rules.

Buttons

Callout boxes

Info

Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.

Success

Confirms a completed action — palette role success determines the rule color.

Warning

Calls out something that needs attention but isn't an error — palette role warning.

Error

Surfaces a failure that blocks progress — palette role error. Use sparingly.

Table

Role	Resolves to	Mode
primary	brand color #1	light + dark
accent	brand color #2	light + dark
warning	brand warning	light + dark
error	brand error	light + dark

Atoms

The quick brown fox jumps over 13 lazy dogs.

font · body

Inter

[email protected]

The quick brown fox jumps over 13 lazy dogs.

font · mono

JetBrainsMono Nerd Font

[email protected]

The quick brown fox jumps over 13 lazy dogs.

Brand semantic roles

Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.

Colors

accent → blue-700 #1868DB

accent-hover → blue-800 #1558BC

background-dark → neutral-1100 #1E1F21

background-light → neutral-0 #FFFFFF

border-light → neutral-300 #DDDEE1

error → red-700 #C9372C

identity → neutral-0 #FFFFFF

mark → blue-700 #1868DB

on-identity → neutral-1100 #1E1F21

primary → blue-700 #1868DB

primary-hover → blue-800 #1558BC

success → green-700 #1F845A

surface-dark → neutral-1000 #292A2E

surface-light → neutral-100 #F8F8F8

text-primary-dark → neutral-100 #F8F8F8

text-primary-light → neutral-1100 #1E1F21

text-secondary-light → neutral-700 #6B6E76

text-tertiary-light → neutral-600 #7D818A

warning → yellow-700 #946F00

Typography

code → mono JetBrainsMono Nerd Font

display → heading Inter

prose → body Inter

Palette mode mappings (from atlassian)

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

Rules (10 typed constraints)

error · 8 rules

colorChoice roles.colors.primary

allowed blue-700, blue-800, blue-400

forbidden red-700, green-700, yellow-700, orange-700, magenta-700, purple-700

Atlassian Design's documented `color.background.brand` token resolves to Blue 700 on light surfaces and Blue 400 on dark surfaces; Blue 800 is the pressed/active variant. Other chromatic 700-stops are reserved for status, tag, and data-viz roles and must not stand in for the primary interactive color.

forbiddenTreatment logo

treatments stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo

Atlassian's brand-use guidance prohibits stretching, rotating, recoloring, outlining, or applying decorative effects to the Atlassian wordmark, the chevron-A mark, and the marks of portfolio products (Jira, Confluence, Bitbucket, Trello, Compass, Loom, Statuspage).

contrastRatio text-primary

against background

minRatio 4.5

standard WCAG-AA

Atlassian Design publishes WCAG 2.1 AA as its baseline conformance target. Neutral 1100 (#1E1F21) on Neutral 0 (#FFFFFF) clears AA at ~18:1, and Neutral 100 (#F8F8F8) on Neutral 1100 clears AA at ~17:1 — both light and dark mode primary text/background pairs satisfy the floor.

contextRestriction roles.colors.identity

forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

Atlassian's trademark guidance forbids using the Atlassian name, marks, or distinctive color treatment in third-party company names, domains, merchandise, or any context that implies affiliation or endorsement. The same constraint governs portfolio marks (Jira, Confluence, Bitbucket, Trello).

contextRestriction roles.colors.error

forbiddenContexts confirmation, data-viz-positive

allowedContexts error-state, destructive-action, validation-failure

Atlassian Design's `color.text.danger` and `color.background.danger.bold` tokens resolve to Red 700 on light and Red 400 on dark. Reusing those swatches for confirmation or positive data points inverts the established semantic meaning across the portfolio.

fontPairing typography.display

requires prose

minSizeRatio 1.5

Atlassian's type scale maintains at least a 1.5× ratio between heading and body to preserve the hierarchy that Atlassian Design's components depend on for scannability across dense product surfaces.

accessibilityRequirement *

standard WCAG-AA

criterion 1.4.3

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Atlassian Design's accessibility commitment treats AA as the floor for all product surfaces and the design tokens that back them.

variantSelection logo

use logo-light

when backgroundColorScheme="dark"

On dark surfaces, use Atlassian's documented light-fill variant of the chevron mark and wordmark. Inverting the blue mark on the fly produces an off-brand teal that does not match Atlassian's published assets.

warning · 1 rule

enumMembership typography.heading.fontWeight

allowed 400, 500, 600, 700

Atlassian Design's documented type ramp anchors on Regular (400), Medium (500), SemiBold (600), and Bold (700) — the weights Charlie Display and the documented sans substitute both ship. Heavier or lighter cuts are not part of the defined ramp.

recommendation · 1 rule

compositionConstraint roles.colors.primary

pairsWith neutral-0, neutral-100, neutral-1100

doesNotPairWith red-700, magenta-700, purple-700

Atlassian Blue is calibrated to read on the Neutral 0 / 100 canvas and on the Neutral 1100 dark canvas. Placing it adjacent to red-700, magenta-700, or purple-700 at equal weight produces chromatic conflict that fights the focused, team-first voice of the brand surface.

Provenance

Source: https://atlassian.design/
Attribution: Atlassian Design tokens are licensed Apache-2.0 (see the `atlassian-frontend` mirror referenced in the matching palette atom). The Atlassian wordmark, the blue chevron-A mark, the Charlie Display proprietary typeface, and the Atlassian, Jira, Confluence, Bitbucket, Trello, Compass, Loom, and Statuspage trademarks are property of Atlassian Pty Ltd.
Imported: 2026-05-19
Notes: The Trello brand has a separate atom (`trello@1`) that catalogues its signature Trello Blue. This Atlassian atom catalogues the parent design-system palette and the cross-portfolio rules; it does NOT imply formal inheritance — Trello, Jira, Confluence, and Bitbucket are referenced descriptively, not via Zod-level cross-references. Atlassian's proprietary Charlie Display typeface is not publicly licensed; Inter is used as the open rendering substitute for sans (heading, body).

Downloads

Brand Guide

Atlassian

Atoms

Palette

Fonts

Swatches

Mode role mappings

Light mode

Dark mode

Brand semantic roles

Colors

Typography

Rules

🛑 error (8)

colorChoice → roles.colors.primary

forbiddenTreatment → logo

contrastRatio → text-primary

contextRestriction → roles.colors.identity

contextRestriction → roles.colors.error

fontPairing → typography.display

accessibilityRequirement → *

variantSelection → logo

⚠️ warning (1)

enumMembership → typography.heading.fontWeight

💡 recommendation (1)

compositionConstraint → roles.colors.primary

Provenance

Components — same template, themed by Atlassian

Atlassian

A clear hierarchy in Atlassian's typeface

Tertiary heading — supporting structure

Bulleted list

Numbered list

Buttons

Callout boxes

Table

Atoms

Brand semantic roles

Colors

Typography

Palette mode mappings (from atlassian)

Light mode (15 roles)

Dark mode (15 roles)

Rules (10 typed constraints)

error · 8 rules

warning · 1 rule

recommendation · 1 rule

Provenance

`colorChoice` → `roles.colors.primary`

`forbiddenTreatment` → `logo`

`contrastRatio` → `text-primary`

`contextRestriction` → `roles.colors.identity`

`contextRestriction` → `roles.colors.error`

`fontPairing` → `typography.display`

`accessibilityRequirement` → `*`

`variantSelection` → `logo`

`enumMembership` → `typography.heading.fontWeight`

`compositionConstraint` → `roles.colors.primary`