DESIGN.md — Atlassian

Overview

Atlassian's design system (ADS) serves a family of products — Jira, Confluence, Trello, Bitbucket — through a shared visual foundation. Blue is the binding color, used across all products for primary actions. The system is rigorously token-based to support theming across the product suite.

Colors

Primary Palette

Typography

Components

Jira Issue Card

• Issue key (bold blue link), summary, status lozenge
• Assignee avatar, priority icon, story points
• Draggable in board view

Navigation Bar

• Blue top bar across all products
• Product switcher (9-dot grid), search, notifications, avatar
• Height 56px, sticky

Lozenge

• Status indicator: To Do (gray), In Progress (blue), Done (green)
• Rounded pill shape, uppercase 11px text
• Moved, declined states in yellow and red

Do's and Don'ts

Do

• Use ADS tokens — never hard-code hex values
• Reuse lozenges for all status indicators across products
• Keep navigation consistent between Jira, Confluence, and Bitbucket

Don't

• Don't create product-specific components if an ADS equivalent exists
• Don't use blue for links and buttons in the same visual cluster
• Don't override the top navigation bar styling per product