Atlassian Design System (Atlaskit)

Atlassian's system, with Atlaskit as the React library. Built to unify products that grew separately into one connected experience.

Why we like it

Atlaskit is the connective tissue across a product family that grew up apart, and it's aged into something with serious range. The token layer is the part that first caught us: color tokens follow a strict pattern of property, role, emphasis and state, with an emphasis ladder running from subtlest to bold, so contrast is a named level you choose rather than a value someone eyeballed.

What makes it stand out now is how deliberately it speaks to machines. Atlassian ships an official MCP server, an llms.txt that indexes its packages and docs, ESLint plugins and a codemod CLI, and they've published what that 'context engine' buys them: more accurate AI calls, faster system-specific tasks, fewer tokens spent. For a system this size, that's a clear read on where they think this is all heading.

Where it fits

Atlaskit fits large React product suites that need one language across many apps, and teams leaning into AI-assisted building. It carries the weight of an enterprise system, so a small team or a simple site will feel it's more than they need, and a few of the agent skills are Atlassian's own.

Ideas to borrow

  1. 01.

    Token architecture

    Bake an emphasis ladder (subtlest to bold) into your semantic token names, so contrast becomes a level you choose by name rather than a value you pick by eye.

  2. 02.

    AI-readiness

    Publish an llms.txt that indexes your packages, docs and MCP endpoints, so an agent can navigate the system the way a person would.

Screenshots

Fig. 1Atlassian's 'Design tokens explained' page, with elevation token names labeled onto a Jira success toast to show where each one applies.
Fig. 2The Split button page: a 'Link work item' example above its React source, with tabs for Examples, Code, Usage, and Changelog.
Fig. 3Motion guidance with paired Do and Don't cards — the Do keeps content visible through a transition, the Don't leaves an empty placeholder.

Further reading

Related