Context
Connected context makes teams and agents more effective. Our reading
The system
Fixed, everywhere
- The A logomark and wordmark in brand blue, inverse or neutral
- Blue700 #1868DB as the brand color
- Charlie Sans for brand, Atlassian Sans for apps
- Collection-colored app tiles
- Sentence case
The one thing that varies
Tone dials with the reader's state: bolder and more expressive for confident users, marketing and brand moments; plain and practical for new users, errors and frequent UI.
Color, in proportion
Atlassian publishes no color ratio. Our reading of the homepage at 1440px, by band height: white bands versus the two #1E1F21 bands. Blue is too small to count: CTAs, links and app tiles only..
Tone by the reader's state
- Success, celebration, power users
- Marketing pages (observed)
- Everyday UI, information
- New or trial users, introducing a feature
- Errors, blocked, deadlines
One voice dialed by the reader's emotional state. Atlassian publishes the guidance; the levels are our reading.
How loud each format gets
SilentError message
QuietEmail
CalmDeckProposal page
WarmLanding pageAd
LoudSocial post
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
Logo hidden
Cover the logo. It should still read as Atlassian: white page, near-black sentence-case headline, one blue pill, real product UI, named teammates or agents, a number with a source.
Swap test
Put another SaaS logo on it. If the product UI, the collection tiles and the context argument don't feel out of place, it's generic, and it goes back.
Token test
Every color on the page maps to a published token role (brand, neutral, discovery, success, warning, danger). A color with no role is a mistake.
Strategy
The teamwork platform for the AI era: apps, agents and the Teamwork Graph give teams and AI the shared context to decide and ship (paraphrase). Observed
Humans and AI together
One system of work where people and agents collaborate. Our reading
Proven at scale
Hundreds of thousands of teams, measured customer outcomes. Our reading
Secure and governed
Enterprise permissions carry across every agent. Observed
Discover the power of knowing
Your context, wherever you need it
Connect the work behind the work
Transform how your teams work
Full spec
- For Observed
- Teams from hyper-growth startups to the Fortune 500: software, IT/service, product, strategy and business teams, plus their leaders (CIOs, CTOs, CMOs, CHROs in the Leading with Context reports).
- Problem Published
- Teams have more information than ever but are less informed; scattered tools and missing context make AI output generic (paraphrase).
- Promise Observed
- Give teams and agents the context they need to make smarter decisions, coordinate and ship with confidence (paraphrase of the hero subline).
- Mission Published
- Our mission is to help unleash the potential of every team through open work.
Proof behind each pillar
- Context. Up to 44% better answer quality and 48% fewer tokens (Atlassian Engineering Productivity Study, 2026; internal studies, results vary).
- Context. Teamwork Lab: workers whose AI understands most of their work are up to 6x more likely to call it helpful (survey of 1,002 US knowledge workers).
- Humans and AI together. Atlassian System of Work: four principles, including realizing the full power of AI teammates.
- Proven at scale. 350,000+ teams (homepage); 300,000+ customers (company page).
- Proven at scale. Customer story cards, e.g. 75% reduction in time spent writing quarterly roadmaps; 25% lower TCO.
- Secure and governed. Secure from the start: enterprise permissions that carry across every agent.
Story Published
Founded by Mike Cannon-Brookes and Scott Farquhar; Jira 1.0 launched in 2002, Confluence in 2003. Listed on NASDAQ as TEAM in 2015; Trello (2017), Opsgenie (2018) and Loom (2023) joined; Rovo, the AI teammate, was announced in 2024; Strategy and Teamwork Collections debuted in 2025.
Values
Open company, no bullshit
Work and information are open by default (published value; also the 'Working Open' philosophy).
PublishedBuild with heart and balance
Published company value.
PublishedDon't #@!% the customer
Customers come first, including pricing so every company can afford the products (paraphrase).
PublishedPlay, as a team
Published company value.
PublishedBe the change you seek
Published company value.
PublishedCategory. Teamwork and work-management software platform with AI agents (Rovo), sold as apps and collections. Observed
Why them
- Teamwork Graph: a context layer across Atlassian and third-party tools. Observed
- 20+ years of teamwork research, the Teamwork Lab and the System of Work. Observed
- Enterprise permissions that carry across every agent. Observed
Instead of
Scattered point tools and generic AI without business context (no competitor is named on the homepage).
Boilerplate Published
Atlassian builds apps, AI agents and a platform for teamwork (Jira, Confluence, Loom, Rovo and more), with a mission to help unleash the potential of every team through open work. Founded in 2002 by Mike Cannon-Brookes and Scott Farquhar; 300,000+ customers, 12,000+ employees in 14 countries.
Taglines
Discover the power of knowing Observed
The teamwork platform for the AI era Observed
Stop searching. Start shipping. Observed
The living map of how work gets done Observed
We help teams change the world Observed
They never claim
- Stats carry their footnote: the homepage marks the 44%/48% figures as internal studies where results may vary. Observed
- Use attribution logos only where the Atlassian context isn't clear; never compose your own. Published
- Third parties: Atlassian's trademark guidelines ask that sites not reproduce or mimic atlassian.com's look and feel. Published
More real lines
The teamwork platform for the AI era
AI-native strategic portfolio management
Shatter the service quo
Deliver high quality software. Fast.
Better product decisions in the age of AI
Where 350,000+ teams turn context into delivery
Built for how modern teams work
Fueled by Atlassian’s teamwork expertise and research
Stop searching. Start shipping.
We help teams change the world
The living map of how work gets done
Want more confidence in AI? Give it more context.
atlassian.com sells one idea, context: the hero ('Discover the power of knowing'), the Teamwork Graph band, five collection tabs, a wall of customer numbers, research tiles from the Teamwork Lab, and a closing pair of imperatives. Apps are grouped into collections (Teamwork, Strategy, Service, Software, Product), each with a one-line promise.
Source: atlassian.comatlassian.com/companyatlassian.com/system-of-workatlassian.com/platform/teamwork-graph
Personality and voice
Boldbut not pushy with people who are lostPublished
Optimisticbut not vague cheerleadingPublished
Practical, with a winkbut not cheeky or jokeyPublished
Openbut not closed, siloedPublished
We can't load this page
The Page Could Not Be Loaded.
Create work item
Create A New Work Item!
Tying tone to the user's state (confident admin versus confused trial user) keeps a cheerful brand from being glib in an error message.
Full spec
- Sentence case headlines
- No periods, bold or italics in new UI headings; rephrase questions as statements. Atlassian's own marketing lines keep their periods verbatim ('Stop searching. Start shipping.', 'Deliver high quality software. Fast.')
- Phrase UI headings with an action verb; avoid gerunds
- No articles in buttons and labels: 'Create password', not 'Create a password'
- Use contractions and curly apostrophes
- Use the Oxford (serial) comma
- Active voice; present tense in instructions and messages
- Minimize pronouns; use 'you/your/we' when advising or in errors. 'Your projects', never 'My projects'
- No 'e.g.', 'i.e.', 'etc.' or '&'; use full app names, not acronyms
- Digits in most cases; commas from 1,000; 'to' for ranges, 'of' instead of a slash ('Step 1 of 2')
- Em dashes sparingly and spaced; prefer two sentences
- Write 'then' instead of '>' in UI paths
- American spelling
- Lists of six items or fewer, parallel phrasing, no end punctuation on fragments
- Delight only after trust is built; once may amuse, a dozen times may annoy
- Use the pronouns a person gives; otherwise 'they/their', never 'his/her'
- On landing pages, pair each claim with a customer number or a footnoted study and a 'Read the story' style link
BoldOptimisticPractical, with a wink
The design system publishes a UI voice: three traits (Bold, Optimistic, Practical with a wink) dialed by the user's emotional state, and six principles from 'Inform to build trust' to 'Delight'. Atlassian's marketing voice guide is internal; on atlassian.com the voice is confident and compact, with stats and research doing the persuading.
- Sentence case everywhere, including buttons
- Be more bold with power users and admins; less bold with new or anxious users
- Keep the 'wink' for success moments and social interactions
- Errors: say what happened and what to do next, in present tense ('We can't load this page')
- Contractions, active voice, Oxford comma, US spelling
- Bold means motivating teams with the right amount of support at the right time; dial it down for new, confused or anxious users.
- Optimistic means focusing on what helps the person in this moment and keeping one consistent story and vocabulary across apps.
- Practical means direct and concise; the 'wink' is reserved for moments of success, and delight means little flourishes, not humor or cheek.
- Write as a knowledgeable member of the team: open, humble, warm.
- Marketing copy on atlassian.com (observed) leans on 'context', 'teams' and 'AI', and backs claims with customer numbers and footnoted studies.
Their words
teamsteamworkcontextappscollectionsagentsRovoTeamwork GraphSystem of Workwork item
Never
'products' for Atlassian apps in new copy (they are now 'apps')e.g., i.e., etc., &title case in headings and buttons'My' for the user's things (use 'Your')
Source: atlassian.design/foundations/content/voice-toneatlassian.com/company
- Don’t use humor or cheek as 'delight'
- Don’t write 'e.g.', 'etc.' or '&'
- Don’t end headings with periods or question marks
| Traits | Bold; Optimistic; Practical, with a wink |
|---|---|
| Principles | Inform, Empower, Encourage, Motivate, Satisfy, Delight |
| Case | Sentence case |
| Spelling | US English (Merriam-Webster) |
Source: atlassian.design/foundations/content/voice-toneatlassian.design/foundations/content/language-and-grammaratlassian.design/foundations/content/designing-messagesatlassian.design/foundations/content/inclusive-writingatlassian.com
Logo
Logos shown for reference. The three horizontal lockups are rendered from Atlassian's own SVGs in the official logo pack on atlassian.design (the pack is a zip, so there is no direct SVG URL; Brandfetch still serves the retired #0052CC lockup). Other marks load from Atlassian's own CDNs (atlassian.design, the Atlassian blog, dam-cdn.atl.orangelogic.com). Atlassian and its app names are trademarks of Atlassian; logos must be used unaltered, and Atlassian's trademark guidelines ask third-party sites not to mimic atlassian.com's look and feel. Not affiliated, and not for download.
Logo in brand blue on white
Logo with a drop shadow on a photo
One mark family across 30+ apps: the tile shape says 'Atlassian app', the tile color says which collection, the glyph says what it does.
Full spec
- Minimum clearance around the Atlassian logo: the height of the capital 'A' in the wordmark
- Minimum clearance around app logos: the height and width of the logo's wordmark
- Strapline lockup: center app names under the logo; don't scale it below 280px wide
- Use attribution logos only where the Atlassian context isn't clear (ads, videos, white papers), not on atlassian.com or in-app
- Property logos: on white, program name in neutral and logo in brand blue; on dark, both white
- Logomarks alone only where context is clear, ideally with descriptive text; keep the tile's default radius
- Alt text: 'Atlassian', or Atlassian plus the app or property name
- Logo component sizes: 16, 20, 24, 32 (default), 40 and 48px
- Don’t compose your own attribution logos or deconstruct official assets
- Don’t change the tile radius or nest a logomark in another container
- Don’t use unapproved color combinations
- Don’t add a drop shadow
- Don’t place the logo on complex backgrounds
| Colors | brand #1868DB, inverse white, neutral (pack file #6C6F77) |
|---|---|
| Clear space | cap-height of the wordmark 'A' |
| Strapline min width | 280px |
| Component sizes | 16 / 20 / 24 / 32 / 40 / 48px |
| Tile radius | radius.tile, calculated 25% |
The Atlassian logo is a logomark (the stylized A, two pillars or a high-five) plus the ATLASSIAN wordmark, in three color options: brand (Blue700), inverse (white) and neutral. Lockups include the app strapline, attribution logos (app mark plus the Atlassian strapline), property logos (logo plus a name in Charlie Sans) and app logos: a glyph in a tile colored by collection.
Source: atlassian.design/foundations/logosatlassian.design/components/logo/examplesatlassian.com/blog/developers/our-bold-new-brandatlassian.com/legal/trademark
Color
Get started with Jira
Get started
Mostly white, near-black type
A page flooded blue
Roles carry meaning across 30+ apps and both themes, so 'danger' is the same red everywhere and dark mode comes for free.
Full spec
- Pick a token by role; don't choose a hex
- Accent colors (gray, red, green, blue, yellow, orange, teal, purple, magenta, lime) only where color has no meaning
- Inverse tokens on bold backgrounds; warning.inverse on yellow
- Contrast: 4.5:1 for text under 24px; 3:1 for text 24px and up and essential UI
- Selected and focused stay distinct: color.border.focused only for focus rings
- Pair selection color with a second cue (check, underline, border)
- Dark mode: neutrals map step for step; saturated colors mirror (700 becomes 400)
- Don’t use an accent when the color has semantic meaning
- Don’t use link, brand or focused tokens to show selection
- Don’t rely on color alone
| Brand | Blue700 #1868DB |
|---|---|
| Text | #292A2E |
| Subtle text | #505258 |
| Surface | #FFFFFF; sunken #F8F8F8 |
| Ramps | 10 hues x 12 steps (100-1000) + light and dark neutrals |
| Themes | light and dark |
Color is a token system, not a swatch list: tokens name the property (background, text, border, icon), the role (neutral, brand, information, success, warning, danger, discovery, accent, inverse, input), the emphasis (subtlest to boldest) and the state. Ten saturated ramps (Lime to Magenta, steps 100 to 1000) and separate light and dark neutral ramps sit underneath. Brand is Blue700. atlassian.com is mostly white with near-black type, one blue CTA, and dark #1E1F21 bands.
Not published: a marketing color ratio or proportion; the homepage heading color #101214 as a palette step.
Source: atlassian.design/foundations/coloratlassian.design/foundations/color/color-paletteatlassian.design/components/tokens/all-tokensatlassian.design/foundations/color/accentsatlassian.design/foundations/color/data-visualization-coloratlassian.com
Typography
Discover the power of knowing
Discover the power of knowing
DISCOVER THE POWER OF KNOWING
A characterful brand face for persuasion and a neutral, fast UI face for work keeps the apps calm and the marketing distinctive.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Charlie Display (Charlie Sans family) | atlassian.com headings, weight 500 (observed) | Proprietary Atlassian brand font; 'only authenticated users can download' it (atlassian.design typography). Served to atlassian.com from Atlassian's CDN; not licensed for third-party use. | Rethink Sans Calibrated against Charlie Display on atlassian.com: Rethink Sans 600 matches its stem (0.113em) and ink within 1% at width-matched tracking. |
| Charlie Text (Charlie Sans family) | atlassian.com body, nav and buttons (observed) | Proprietary Atlassian brand font; same terms as Charlie Display. | Wix Madefor Text Calibrated against Charlie Text on atlassian.com: Wix Madefor Text 450 matches Charlie Text 400's stem (0.088em); 600 matches Charlie Text 500. |
| Atlassian Mono | code (font.code 12/20) | Atlassian app font; downloadable in Atlassian Mosaic (TTF) per the guide; no open licence published. The ADS licence limits design-system assets to building add-ons for Atlassian products. | JetBrains Mono |
| Atlassian Sans | all in-app UI and atlassian.design (observed there) | Atlassian app font; downloadable in Atlassian Mosaic (TTF); hosted at ds-cdn.prod-east.frontend.public.atl-paas.net for Atlassian's own sites. Not an open licence. | Inter |
- Headings XXL and XL are for brand and marketing content
- One h1 per page; don't skip heading levels; use heading styles, not bold body
- Body L (16/24) for long-form, Body M (14/20) default in components, Body S (12/16) sparingly
- Medium weight beside line icons; bold body sparingly
- Metric styles to emphasize numbers
- Sizes in rem (1rem = 16px)
- Don’t use all caps for headlines
- Don’t use Charlie in product UI or Atlassian Sans as the marketing display face
| Heading XXL | 32/36 bold |
|---|---|
| Heading XL | 28/32 bold |
| Heading L | 24/28 bold |
| Heading M | 20/24 bold |
| Heading S | 16/20 bold |
| Heading XS | 14/20 bold |
| Heading XXS | 12/16 bold |
| Body L | 16/24, paragraph spacing 16 |
| Body M | 14/20, paragraph spacing 12 |
| Body S | 12/16, paragraph spacing 8 |
| Metric L/M/S | 28/32, 24/28, 16/20 bold |
| Code | 12/20 regular |
| Homepage hero (observed) | Charlie Display 500, 64px |
| Homepage H2 (observed) | Charlie Display 500, 48px |
Token sizes are the app (Atlassian Sans) scale; marketing sizes are observed on atlassian.com and are not published.
Two families with two jobs. Marketing expresses the brand in Charlie Sans (Charlie Display and Charlie Text on atlassian.com, observed). Apps use Atlassian Sans and Atlassian Mono through typography tokens in rem. The homepage sets headlines in Charlie Display 500 at 64px (hero) and 48px (sections), tight, centered in the hero.
Source: atlassian.design/foundations/typographyatlassian.comatlassian.com/blog/developers/our-bold-new-brand
Iconography
Rounded curves echo the type; square ends add boldness and keep strokes pixel-aligned.
Full spec
- Reuse an existing icon or metaphor before drawing a new one
- Minimum detail for the metaphor
- Straight-on or 90-degree profile only
- Support icons with text labels
- Color with icon or text tokens
- Don’t use diagonal 3D perspectives
- Don’t round internal corners
- Don’t use round or square stroke caps (set to none)
- Don’t add icons where a label is clearer
| Grid | 16 x 16px |
|---|---|
| Stroke | 1.5px |
| Sizes | 16px default, 12px small |
| Caps | none (butt) |
| Corners | rounded outside, sharp inside |
System icons are drawn on a 16px box with a 1.5px stroke, rounded outer corners, sharp inner corners and square line ends, shown straight on. 16px is default; 12px is for chevrons, validation, tags and secondary actions. Larger decorative icons go in an icon tile. atlassian.com also uses larger 'brand icons' (observed) in its feature rows.
Illustration
Illustration explains or celebrates; it never decorates a work surface.
Full spec
- Decide if an illustration is needed first
- Support the copy, don't replace it
- Low-fi UI instead of screenshots in product
- Use existing brand assets; custom illustration goes through the brand team
- Don’t use collage or decorative-only illustration in product
- Don’t crowd a screen with several illustrations
- Don’t put real screenshots inside product onboarding
| Types | Spot, low-fidelity UI, ambient pattern; collage for marketing |
|---|---|
| Low-fi UI | basic shapes, sharp corners, mostly gray |
In product: spot illustrations (single concepts for empty, error and success states, colorful or neutral), low-fidelity UI (basic shapes, sharp corners, mostly gray) and ambient patterns. Collage is reserved for marketing landing pages. On atlassian.com and the System of Work page, marketing illustration mixes flat color shapes with hand-drawn black line icons and cursors (observed).
Source: atlassian.design/foundations/illustrationsatlassian.com/system-of-work
Photography
Showing the product and the team graph keeps the story on how work connects.
Full spec
- Prefer product UI as the hero image
- When people appear, show real collaboration, labeled like teammates
- Don’t use generic stock handshakes in place of the work
| Guide coverage | not published |
|---|
Photography is used sparingly on atlassian.com; the homepage hero and feature bands show product UI, not people. Teamwork Lab blog heroes crop real people at work into a geometric shape, tint them, and overlay network lines and name pills on a dark ground (observed). The design system publishes no photography guidance.
Not published: photography style, crops, color treatment.
Source: atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-contextatlassian.com
Motion
scaling modals, repositioning
elements arriving: panels, flags
exits, getting out of the way
everyday entrances: popups, hover background fades
primary/secondary pill hover: background-color and scale
Fast, quiet motion for things seen dozens of times a day; expression saved for rare brand moments.
Full spec
- Under 150ms for anything triggered often
- Exits faster than entrances
- One focal animation at a time
- Honor reduced motion: motion off and instant
- Expressive motion only for brand moments like onboarding
- Don’t make people wait for an animation
- Don’t run competing simultaneous animations
- Don’t flash, oscillate rapidly or sweep large areas
| Interactions | 50-150ms |
|---|---|
| Transitions | 150-400ms |
| Ease-out bold | cubic-bezier(0, 0.4, 0, 1) |
| Ease-in-out bold | cubic-bezier(0.4, 0, 0, 1) |
| Ease-in practical | cubic-bezier(0.6, 0, 0.8, 0.6) |
| Ease-out practical | cubic-bezier(0.4, 1, 0.6, 1) |
Motion principles are Human, Clarity, Accessible and Performant. Four easing curves and two duration ranges (interactions 50-150ms, transitions 150-400ms) are bundled into semantic tokens such as motion.popup.enter; the token set is in early access behind a feature flag.
Interface & layout
The page, band by band
Nav: white 68px sticky bar, blue logo, six menu labels, search circle, Sign in
Hero: centered 64px one-line headline, 20px subline, blue pill + text link, framed 1168x658 Jira board video Primary action
Logo marquee: one 32px row of #3B3D42 customer wordmarks
Context statement and 44% + 48% mono stat pair
Dark Teamwork Graph band: white text top-left, animated node graph full bleed
Collections: centered heading, grey pill tabs, two-column panel (copy left, product composite right)
Customer stories: left heading + outline pill, arrows right, 432x384 colored stat cards bleeding right
Platform pillars: heading + outline pill, four columns of icon / 32px title / body
Teamwork Lab: heading + arrows, 316x523 cards (square image over colored panel)
Closing CTA: dark band, giant darker A mark, white 64px two-line headline, 24px sub, blue pill
Buttons
Signature moves
Discover the power of knowing
Discover the power of knowing
The product is the hero image · the atlassian.com hero: under a centered headline and two CTAs sits a full, rounded browser-style frame of a live-looking Jira board (observed 2026-10-29)
Ask Rovo
AI Assistant
Named people and agents in pill tags · homepage feature images and Teamwork Lab blog heroes: UI cards and photos on a faint grid, labeled with small rounded name pills ('Veronica', 'Gabe', 'Planner', 'Agent') attached to cursors or nodes (observed 2026-10-29)
Jira, Confluence, Loom
Jira in a circle
App logos as colored tiles, colored by collection · app logos everywhere (nav menus, collection tabs on the homepage, product pages)
Get started with Jira
Get Started With Jira
One blue pill, one blue arrow link · hero and closing band on atlassian.com
Specimens use sample copy, not Atlassian’s.
Full spec
8px base unit, space tokens from 0 to 80px, a 12-column grid inside the main content area, fixed-wide (1296px) and fixed-narrow (864px) containers, and a radius scale from 2px to 16px plus full. Surfaces stack in four elevations (sunken, default, raised, overlay) with published shadows.
Measured from atlassian.com's Playwright computed styles, bounding boxes and canvas text metrics at 1440 and 390 px (768 for the type steps) on 2026-10-29; pixel samples where computed color and render disagreed.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 136px | 32px |
| Section padding | 80px | 48px |
| Hero text width | max 968px, centered | full width |
| Card gap | 32px | 32px |
| Navigation | 68px | 68px |
Type, at size
Hero headline (Charlie Display 500 -1.28px; stand-in Rethink Sans 600, phone tracking -1.68px)
Charlie Display (Charlie Sans family) · 64px (phone 44) · line 1.04 · tracking -2.44px · weight 600
Section headline (Charlie 500 -0.96px; stand-in 600, phone tracking -1.11px)
Charlie Display (Charlie Sans family) · 48px (phone 32) · line 1.16 · tracking -1.67px · weight 600
Sub-section headline: context, collection h3 (Charlie 500 -0.4px; stand-in 600, phone tracking -0.74px)
Charlie Display (Charlie Sans family) · 40px (phone 24) · line 1.2 · tracking -1.23px · weight 600
Pillar title (Charlie 500 0px; stand-in 600, phone tracking -0.49px)
Charlie Display (Charlie Sans family) · 32px (phone 20) · line 1.24 · tracking -0.78px · weight 600
Card title, Teamwork Lab (Charlie 500 0px; stand-in 600, phone tracking -0.35px)
Charlie Display (Charlie Sans family) · 24px (phone 18) · line 1.24 · tracking -0.46px · weight 600
Story description / CTA sub (Charlie Display 400 -0.24px; stand-in Rethink Sans 400, phone tracking -0.79px)
Charlie Display (Charlie Sans family) · 24px (phone 18) · line 1.36 · tracking -1.06px · weight 400
Lead / subline (Charlie Text 400 -0.2px; stand-in Wix Madefor Text 450)
Charlie Text (Charlie Sans family) · 20px · line 1.56 · tracking -0.04px · weight 450
Body (Charlie Text 400 -0.16px; stand-in Wix 450)
Charlie Text (Charlie Sans family) · 16px · line 1.56 · tracking -0.1px · weight 450
Button (Charlie Text 400; stand-in Wix 450)
Charlie Text (Charlie Sans family) · 20px (phone 16) · line 1.2 · tracking 0.06px · weight 450
Tab (Charlie Text 500; stand-in Wix 600)
Charlie Text (Charlie Sans family) · 18px (phone 16) · line 1.44 · tracking -0.02px · weight 600
Nav link (Charlie Text 400; stand-in Wix 450)
Charlie Text (Charlie Sans family) · 16px · line 1 · tracking 0.06px · weight 450
Footer link (Charlie Display 400 +0.42px; stand-in Rethink Sans 400)
Charlie Display (Charlie Sans family) · 14px · line 1 · tracking -0.06px · weight 400
Footer column head
Charlie Text (Charlie Sans family) · 13px · line 1.2 · weight 700
Footnote / legal (Charlie Text 400; stand-in Wix 450)
Charlie Text (Charlie Sans family) · 12px · line 1.56 · weight 450
Big stat numeral
Atlassian Mono · 128px (phone 72) · line 1 · weight 700
Card stat numeral
Atlassian Mono · 96px (phone 60) · line 1 · tracking -3px · weight 700
Stat label
Atlassian Mono · 16px (phone 12) · line 1.2 · tracking 1.28px · weight 500
- Corner radius
- [object Object]px
- Shadow
- [object Object]
- Motion
- ease-out bold cubic-bezier(0, 0.4, 0, 1) for entrances; 50-150ms interactions, 150-400ms transitions; exits faster than entrances
- Buttons
- pill
Page anatomy
How Atlassian’s own landing pages are built, observed on atlassian.com, 2026-10-29. The full measurements are in spec.md.
- Navigation
- White 68px bar, sticky. Blue Atlassian logo left; six menu labels in a row after it; a round grey search button and 'Sign in' at the far right. No button, no announcement bar
- Hero
- Centered type stack over a full-width product UI: a one-line 64px headline, two-line 20px subline, a blue pill button beside a blue text link, then a 1168px framed Jira board video
- Logo strip (marquee)
- One row of #3B3D42 grey customer wordmarks scrolling left under the hero media, no heading
- Context statement + stat pair
- Centered 40px heading, 2-line body, blue text link, then two giant mono percentages joined by a blue plus, and a 12px footnote
- Teamwork Graph (dark band)
- Full-bleed #1E1F21 band: white 48px headline, 20px body and a white-outline pill top-left, a full-width animated node graph behind
- Collections (tabbed)
- Centered 48px heading and 20px intro, a grey pill tab bar with five tabs, then a two-column panel: collection wordmark, app icons, 40px headline, body and link on the left, product composite image on the right
- Customer stories (carousel)
- Left-aligned 48px heading, 20px intro and an outline pill; round prev/next arrows right; a row of colored stat cards bleeding off the right edge
- Platform pillars
- Left 48px heading with an outline pill under it, then four equal columns: 88px line icon, 32px title, 16px body
- Teamwork Lab (content carousel)
- Left 48px heading and 20px intro, arrows right, then a row of tall cards: square image on top, colored panel below with a tag pill, 24px white title and a read link
- Closing CTA (dark band)
- Full-bleed #1E1F21 band, a giant darker Atlassian A mark centered behind, white 64px two-line headline, 24px line, blue primary pill
- Footer
- A rounded #F8F8F8 panel inset 120px from the page edges holding the blue A mark, a bold company column and three link columns; under it a white legal row
Source: atlassian.design/foundations/spacingatlassian.design/foundations/gridatlassian.design/foundations/radiusatlassian.design/foundations/elevationatlassian.design/foundations/border
In use
Our bold new brand: the 2017 identity · 2017
One mark family built around teamwork lets any new app join without a new identity. Our reading
App logos and collections · 2025
Color now encodes portfolio structure, so a buyer can read the lineup at a glance. Our reading
State of Teams 2025 · 2025
Turns a product claim (context) into a measured industry problem. Our reading
Teamwork Lab: give AI more context · 2026
Independent-feeling research from a named lab gives the homepage numbers a source. Our reading
Leading with Context
Atlassian as its own case study: the brand practices what the product sells. Our reading
Atlassian System of Work
A philosophy that frames the app portfolio as one way of working. Our reading
State of Developer Experience 2025 · 2025
Gives the Software collection its own research proof. Our reading
Full spec
How our engine applies Atlassian's system to each format. This is our recipe built from their rules, not something Atlassian publishes. Level = how far from calm product UI toward expressive brand moments.
- Our bold new brand: the 2017 identity. New Atlassian logo (two pillars, a high-five or a mountain to scale), a unified product-logo family for 14+ products, and the bespoke typeface Charlie Sans, named for the original logo character. Announced Sept 11, 2017. atlassian.com/blog/developers/our-bold-new-brand
- App logos and collections. With the System of Work and collections framework, products became 'apps', with marks that symbolize function inside tiles colored by collection. atlassian.design/foundations/logos
- State of Teams 2025. Survey of 12,000 knowledge workers and 200 executives; found leaders and teams waste 25% of their time searching for answers. atlassian.com/blog/state-of-teams-2025
- Teamwork Lab: give AI more context. Pulse survey of 1,002 US knowledge workers (July-August 2026): AI that understands more of the work is up to 6x more likely to be called helpful. atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-context
- Leading with Context. Report on Atlassian's own AI transformation, with role-specific editions for CMOs, CTOs/CIOs and CHROs. Year not stated on the page; featured on the homepage 2026-10-29. atlassian.com/blog/guides-research/leading-with-context
- Atlassian System of Work. Four principles for how technology and business teams work together, including AI teammates, backed by Teamwork Lab guidance. Launch year not stated on the page. atlassian.com/system-of-work
- State of Developer Experience 2025. With Wakefield Research, a survey of 3,500 developers and managers on AI and developer friction. atlassian.com/teams/software-development/state-of-developer-experience-2025
| Format | What they did | Source |
|---|---|---|
| website | atlassian.com homepage: centered hero with product UI, dark context band with stats, collection tabs, customer number cards, platform features with brand icons, research tiles, dark close. | atlassian.com |
| product UI | Jira, Confluence and the other apps, built from ADS tokens, Atlassian Sans and the logo component. | atlassian.design |
| blog | Teamwork Lab articles with tinted photo heroes, network lines and name pills. | atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-context |
| report | Leading with Context reports and State of Teams. | atlassian.com/blog/guides-research/leading-with-context |
| press | Press kit: executive headshots, logo library, company overview. | atlassian.com/company/news/press-kit |
| landing page | System of Work and Teamwork Graph pages with collage illustration and product UI. | atlassian.com/system-of-work |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | White ground, centered Charlie-style display headline, one #1868DB pill CTA plus a blue arrow link, product UI as the hero image, dark #1E1F21 bands for the context story and the close, numbers with sources | which collection tabs, customer cards and research tiles follow the hero | |
| Deck | White slides, sentence-case headlines, one blue accent, product UI and named-collaborator imagery | one dark section divider | |
| Proposal page | Calm white page, outcomes backed by numbers with sources, one blue pill for the next step | a product UI frame at the top | |
| Ad | Attribution logo (context unclear), short sentence-case line, product UI | collage illustration | |
| Social post | One stat or headline, brand blue or dark ground, named pills or collage | illustration style | |
| White, #292A2E text, one blue pill button | none | ||
| Error message | Practical tone: what happened, what to do next; present tense; no wink | none |
Ads
JiraGoogle, Meta, LinkedIn · Feb 2026 – now
ConfluenceGoogle, Meta, LinkedIn · Apr 2026 – now
LoomGoogle, Meta, LinkedIn · Oct 2025 – now
The state of ai in service managementMeta, LinkedIn · Oct 2026 – now- Campaign walk: Start with context, not from scratchad → landing page → Free sign-up
- Campaign walk: Agents build. You direct.ad → landing page → Free sign-up
- Campaign walk: Plan, Track, And Manage Projectsad → landing page → Free sign-up
- Campaign walk: Welcome to great meetings with less workad → landing page → Free sign-up
Rules
Do
- Use tokens, not hex values
- Meet WCAG AA: 4.5:1 text, 3:1 large text and essential UI
- Use official logo files from an Atlassian site, unaltered
- Sentence case, US English, Oxford comma
- Tiles keep radius.tile; logomarks never nested
Don’t
- mimic atlassian.com's look and feel for a third-party site (trademark guidelines)
- put an Atlassian trademark in a company or domain name
Source: atlassian.design/foundationsatlassian.design/foundations/accessibilityatlassian.com/legal/trademarkorangedam.atlassian.com
Steal this kit
Your name and logo, Atlassian’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Atlassian doesn’t publish
- Atlassian's marketing brand guidelines, brand book, brand voice and tone, templates and in-product illustration guidelines are not public (Orange Logic DAM, login required).
- Charlie Sans / Charlie Display / Charlie Text: not downloadable (authenticated users only); no open licence. Atlassian Sans/Mono: available in Atlassian Mosaic, no open licence published.
- Marketing type scale (sizes, weights, tracking for Charlie): not published; only observed on atlassian.com.
- Color proportion or ratio: not published.
- The homepage heading color #101214 and the dark band color usage: not published as rules; observed only.
- Tile colors #FFC716 (Service) and #FB9700 (Strategy) appear in app-logo SVGs but not in the published palette.
- Photography guidance: not published.
- Logo minimum size in pixels for the Atlassian logo outside the component: not published (strapline lockup minimum 280px wide is published).
- Marketing motion and video guidance: not published; motion tokens are in early access.
- No direct public SVG URL for the full Atlassian lockup: the official files ship in a zip; Brandfetch's lockup and symbol are the older versions (blue #0052CC, gradient mark), so they were not used.
- Campaign years for Leading with Context and the System of Work launch are not stated on their pages.
- Atlassian's trademark guidelines ask that third-party websites not reproduce or mimic atlassian.com's look and feel; a build 'the way their homepage is built' should stay a study, not a public lookalike.
- Atlassian Mono (the stat numeral face) is not open; JetBrains Mono shares its metrics but reads wider in the 44%/48% pair and shorter in the card numerals (r1 grade). Request Atlassian Mono, or permission to use it, from Atlassian.
- The hero's faint 40px grid has no source element on atlassian.com (not a CSS background, image or pseudo-element we could find); its look is measured from pixels only.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-29. Not affiliated with Atlassian.