Atlassian Design System

Overview

Atlassian's homepage is the rare enterprise marketing surface that ships its design system tokens to the browser as live --ds-* CSS custom properties — 468 of them on :root, each carrying a hex value the DOM resolves at paint time. The canvas commits to white (#ffffff); ink runs near-black (#101214); the single chromatic event above the fold is Atlassian Blue (#1868db), bound to the --ds-link and --ds-background-brand-bold roles and reserved for the hero CTA pill at 10000px corner radius.

Token transparency: the marketing site does not transcode design tokens into one-off marketing CSS — it loads the same --ds-background-brand-bold, --ds-text, and --ds-border vocabulary that styles Jira and Confluence inside the product, then resolves them on :root. The hex behind the Jira CTA pill (#1868db) is the same value an Atlaskit button renders in the app. Where most enterprise homepages route brand color through Webflow custom fields and bespoke marketing variables, Atlassian routes it through the same token graph the engineering team ships to product.

Display type is Charlie Display at weight 500–600, hitting 84px on the hero h1 ("Unleash your teams and their agents") with line-height equal to font-size (a tight 1.0 ratio). Body and nav drop to Charlie Text at 16–20px weight 400 with line-height 1.3–1.5. The hierarchy is engineered: there are no decorative weights between display and body — the brand earns presence through size jumps (84 → 52 → 32 → 24 → 18), not through bolds. Atlassian also runs a semantic chart family — green #22a06b, blue #357de8, purple #af59e1, red #ae2e24, teal #2898bd — pulled from the product's analytics surfaces and dropped into homepage product-tile illustrations.

Key Characteristics:

• Single action gate: every fold contains exactly one Atlassian Blue pill (#1868db); secondary actions are white pills with hairline borders.
• White canvas (#ffffff) all the way down except for one anchored dark band (#000000) at the Teamwork Graph showcase.
• Charlie Display for hero and section heads, Charlie Text for nav and body — two families, no third.
• Pill geometry (10000px) only on buttons and chips; cards stay at 20px, form fields at 3px.
• Navy boldest (#1c2b42) carries dark product-card fills — --ds-background-brand-boldest resolved straight to the page.
• The chart family (#22a06b, #357de8, #af59e1, #ae2e24) appears only inside product-tile illustrations, never as section backgrounds.

Colors

• Atlassian Blue (#1868db) — frequency 39. Used as text (18), border (18), background (3). Bound to --ds-link, --ds-background-brand-bold, --ds-icon-brand, --ds-border-selected, --ds-text-brand. The page's single chromatic voltage — the Jira CTA pill, every link, every focus indicator.
• Atlassian Blue pressed (#1558bc) — frequency 10. Used as text (3), background (4), border (3). The --ds-link-pressed and --ds-background-brand-bold-hovered value — never appears at rest, only on active and hover states of the primary.
• Brand boldest navy (#1c2b42) — frequency 158. Used as text (79), border (79). Bound to --ds-background-brand-boldest. The dark fill for product cards that need brand atmosphere — appears across the "Featured apps" tiles and the Teamwork Platform header strip.
• Ink primary (#101214) — frequency 274. Used as text (133), bg (8), border (133). The page's load-bearing text color, bound to --ds-border and --ds-skeleton-subtle. Reserved for headlines, body type, and the selected tab fill.
• Ink neutral-bold (#292a2e) — frequency 81. Used as text (41), border (40). The --ds-text and --ds-icon value — secondary type and default icon stroke.
• Ink subtle (#505258) — frequency 54. Used as text (27), border (27). Bound to --ds-text-subtle and --ds-icon-subtle — the workhorse for supporting paragraphs and inactive tabs.
• Ink subtlest (#63666b) — frequency 4. Used as text (2), border (2). The --ds-text-subtlest quietest grade — captions and legal type.
• Canvas white (#ffffff) — frequency 240. Used as text (113), bg (11), border (111), shadow (5). The default surface and --ds-surface. Also serves as inverse ink against the navy dark band.
• Inverse canvas (#000000) — frequency 1049. Used as text (524), border (524), bg (1). Resolves through --ds-UNSAFE-transparent (the alpha-overlay token) and the dark --ds-background-inverse-subtle band — most occurrences are transparent borders rather than fills.
• Surface pressed (#dddee1) — frequency 2. Used as bg (1), border (1). The --ds-surface-pressed hairline color — depressed-state fills on overlay cards.
• Selected surface (#e9f2fe) — frequency 4. Used as bg (4). Bound to --ds-background-selected and --ds-background-brand-subtlest — the pale blue tint behind selected chips and badges.
• Hairline strong (#b7b9be) — frequency 1. Used as border (1). The --ds-border-input value — applied to text-input outlines that lack a specific brand border.
• Chart green (#22a06b) — frequency 0. Bound to --ds-border-accent-green and --ds-chart-green-bold. Reserved for product-tile illustration accents, never as a section background.
• Chart blue (#357de8) — frequency 0. Bound to --ds-chart-brand and --ds-chart-categorical-1 — the analytics-categorical-1 hex inside dashboard mockups.
• Chart purple (#af59e1) — frequency 0. Bound to --ds-icon-discovery and --ds-chart-purple-bolder — the "Discovery" semantic in product UI screenshots.
• Chart red (#ae2e24) — frequency 0. Bound to --ds-text-danger — danger semantic, no marketing exposure on the homepage above the fold.
• Chart orange (#c75300) — frequency 0. Bound to --ds-chart-warning-bold — warning semantic inside dashboard mockups.

Typography

Two proprietary families, no third. Charlie Display carries the hero h1 at 84px weight 600 with line-height 84px — a tight 1.0 ratio that pulls "Unleash your teams and their agents" into a dense two-line block. Section heads step down 68 → 52 → 32 px at weight 500 with line-height 1.10–1.15. The 28px tier (display-xs) drops to weight 400 — Atlassian uses size, not bold, to mark hierarchy from there down.

Charlie Text covers body, nav, and labels at 16–24px weight 400. The two flavors live at 16px line-height 1.5 (long-form paragraphs) and 18–20px line-height 1.44–1.30 (subheads inside cards). Eyebrow labels use weight 500 with letter-spacing 0.3px — the only place positive tracking appears.

The fallback chain is a long native stack: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif. If Charlie isn't licensed, Inter at weight 500 for display and 400 for body is the closest open substitute; Geist Sans also works. Avoid native Helvetica fallback — its heavier x-height clashes with Charlie's narrower letterforms.

Layout

The grid is centered with a maximum content width near 1168px and side gutters that step to 136px on wide viewports (the 0px 136px padding pattern appears 11 times in the extracted spacing histogram). Sections stack vertically with 64px of vertical rhythm between major bands. Inside sections, content blocks use 32px between heading and supporting copy, 24px between sibling cards, and 8px for micro-spacing inside list items.

The hero uses centered alignment with the heading at 968px width — type spans nearly the whole content frame, leaving only the side gutters as breathing room. Below the fold, three-tile card grids replace center alignment; tiles run at equal width with 24px gutters and 32px internal padding. The Teamwork Platform tabs sit inside a centered pill row, then unfold into a single full-width product-mockup card.

Elevation & Depth

Atlassian leans on hairline + surface contrast rather than drop shadows for elevation. The canvas is #ffffff; cards on the canvas use a 1px hairline border in #dddee1 (--ds-border) to lift off without a shadow. The only documented shadow surfaces live behind the white floating cards inside the Teamwork Graph dark band, where elevation reverses — cards float off #000000 with a soft --ds-shadow-overflow glow.

The Atlassian Design System ships --ds-elevation-surface-current, --ds-elevation-surface-raised, --ds-elevation-surface-overlay tokens that resolve to #ffffff on light mode — the elevation differentiator is z-index and shadow alpha, not surface color. The marketing homepage uses two elevation tiers (current for body content, raised for floating mockup cards) and skips the overlay tier entirely.

Shapes

Three-tier radius language by component role: 10000px (pill) on the primary CTA and chip badges, 20px (rounded-lg) on feature cards and product tiles, 3px (rounded-xs) on form fields and inputs. The 40px value appears on a handful of large illustration containers — never on type-bearing components.

A 100% (circle) radius is reserved for brand-logo avatars and the Atlassian logo lockup. The pill is gated to interactive surfaces; cards are gated to content surfaces; the near-square 3px is gated to engineered-control surfaces. Atlassian deliberately avoids the mid-range 8–12px register — the gap between 3px and 20px signals to the reader which components are containers and which are inputs.

Components

• button-primary — Atlassian Blue (#1868db) fill, white text, Charlie Text 20px weight 400, 10000px radius, padding 14px 26px, height 58px. The Jira CTA — one per fold.
• button-primary-hover — same geometry, fill shifts to #1558bc (the --ds-background-brand-bold-hovered value).
• button-secondary — white fill, ink text, 1px #b7b9be border, same 10000px radius — pairs alongside primary as the muted alternative.
• button-on-dark — white pill with ink text, used on the navy and black bands.
• top-nav — white canvas, ink text, Charlie Text 16px, 72px height with 10px 16px padding per link.
• nav-link — flat 44px height, no border, ink at default and #1868db on hover.
• hero-heading — Charlie Display 84px weight 600 line-height 84px, no padding, no border, sits centered at 968px width.
• product-card — white canvas, 1px #dddee1 hairline, 20px radius, 32px padding — the workhorse content tile.
• product-card-dark — navy boldest fill (#1c2b42), white text — appears in the "Featured apps" trio for emphasis.
• featured-card-brand — Atlassian Blue (#1868db) fill, white text — the singular branded tile in the product-tile grid.
• tab-default / tab-selected — pill chips at 10000px radius, padding 8px 32px. Default is white-on-ink-subtle; selected flips to ink fill with white text.
• eyebrow-label — Charlie Text 16px weight 500, letter-spacing 0.3px uppercase — the only place positive tracking appears.
• link-text — inherits body-md sizing with #1868db ink — used inline inside paragraphs.
• badge-news — pale blue (#e9f2fe) fill, blue text, pill radius — the "On Demand Now Available" announcement chip.
• chart-tile-{green,purple,orange} — saturated chart-family fills, white text, 20px radius — the colored product-tile trio at "Fueled by Atlassian's latest AI innovations".
• section-dark — #000000 fill, white text, 64px 136px padding — the Teamwork Graph anchored band.
• divider — 1px hairline at #dddee1 — section breaks above the footer.
• footer — white canvas, ink-subtle text, Charlie Text 12px caption sizing, 64px 136px padding.

Do's and Don'ts

Do use #1868db ({colors.brand-bold}) exclusively for the primary CTA, inline links, and focus indicators. The hex shows up as a text color 18 times in the page, as a border 18 times, as a background 3 times — almost every appearance is for an interactive role.

Do stack hierarchy through size, not weight. Display drops 84 → 68 → 52 → 32 → 28 with weight 500–600 at the top and weight 400 by 28px. Add a bold at 28px and the page reads as a marketing one-pager, not the Atlassian product surface.

Don't apply 10000px pill radius to anything except buttons, chips, and pill badges. Use it on a 200px-tall card and the card reads as a giant button. Cards belong at {rounded.lg} (20px); form fields belong at {rounded.xs} (3px).

Don't use #1c2b42 for body text. The navy boldest is a background fill bound to --ds-background-brand-boldest — its contrast against #ffffff is fine for type at display sizes but fails the WCAG ratio against pale tints. For text on white, use #101214 ink instead.

Don't combine the chart family (#22a06b, #357de8, #af59e1, #ae2e24) with the brand voltage #1868db in the same component. The chart hexes are categorical tokens for analytics surfaces; pulling them into marketing chrome breaks the semantic gate Atlassian maintains between product UI and homepage.

Don't swap Charlie Display for Charlie Text on the hero. Charlie Display is the only family designed for tight lineHeight: 84px at fontSize: 84px — Charlie Text at the same size opens the tracking and breaks the engineered density of "Unleash your teams and their agents".

Known Gaps

• Form-input styling — the homepage does not expose a text-input component (the extractor returned input: null). The --ds-background-input token (#ffffff) and the implied #b7b9be border outline an input recipe but Atlassian's full form chrome lives on signup pages, not the marketing hero.
• Dark-mode product UI — Atlassian Design System ships a full dark theme for Jira and Confluence; the homepage stays light except for the single Teamwork Graph band. This DESIGN.md captures the marketing track only.
• Motion and animation timings — Atlassian uses entrance animations on tile reveals and tab transitions; durations and easings are not exposed via --ds-* properties on :root.
• Charlie Display and Charlie Text are proprietary — Inter at weight 500/400 is the closest open substitute.
• The 468 --ds-* variables include token roles not surfaced on this homepage (warning, danger, success, discovery semantics) — they ship to :root because the page imports the full design-token stylesheet, but most don't paint pixels above the fold.