---
title: "Atlassian design system"
variant: extended
source: https://www.atlassian.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/atlassian-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Atlassian · Design System

> Clear, bright teamwork with vivid product moments

**Theme:** light · **Industry:** saas · **Source:** https://www.atlassian.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Atlassian’s homepage pairs an airy white canvas and crisp editorial typography with direct product calls to action. Bright blue accents and colorful product imagery add energy to a restrained, modular layout.

## North star

Keep the page spacious and white, using precise dark typography and Atlassian blue for the primary action while containing vivid color in product media.

## Overview

The visual strategy is built around a white canvas, dark readable text, and a restrained use of Atlassian blue. The first viewport centers a large, tightly tracked headline and concise supporting copy above a pill-shaped blue primary CTA, with a quieter text link beside it. Navigation stays compact and horizontal, while the hero gives its product-board visual room to breathe. Further down, the page alternates open white sections, product-focused split layouts, colorful editorial cards, and a dramatic near-black Teamwork Graph feature. Charlie Display gives headings a distinctive, compact presence; Charlie Text keeps navigation and body copy approachable. Product screenshots, photography, and diagrams carry much of the color, so secondary greens, purples, and oranges should stay contained within their media or content cards rather than spreading across the page. Hairline borders and subtle shadows clarify controls and UI previews without making the overall page feel elevated or dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and prominent light surfaces; also appears in reversed text and button labels. |
| Graphite Text | `#292a2e` | `--color-graphite-text` | neutral | Default body copy, navigation labels, and muted text on the white page. |
| Atlassian Ink | `#101214` | `--color-atlassian-ink` | surface | Headings and dark inverse surfaces, including the announcement strip and Teamwork Graph feature. |
| Soft Divider | `#dddee1` | `--color-soft-divider` | neutral | Subtle borders and hairlines separating navigation and interface details. |
| Slate Copy | `#505258` | `--color-slate-copy` | neutral | Secondary navigation and supporting text where a softer dark tone is visible. |
| Atlassian Blue | `#1868db` | `--color-atlassian-blue` | brand | Primary Jira CTA and blue links; the clearest interactive brand signal on the white canvas. |
| Rovo Green | `#4c6b1f` | `--color-rovo-green` | semantic | Green Rovo video card surface; keep this saturated color within featured content rather than general UI. |
| Event Blue | `#1558bc` | `--color-event-blue` | accent | Blue event card surface and related card details; secondary to the primary CTA blue. |
| Editorial Violet | `#803fa5` | `--color-editorial-violet` | accent | Purple e-book card color in the content carousel, not a general page background. |
| Report Orange | `#c75300` | `--color-report-orange` | accent | Orange report card treatment within the media carousel; confined to editorial content. |
| Mist Neutral | `#f8f8f8` | `--color-mist-neutral` | surface | Very light navigation and button surface detail; use as a subtle UI neutral. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#101214` (Atlassian Ink) · `--color-surface-2` → `#4c6b1f` (Rovo Green) · `--color-text` → `#101214` (Atlassian Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#292a2e` (Graphite Text) · `--color-border` → `#dddee1` (Soft Divider) · `--color-accent` → `#1868db` (Atlassian Blue) · `--color-accent-2` → `#4c6b1f` (Rovo Green) · `--color-accent-3` → `#1558bc` (Event Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101214` | `#ffffff` | 18.77:1 | AAA |
| `#101214` | `#4c6b1f` | 3.07:1 | AA-large |
| `#ffffff` | `#101214` | 18.77:1 | AAA |
| `#ffffff` | `#4c6b1f` | 6.12:1 | AA |
| `#292a2e` | `#ffffff` | 14.34:1 | AAA |
| `#292a2e` | `#101214` | 1.31:1 | fail |
| `#292a2e` | `#4c6b1f` | 2.34:1 | fail |
| `#1868db` | `#ffffff` | 5.2:1 | AA |
| `#1868db` | `#101214` | 3.61:1 | AA-large |
| `#1868db` | `#4c6b1f` | 1.18:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Charlie Text | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, buttons, and supporting interface text. | Inter |
| Charlie Display | `--font-display` | webfont | 500, 700, 400, 600 | Hero and section headings, display text, and compact eyebrow labels. | Manrope |

- **Charlie Text:** Use a clean sans-serif voice; body copy is regular, while actions use medium weight. Keep sentence case.
- **Charlie Display:** Headings use medium weight and tight negative tracking; eyebrow labels are uppercase with expanded tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.04 | -0.02em | — | Charlie Display | Large promotional headline treatment in the hero. |
| h1 | 48px | 500 | 1.16 | -0.02em | — | Charlie Display | Primary page headline and lead section title. |
| h2 | 40px | 500 | 1.2 | -0.01em | — | Charlie Display | Major section headings, including the AI innovations block. |
| h3 | 32px | 500 | 1.1 | -0.01em | — | Charlie Display | Feature and product-story headings. |
| h4 | 24px | 500 | 1.24 | 0 | — | Charlie Display | Card and smaller feature headings. |
| body | 16px | 400 | 1.56 | -0.01em | — | Charlie Text | Supporting paragraphs and product descriptions. |
| caption | 12px | 400 | 1.17 | 0 | — | Charlie Text | Compact metadata and small supporting labels. |
| button | 18px | 500 | 1.44 | 0 | — | Charlie Text | Primary CTA and prominent action labels. |
| nav | 16px | 400 | 1 | 0 | — | Charlie Text | Top navigation links and menu labels. |
| eyebrow | 12px | 500 | 1.3 | 0.067em | uppercase | Charlie Display | Uppercase category and content-type labels. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 16, 20, 24, 32, 136 px.
- Section rhythm 32px · element gap 8px · card padding 24px · max content width —.

The homepage uses a full-width canvas with centered hero content and a compact horizontal navigation band. The hero headline and copy align centrally, with the primary action directly beneath and a broad product-board preview below. Later sections shift between centered introductions, split text-and-media feature rows, multi-column editorial cards, and a full-bleed dark feature. Use generous section separation and compact internal UI details; the measured data gives no fixed page maximum width, so preserve the broad, open composition rather than imposing an arbitrary narrow container.

## Shape & elevation

- Radius: button `9999px` · media `50%` · nav `3px` · xs `3px` · sm `4px` · md `20px` · pill `9999px`
- Shadow `hairline` (nav): `rgb(248, 248, 248) 0px 0px 0px 0px`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The page is predominantly flat, with white sections separated through whitespace rather than heavy shadows. Borders are fine and pale; product-board previews and card content can use restrained separation to remain legible. Rounded pill buttons stand out through color, not depth. Keep the dark announcement band and feature block grounded, with visual layering supplied mainly by imagery and interface mockups.

## Imagery

Mix product-interface previews, team photography, and illustrative diagrams. The hero uses a wide workflow board on a pale field, while feature imagery is framed in split layouts and colorful cards. Keep screenshots crisp and mostly rectangular; reserve vivid green, blue, purple, and orange for media cards. The dark graph feature uses connected nodes and portraits as a high-contrast visual centerpiece.

## Components

### Announcement banner

Full-width near-black event strip with compact white copy, small graphic accents, and a right-aligned text link.

### Primary navigation

White horizontal bar with Atlassian branding, product and resource menus, search, and sign-in; use dark muted labels and subtle dividers.

### Hero CTA

Bright blue pill-shaped Jira action with white text, paired with a quieter blue text link.

### Workflow preview

Wide, pale product-board mockup showing columns, status labels, cards, and small avatars beneath the hero actions.

### Collection tabs

Compact pill-like selector for teamwork, strategy, service, software, and product; use a dark active state against a light neutral track.

### Editorial card carousel

A row of vivid content cards for video, reports, e-books, and events, each with a category label and concise link.

### Dark graph feature

Full-width near-black feature section with a connected workflow graph, colorful nodes, people imagery, and supporting text.

### Measured component styles

- **Primary button** (“Get started with Jira”): background #1868db · text #ffffff · border 2px solid · radius 10000px · padding 10px 26px · 400 20px Charlie Text
- **Secondary button** (“Skip”): background #7f7f7f · text #ffffff · border 1px solid #ffffff · radius 10000px · padding 8px 32px · 400 12px Charlie Display
- **Link** (“Tune in now”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Charlie Text
- **Card** (“VIDEO Rovo at work: How context and agen”): background #4c6b1f · text #292a2e · radius 0px · padding 24px · 400 16px Charlie Text
- **Navigation item** (“Skip to content Products FEATURED APPS J”): transparent background · text #292a2e · radius 0px · padding 0px · 400 16px Charlie Text

## Do

- Keep the primary canvas white and uncluttered.
- Use Atlassian Blue #1868db for the primary CTA and key links.
- Set display headings in a distinctive, tightly tracked sans-serif.
- Center hero content above a broad product preview.
- Use restrained dividers and let whitespace separate sections.
- Keep vivid card colors within editorial and product media.

## Don't

- Do not turn the page into a dark-first interface.
- Do not use colorful card hues as broad section backgrounds.
- Do not add heavy shadows to otherwise flat components.
- Do not crowd navigation or hero copy with extra decoration.
- Do not make secondary links compete with the primary CTA.
- Do not invent fixed container dimensions absent from the measurements.

## Agent prompt

Build a new page in Atlassian’s clean, product-led visual style. Start with a Gallery White #ffffff canvas, compact horizontal navigation, and a centered hero with a bold Charlie Display-like headline, concise supporting copy, a pill-shaped Atlassian Blue #1868db primary action, and a quieter text link. Use Graphite Text #292a2e for body copy and Atlassian Ink #101214 for strong headings or deliberate dark feature bands. Favor open section spacing, split product-and-copy layouts, crisp interface previews, and modular content cards. Use Soft Divider #dddee1 sparingly. Keep Rovo Green #4c6b1f, Event Blue #1558bc, Editorial Violet #803fa5, and Report Orange #c75300 inside relevant media cards. Maintain flat surfaces, restrained borders, and minimal shadow; do not invent measurements or add decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | White section with a left-aligned heading and intro above a horizontal row of media cards. | editorial content cards, watch and read links, carousel navigation | category labels, colored cards, compact card copy, subtle controls |

## Source CSS custom properties (selected)

```css
--atlassian-recommended-sans-system-fonts: ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
--atlassian-sans-font-family: "Atlassian Sans", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
--wac-color-heading: #101214;
--wac-color-body: #292a2e;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/atlassian-com