Design
Design guidelines, Figma libraries, and plugins.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.
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.
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 plugin to 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.
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.