mdshop
Back to designs
A

Design System inspired by Atlassian

Team tools. Blue brand, illustration-heavy, enterprise-friendly.

Usage
npx getdesign@latest add atlassian

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
7
Bookmarked
0
Not an official Atlassian design system. A curated starting point for building Atlassian-like UIs with your AI coding agent.

Team tools. Blue brand, illustration-heavy, enterprise-friendly.

Preview
atlassian.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF ATLASSIAN

Team tools. Blue brand, illustration-heavy, enterprise-friendly.

Explore the systemView tokens

Color Palette

Team tools. Blue brand, illustration-heavy, enterprise-friendly.

Primary
Atlassian Blue
#0052cc
Brand color
Navy
#172b4d
Brand color
Teal
#00b8d9
Brand color
Purple
#6554c0
Brand color
Green
#36b37e
Brand color
Yellow
#ffab00
Brand color
Red
#ff5630
Brand color
Light BG
#fafbfc
Brand color
Border
#dfe1e6
Brand color

Typography

A type system inspired by Atlassian.

Charlie Display
Charlie Display, Charlie Display
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Atlassian.

Not detected on this URL

Components

Other component primitives mapped from the Atlassian spec.

Not detected on this URL