Atlassian · Design system breakdown

Atlassian Design System

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

Atlassian Design Atlaskit on GitHub Tokens reference

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.

What it's known for, what's underrated, what to watch out for.

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.

Token snapshot

Token	Value	Role
color.background.neutral	#091e420f	Subtle surface
color.text	#172b4d	Default text
color.background.brand.bold	#0c66e4	Primary action
space.100	8px	Spacing step
elevation.shadow.raised	0 1px 1px rgba(9,30,66,.25)	Raised surface
border.radius	3px	Default radius (smaller than peer systems)

Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.

Components worth studying

01EditorModular rich-text editor with mentions, commands, and collaborative editing primitives.
02Side NavigationMulti-level nav patterns built for products with deep IA.
03Empty StateComposable zero-data and onboarding-blank patterns.

If you're evaluating this 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.

Compare more systems

What it's known for, what's underrated, what to watch out for.

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.

Token

Value

Role

color.background.neutral

#091e420f

Subtle surface

color.text

#172b4d

Default text

color.background.brand.bold

#0c66e4

Primary action

space.100

8px

Spacing step

elevation.shadow.raised

0 1px 1px rgba(9,30,66,.25)

Raised surface

border.radius

3px

Default radius (smaller than peer systems)