Atlassian Design System

# Atlassian Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Atlassian. "Atlassian Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Atlassian Design System
**Owner:** Atlassian
**Official documentation:** https://atlassian.design/
**Visual character:** Teamwork blue over ink-navy text: crisp 3px corners, tight information density, and semantic color that maps to Jira states.

---

## Summary

A productivity-suite system that takes content and editing seriously.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand Bold / Blue | `#0c66e4` | `--ds-background-brand-bold` | Primary action fill (current tokens) |
| Text | `#172b4d` | `--ds-text` | Primary text |
| Surface | `#ffffff` | `--ds-surface` | Default surface |
| Surface Sunken | `#f7f8f9` | `--ds-surface-sunken` | Recessed background |
| Border | `#dcdfe4` | `--ds-border` | Borders and dividers |
| Danger | `#c9372c` | `--ds-text-danger` | Errors and destructive actions |
| Success | `#22a06b` | `--ds-text-success` | Success states |
| Warning | `#e56910` | `--ds-text-warning` | Warnings |
| Discovery | `#8270db` | `--ds-text-discovery` | New-feature highlights |

## Typography

- **Body:** Atlassian Sans — weights 400, 500, 653 — `'Atlassian Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- **Mono:** Atlassian Mono — weights 400 — `'Atlassian Mono', ui-monospace, Menlo, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xxl | `36px` | `40px` |
| heading-lg | `24px` | `28px` |
| heading-md | `20px` | `24px` |
| heading-sm | `16px` | `20px` |
| body | `14px` | `20px` |
| body-small | `11px` | `16px` |

## Spacing

Base unit: `8px`

Scale: `2px` · `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `3px` |
| rounded | `8px` |
| circle | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| raised | `0 1px 1px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31)` |
| overlay | `0 8px 12px rgba(9,30,66,0.15), 0 0 1px rgba(9,30,66,0.31)` |

## Motion

| Name | Value |
| --- | --- |
| duration-medium | `200ms` |
| ease-in-out | `cubic-bezier(0.15, 1, 0.3, 1)` |

## Quick start (CSS)

```css
/* Atlassian Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://atlassian.design/ */

:root {
  /* Color */
  --ds-background-brand-bold: #0c66e4; /* Primary action fill (current tokens) */
  --ds-text: #172b4d; /* Primary text */
  --ds-surface: #ffffff; /* Default surface */
  --ds-surface-sunken: #f7f8f9; /* Recessed background */
  --ds-border: #dcdfe4; /* Borders and dividers */
  --ds-text-danger: #c9372c; /* Errors and destructive actions */
  --ds-text-success: #22a06b; /* Success states */
  --ds-text-warning: #e56910; /* Warnings */
  --ds-text-discovery: #8270db; /* New-feature highlights */

  /* Typography */
  --font-body: 'Atlassian Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Atlassian Mono', ui-monospace, Menlo, monospace;

  /* Type scale */
  --text-heading-xxl: 36px /* line-height 40px */;
  --text-heading-lg: 24px /* line-height 28px */;
  --text-heading-md: 20px /* line-height 24px */;
  --text-heading-sm: 16px /* line-height 20px */;
  --text-body: 14px /* line-height 20px */;
  --text-body-small: 11px /* line-height 16px */;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;

  /* Radius */
  --radius-default: 3px;
  --radius-rounded: 8px;
  --radius-circle: 9999px;

  /* Elevation */
  --shadow-raised: 0 1px 1px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
  --shadow-overlay: 0 8px 12px rgba(9,30,66,0.15), 0 0 1px rgba(9,30,66,0.31);

  /* Motion */
  --motion-duration-medium: 200ms;
  --motion-ease-in-out: cubic-bezier(0.15, 1, 0.3, 1);
}
```

## Origin

Atlassian's design system grew alongside Jira, Confluence, Trello, and Bitbucket. It exists to make those products feel like one product family despite different histories and architectures.

## Governance

Centralized design system team with strong product-team partnership. Public design tokens; component libraries shipped as `@atlaskit/*` packages.

## Known for

- Editor and content components — Atlassian's rich-text editor patterns are publicly documented in unusual detail.
- Fast token system that supports their light + dark + high-contrast themes cleanly.
- Strong empty-state and zero-data patterns — critical for productivity tools.

## Underrated

- Avatar groups, mention chips, and presence indicators — small components that productivity apps need but rarely document well.
- The publicly readable rationale behind their token names is good study material.

## Watch out for

- Several `@atlaskit/*` packages are in different stages of maturity; check the per-component status.
- The system is built around productivity-tool workflows; lifting it into a marketing surface requires re-thought visual rhythm.

## Components worth studying

- **Editor** — Modular rich-text editor with mentions, commands, and collaborative editing primitives.
- **Side Navigation** — Multi-level nav patterns built for products with deep IA.
- **Empty State** — Composable zero-data and onboarding-blank patterns.

## When to choose Atlassian Design System

Pick this if you're building productivity, collaboration, or knowledge tools. The editor and content patterns alone make it worth studying for any team building text-heavy product surfaces.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Atlassian Design System by Atlassian — A productivity-suite system that takes content and editing seriously. Character: Teamwork blue over ink-navy text: crisp 3px corners, tight information density, and semantic color that maps to Jira states. Use a primary colour near #0c66e4, the typeface "Atlassian Sans" (or a close equivalent), corner radius around 3px, a spacing rhythm on a 8px base. Lean into what it's known for: Editor and content components — Atlassian's rich-text editor patterns are publicly documented in unusual detail. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Atlassian Design](https://atlassian.design/)
- [Atlaskit on GitHub](https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/)
- [Tokens reference](https://atlassian.design/components/tokens/all-tokens)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/atlassian-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._