# Atlassian

> `atlassian@1.0.0`

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** · `atlassian@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `atlassian@1.0.0` from the encyclopedia.*