Atlassian Design

Overview

Atlassian Design is a systematic, color-rich design language built for enterprise collaboration at scale. It serves product teams across Jira, Confluence, Trello, and Bitbucket—enabling designers and developers to build accessible, consistent interfaces that feel both professional and approachable. The aesthetic is 'Systematic Clarity': a clean, light-dominant canvas anchored by a bold cobalt primary (#1868DB) and a rich, multi-hued accent palette (purples, oranges, greens, teals) that communicate status, sentiment, and semantic meaning without relying on darkness or visual noise. The UI evokes trust and precision—every color choice, every spacing increment, every rounded corner serves a functional purpose.

The brand voice is direct, confident, and human-centered. Atlassian speaks to makers: product managers, engineers, designers, and teams who value clarity over decoration. Vocabulary is concrete and action-oriented; sentences are short and unambiguous. The tone avoids corporate jargon and instead uses the language of craft: 'build', 'collaborate', 'ship', 'iterate'. Example sentence in brand voice: 'Better teamwork by design—connect your tools, align your team, ship faster.'

Colors

Atlassian Design employs a 'semantic-first' color system organized around functional roles rather than arbitrary names. The foundation is a neutral, light surface stack: surface (#FFFFFF), surface-container (#F0F1F2), and surface-container-high (#DDDEE1) provide depth without darkness. Text is always on-surface (#292A2E), a near-black that maintains 16:1 contrast on white.

The primary brand color is cobalt blue (#1868DB), used exclusively for interactive elements: primary CTAs, links, focus states, and selected items. Its container pair, primary-container (#E9F2FE), provides a subtle tinted background for secondary emphasis. Secondary (#803FA5, a deep purple) and tertiary (#FBC828, a warm golden yellow) are reserved for status indicators, badges, and supporting accent contexts. Error (#C9

Typography

Atlassian Sans is the sole typeface, a humanist sans-serif optimized for screen legibility and enterprise contexts. The type scale spans eight levels: display (112px, 700 weight) for hero headlines; headline-lg (40px, 600) for section titles; headline-md (28px, 600) for subsections; title-lg (20px, 600) for card headers; body-lg (18px, 400) for long-form content; body-md (16px, 400) for standard UI text; label-md (14px, 600) for buttons and form labels; label-sm (12px, 500) for captions and metadata. Letter-spacing ranges from -0.04em (display, to tighten large sizes) to 0.02em (label-sm, to aid readability at small sizes). Line-height is consistently generous: 120px for display (1.07x), 48px for headline-lg (1.2x), 24px for body-md (1.5x). Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)

Layout

Atlassian Design uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Horizontal gutters are 24px on desktop, collapsing to 12px on tablets and 8px on mobile. Vertical rhythm is built on an 8px unit: spacing increments are xs (4px), sm (12px), md (24px), lg (40px), and xl (64px). Section separation uses lg spacing (40px) to create visual breathing room; component internal padding uses md (24px) for cards and containers, sm (12px) for form inputs and list items. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. White-space is generous and intentional: never crowd elements closer than sm (12px) horizontally or vertically. Use the spacing scale consistently—never introduce arbitrary pixel values like 18px or 35px

Elevation & Depth

Depth is conveyed through subtle layering and precise shadows, never through color darkening. The elevation system defines three levels: Level 1 (Base/Surface) has no shadow; Level 2 (Raised/Cards) uses box-shadow: 0 1px 1px rgba(30, 31, 33, 0.25), 0 0 1px rgba(30, 31, 33, 0.31)—a tight, close shadow that suggests the element is 2–4px above the surface; Level 3 (Overlay/Modal) uses box-shadow: 0 8px 9px rgba(30, 31, 33, 0.15), 0 0 1px rgba(30, 31, 33, 0.31)—a softer, more diffuse shadow suggesting 8–12px elevation. On hover, cards transition from Level 2 to Level 3 (box-shadow: 0 40px 20px 20p

Shapes

Atlassian Design embraces 'Systematic Softness': rounded corners are applied consistently but conservatively, signaling approachability without sacrificing precision. The rounded scale is sm (0.25rem / 4px), DEFAULT (0.5rem / 8px), md (0.75rem / 12px), lg (1rem / 16px), xl (1.5rem / 24rem), and full (9999px). Buttons and form inputs use lg (16px) to create a friendly, clickable appearance. Cards and containers use lg (16px) for consistency with buttons. Small UI elements (badges, chips, tags) use full (9999px) for a pill shape. Inputs and text fields use DEFAULT (8px) to maintain visual distin

Components

Action Elements Buttons are the primary interaction primitive. button-primary uses background: {colors.primary} (#1868DB), text-color: {colors.on-primary} (#FFFFFF), rounded: lg (16px), padding: 12px 24px, height: 48px, and typography: label-md (14px, 600 weight). On hover, background transitions to {colors.primary-fixed-dim} (#CFE1FD) with a 120ms ease-out transition. On press, background becomes #144794 (a darker blue). button-secondary is transparent with a 1px border in {colors.outline} (#8C8F97), same padding and height as primary, and text-color: {colors.primary}. On hover, background becomes {colors.surface-container-high} (#DDDEE1). All buttons must have a minimum touch target of 48px height and 48px width. Apply focus-visible: outline 2px solid {colors.primary} with outline-of

Do's and Don'ts

**Do**

• Do use primary (#1868DB) exclusively for primary CTAs, links, and focus states—never use it for backgrounds or large surface areas.
• Do maintain the 8px spacing grid rigorously; every margin, padding, and gap should be a multiple of 8px (4px, 12px, 24px, 40px, 64px).
• Do apply rounded: lg (16px) to all interactive elements (buttons, inputs, cards) for visual consistency and approachability.
• Do use the full color palette (secondary #803FA5, tertiary #FBC828, error #C9372C) for semantic meaning: status, sentiment, and functional roles—never for decoration.
• Do include focus-visible outlines (2px solid primary, 2px offset) on all interactive elements for keyboard accessibility.
• Do use Atlassian Sans exclusively; never substitute system fonts or serif typefaces.
• Do apply elevation shadows (box-shadow, not drop-shadow) to convey depth; upgrade shadows on hover to signal interactivity.

**Don't**

• Don't mix primary and secondary colors in the same component or section; use tertiary as a neutral accent if a third color is needed.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; sharp corners reduce affordance.
• Don't apply color changes without accompanying shadow or opacity changes; every state transition must be multi-dimensional.
• Don't use pure black (#000000) or pure white (#FFFFFF) for text; use on-surface (#292A2E) for text and inverse-on-surface (#FFFFFF) only on colored backgrounds.
• Don't introduce arbitrary spacing values; always use the 8px scale (xs, sm, md, lg, xl).
• Don't layer text on colored backgrounds without checking contrast (minimum 4.5:1 for AA compliance); use text-shadow if needed.
• Don't use drop-shadow filters; always use box-shadow for precise control and consistency.