---
system: atlassian
category: foundations
topic: color
content_type: guidance
status: latest
version_label: "v1 (current)"
retrieved: 2026-05-12
source_url: https://atlassian.design/foundations/color
tags: [color, tokens, roles, emphasis, interaction-states, dark-mode, accessibility]
---

# Atlassian Design System — Color

## Overview

Color distinguishes the Atlassian brand and reinforces consistent experiences across apps. Atlassian's color system is built on **design tokens** — rather than choosing a specific shade or hex value, developers and designers choose a token that describes *what* the color does in the UI.

All color design tokens start with `color.`, followed by the property being applied to (background, border, icon, text) and optionally one or more modifiers.

---

## Color Anatomy

The Atlassian palette has three categories:

**Saturated colors** — convey meaning, highlight UI, or create associations. Nine hue families: blue, teal, green, lime, yellow, orange, red, magenta, and purple.

**Neutral colors** — applied to most backgrounds, text, and shapes. Light and dark neutrals are separate ramps (not inversions of each other). Neutral colors don't have inherent semantic meaning.

**Alpha colors** — transparent/semi-transparent variants that adapt to different background colors and elevations. Useful when UI needs to work across varied surfaces.

---

## Applying Color with Design Tokens

### Token naming structure

```
color.<property>.<role>.<emphasis>.<state>
```

Examples:
- `color.background.brand.bold` — brand-colored bold background (primary button)
- `color.text.danger` — danger-semantic text color
- `color.icon.accent.green` — accent green for icons (no semantic meaning)
- `color.border.focused` — focus ring border

### Token prefix by property

| Prefix | Applied to |
|---|---|
| `color.background.*` | Surface and fill colors behind content |
| `color.border.*` | Dividers, input outlines, and component borders |
| `color.text.*` | Text and labels |
| `color.icon.*` | Icons and pictograms |
| `color.link.*` | Hyperlinks |
| `color.chart.*` | Data visualization |
| `color.blanket.*` | Overlay/scrim backgrounds |
| `color.skeleton` | Skeleton loading state fills |

---

## Color Roles

Color roles describe the intention behind the color. The same role is used across backgrounds, borders, icons, and text.

| Role | Description |
|---|---|
| `neutral` | Default text and secondary UI elements — secondary buttons, navigation elements |
| `brand` | Primary actions or elements that communicate the Atlassian brand |
| `information` | Informative UI — info icons, in-progress states |
| `success` | Favorable outcomes — success messages, completion states |
| `warning` | Caution — prevents mistakes or errors |
| `danger` | Serious errors or destructive actions |
| `discovery` | New things — onboarding, feature announcements |
| `accent` | No specific semantic meaning; can be exchanged with another accent color without changing the experience. Available: gray, red, green, blue, yellow, orange, teal, purple, magenta, lime |
| `inverse` | UI sitting on bold-emphasis backgrounds |
| `input` | Form fields (design system form fields already apply these) |

---

## Emphasis Levels

Emphasis controls how much contrast a color has against the default surface:

- **subtlest** — lightest, lowest contrast (tinted background)
- **subtler** — light tint
- **subtle** — moderate contrast
- *(default)* — standard contrast
- **bold** — high contrast against white surface (e.g. filled button background)
- **boldest** — maximum contrast

The emphasis level appears after the role in the token name:
- `color.background.brand.bold` — high-contrast brand background
- `color.background.danger.subtler` — faint danger tint
- `color.text.subtlest` — lowest-contrast text (de-emphasized)

### Inverse tokens on bold backgrounds

Bold backgrounds require `inverse` tokens on the content placed on top of them:
- `color.text.inverse` — text on bold colored backgrounds (except warning)
- `color.text.warning.inverse` — special token for text on bold yellow backgrounds (meets WCAG AA where plain inverse would not)

---

## Interaction States

State is encoded directly in the token name as the last modifier:

| State | Token suffix | Notes |
|---|---|---|
| Hover | `.hovered` | e.g. `color.background.brand.bold.hovered` |
| Pressed | `.pressed` | e.g. `color.background.neutral.pressed` |
| Selected | `color.background.selected.*` | Dedicated role group |
| Focus | `color.border.focused` | Focus ring color |
| Disabled | `color.background.disabled`, `color.text.disabled` | Separate tokens with opacity-based values |

Icons do not have dedicated hover/pressed tokens — use a neutral background token shift instead (e.g. `color.background.neutral.subtle.hovered`).

---

## Accessibility

Atlassian's color token system targets WCAG AA compliance:
- **3:1 minimum contrast** — essential UI elements and text 24px or larger (WCAG 1.4.11)
- **4.5:1 minimum contrast** — text smaller than 24px (WCAG 1.4.3)

Using design tokens (rather than raw hex values) guarantees that the correct contrast ratio is maintained automatically.

---

## Dark Mode

Design tokens support two themes: **light** and **dark**. Each token maps to a different value per theme — no manual hex mapping is needed when using tokens. The token name stays the same; the resolved value changes based on the active theme.

For manual dark mode hex mappings (when not using tokens), see the Atlassian color palette page.