Atlassian Design System - The GROOVIEST Site on the Web!

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.

NEW! Check out the latest design updates!

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.

(Atlassians only) 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 and the Atlassian voice and tone.

Use Figma to apply the Atlassian Design System

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

Atlassians, install our private Figma libraries.

Access public design system Figma resources in the Atlassian Figma Community.

Use Atlassian design tokens Figma pluginto apply design tokens faster than Figma's native style panel.

Get access to the accessibility annotations Figma library (Atlassians only).

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.

Find additional platform components in Atlaskit.

If you aren’t using Figma, you can download or copy styles in Foundations.

Resources for Atlassians: Learn about Atlassian design practices in Design Hub. Access illustrations and fonts in the Brand Creative Library. Find other design libraries at Atlassian.

Get help How to contact us.

Was this page helpful? Back to top

What's new Featured 2025 Get started Design DevelopContent design Figma libraries Vision, values, and principles Release phases Foundations Tokens Accessibility Content Spacing Grid Color Typography Iconography Illustrations Logos Elevation Components Forms and input Images and icons Layout and structure Loading Messaging Navigation Overlays and layering Status indicators Text and data display Primitives Libraries ToolsFigma libraries App provider ESLint plugin Storybook addon Stylelint plugin UI Styling Standard

Under Construction!

Visitor Counter

Welcome to the Atlassian Design System!