Atlassian Design System· Design Systematlassian.design

Design System Swatch

Atlassian Design System

Enterprise SaaS vocabulary for Jira/Confluence/Trello/Bitbucket — Atlassian Sans variable-font weight 653, semantic ds-token naming, electric blue brand, dual-layer shadows, and accessibility-first defaults.

Color Palette32 tokens

background#ffffff

surface#ffffff

surface-muted#f8f9fa

primary#1868db

brand-boldest#1c2b42

brand-subtlest#e8f1ff

brand-subtlest-hovered#cfe1fd

brand-pressed#adcbfb

ink#101214

ink-inverted#ffffff

text-secondary#1e1f21

text-label#44546f

text-muted#505258

text-disabled#7d818a

text-placeholder#b3b9c4

on-background#101214

on-surface#101214

on-primary#ffffff

border#dcdfe4

saffron#fca700

green#6a9a23

magenta#af59e1

purple#af5eff

orange#e06c00

teal#206a83

blue-bolder#123263

danger#ae2e24

warning-text#9e4c00

shadow-near#cccccc

shadow-soft#dadbdc

shadow-medium#e8e9eb

shadow-modal#ebebeb

Buttons

TypographyGoogle Font

Figtreebrand uses Atlassian Sans

display-giant

The quick brown fox

112px · 700 · 0px

display-hero

The quick brown fox

68px · 700 · 0px

display-large

The quick brown fox

44px · 700 · 0px

display-charlie

The quick brown fox

32px · 653 · 0px

heading-1

The quick brown fox

40px · 653 · 0px

IconsPh

Set: Ph · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Atlassian Design System

Enterprise SaaS vocabulary for Jira/Confluence/Trello/Bitbucket — Atlassian Sans variable-font weight 653, semantic ds-t…

Design System

none

badge

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Atlassian Design System

Enterprise SaaS vocabulary for Jira/Confluence/Trello/Bitbucket — Atlassian Sans variable-font weight 653, semantic ds-token naming, electric blue brand, dual-layer shado…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesign SystemAtlassian Design System

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Atlassian Design System.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Atlassian Design System tokens
export const theme = {
  primary: "#1868db",
  radius: "8px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

The Atlassian Design System is the enterprise design vocabulary that powers Jira, Confluence, Trello, and Bitbucket — four products serving 250,000+ organizations, with a design sy…

Atlassian Design System · Design System