Learn design guidelines and get access to Figma libraries and tools.

Atlassian Design System is a collection of UI components, foundations, and standards that help teams build beautiful product experiences.

This page lists how to use our design guidelines and Figma tools.

An image showing the Atlassian Design System logo on a dark background with a star-like grid in the background, with a set of concentric hexagons containing iconographic representations of Atlassian Design System's foundations: colors, icons, typography, border radius, sizing, and layout.

Learn Atlassian’s design guidelines

These shared visual styles and components create harmonious experiences across Atlassian products.

  • Foundations are our core visual styles. Learn how to apply color, elevation, spacing, iconography, and typography to your designs.

  • Components are reusable UI elements designed for specific interactions or needs. Explore our component documentation for design usage guides and visual examples.

  • Patterns show common flows and solutions composed from our foundations and components.

  • Content has writing guidelines for error messages and other common UI copy.

Always design considering accessibility, the Atlassian brand, and our design principles.

Use Figma to apply the Atlassian Design System

Our Figma libraries and tools include our foundational styles, design tokens, components, and other helpers.

We’re rolling out design tokens across Atlassian

With design tokens, your style choices align with system-level design decisions. Implementing tokens makes things like dark mode possible and scalable across Atlassian.

Learn more about design tokens

Access more design resources at Atlassian

Use the design system alongside the rest of Atlassian’s platform, design, and product resources.

Resources for Atlassians:

Get help

How to contact us.

Was this page helpful?

We use this feedback to improve our documentation.