Design with clarity
Build with confidence

Ship Atlassian interfaces using quality foundations, flexible components, and powerful tools.

Get started

For designers

Design guidelines, Figma libraries, plugins, and tools.

For developers

Environment configuration, tooling, and composition guides.

For content designers

Content standards, voice and tone, and design assets.

Explore all get started guides

Latest releases

Atlassian UI refresh updates

How to apply Atlassian’s bold new visual style with the design system.

Read release roundup

Explore what's new

Design with elegant foundations

Design decisions are expressed with tokens and modular building blocks.

Foundational guidelines and visual styles

Tokens

Single sources of truth to name and store design decisions.

Accessibility

Enable everyone to interact with, understand, and navigate our apps.

Content

Clear, concise, and conversational language to get teams where they need to go.

Color

Distinguish our brand and reinforce consistent experiences across apps.

Typography

Enhance communication, reinforce brand, and guide users' emotions.

Spacing

Simplify the creation of page layouts and UI.

Explore all foundations

Build iconic Atlassian experiences

Access modular and responsive components.

Flexible components and primitives

Button

A button triggers an event or action. They let users know what will happen next.

Badge

A badge is a visual indicator for numeric values such as tallies and scores.

Flag

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

Box

A box is a primitive component that acts as a generic container, and provides managed access to design tokens.

Inline

Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.

Stack

Stack is a primitive component based on flexbox that manages the vertical layout of direct children.

Explore all components

Ship quickly as a team

Evolving buttons and links

A closer look at how we've revamped our button and link components to be more accessible, performant, and consistent.

Read feature deep dive

Explore what's new

Tools for designers and developers

Figma libraries

Our tokens, foundations, components, and plugins.

ESlint plugin

The essential linting plugin for Atlassian Design System.

UI Styling Standard

Principles to guide styling UI code across Atlassian's frontend.

Explore all tools

Get started

Join thousands of designers and developers already using the Atlassian Design System.

Explore get started guides