Back to Library
A

Atlassian

Atlassian

Visit Website

企业协作平台(Jira/Confluence)。深蓝色系,功能密集型布局,企业级设计语言

深蓝品牌Jira看板Confluence文档企业级功能密集

Color Palette

primary
secondary
background
surface
text
muted
border

Typography

Heading FontCharlie, system-ui, sans-serif
Body FontCharlie, system-ui, sans-serif
Base Size14px
Line Height1.5
Weights400, 500, 600, 700

Heading Scale

h1Atlassian Heading
h2Atlassian Heading
h3Atlassian Heading
h4Atlassian Heading

DESIGN.md

# Atlassian Design System

## Visual Theme & Atmosphere
企业协作平台(Jira/Confluence)。深蓝色系,功能密集型布局,企业级设计语言

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #0052CC | Brand color |
| Secondary | #0065FF | Hover/secondary |
| Background | #FFFFFF | Main canvas |
| Surface | #F4F5F7 | Cards, panels |
| Text | #172B4D | Primary text |
| Muted | #6B778C | Secondary text |
| Border | #DFE1E6 | Dividers |

## Typography Rules
- **Heading Font**: Charlie, system-ui, sans-serif
- **Body Font**: Charlie, system-ui, sans-serif

- **Base Size**: 14px
- **Line Height**: 1.5
- **Weights**: 400, 500, 600, 700

## Component Stylings
- **Buttons**: Primary accent color, clean rounded style
- **Cards**: Surface background, subtle borders, hover states
- **Navigation**: Clean, brand-colored indicators

## Agent Prompt Guide
Use Atlassian's design language: 企业协作平台(Jira/Confluence).
Primary color #0052CC on #FFFFFF background.
Typography: Charlie.

Frequently Asked Questions

What is Atlassian's design style?

企业协作平台(Jira/Confluence)。深蓝色系,功能密集型布局,企业级设计语言

What is Atlassian's primary color?

Atlassian uses #0052CC as primary color, #FFFFFF for background, and #172B4D for text.

What fonts does Atlassian use?

Heading font: Charlie, system-ui, sans-serif. Body font: Charlie, system-ui, sans-serif. Base size: 14px.

How to use Atlassian design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Atlassian's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems