Atlassian Design System

# Atlassian Design System

## Overview

Atlassian's design language is built around **clarity**, **consistency**, and **purposeful density**. It serves millions of users across products like Jira, Confluence, Trello, and Bitbucket.

## Brand Colors

| Token | Hex | Usage |
|-------|-----|-------|
| Blue 700 | `#1868DB` | Primary actions, links, focus states |
| Blue 800 | `#0055CC` | Hover states |
| Blue 900 | `#09326C` | Active/pressed states |
| Neutral 0 | `#FFFFFF` | Surface backgrounds |
| Neutral 100 | `#F7F8F9` | Secondary backgrounds |
| Neutral 200 | `#DCDFE4` | Borders, dividers |
| Neutral 800 | `#172B4D` | Primary text |
| Neutral 600 | `#44546F` | Secondary text |

### Status Colors

| Token | Hex | Usage |
|-------|-----|-------|
| Green 700 | `#22A06B` | Success states |
| Yellow 600 | `#B38600` | Warning states |
| Red 700 | `#CA3521` | Error states |
| Purple 700 | `#6E5DC6` | Discovery, new features |
| Teal 600 | `#1D7F8C` | Information states |

## Typography

**Primary Font:** Atlassian Sans (proprietary), falling back to system fonts

**Monospace:** Atlassian Mono, Menlo, Monaco, Consolas, monospace

### Type Scale

| Role | Size | Line Height | Weight |
|------|------|-------------|--------|
| Display | 35px | 40px | 500 |
| Heading 1 | 29px | 32px | 600 |
| Heading 2 | 24px | 28px | 500 |
| Heading 3 | 20px | 24px | 500 |
| Body | 14px | 20px | 400 |
| Small | 12px | 16px | 400 |

## Spacing

Based on 8px grid: space.100 = 8px, space.200 = 16px, space.300 = 24px, space.400 = 32px

## Do's and Don'ts

### Do's
- Use Blue 700 for primary interactive elements
- Maintain 4.5:1 contrast ratio for text
- Use consistent spacing from the 8px grid

### Don'ts
- Don't use color alone to convey meaning
- Don't use custom fonts outside the type system
- Don't create custom button styles

## Resources

- [Atlassian Design System](https://atlassian.design/)