# Atlassian — Design System
> Atlassian Design System. Enterprise-blue primary with navy text, accessible status pills, moderate density.
- **Canonical:** https://uiuxskills.com/library/atlassian
- **Source:** https://atlassian.design
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** Apache-2.0
- **Last updated:** 2026-06-09T23:13:13.698Z

---

---
version: alpha
name: Atlassian Design System
description: >-
  The official design system for Atlassian products, focusing on cohesive teamwork and human-centric
  AI experiences.
tone: Professional, collaborative, clear, and human-centric.
color-scheme: light
colors:
  primary: "#1868DB"
  secondary: "#F87168"
  surface: "#FFFFFF"
  surface-dim: "#F4F5F7"
  surface-container: "#EBECF0"
  on-surface: "#051524"
  on-primary: "#FFFFFF"
  error: "#DE350B"
  success: "#36B37E"
  outline: "#DFE1E6"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 3px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0747A6"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0747A6"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.1)
  md: 0 4px 8px rgba(0,0,0,0.12)
  lg: 0 8px 16px rgba(0,0,0,0.15)
---

## Overview

Atlassian's visual identity is clean, functional, and highly structured, emphasizing clarity and accessibility. It balances professional enterprise utility with a warm, human-centric approach to modern teamwork.

## Colors

The color strategy focuses on high-contrast, functional palettes that prioritize readability and clear status communication.

*   Primary (#1868DB): Core brand blue used for primary actions.
*   Secondary (#F87168): Accent red used for highlights and alerts.
*   Surface (#FFFFFF): Primary background color.
*   Surface-dim (inferred) (#F4F5F7): Subtle background for containers.
*   Surface-container (inferred) (#EBECF0): Container background for cards.
*   On-surface (inferred) (#051524): Primary text color.
*   On-primary (inferred) (#FFFFFF): Text color on primary buttons.
*   Error (inferred) (#DE350B): Semantic error color.
*   Success (inferred) (#36B37E): Semantic success color.
*   Outline (inferred) (#DFE1E6): Border and divider color.

## Typography

The system utilizes a clean, sans-serif font family to maintain a professional and accessible tone across all interface levels.

*   Display-lg (inferred): Large hero headings.
*   Display-md (inferred): Secondary headings.
*   Headline-lg (inferred): Section titles.
*   Headline-md (inferred): Sub-section titles.
*   Body-md (inferred): Standard body text.
*   Label-md (inferred): Button labels.

## Layout

The system utilizes a responsive grid with consistent horizontal and vertical spacing, employing an 8px base unit (e.g., `spacing.sm` is 8px, `spacing.md` is 16px). The page pattern follows a logical flow: nav, hero, features, news, ai-patterns, system-overview, careers, and footer. The hero section features a centered composition, and the layout is mobile-first, with navigation collapsing into a drawer on smaller viewports.

## Elevation & Depth

Depth is conveyed through subtle shadows that differentiate interactive elements from the background. Values are inferred based on standard enterprise design patterns.

*   Elevation.sm: Card lift.
*   Elevation.md: Dropdown or popover containers.
*   Elevation.lg: Modal or drawer overlays.

## Shapes

The system uses a moderate corner radius philosophy to balance a friendly, approachable feel with professional precision. 

Components generally default to `rounded.md` (6px) for cards and containers, while smaller interactive elements like input fields utilize `rounded.sm` (3px). This creates a cohesive, soft-edged aesthetic without appearing overly rounded or informal.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use `{colors.primary}` with `{typography.label-md}` text, while secondary buttons use `{colors.surface-container}`. Use primary buttons for the main action on a page and secondary buttons for supporting actions.

### Card
Cards use `{colors.surface}` with `{rounded.md}` corners and `{colors.outline}` borders. Use these to group related content or provide a contained space for information.

### Input Field
Input fields feature `{rounded.sm}` corners and a default `{colors.outline}` border. When focused, the border should transition to `{colors.primary}` to provide clear feedback.

### Badge
Badges use `{colors.surface-container}` for neutral status and semantic colors like `{colors.error}` or `{colors.success}` for alerts. Use these for small labels or status indicators.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.primary}` for text that is not a link or action. |
| Apply `{rounded.md}` to all card components for consistency. | Avoid using `{rounded.full}` on standard content cards. |
| Use `{colors.outline}` for all subtle dividers and borders. | Never mix multiple border styles on the same component. |
| Ensure `{typography.body-md}` is used for standard paragraph content. | Do not use `{typography.display-lg}` for body text. |
| Use `{colors.error}` exclusively for destructive actions. | Avoid using `{colors.secondary}` for primary navigation elements. |
| Maintain `{spacing.md}` between related UI elements. | Do not reduce spacing below `{spacing.sm}` in dense layouts. |
| Use `{input-field-focus}` to show active states. | Do not use `{colors.surface-dim}` for primary button backgrounds. |
| Use `{elevation.md}` for popovers and dropdowns. | Do not use `{elevation.lg}` for static content cards. |

## Content Style

CTA labels should use imperative verbs in sentence case, kept concise (e.g., "Get started"). This maintains a clear, action-oriented flow for the user.

Headings are phrased to be benefit-driven and professional, focusing on the value provided to the user rather than purely descriptive titles.

Copy density is designed to be scannable. Use short paragraphs, frequent headers, and lists to break up information and maintain a clean, readable rhythm.

## Imagery & Icons

The imagery style is mixed, combining clean, high-quality photography with functional, stroke-based iconography. Icons should maintain a rounded, consistent weight to align with the system's friendly yet professional tone. Avoid overly complex illustrations; prioritize clarity and utility in all visual assets.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Atlassian, a minimal enterprise design system with a professional, collaborative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or raw font sizes.
2. Respect the components block exactly. Buttons, cards, inputs, and badges have defined variants; do not invent new variants or states the spec does not list.
3. Apply the shape philosophy: `{rounded.md}` for cards and containers, `{rounded.sm}` for inputs and small interactive elements. Do not apply `{rounded.full}` to content cards.
4. Follow the elevation scale semantically: `{elevation.sm}` for card lift, `{elevation.md}` for dropdowns and popovers, `{elevation.lg}` for modals and drawers only.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for any interactive component where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use the 8px-base spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, margin, and gap values.
- Write CTA labels in sentence case using imperative verbs, per the Content Style section.
- Maintain minimum `{spacing.sm}` between elements in dense layouts.

**Must NOT:**
- Invent colors, radii, font sizes, or shadows not defined in the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{colors.primary}` to non-interactive text, or `{colors.secondary}` to navigation elements.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source exists (Storybook, theme file), those values take precedence.
- For ambiguous backgrounds, default to `{colors.surface}`; for container backgrounds, use `{colors.surface-dim}` or `{colors.surface-container}`.
- For unspecified breakpoints, follow mobile-first layout with one breakpoint at 768px.
- Prefer composing existing spec components over introducing any new token.