About Atlassian Design
Overview
Atlassian Design is the official design system powering all Atlassian products. It provides a unified design language across all collections so every app feels cohesive and familiar, empowering teams through one design language.
The system covers foundations like color, typography, iconography, and grid, along with components, patterns, and tools. It is built for designers and engineers working within the Atlassian ecosystem who need to create consistent, accessible experiences.
Key Benefits
- Every app across all collections feels cohesive and familiar through one unified design language.
- Teams are empowered to build beautiful, accessible experiences using shared foundations like color, typography, iconography, and grid.
- Designers get access to AI-specific patterns and Rovo UI components for building AI-powered experiences.
- The system includes accessibility tokens and design tokens for consistent theming across products.
- Components are tracked with status indicators: off track, at risk, on track, and paused for transparency.
How It Works
Designers and engineers start by exploring the foundations — color, typography, iconography, and grid — to understand the design language. They then browse components and patterns, apply design tokens for consistent theming, and use tools like Atlaskit and Forge UI Kit to build interfaces. The system is publicly available with documentation, and teams can track component release phases through status indicators.
Use Cases
- Product designers at Atlassian use the design system to maintain visual consistency across Jira, Confluence, and other tools.
- Front-end engineers building Atlassian apps use Atlaskit components to speed up development.
- Third-party developers creating Forge apps use the Forge UI Kit to match Atlassian's look and feel.
- Design system contributors track component health through status indicators like on track, at risk, and paused.
- Accessibility specialists use design tokens and accessibility patterns to ensure inclusive experiences.
Why Choose This Product
The Atlassian Design System is best suited for teams building products within the Atlassian ecosystem, including internal product teams, third-party app developers, and design system contributors. It is publicly available with documentation, components, and tools, and is licensed under Atlassian's standard terms.
Atlassian Design Pros & Cons
- Unified design language across all Atlassian products
- Publicly available with full documentation
- Includes AI-specific design patterns and Rovo UI
- Design tokens for consistent theming and accessibility
- Component status tracking for release transparency
Key Features
Design Foundations
Provides color, typography, iconography, and grid systems as the core building blocks for consistent Atlassian interfaces.
Component Library
Offers a library of reusable UI components with status tracking across release phases like on track, at risk, and paused.
Design Tokens
Includes design tokens for color, elevation, border, and icon properties to enable consistent theming across products.
Accessibility Patterns
Provides accessibility tokens and patterns to help teams build inclusive experiences for all users.
AI Design Patterns
Offers patterns and guidance for designing AI-powered experiences within the Atlassian ecosystem.
Atlaskit Library
Provides a React-based component library for building Atlassian-style interfaces directly in code.
Forge UI Kit
Offers a UI kit for building Forge apps that match Atlassian's look and feel.
Rovo UI System
Provides the design system powering Rovo, Atlassian's AI-powered teamwork tool.
Atlassian Design Pricing
Pricing extracted from the product website and may change. Check the source for current details.