Atlassian Design System Brand Book
Design Blueprint · v1.0 · scanned

The Atlassian Design System
design system.

Bold blue team-first — confident verbs, semantic color roles, and a system built for 350K teams.

Browse components Color tokens
boldoptimisticteam-firststructuredAI-forwardconfident
#2563EB
★
primary
01

Foundations

Logomark

Atlassian Design System

Disk + wordmark. Always pair with at least 8px of clearspace. Use #2563EB background or invert for dark surfaces.

Voice

  • +Bold, optimistic, team-first
  • +AI-forward — humans-plus-AI partnership
  • +Confident verbs (unleash, ship, deliver)
  • −jargon-as-drama
  • −hype
  • −FOMO

Design principles

  • →Bold blue primary; semantic roles do the rest.
  • →8px spacing base with .025/.050/.075 sub-steps.
  • →Elevation = surface + shadow pairing (raised, overlay, overflow).
  • →Yellow needs warning.inverse for AA contrast on bold yellow.

Vibe · inspired by Atlassian Design System

Atlassian Design System reads as cheerfully serious — Atlassian Blue does the headlining, with a full suite of saturated ramps (Blue/Teal/Green/Lime/Yellow/Orange/Red/Magenta/Purple) at 100-1000 steps for every status. Charlie Sans handles marketing brand moments; Atlassian Sans/Mono live inside the product. Speaks in confident plural pronouns: 'unstoppable teams', 'AI agents and humans'. Feels optimistic without being saccharine.

Comparable to: Atlassian (Jira, Confluence, Trello), Asana, Monday.com

02

Color system

Primary scale

50
mix
100
mix
200
mix
300
mix
400 ★
#2563EB
500
mix
600
mix
700
mix
800
mix

Neutrals

White
#FFFFFF
Bg
#FFFFFF
Surface
#F7F8FA
Border
#091E4224
Muted
#6B7280
Ink
#172B4D

Semantic

Success
#10B981
Warning
#F59E0B
Danger
#EF4444
Info
#60A5FA

Brand accents

Primary
#2563EB
Secondary
#7C3AED
Accent
#10B981
Highlight
#F59E0B
03

Typography

Display · 64 / 0.95 / -0.03 / 800
Unleash your teams and their agents.
H1 · 44 / 1.05 / -0.03 / 700
Better teamwork by design.
H2 · 30 / 1.15 / -0.02 / 700
Transform how your teams work.
H3 · 20 / 1.3 / -0.01 / 700
Real-time observability for every layer.
Lead · 18 / 1.55 / 400
A friendly intro paragraph that sits below a hero headline and explains the value in plain language.
Body · 15 / 1.55 / 400
Standard body copy. Most page content sits at this size. Generous line height keeps long passages readable, and the typeface reads as bold.
Caption · 12 / 1.4 / 500 · uppercase
Section label · metadata · table headers
Mono · 13 / 1.5 / 500
// sample

Weights

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800
04

Tokens · spacing, radius, shadow

Spacing

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px

Radius

2 · sm
6 · md
8 · lg
12 · xl
16 · 2xl
∞ · pill

Shadow

sm
card
lift
05

Components

Buttons · variants

Buttons · sizes

Buttons · with icon

Form controls

This value isn't valid.

Precision

Advanced

Anonymous metrics

Help improve the product.

Slider

200

Total iterations. Use 0 to run unlimited.

Dropdown menus

Closed (trigger)

Open

Account
Profile
Workspace · atlassian-design
Settings
Keyboard shortcuts ⌘K
Sign out

Badges & tags

Active Pro Done Beta Deprecated New Running Live v1.0.0 atlassian-design

Avatars

JR
DK
AL
MP
SL
JR
DK
AL
+4
DK

KPI cards

Unstoppable teams

350K+

Wasted engineering time redirected

85%

Acceleration in reporting

40x

vs. last period

Hours saved per week

100+

this month

Feature cards

Data tokens

One source of truth: colors, type, spacing, radius, shadow. Generated artifacts derive from a single JSON.

Components

Buttons, inputs, cards, tables, alerts — every recipe keyed to the brand's CSS variables.

Observability

Real-time charts, status, and KPIs. Live data layouts that survive long sessions and dense tables.

Complex card · domain object

Running #atlassian-design-482

Live deployment · production cluster

Started 14m ago · 7.5k / 12k steps · ETA 9m

Loss

1.04

Throughput

2,412

Memory

14.2 GB

Learning rate

5e-5

62%7,520 / 12,000

Pricing cards

Free

For tinkering and learning.

$0/ month
  • ✓1 project
  • ✓Community support
  • ✓Open-source core
Most popular

Pro

For serious work.

$49/ month
  • ✓Up to 10 projects
  • ✓Priority support
  • ✓Advanced features

Enterprise

For teams at scale.

Custom
  • ✓Unlimited everything
  • ✓Dedicated success
  • ✓SLA + SSO + audit

Data table

Recent activity

42
ID Name Status Metric Owner Updated
#482production-deploy Running1.04
JR
Jon R.
14m ago
#481data-pipelineDone0.87
DK
Daniel K.
2h ago
#480backfill-2026Paused1.22
AL
Alex L.
5h ago
#479notificationsFailed—
MP
Maya P.
1d ago
#478scratchDraft—
JR
Jon R.
2d ago
Showing 1–5 of 42
…

Alerts & banners

Deployment complete.

All checks passed. Live in production after 14m 28s.

Memory approaching limit.

14.2 / 16 GB used. Consider scaling up before the next batch.

Run #479 failed.

CUDA out of memory at step 312. View logs for full stack trace.

New version available.

v1.1.0 dropped today. Drop-in compatible with your current config.

Pro

Unlock unlimited projects, priority support, and the full team workspace.

Tabs

Underline

Pill (segmented)

Chip filter

Modal / dialog

Confirm deployment?

Atlassian Design System v1.0 will go live to production. Estimated 14 minutes.

$ atlassian-design deploy --tag v1.0 --env production

Toasts

Run started

#482 · production cluster

!

Checkpoint saved

step-7000.bin · 2.1 GB

Tooltips

Hover me Tooltip on top
With shortcut Save⌘S
Branded Recommended

Progress & loaders

Linear

Build62%
Download28%
Memory89%

Circular

62%

Processing

7,520 of 12,000

ETA 9m 22s

Skeleton

Code & terminal

main.ts TS 
import atlassian from "atlassian-design"

const result = await atlassian.deploy({
  env: "production",
  tag: "v1.0",
  timeout: 3600,
})

// Deploy in seconds
● ~/atlassian-design $ zsh 
$ atlassian-design deploy --tag v1.0
  ✓ Validated config (4.0K)
  ✓ Resolved dependencies (24)
  ⚡ Starting deployment…

  step    elapsed  status
  ────    ───────  ──────
  0500    0:14     ✓
  1000    0:28     ✓
  7520    9:22     ← live

Charts

Throughput

requests / sec

7d

Loss

live run

▼ 0.38

Allocation

  • Compute 9.2G
  • Storage 3.2G
  • Network 1.8G

Empty state

No items yet

Kick off your first project to see it appear here. We'll keep you posted as things happen.

Breadcrumbs & pagination

…
06

Patterns · app shell

Dashboard

Good afternoon, Jon

Unstoppable teams

350K+

Active

3

Hours saved per week

100+

Recent activity

07

Usage · do & don't

Do
  • ✓Use color.background.brand.bold for primary actions — never raw blue hex.
  • ✓Reach for radius.medium (6px) and space.200 (16px) as the workhorse tokens.
  • ✓Use Banner for page-level, SectionMessage for inline, Flag for toast.
Don't
  • ✗Don't use Charlie Sans inside the product UI — it's marketing-only.
  • ✗Don't put white text on bold yellow — use warning.inverse.
  • ✗Don't hard-code hex — Atlaskit ships light and dark themes.

Best for

  • Team collaboration tools, project management, service desk
  • B2B SaaS targeting larger organizations (50+ users)
  • Workflow tools that need clear status semantics across many states
  • AI-augmented productivity apps

Avoid for

  • Solo-creator tools — feels too team-centric
  • Editorial / lifestyle brands
  • Dark-first developer tools (Jira-y associations may not fit)
08

Accessibility

Contrast ratios. WCAG AA target ≥ 4.5 for body text, ≥ 3 for large text or UI components.

Foreground Background Contrast Use
#172B4D#FFFFFF14.1 · AAABody, headings
#6B7280#FFFFFF4.83 · AASecondary text
#2563EB#FFFFFF5.17 · AABrand actions (button bg)
#FFFFFF#2563EB5.17 · AABrand button (text on primary)
#EF4444#FFFFFF3.76 · AA LargeDanger states