DesignMD
Discover
Back to Discover

Atlassian

Teamwork tools that unlock potential

atlassian.com
5 colors
27 components
Charlie Display, -apple-system, Segoe UI, System
Apr 6, 2026
Website Preview
Atlassian screenshot
Colors
Primary
#0052CC

Primary blue, CTAs

#172B4D

Dark text

#FFFFFF

Page background

#F4F5F7

Section backgrounds

#6B778C

Secondary text

Typography
Charlie Display
Role
SizeWeightHeight
Display
36px700
Heading
24px600
-apple-system, Segoe UI
Role
SizeWeightHeight
Body
14px400
System
Role
SizeWeightHeight
Small
12px400

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

TokenHexUsage
color-brand#0052CCPrimary blue, CTAs
color-text#172B4DDark text
color-bg#FFFFFFPage background
color-surface#F4F5F7Section backgrounds
color-muted#6B778CSecondary text

Typography

RoleFamilySizeWeight
DisplayCharlie Display36px700
HeadingCharlie Display24px600
Body-apple-system, Segoe UI14px400
SmallSystem12px400

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

Want a DESIGN.md like this for your own website?