What is Atlassian's primary brand color?

Atlassian's link-and-action voltage is Atlassian Blue (`#1868db`), bound to the `--ds-link`, `--ds-background-brand-bold`, and `--ds-icon-brand` token roles. It fills the hero CTA pill ('Get started with Jira') and every primary link. The pressed state shifts to `#1558bc` (`--ds-link-pressed`), and the boldest brand fill steps up to navy `#1c2b42` (`--ds-background-brand-boldest`) for the dark Teamwork Graph band. Everything else on the page is greyscale: ink `#101214`, subtle text `#505258`, hairline `#dddee1`.

Does Atlassian's homepage use a dark mode?

The mainline marketing surface commits to white. Canvas is `#ffffff`, with the inverse-canvas token (`--ds-background-inverse-subtle`) at `#000000` reserved for the dark Teamwork Graph showcase band near the bottom of the page. The Atlassian Design System ships a full dark theme for product UI (Jira, Confluence), but the homepage stays light — the only dark stretch is that single anchored band, where text inverts to `#ffffff` against `#000000` and brand voltage stays `#1868db`.

What typography does Atlassian use, and what should I use if Charlie isn't available?

Atlassian runs two proprietary families: Charlie Display for hero and section heads, Charlie Text for body, nav, and labels. The hero h1 sits at 84px weight 600 lineHeight 84px on Charlie Display; h2 ranges 32–68px weight 500; body p sits at 18–24px weight 400 on Charlie Text. Inter at weight 500 is the closest open substitute for Charlie Display; Inter at weight 400 covers Charlie Text. The system falls back to a long native stack (`-apple-system`, `system-ui`, `Segoe UI`, `Roboto`, `Oxygen`, `Ubuntu`, `Fira Sans`, `Droid Sans`, `Helvetica Neue`) before sans-serif, so the cascade degrades gracefully without Charlie.

Why is the primary CTA a `10000px` pill while cards are `20px`?

Atlassian gates the radius scale by component role. The Jira CTA sits at `10000px` (the engineering shorthand for a true pill) — the highest-affordance shape in the system, signalling 'tap this'. Feature cards and the Teamwork-platform tabs run `20px` radius, which is rounded but rectangular. Form fields and chips sit at `3px` (`--ds-border-radius`) — the engineered-control register. Brand logos and avatars use `100%`. The result is a deliberate three-tier shape language: pill for the single primary action, large-rounded for content cards, near-square for input chrome.

Why does Atlassian ship 468 CSS custom properties on `:root`?

Atlassian's design tokens system (`@atlaskit/tokens`) compiles every semantic role — `--ds-text`, `--ds-background-brand-bold`, `--ds-border-selected`, `--ds-chart-categorical-1`, `--ds-icon-discovery` — into a CSS variable injected at the document root. Every component in the page resolves color through that indirection rather than hardcoding hex values, which is how Atlassian flips the entire product to dark mode at the token layer. The marketing site inherits the same `--ds-*` vocabulary, so the same tokens that style Jira boards also style the homepage hero pill.

How do I use this DESIGN.md to build a React project?

Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce Atlassian's gate: white canvas, navy headlines, Atlassian Blue scoped to one pill per fold. Reference the 22 color tokens, 11 type styles, and 22 components directly: every value is a quoted hex or px size you can paste into Tailwind config, CSS variables, or a `:root` block that mirrors `--ds-*` naming. Combine with shadcn/ui primitives — the `button-primary` recipe (background `#1868db`, text `#ffffff`, radius `10000px`, padding `14px 26px`, height `58px`) maps onto `Button` with one variant override.

Atlassian Design System

Atlassian's design system as a DESIGN.md file.

About Atlassian DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source atlassian.com

Project Management
Productivity & SaaS

Atlassian's marketing surface is the rare enterprise homepage that ships its design tokens to the browser as `--ds-*` custom properties — 468 of them on `:root`, each carrying a hex value the DOM resolves at paint time. The canvas is pure white (`#ffffff`) and ink sits in a near-black (`#101214`); the only true chromatic event is Atlassian Blue (`#1868db`), bound to the `--ds-link` and `--ds-background-brand-bold` roles and reserved for the hero CTA pill ("Get started with Jira"). Display type is Charlie Display at 84px weight 600 across "Unleash your teams and their agents"; body and nav drop to Charlie Text at 16–20px weight 400. Where most enterprise homepages drown the action in three competing buttons and a gradient hero, Atlassian gates the entire above-the-fold composition through one blue pill. The DESIGN.md file packages 22 color tokens, 11 typography styles, 6 corner radii, 8 spacing values, and 22 components. Colors split into ink (`#101214`, `#292a2e`, `#505258`, `#63666b`), surface (`#ffffff`, `#dddee1`, `#e9f2fe`), brand voltage (`#1868db` link / `#1c2b42` boldest navy / `#1558bc` pressed), and a semantic chart family (`#22a06b` green, `#357de8` blue, `#af59e1` purple, `#ae2e24` red) inherited from the open Atlassian Design System. The format is the Google Labs DESIGN.md spec — token references like `{colors.brand-bold}` and `{typography.display-xl}` that designers and AI agents can both parse without translation. Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Atlassian's specific gate: a white canvas, navy headlines, Charlie at weight 500 for display and 400 for body, and Atlassian Blue scoped to a single 10000px pill per viewport. Reference the tokens directly inside Tailwind config, CSS variables, or paste the component block into a brand audit. The discipline worth studying is the refusal of the enterprise CTA stack — Atlassian commits to one primary action per fold, lets the navy boldest fill `#1c2b42` carry the dark sections, and trusts product mockups in white cards to do the persuasion work decorative gradients do elsewhere.

What makes it distinct

Live design tokens on `:root`468 `--ds-*` custom properties render every brand and structural color
Single Atlassian Blue voltage`#1868db` fills the Jira CTA pill and link role; navy `#1c2b42` carries deep brand fills
Two-typeface pairingCharlie Display at 84px weight 600 for hero, Charlie Text at 16–20px for body and nav
Pill geometry on the primary CTA`10000px` radius button against 3px and 20px card corners elsewhere
Semantic-token chromenames like `--ds-background-brand-bold` (`#1868db`) and `--ds-background-brand-boldest` (`#1c2b42`) ship straight to the page

Live at atlassian.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

atlassian.com

Explore Atlassian

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Atlassian design system FAQ

Common questions about Atlassian's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Atlassian Design System

The open design system Atlassian ships — token names, components, and accessibility guidance.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Atlassian in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→