[Audit 011] Atlassian Design System

Design Tokens · Colors

Atlassian 采用 10 级灰度系统 + 语义化状态色，品牌蓝 #0052CC 为核心。

#0052CC

#0065FF

#36B37E

#FFAB00

#FF5630

#00B8D9

Token Name	Value	Usage
--atlassian-brand	#0052CC	Primary actions
--atlassian-success	#36B37E	Success states
--atlassian-warning	#FFAB00	Warning states
--atlassian-danger	#FF5630	Error/danger
--atlassian-gray-9	#172B4D	Primary text

Design Tokens · Spacing

8px 网格系统，从 0 到 48px 的 8 档间距。

/* Spacing Scale - 8px Grid */
:root {
    --atlassian-space-025: 2px;
    --atlassian-space-050: 4px;
    --atlassian-space-100: 8px;
    --atlassian-space-150: 12px;
    --atlassian-space-200: 16px;
    --atlassian-space-300: 24px;
    --atlassian-space-400: 32px;
    --atlassian-space-500: 40px;
    --atlassian-space-600: 48px;
}
                

2px

4px

8px

16px

Design Tokens · Elevation

三层Elevation 系统，用于区分层级和深度。

Elevation 1

Elevation 2

Elevation 3

/* Elevation / Shadows */
:root {
    --atlassian-shadow-1: 0 1px 1px rgba(9, 30, 66, 0.25);
    --atlassian-shadow-2: 0 2px 4px rgba(9, 30, 66, 0.25);
    --atlassian-shadow-3: 0 4px 8px rgba(9, 30, 66, 0.25);
}
                

Design Tokens · Motion

150ms 快速响应，300ms 过渡动画，符合人机交互最佳实践。

/* Animation Timing */
:root {
    --atlassian-duration-quick: 150ms;
    --atlassian-duration-slow: 300ms;
    --atlassian-ease-out: cubic-bezier(0.4, 0, 1, 1);
    --atlassian-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Usage */
.button {
    transition: background var(--atlassian-duration-quick) var(--atlassian-ease-out);
}
                

Responsive Grid

三档断点：移动端 / 平板 / 桌面。移动优先设计。

Breakpoint	Width	Columns
small	< 768px	Auto (1 col)
medium	768-1024px	12 col
large	> 1024px	12 col

/* Responsive Grid - 12 Column */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Mobile: Single column */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
                

Typography

Font: System fonts (Segoe UI, Roboto) — 注重平台一致性
Scale: 12/14/16/20/24/32/40px — 8px 基线
Weight: 400/500/600 — 简洁层次
Line-height: 1.428 (20px/14px) — 最佳阅读
Focus Ring: 2px 蓝色轮廓 — 无障碍友好

Component Preview

Atlassian 组件风格：简洁、功能性、高对比度。

/* Button Variants */
.btn-primary {
    background: var(--atlassian-brand);
    color: #FFFFFF;
    border-radius: 3px;
    padding: 8px 16px;
}

.btn-primary:hover {
    background: var(--atlassian-brand-hover);
}

.btn-primary:focus {
    box-shadow: var(--atlassian-focus-ring);
}
                

Design Philosophy

团队协作优先： Atlassian 的产品本身就是团队协作工具，因此 ADG 强调一致性、可预测性和效率。每个组件都经过数千名设计师和开发者使用验证。
渐进式复杂度： 基础组件简单，组合后可以构建复杂界面。这符合 Jira/Confluence 等工具的需求——从简单任务到复杂工作流。
企业级可靠性： 强调无障碍 (WCAG 2.1 AA)、多语言支持、RTL 布局。这是服务全球大企业的基础。
数据驱动决策： Atlassian 有强大的产品分析团队，每个设计决策都有 A/B 测试支持。这不是艺术，是科学。

The Formula

Enterprise Trust = Consistency × Speed × Reliability

企业信任 = 一致性 × 速度 × 可靠性

Atlassian 不追求"漂亮"，追求"可信赖"。当 Jira 承载全球数百万团队的工作流时，设计的稳定性比创新更重要。