Atlassian Design System Deep Dive

1. Brand Overview

Atlassian builds collaboration tools for teams—Jira, Confluence, Trello, Bitbucket—software that needs to work for engineering-heavy audiences but also appeal to non-technical teams. That duality shows in their design system: it’s professional and structured, but never cold. The visual language leans on a clear, disciplined grid, predictable spacing, and a corporate-yet-approachable typographic voice. The result feels engineered, but with enough friendliness to keep it human.

The color palette is anchored by a strong, saturated blue (#1868db, plus token variants like #0C66E4), which carries the brand's tech-forward identity. It's not playful in the way a consumer startup might be, but it’s also not as severe as a finance brand. This blue says: “We’re serious about what we do, but we’re here to help your team succeed.”

Typography is custom — the Charlie Display and Charlie Text families — designed for high legibility in UI contexts, but with subtle quirks that keep it from feeling generic. The type scale is broad: massive 80px headlines for marketing hero sections, down to tight 11.5px captions in UI chrome. Weights shift between 400, 500, 600, 700, and 800, giving them flexibility to create hierarchy without resorting to color changes.

Spacing is built on an 8px base, but the system isn’t dogmatic: you’ll see 1px, 2px, 5px, 6px, and other in-between values where needed. This suggests a pragmatic approach — they keep to the grid where possible, but won’t force it when a specific alignment or optical adjustment demands a non-multiple.

Components are consistent: pill-shaped CTAs with 40px radius, secondary buttons with outlined styles, and a clear hover/focus/active state system that uses both color and subtle motion (translateY(2px), scale(0.9)). Link styles are restrained — no underlines until hover, and color shifts to the brand blue on interaction.

Borders and shadows are minimal. Where depth is needed, they use subtle 1px outlines in neutral grays, or soft box-shadows that are almost invisible until you look closely. The overall feel is flat with just enough elevation to separate layers.

If you’re building for Atlassian’s audience, these decisions make sense: clarity over ornament, a system that scales from marketing splash pages to dense admin interfaces, and a palette that feels both trustworthy and modern.

2. Color System

2.1 Primary Colors

The primary brand hue is #1868db (rgb(24, 104, 219)), a saturated medium blue. It’s used for CTAs, primary links, and key interactive elements. Supporting brand tokens like #0C66E4 (--ds-icon-brand) and #1D7AFC (--ds-chart-brand) give them flexibility for icons, charts, and alternate backgrounds.

Blue is a safe, universal choice in B2B SaaS — it connotes trust, reliability, and clarity. Atlassian’s take is slightly more vivid than Microsoft’s #0078D4 and less teal than Slack’s brand blue. It pops against white backgrounds without overwhelming, and pairs cleanly with their neutrals.

2.2 Complete Palette

2.3 Color Relationships

They’ve built a system of neutrals, brand blues, and a wide set of accent/functional colors. The accents are rich and deep — the “bolder” variants are always darker, which works for text. Lighter tints appear in the background tokens.

Contrast is generally high: #1868db on white passes WCAG AA easily. The disabled text color #091E424F is semi-transparent, so it intentionally fails high-contrast requirements to signal non-interactivity.

No clear evidence of a dark mode palette in this dump — the dark neutrals (#101214, #1c2b42) are used in navigation and backgrounds, but there’s no inverted color system.

2.4 Usage Guide

• Use #1868db for primary actions only. Don’t dilute its impact by applying it to decorative elements.
• Neutrals from #000000 to #626F86 handle most text hierarchy.
• Functional colors (--ds-text-danger, --ds-text-warning, etc.) are for status states, not decoration.
• Avoid pairing bright accents together — these colors are designed to work against white or dark neutrals, not side-by-side.
• Background tints like #E9F2FF and #CCE0FF are safe for large fills.

3. Typography

3.1 Font Families

Two custom families:

• Charlie Display — Used for headings, large UI labels. Falls back to system sans stack: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue.
• Charlie Text — Used for body copy, smaller UI elements, buttons, captions. Same fallback stack.

No Google Fonts or Adobe Fonts detected — likely a self-hosted custom typeface.

3.2 Type Scale

(There are many small-size variants; they use size/weight combos to fine-tune UI balance.)

3.3 Hierarchy

The scale covers extremes: huge marketing headings (80px) and tiny UI captions (12px). Weight variation is part of the hierarchy — a 24px/700 heading reads clearly different from a 24px/400 body lead. Line heights are tight for big headings (1.0–1.2) to keep them compact, looser for body (1.4–1.5) for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values (px / rem):

• 1px / 0.06rem — hairline borders, fine offsets
• 2px / 0.13rem — icon nudge, fine spacing
• 4px / 0.25rem — icon padding, tight gaps
• 5px / 0.31rem — specific optical adjustments
• 6px / 0.38rem — button vertical padding
• 8px / 0.50rem — small gaps, icon buttons
• 10px / 0.63rem — input padding
• 12px / 0.75rem — caption gaps, small paddings
• 15px / 0.94rem — between-label spacing
• 16px / 1.00rem — body text line height baseline
• 19px / 1.19rem — odd spacing
• 20px / 1.25rem — card padding
• 24px / 1.50rem — section padding
• 30px / 1.88rem — hero spacing
• 32px / 2.00rem — large card padding
• 40px / 2.50rem — hero CTAs
• 80px / 5.00rem — large section gaps

4.2 Layout

Breakpoints range from 400px up to 1500px — lots of intermediate widths, suggesting a fluid layout with component-specific breakpoints. Not just the typical mobile/tablet/desktop — they’ve tuned for many screen sizes.

5. Visual Elements

Border Radius

Common:

• 0px — square elements
• 2px / 3px / 4px — small rounding for inputs, cards
• 20px — large cards, collection blocks
• 28px / 40px — pill buttons
• Odd shapes: 8px 0px 0px 8px for tabs

Shadows

Mostly flat. Common shadow: rgb(248, 248, 248) 0px 0px 0px 0px — effectively none. Where used:

• Soft drop: rgba(9, 30, 66, 0.31) 0px 0px 1px, rgba(9, 30, 66, 0.25) 0px 1px 1px
• Raised: subtle 1px outlines + faint spread

Depth is minimal, relying more on borders.

Borders

Thin (1px) solid neutrals:

• #ddd (rgb(221, 222, 225)) for dividers
• Accent outlines for buttons (#ffab00)

6. Components

6.1 Buttons

Primary CTA
Default:

• Background: #1868db
• Text: white
• Padding: 6px 24px
• Radius: 40px
• No border

Hover:

• TranslateY(2px)
• Text: #2285f7
• Background: white
• Border: 1px solid #0049b0
• Opacity: 0.6

Active:

• Border: 1px solid rgba(162,192,169,0.5)
• Background: #2c6415
• Scale: 0.9

Focus:

• Outline: 1px solid black
• Background: #1eaedb

Outlined Blue Button
Default:

• Background: #e9f2fe
• Border: 2px solid #1868db
• Radius: 28px
• Padding: 1px 30px

Hover: background #1eaedb, text white.

6.2 Links

Variants: white links on dark, dark links on light, brand blue links. All share:

• Default: no underline
• Hover: underline, color shifts to #3860be

6.3 Forms

Text inputs:

• Default: no border, transparent background, text #42526e
• Focus: background #1eaedb, text white, border 1px solid black

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-neutral: #101214;
  --color-white: #ffffff;
  --color-gray-80: #505258;
  --color-brand-blue: #1868db;
  --color-navy-blue: #1c2b42;
  --color-charcoal: #292a2e;
  --color-gray-60: #696969;
  --color-light-blue: #8fb8f6;
  --color-deep-blue: #005fcc;
  --color-blue-medium-dark: #1558bc;
  --ds-background-brand-subtlest-hovered: #CCE0FF;
  --ds-icon-brand: #0C66E4;
  --ds-text-warning: #A54800;
  --ds-text-accent-magenta-bolder: #50253F;
  --ds-text-danger: #AE2E24;
  --ds-background-brand-subtlest-pressed: #85B8FF;
  --ds-text-accent-orange-bolder: #702E00;
  --ds-text-disabled: #091E424F;
  --ds-text-accent-purple: #5E4DB2;
  --ds-text-subtlest: #626F86;
  --ds-text-accent-green: #216E4E;
  --ds-text-accent-yellow: #7F5F01;
  --ds-text-accent-teal-bolder: #164555;
  --ds-text-accent-teal: #206A83;
  --ds-text-accent-yellow-bolder: #533F04;
  --ds-text-accent-blue-bolder: #09326C;
  --ds-chart-brand: #1D7AFC;
  --ds-text-accent-purple-bolder: #352C63;
  --ds-text-subtle: #44546F;
  --ds-background-brand-subtlest: #E9F2FF;
  --ds-text-information: #0055CC;
  --ds-text-accent-green-bolder: #164B35;
  --ds-text-accent-magenta: #943D73;
  --ds-text-accent-gray-bolder: #091E42;
  --ds-text-accent-lime-bolder: #37471F;
  --ds-text-accent-red-bolder: #5D1F1A;
  --ds-text-accent-lime: #4C6B1F;

  /* Typography */
  --font-family-display: "Charlie Display", -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue;
  --font-family-text: "Charlie Text", -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-19: 19px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-80: 80px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 20px;
  --radius-pill: 40px;
}

8. AI Coding Assistant Prompt

# Atlassian Design System Specification

You are an Atlassian design expert. Build UIs matching their visual language exactly.

## Brand Context
Atlassian's design language is professional, grid-based, and approachable. It uses a disciplined 8px spacing system, a saturated brand blue for key actions, and custom Charlie typefaces for clarity. The system scales from marketing to dense UI without losing consistency.

## Color Palette
- Black: #000000 — Body text, icons
- Dark Neutral: #101214 — Nav headers, dark panels
- White: #ffffff — Backgrounds
- Gray 80: #505258 — Secondary text
- Brand Blue: #1868db — Primary CTAs, links
- Navy Blue: #1c2b42 — Background accents
- Charcoal: #292a2e — UI chrome
- Gray 60: #696969 — Labels
- Light Blue: #8fb8f6 — Hover backgrounds
- Deep Blue: #005fcc — Hover states
- ... [include all tokens from section 7]

## Typography
- Headings: Charlie Display, fallbacks
- Body/UI: Charlie Text, fallbacks

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 80px | 700 | 1.0 | Hero headings |
| H1-alt | 70px | 400 | 1.14 | Hero headings light |
| H2 | 48px | 700 | 1.0 | Section headings |
| Body-lg | 20px | 400 | 1.4 | Lead text |
| Body | 16px | 400 | 1.5 | Main copy |
| Caption | 12px | 400 | 1.67 | Labels |

## Spacing & Grid
Base: 8px. Scale: 1, 2, 4, 5, 6, 8, 10, 12, 15, 16, 19, 20, 24, 30, 32, 40, 80px. All spacing in components must be multiples of these.

## Border Radius
- none: 0px — square elements
- sm: 2px — inputs
- md: 4px — cards
- lg: 20px — large blocks
- pill: 40px — CTA buttons

## Shadows & Depth
Mostly flat. Use subtle 1px borders (`#ddd`) for separation. Rare soft shadows for elevation.

## Component Specifications

### Primary Button
Default:
```css
background: #1868db;
color: #fff;
padding: 6px 24px;
border-radius: 40px;
border: none;
font-weight: 500;
font-size: 16px;

Hover:

transform: translateY(2px);
color: #2285f7;
background: #fff;
border: 1px solid #0049b0;
opacity: 0.6;

Focus:

outline: 1px solid #000;
background: #1eaedb;
color: #fff;

Outlined Button

Default:

background: #e9f2fe;
border: 2px solid #1868db;
border-radius: 28px;
padding: 1px 30px;

Links

Default: no underline, brand blue or appropriate neutral.
Hover: underline, color #3860be.

Input Fields

Default: transparent background, no border, text #42526e.
Focus: background #1eaedb, text #fff, 1px solid black.

Layout & Responsive Rules

Breakpoints at: 400, 425, 476, 500, 530, 540, 550, 600, 640, 768, 890, 896, 897, 1023, 1024, 1050, 1075, 1100, 1125, 1140, 1150, 1175, 1273, 1280, 1306, 1326, 1439, 1500px.

Interaction Rules

• State changes: 150ms ease
• Focus: solid outlines, high contrast
• Hover: subtle motion (translateY(2px)), color shifts

DO

• Use only palette colors
• Stick to 8px grid
• Use Charlie Display for headings
• Keep shadows minimal

DON'T

• Add custom colors
• Mix square and rounded corners arbitrarily
• Overuse shadows
• Remove hover/focus states

Code Examples

Primary Button:

.btn-primary {
  background: #1868db;
  color: #fff;
  padding: 6px 24px;
  border-radius: 40px;
  border: none;
  font-weight: 500;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  transform: translateY(2px);
  color: #2285f7;
  background: #fff;
  border: 1px solid #0049b0;
  opacity: 0.6;
}

---

## 9. Summary

**TL;DR** Atlassian’s design system is a disciplined, tech-forward B2B style: saturated blues, custom Charlie typefaces, an 8px grid, and minimal decoration. Components are consistent, accessible, and scale from marketing to product UI without visual drift.

**Brand Keywords**:  
- tech-trustworthy  
- grid-disciplined  
- blue-forward  
- minimal-depth  
- type-consistent