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
version: alpha name: Atlassian description: "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."
colors: primary: "#0052CC" on-primary: "#ffffff" primary-hover: "#0747A6" secondary: "#0065FF" ink: "#172B4D" ink-muted: "#6B778C" canvas: "#ffffff" surface-1: "#F4F5F7" surface-2: "#EBECF0" border: "#DFE1E6" jira-blue: "#0052CC" confluence-teal: "#00B8D9" trello-blue: "#0079BF" bitbucket-blue: "#0747A6" success: "#00875A" warning: "#FF8B00" danger: "#DE350B" discovery: "#6554C0"
typography: display: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.01em body: fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0
spacing: base: 8px scale: [2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80]
radius: sm: 3px md: 4px lg: 8px pill: 9999px
shadows: card: "0 1px 1px rgba(9,30,66,0.25), 0 0 0 1px rgba(9,30,66,0.08)" elevated: "0 4px 8px -2px rgba(9,30,66,0.25), 0 0 0 1px rgba(9,30,66,0.08)" overlay: "0 8px 16px -4px rgba(9,30,66,0.25), 0 0 0 1px rgba(9,30,66,0.06)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.23, 1, 0.32, 1)
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.