Atlassian design system

What font does Atlassian use?

Atlassian’s website uses Charlie Text for headings and body text. Charlie Text is not on Google Fonts; the closest free match is Figtree.

Atlassian colour palette

Atlassian’s home page is light (#F8F8F8 background, #292A2E text) and uses #101214 for its main actions. Its palette: #FFFFFF, #101214, #F8F8F8, #803FA5, #1558BC, #292A2E.

• #FFFFFF
  83.5% · backgrounds
• #101214
  7.2% · backgrounds, text
• #F8F8F8
  1.9% · backgrounds
• #803FA5
  1% · backgrounds
• #1558BC
  0.7% · backgrounds, drawings
• #292A2E
  0.6% · text
• #000000
  0.6% · drawings
• #4C6B1F
  0.5% · backgrounds
• #C75300
  0.5% · backgrounds
• #CFE1FD
  0.5% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Atlassian’s largest type is 64px at weight 500.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px.

Corner radii: 1px, 2px, 3px, 4px, 10px, 17px, 20px, pill. 3 shadow levels measured.

What makes Atlassian look like Atlassian

Almost entirely neutral: 95% of the page is painted in #FFFFFF and #101214.

#803FA5 is an accent: 1% of the page, as small fills such as buttons and badges. Keep it to small areas.

#1558BC is an accent: 0.7% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (96px Atlassian Mono) is bold (700), tracked to -0.031em.

Atlassian DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Atlassian’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Atlassian’s product, so use your own name, words and images.

Download Atlassian DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Atlassian’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap");

:root {
  --color-background: #F8F8F8; /* Background */
  --color-surface: #FFFFFF; /* Surface */
  --color-text: #292A2E; /* Text */
  --color-text-muted: #505258; /* Text muted */
  --color-border: #DDDEE1; /* Border */
  --color-action: #101214; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #1C2B42; /* Link */
  --color-positive: #4C6B1F; /* Positive */
  --color-warning: #FFAB00; /* Warning */
  --color-803fa5: #803FA5; /* 1% of the page, as fills */
  --color-1558bc: #1558BC; /* 0.7% of the page, as fills */
  --color-000000: #000000; /* 0.6% of the page, as drawings */
  --color-c75300: #C75300; /* 0.5% of the page, as fills */
  --color-cfe1fd: #CFE1FD; /* 0.5% of the page, as fills */
  --color-ffe48f: #FFE48F; /* 0.5% of the page, as fills */
  --color-357de8: #357DE8; /* 0.5% of the page, as drawings */
  --color-8fb8f6: #8FB8F6; /* 0.4% of the page, as drawings */
  --color-4d8ced: #4D8CED; /* 0.3% of the page, as drawings */
  --color-1868db: #1868DB; /* 0.3% of the page, as fills */
  --font-body: "Charlie Text", "Figtree", sans-serif; /* Charlie Text on the site; Figtree renders */
  --font-interface: "Charlie Display", "Archivo", sans-serif; /* Charlie Display on the site; Archivo renders */
  --font-code: "Atlassian Mono", "JetBrains Mono", monospace; /* Atlassian Mono on the site; JetBrains Mono renders */
  --type-display-large: 64px; /* Display Large, weight 500 */
  --type-display-large-leading: 66.56px;
  --type-display-large-tracking: -0.02em;
  --type-display-medium: 48px; /* Display Medium, weight 500 */
  --type-display-medium-leading: 55.68px;
  --type-display-medium-tracking: -0.02em;
  --type-display-small: 40px; /* Display Small, weight 500 */
  --type-display-small-leading: 48px;
  --type-display-small-tracking: -0.01em;
  --type-headline-large: 32px; /* Headline Large, weight 500 */
  --type-headline-large-leading: 39.68px;
  --type-headline-small: 24px; /* Headline Small, weight 500 */
  --type-headline-small-leading: 29.76px;
  --type-title-large: 20px; /* Title Large, weight 400 */
  --type-title-large-leading: 31.2px;
  --type-title-large-tracking: -0.01em;
  --type-title-small: 18px; /* Title Small, weight 500 */
  --type-title-small-leading: 26px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24.96px;
  --type-body-large-tracking: -0.01em;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 14px;
  --type-body-small-tracking: 0.03em;
  --type-label-large: 13px; /* Label Large, weight 700 */
  --type-label-large-leading: normal;
  --type-label-small: 12px; /* Label Small, weight 400 */
  --type-label-small-leading: 13.9992px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

How this was measured

PikSpec’s scanner read the atlassian.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Atlassian is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Atlassian.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.