Color
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 colorcolor.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 backgroundcolor.background.danger.subtler— faint danger tintcolor.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.