# Atlassian Design System (Atlassian Design System)

> A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.

- IndexStyle No.545 — https://indexstyle.org/styles/atlassian-design-system
- Kind: Style · Family: Platform Screen Languages · Era: 2012–
- Mood: Trust, Technique, Intimacy
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- White and pale gray layers with blue primary actions
- Rounded cards and lozenge-shaped status labels
- Clear divisions among sidebar, table and detail pane
- Color, spacing, radius and elevation controlled by tokens

## Best used for

- Work-management products where people move repeatedly between lists and details
- Keeping a trusted family resemblance across products without hiding their complexity

## Composition recipe

- Typography & lettering: Fix the steps for headings, body and labels; keep status names short inside lozenges.
- Layout & structure: Keep navigation, list and detail roles stable; use token multiples for spacing.
- Material & texture: Use white and pale gray as the base, blue for primary actions and one semantic meaning per status color.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #0C66E4
- Text and outlines: #172B4D

## What to avoid

Too many cards and status labels give every component equal force and hide the work that matters next.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: White and pale gray layers with blue primary actions
- [ ] Visible in the piece: Rounded cards and lozenge-shaped status labels
- [ ] Visible in the piece: Clear divisions among sidebar, table and detail pane
- [ ] Visible in the piece: Color, spacing, radius and elevation controlled by tokens
- [ ] The layout follows: Keep navigation, list and detail roles stable; use token multiples for spacing.
- [ ] The lettering follows: Fix the steps for headings, body and labels; keep status names short inside lozenges.
- [ ] The material and surface follow: Use white and pale gray as the base, blue for primary actions and one semantic meaning per status color.
- [ ] The colour relation holds: #FFFFFF as ground, #0C66E4 carrying the style, #172B4D for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **GitHub Primer (GitHub Primer)** — GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior. → https://indexstyle.org/styles/github-primer
- **Corporate Memphis (コーポレート・メンフィス)** — Explains digital services as safe and friendly through simplified figures, geometry and soft color. → https://indexstyle.org/styles/corporate-memphis

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=atlassian-design-system+github-primer

## Further study

- Atlassian design principles
- Status lozenges
- Spacing, radius and elevation tokens

## Reference works

- Atlassian Design System — About — https://atlassian.design/get-started/about-atlassian-design-system

## Source of record

- Atlassian Design System — About — https://atlassian.design/get-started/about-atlassian-design-system

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/atlassian-design-system
- Image-generation prompt (legally clean): https://indexstyle.org/styles/atlassian-design-system/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)