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.
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.
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.
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.
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 Resources and 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.
How to contact us.
Was this page helpful?
We use this feedback to improve our documentation.