Atlassian
An enterprise software suite built on the Atlassian Design System with a distinctive blue (#0052CC / #0065FF) family across a white and light-gray canvas. The system serves a complex multi-product ecosystem (Jira, Confluence, Trello, Bitbucket) with a unified token layer that provides consistency across radically different product contexts — from Kanban boards to wikis to code review. Typography uses Atlassian's Charlie Display for marketing and system UI fonts in product. The visual language is enterprise-serious but not corporate-cold: Jira's gradient product icon and Confluence's colorful page headers inject warmth into otherwise utilitarian surfaces.
Color Tokens
1. Visual Theme & Atmosphere
Atlassian built design systems before the term was mainstream. The current system (ADS) provides a single source of truth for four major products that look and feel like siblings. The Jira board is the canonical enterprise UI: white canvas, blue headers, color-coded status lozenge, dense information hierarchy. It's unapologetically utilitarian and beloved by the engineering teams who live in it all day.
2. Color System
ADS blue family is the anchor:
- Primary: #0052CC — Jira's main color, button primary, active states
- Interactive: #0065FF — hover/focus states, links
- Navy ink: #172B4D — the signature Atlassian text color, dark navy rather than true black
- Muted: #6B778C — secondary labels, subtask text, metadata
- Surfaces: #F4F5F7 / #EBECF0 — very light gray, low-contrast surface differentiation
- Semantic: Success #00875A, Warning #FF8B00, Danger #DE350B, Discovery #6554C0 (Jira-purple)
- Product accents: Each Atlassian product has its own accent; Confluence teal, Trello sky, Bitbucket navy
3. Typography
Charlie Display (Atlassian's custom typeface) on marketing. Product UIs use system fonts at 14px — the choice to go slightly below the conventional 16px reflects the data-density requirement of project management software. Labels, statuses, and metadata all need to coexist legibly.
4. Components & Patterns
- Lozenge: Pill-shaped status badge — the most recognizable Atlassian component; colored by status category
- Jira board: Swimlane or Kanban view, drag-and-drop cards, column headers with issue count
- Confluence page: Wiki editor with slash-command palette, breadcrumb navigation, page tree sidebar
- Issue view: Right-panel detail view with fields, comments timeline, assignee picker
- Shadow system: Distinctive "card + ring" shadow using two-layer rgba — recognizable across products
- Inline editing: Click-to-edit field pattern used throughout — no save buttons for individual fields
5. Spacing & Layout
Dense. Jira board cards: 8px padding, 4px gap. Issue list: compact table rows. Confluence pages: 960px content width, generous margins. The ADS spacing scale goes down to 2px for micro-adjustments.
6. Motion & Interaction
Atlassian motion spec: functional and quick. Card drag has ghost + drop zone highlight. Status transitions animate the lozenge color change. Modals slide up with ease-out. The goal is enterprise efficiency — no delight animation.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for