# Atlassian: brand book and build spec

A white, calm page with one blue (#1868DB) pill, near-black Charlie type, and the product itself as the picture. Behind it sits one of the most complete public design systems anywhere: tokens for every color role, an 8px space scale, and a voice that is bold, optimistic and practical, with a wink saved for wins.

From unfairly.ai/brand-guidelines/atlassian, checked 2026-10-29. Unofficial study; not affiliated with Atlassian.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Context is the brand. Atlassian shows the work itself (boards, pages, named teammates and agents) instead of metaphors, and runs everything on tokens, so 30+ apps and a marketing site read as one connected system, which is exactly what it sells. Based on: From the homepage's context argument and product-UI hero, the collection-colored app tiles, and the token-first color and type foundations.

## Purpose

Mission: Our mission is to help unleash the potential of every team through open work. (published; https://www.atlassian.com/company)

Story: 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. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Open company, no bullshit | Work and information are open by default (published value; also the 'Working Open' philosophy). | published: https://www.atlassian.com/company |
| Build with heart and balance | Published company value. | published: https://www.atlassian.com/company |
| Don't #@!% the customer | Customers come first, including pricing so every company can afford the products (paraphrase). | published: https://www.atlassian.com/company |
| Play, as a team | Published company value. | published: https://www.atlassian.com/company |
| Be the change you seek | Published company value. | published: https://www.atlassian.com/company |

## Fixed and flexible

Never changes:
- 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.

## Positioning

- **Statement**: 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)
- **Category**: Teamwork and work-management software platform with AI agents (Rovo), sold as apps and collections. (observed)
- **Audience**: 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). (observed)
- **Problem**: Teams have more information than ever but are less informed; scattered tools and missing context make AI output generic (paraphrase). (published)
- **Promise**: Give teams and agents the context they need to make smarter decisions, coordinate and ship with confidence (paraphrase of the hero subline). (observed)
- **Differentiators**: Teamwork Graph: a context layer across Atlassian and third-party tools.; 20+ years of teamwork research, the Teamwork Lab and the System of Work.; Enterprise permissions that carry across every agent.
- **Alternatives**: Scattered point tools and generic AI without business context (no competitor is named on the homepage).

## Messaging

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 (Homepage hero H1)
- The teamwork platform for the AI era (Teamwork Collection tab heading)
- Stop searching.  Start shipping. (Homepage closing band H2 (two imperative sentences))
- The living map of how work gets done (Teamwork Graph page hero)
- We help teams change the world (Company page hero)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Context | Connected context makes teams and agents more effective. | Up to 44% better answer quality and 48% fewer tokens (Atlassian Engineering Productivity Study, 2026; internal studies, results vary).; 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). | our reading |
| Humans and AI together | One system of work where people and agents collaborate. | Atlassian System of Work: four principles, including realizing the full power of AI teammates. | our reading |
| Proven at scale | Hundreds of thousands of teams, measured customer outcomes. | 350,000+ teams (homepage); 300,000+ customers (company page).; Customer story cards, e.g. 75% reduction in time spent writing quarterly roadmaps; 25% lower TCO. | our reading |
| Secure and governed | Enterprise permissions carry across every agent. | Secure from the start: enterprise permissions that carry across every agent. | observed |

They never claim:
- Stats carry their footnote: the homepage marks the 44%/48% figures as internal studies where results may vary.
- Use attribution logos only where the Atlassian context isn't clear; never compose your own.
- Third parties: Atlassian's trademark guidelines ask that sites not reproduce or mimic atlassian.com's look and feel.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Discover the power of knowing" | homepage | https://www.atlassian.com/ |
| "Your context, wherever you need it" | homepage | https://www.atlassian.com/ |
| "Connect the work behind the work" | homepage | https://www.atlassian.com/ |
| "Transform how your teams work" | homepage | https://www.atlassian.com/ |
| "The teamwork platform for the AI era" | homepage | https://www.atlassian.com/ |
| "AI-native strategic portfolio management" | homepage | https://www.atlassian.com/ |
| "Shatter the service quo" | homepage | https://www.atlassian.com/ |
| "Deliver high quality software. Fast." | homepage | https://www.atlassian.com/ |
| "Better product decisions in the age of AI" | homepage | https://www.atlassian.com/ |
| "Where 350,000+ teams turn context into delivery" | homepage | https://www.atlassian.com/ |
| "Built for how modern teams work" | homepage | https://www.atlassian.com/ |
| "Fueled by Atlassian’s teamwork expertise and research" | homepage | https://www.atlassian.com/ |
| "Stop searching.  Start shipping." | homepage | https://www.atlassian.com/ |
| "We help teams change the world" | company page | https://www.atlassian.com/company |
| "The living map of how work gets done" | product page | https://www.atlassian.com/platform/teamwork-graph |
| "Want more confidence in AI? Give it more context." | blog | https://www.atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-context |

## Voice

Tone words: Bold, Optimistic, Practical, with a wink.

Traits:
- Bold, but not pushy with people who are lost (published)
- Optimistic, but not vague cheerleading (published)
- Practical, with a wink, but not cheeky or jokey (published)
- Open, but not closed, siloed (published)

- 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.

Rules a copy check enforces:
- 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

Their words: teams, teamwork, context, apps, collections, agents, Rovo, Teamwork Graph, System of Work, work 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').

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Success, celebration, power users 4, Marketing pages (observed) 3, Everyday UI, information 2, New or trial users, introducing a feature 1, Errors, blocked, deadlines 0. One voice dialed by the reader's emotional state. Atlassian publishes the guidance; the levels are our reading.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Blue700 | #1868DB | accent | The brand blue: primary buttons, links, brand text, the Atlassian logo (brand version), the homepage CTA. |
| Neutral0 (white) | #FFFFFF | paper | Default surface; the homepage ground. |
| Neutral100 | #F8F8F8 | surface | Sunken surface (Kanban columns); homepage collection cards. |
| Neutral1000 | #292A2E | ink | Default text (color.text). atlassian.com headings run a little darker, #101214 (observed). |
| Neutral800 | #505258 | ink_muted | Secondary text: navigation, labels, all-caps subheads. |
| Neutral1100 | #1E1F21 | night | Dark bands on atlassian.com (observed); the shadow base color in tokens. |
| Purple700 | #964AC0 | accent_secondary | Discovery: new features, onboarding. |
| Blue800 | #1558BC | extra | Brand hover. |
| Blue100 | #E9F2FE | extra | Selected backgrounds; blue tint. |
| Red700 | #C9372C | extra | Danger bold. |
| Lime700 | #5B7F24 | extra | Success bold. |
| Orange300 | #FBC828 | extra | Warning bold, with dark text. |
| Neutral700 | #6B6E76 | extra | Subtlest text: metadata, placeholders. |
| Red300 (Alexandria) | #FD9891 | extra | Dedicated swatch. |
| Magenta300 (Rosie) | #F797D2 | extra | Dedicated swatch. |

Proportion (our reading; 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.): White 81%, Night 19%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Charlie Display | 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 | "Helvetica Neue", Arial, sans-serif |
| body | Charlie Text | Proprietary Atlassian brand font; same terms as Charlie Display. | Wix Madefor Text | "Helvetica Neue", Arial, sans-serif |
| mono | Atlassian Mono | 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 | ui-monospace, Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (Charlie Display 500 -1.28px; stand-in Rethink Sans 600, phone tracking -1.68px) | --text-hero-* | display | 64px | 44px | 1.04 | -2.44px | 600 |
| Section headline (Charlie 500 -0.96px; stand-in 600, phone tracking -1.11px) | --text-section-* | display | 48px | 32px | 1.16 | -1.67px | 600 |
| Sub-section headline: context, collection h3 (Charlie 500 -0.4px; stand-in 600, phone tracking -0.74px) | --text-subsection-* | display | 40px | 24px | 1.2 | -1.23px | 600 |
| Pillar title (Charlie 500 0px; stand-in 600, phone tracking -0.49px) | --text-pillar-* | display | 32px | 20px | 1.24 | -0.78px | 600 |
| Card title, Teamwork Lab (Charlie 500 0px; stand-in 600, phone tracking -0.35px) | --text-card-title-* | display | 24px | 18px | 1.24 | -0.46px | 600 |
| Story description / CTA sub (Charlie Display 400 -0.24px; stand-in Rethink Sans 400, phone tracking -0.79px) | --text-story-* | display | 24px | 18px | 1.36 | -1.06px | 400 |
| Lead / subline (Charlie Text 400 -0.2px; stand-in Wix Madefor Text 450) | --text-lead-* | body | 20px | 20px | 1.56 | -0.04px | 450 |
| Body (Charlie Text 400 -0.16px; stand-in Wix 450) | --text-body-* | body | 16px | 16px | 1.56 | -0.1px | 450 |
| Button (Charlie Text 400; stand-in Wix 450) | --text-button-* | body | 20px | 16px | 1.2 | 0.06px | 450 |
| Tab (Charlie Text 500; stand-in Wix 600) | --text-tab-* | body | 18px | 16px | 1.44 | -0.02px | 600 |
| Nav link (Charlie Text 400; stand-in Wix 450) | --text-nav-* | body | 16px | 16px | 1 | 0.06px | 450 |
| Footer link (Charlie Display 400 +0.42px; stand-in Rethink Sans 400) | --text-footer-link-* | display | 14px | 14px | 1 | -0.06px | 400 |
| Footer column head | --text-footer-head-* | body | 13px | 13px | 1.2 | 0px | 700 |
| Footnote / legal (Charlie Text 400; stand-in Wix 450) | --text-footnote-* | body | 12px | 12px | 1.56 | 0px | 450 |
| Big stat numeral | --text-stat-xl-* | mono | 128px | 72px | 1 | 0px | 700 |
| Card stat numeral | --text-stat-* | mono | 96px | 60px | 1 | -3px | 700 |
| Stat label | --text-stat-label-* | mono | 16px | 12px | 1.2 | 1.28px | 500 |

## Layout

Measured on https://www.atlassian.com/: 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.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 136px | 32px |
| Section padding | 80px | 48px |
| Container max width | 1168px | full |
| Hero text width | max 968px | full |
| Grid columns | 4 | 1 |
| Gutter | 32px | 24px |
| Card gap | 32px | 32px |
| Navigation height | 68px | 68px |

At every width (observed, 2026-10-29):
| What | 390px | 768px | 1024px | 1280px | 1440px |
|---|---|---|---|---|---|
| hero headline | 44px / 45.76 / -0.88px, 3 lines | 48px / 49.92 / -0.96px | 54px / 56.16 / -1.08px | 54px / 56.16 / -1.08px | 64px / 66.56 / -1.28px, 1 line |
| section headline | 32px / 37.12 / -0.64px | 36px / 41.76 / -0.72px | 40px / 46.4 / -0.8px | 40px / 46.4 / -0.8px | 48px / 55.68 / -0.96px |
| collection h3 | 24px | 28px | 32px | 32px | 40px |
| pillar title | 20px | 24px | 28px | 28px | 32px |
| lead / body | 20px / 16px | 20px / 16px | 20px / 16px | 20px / 16px | 20px / 16px |
| primary button | 203x40, 16px | 203x40, 16px | 250x48, 20px | 250x48, 20px | 250x48, 20px |
| content column | 326px at x 32 | 648px at x 60 | 904px at x 60 | 1152px at x 64 | 1168px at x 136 |
| nav | logo + hamburger | logo + hamburger | logo, 6 labels, search, Sign in | logo, 6 labels, search, Sign in | logo, 6 labels, search, Sign in |
| page height | 8726px | 7238px | 6870px | 6922px | 7261px |

Breakpoints from Atlassian's CSS: 480, 640, 768, 1024, 1440px.

Homepage bands, top to bottom (observed):
1. Nav: white 68px sticky bar, blue logo, six menu labels, search circle, Sign in
   - Desktop: y 0-68; logo 148x24 at x 32,y 24; labels from x 204; search 40px circle x 1284; Sign in x 1357
   - Phone: 68px; logo + 21x20 hamburger at x 337
   - No CTA button in the bar
   - Labels 16px Charlie Text 400 #292A2E; chevrons on five
2. Hero: centered 64px one-line headline, 20px subline, blue pill + text link, framed 1168x658 Jira board video
   - Desktop: headline y 148, subline y 227, CTA y 321, frame y 433-1091 at x 136 (radius 20, 1px #DDDEE1)
   - Phone: 44px 3-line headline y 100, stacked CTA + link, square video 390x390 full bleed at y 572; faint 40px grid behind the pill and link
   - Resting state is video frame 0 (assets/hero-board-desk-frame0.jpg)
   - Pause button (two bars, #DDDEE1 40px circle) bottom-right inside the frame; never a play triangle
   - Faint 40px grid (#EFEFEF fading to white) behind the CTA row and frame top, on desktop and phone
3. Logo marquee: one 32px row of #3B3D42 customer wordmarks
   - Desktop: y 1195, 64px gaps, scrolls left 90s loop (animation only)
   - Phone: y 1066, same row
   - No heading
   - Every logo #3B3D42 via the CSS filter in page anatomy; fixed box widths, 32px tall, object-fit contain
4. Context statement and 44% + 48% mono stat pair
   - Desktop: 40px heading y 1291 centered 768px; stats y 1469 at 128px Atlassian Mono 700 with a 44px blue plus between; footnote 12px y 1714
   - Phone: 24px heading; numerals 72px
   - Labels mono 16px uppercase +1.28px
5. Dark Teamwork Graph band: white text top-left, animated node graph full bleed
   - Desktop: y 1831-2783, padding 80px; text column 444px at x 136; outline pill 317x48; SVG 1440x792
   - Phone: y 1711, 685px; graph 390x215 directly under the pill, the whole network visible (assets/teamwork-graph-clean-phone.png at 100% width), pause bottom-left
   - Type renders #FFFFFF
   - Graph resting state = assets/teamwork-graph-clean-desk.png (desktop) and assets/teamwork-graph-clean-phone.png (phone); both are the SVG alone with no baked text. Never use teamwork-graph-live-svg.png (it has the band text baked in)
6. Collections: centered heading, grey pill tabs, two-column panel (copy left, product composite right)
   - Desktop: heading y 2863; tab track 708x58 #F0F1F2 radius 40 at y 3029; panel y 3135, 568 + 32 + 568
   - Phone: left-aligned; tabs become scrolling chips; panel stacks with image last
   - Active tab #101214 pill, white text
   - Teamwork selected at rest
7. Customer stories: left heading + outline pill, arrows right, 432x384 colored stat cards bleeding right
   - Desktop: heading y 3610; cards y 3996, radius 20, padding 48/40, 32px gap; stat 96px Atlassian Mono
   - Phone: cards 311px, 24px gap, 9 dots
   - Nine cards, grounds #CFE1FD #C75300 #D3F1A7 #4C6B1F #FFE48F #803FA5 #EED7FC #101214 #1868DB
8. Platform pillars: heading + outline pill, four columns of icon / 32px title / body
   - Desktop: heading y 4555; columns y 4779, 268px wide, 32px gaps
   - Phone: one column, 20px titles
   - 88px black line icons
9. Teamwork Lab: heading + arrows, 316x523 cards (square image over colored panel)
   - Desktop: heading y 5245; cards y 5543, radius 20, 32px gap, panel padding 24
   - Phone: cards 311px, 7 dots
   - Tag: 3px-radius rectangle, 18px tall, uppercase over a pale tint; 24px white title 3 lines
10. Closing CTA: dark band, giant darker A mark, white 64px two-line headline, 24px sub, blue pill
   - Desktop: y 6146-6699; headline y 6274 in 735px, 2 lines 'Stop searching. Start' / 'shipping.'; pill y 6523; A mark 432px centered both ways (61px clear top and bottom)
   - Phone: 428px; 44px 3-line headline 'Stop' / 'searching.' / 'Start shipping.'; A mark ~300px centered both ways
   - Mark #111213 from assets/cta-band-a-mark.svg
11. Footer: #F8F8F8 panel (square top, 24px rounded bottom) with A mark + 4 columns, white legal row
   - Desktop: panel 1200x422 at x 120, y 6715; columns at x 144/440/736/1032; legal row y 7190
   - Phone: stacked open lists at x 40; legal links one per line
   - Link counts 8 / 8+1 / 7+1 / 5+1
   - Legal: Privacy policy, Terms, Trust Center, Impressum, English ▾

## Page anatomy

How Atlassian's own landing pages are built, part by part (observed; https://www.atlassian.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: 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
- ground: #FFFFFF, no border, no shadow at rest
- height: 68px at 1440 and 390
- logo: Atlassian logo (blue #1868DB mark + wordmark, inline SVG viewBox 297x48) rendered 148x24 at x 32, y 24; same size on phones
- links: 6, verbatim and in order: 'Products', 'AI', 'Solutions', 'Why Atlassian', 'Resources', 'Enterprise'. Charlie Text 16px/16px 400 #292A2E, each link the full 68px tall with padding 4px 16px 0, starting x 204 (24px after the logo): Products x 204 w117, AI x 321 w66, Solutions x 387 w122, Why Atlassian x 509 w160, Resources x 669 w128, Enterprise x 797 w109. The first five carry an 11x6 down chevron 8px after the label (Enterprise has none). Hover: text turns #1558BC
- actions: Search: a 40x40 circle, #F8F8F8 fill, 50% radius, at x 1284, y 14, magnifier icon. A 1px vertical divider, then 'Sign in' (Charlie Text 16px 500 #101214, no box) at x 1357, right edge at 1408 (32px page margin)
- dropdown: Products opens a mega panel (#F8F8F8 left rail 224px with tab list, white body): 'Featured apps' (Jira, Confluence, Jira Service Management with 12px #505258 descriptions), 'Atlassian Collections' (five #F8F8F8 cards, radius 20px, padding 24px, 304px wide: Teamwork, Strategy, Service, Software, Product), 'Powered by' Rovo row with a 1px #DDDEE1 border. Not part of the resting page
- sticky: position sticky, top 0, the whole 68px bar
- phone: 68px: same 148x24 logo at x 32, y 24; a 21x20 hamburger ('Toggle Menu') at x 337. No Sign in, no search, no CTA in the bar

**Hero**
- summary: 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
- desktop: Headline top y 148 (80px below the nav), centered in a 968px column (x 236-1204), 1 line, 67px tall. Subline y 227 (12px gap), 968px max, 2 lines, centered. CTA row y 321 (32px below subline): 'Get started with Jira' primary pill 250x48 at x 520, then 'Contact us →' text link (Charlie Text 20px 500 #1868DB) at x 802, 32px gap. Media frame y 433-1091: 1168x658 at x 136, 20px radius, 1px #DDDEE1 border, overflow hidden, video 1166x656 inside (16:9). Media starts 64px below the CTA row. Pause button: 40x40 circle bottom-right inside the frame (x 1257, y 1036)
- phone: Order: headline (44px, 3 lines 'Discover the' / 'power of' / 'knowing', y 100, 32px below the nav), subline (20px, 5 lines, y 257), primary pill 203x40 centered at y 445, 'Contact us →' centered at y 517, then the square video full-bleed 390x390 at y 572 with no frame. All centered, 32px side margins (326px column). The 40px grid shows behind the pill and link (see decoration). Pause button 40x40 #DDDEE1 at x 344, y 908 inside the video
- at rest: The video autoplays, muted, looped (52s). Static state = frame 0: the Jira 'Checkout roadmap' board (Spaces breadcrumb, Summary/Board/List/Forms/Pages/Attachments/Calendar tabs, Search board + avatar row + Filter/Group/Needs input, four columns To do 3 / In progress 3 / In review 3 / Done 2 of white cards with tags and PAY- keys) under the Jira top bar with blue '+ Create' and 'Ask Rovo'. The poster file is a later, zoomed frame without the top bar: animation only
- media: VIDEO element, not an image and not live DOM: desktop https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OU5D.mp4 (1920x1080), phone AT12OUGN.mp4 (1920x1920 square). Use the frame-0 stills in study.slot_assets
- decoration: REQUIRED, not optional, at both widths: a faint square grid of 1px lines on a 40px pitch (not 52px), drawn BEHIND the hero (z below the video frame and the CTA). Lines #EFEFEF where densest, fading radially to #F9F9F9 and then to white; no element on the page owns it (it isn't a CSS background), so draw it yourself. 1440: vertical lines at x = 719 + 40n, horizontal lines at y 427, 467, 507, 547 (the frame and video hide everything below y 433); visible only from about y 395 down to the frame top, and only between x 560 and 880 (narrowing to 678-760 at y 400), centered on x 720. Phone: visible around the stacked actions from about y 425 to the video top (572), x 80 to 305; vertical lines at x 119, 159, 199, 239, 279, horizontal at y 466, 506, 546; centered on the pill. Never switch it off on phone
- type: Headline Charlie Display 64px/66.56px 500, tracking -1.28px (-0.02em), #101214, centered. Subline Charlie Text 20px/31.2px 400, -0.2px, #292A2E. Phone headline 44px/45.76px, -0.88px
- cta: One primary pill ('Get started with Jira') plus one blue text link with a → arrow ('Contact us'); never two filled buttons
- proof: Customer logo strip under the media (see next section), then a 44% + 48% stat pair
- copy: Headline 'Discover the power of knowing'. Subline (verbatim): 'Give your teams the shared context they need to make smarter decisions, coordinate seamlessly, and ship with confidence.' Primary 'Get started with Jira'; link 'Contact us →'

**Logo strip (marquee)**
- summary: One row of #3B3D42 grey customer wordmarks scrolling left under the hero media, no heading
- ground: #FFFFFF
- desktop: Row y 1195-1227 (104px below the media frame). Each logo is an img in a fixed box 32px tall, object-fit contain, 64px margin after each: Sprout Social 140 wide (ink 23px tall), Atlassian Williams F1 Team 62.5 (32), Databricks 140 (22), HarperCollins Publishers 240 (25), Cisco 61 (32), Procore 140 (17), Datasite 140 (25), Expedia 140 (28), Trivago 113.6 (32). Nine logos repeated 4 times in one 6948px track. CSS animation 'scroll' 90s linear infinite: animation only
- phone: Same 32px row, same box widths and #3B3D42, at y 1066 (104px below the video), logos full-bleed; 64px after each logo
- at rest: Order in the track: Sprout Social, Atlassian Williams F1 Team, Databricks, HarperCollins Publishers, Cisco, Procore, Datasite, Expedia, Trivago. The 1440 screenshot shows Atlassian Williams, databricks, HarperCollins, Cisco, Procore, Datasite between x 140 and 1290
- anatomy:
  - Logos are monochrome #3B3D42 (recolored by CSS filter)
  - Size comes from the fixed box widths above with object-fit contain: logos never share one height; Procore is the shortest (17px ink)
  - No fade masks measured at the edges
  - No label above or below
- color: Every wordmark renders #3B3D42 (pixel-sampled), whatever color the SVG file has. The site recolors black SVGs with this exact CSS filter: brightness(0) saturate(1) invert(0.2) sepia(0.05) saturate(7.55) hue-rotate(185deg) brightness(0.98) contrast(0.86). Use that filter (or recolor the SVG fills to #3B3D42). Never pure black, never full-color logos

**Context statement + stat pair**
- summary: Centered 40px heading, 2-line body, blue text link, then two giant mono percentages joined by a blue plus, and a 12px footnote
- ground: #FFFFFF
- desktop: Heading 'Your context, wherever you need it' y 1291, 768px column (x 336), 1 line, 40px/48px 500 -0.4px. Body 16px/24.96px 2 lines at y 1347. Text link 'See the Teamwork Graph →' centered at y 1421 (16px #1868DB). Stats y 1469: '44' Atlassian Mono 700 128px + '%' 96px, numeral box 169px tall (128px glyphs with line-height normal), so the label 'BETTER ANSWER QUALITY' (Atlassian Mono 16px/19.2px 500, uppercase, +1.28px, #292A2E) at y 1642; a 44x44 #1868DB plus SVG centered at x 698-742; '48%' + 'FEWER TOKENS' to the right. Pair centred: numbers at x 409 and x 815. Footnote 12px/18.72px #292A2E, 2 lines, centered 768px, at y 1714. Section ends y 1831
- phone: Heading 24px/28.8px 2 lines at y 1162; body 16px 5 lines; link at y 1377; numbers 72px + '%' 40px, labels 12px/14.4px +0.96px (first wraps to 2 lines); plus between them; footnote 4 lines at y 1557. Measured: heading y 1162 ('Your context, wherever' / 'you need it'), body y 1228, link y 1377, numerals y 1425 ('44' at x 48, '48' at x 227), labels y 1504, plus 32x95 at x 179, footnote y 1557; section gap: marquee row ends 1098, heading 64px below
- anatomy:
  - Stat numerals are #101214 Atlassian Mono 700, not the display face
  - The plus is an image (stats-plus.svg), not a glyph
  - The numeral box is 169px tall (line-height normal), so labels sit at y 1642, 173px below the numeral top; '%' is a separate 96px span (58px wide) top-aligned 23px lower
- copy: Body (verbatim): 'Safely pull in context from wherever you work, from Jira and Confluence to Slack, GitHub and more. Give teams and agents the context they need to deliver breakthrough results.' Footnote (verbatim): 'Findings based on Atlassian Engineering Productivity Study, 2026. In internal studies, we have achieved up to 44% better answer quality and used up to 48% fewer tokens. Individual results may vary.'

**Teamwork Graph (dark band)**
- summary: Full-bleed #1E1F21 band: white 48px headline, 20px body and a white-outline pill top-left, a full-width animated node graph behind
- ground: #1E1F21
- desktop: Band y 1831-2783 (952px, padding 80px 0, starts 80px after the stats footnote). Text column x 136, 444px wide: headline 'Connect the work behind the work' 48px/55.68px 500 -0.96px, 2 lines, y 1911; body 20px/31.2px, 4 lines, y 2030; outline pill 'Explore Teamwork Graph →' 317x48 at y 2187 (2px #FFFFFF ring, white text). Graph: inline SVG 1440x792 (viewBox 1000x550) from y 1911, full bleed, nodes to the right of and below the text. Pause button 40x40 at x 136, y 2643
- phone: Band y 1711-2396 (685px, padding 80px 0). Headline 32px/37.12px 2 lines ('Connect the work' / 'behind the work') at y 1791; body 20px/31.2px 5 lines at y 1874; outline pill 262x40 at y 2062; graph image 390x215 full-bleed at y 2102 (directly under the pill, whole network visible, never cropped or enlarged; use assets/teamwork-graph-clean-phone.png at width 100%); pause button 40x40 at x 32, y 2256 over the graph's bottom-left; 80px padding below
- at rest: Static state: about 25 nodes linked by dotted #505258/#6C6F77 lines: rounded-square app tiles in brand colors (#1868DB, #C97CF4, #FFC716, #82B536, #FB9700), round people photos, and dark pill labels in mono type ('Project', 'Work item', 'Roadmap', 'Focus area') with a #6C6F77 border. Nodes drift and links pulse: animation only. Resting-state images: assets/teamwork-graph-clean-desk.png (1440x792 @2x, the SVG alone, no text) and assets/teamwork-graph-clean-phone.png (390x216 @2x). Both are clean: no headline, body, pill, pause button or white strip baked in
- type color: All type on this band renders #FFFFFF (sampled pixels), although the computed color reads #101214
- anatomy:
  - Headline and body are white, not grey
  - Outline pill: transparent fill, 2px white ring
  - The graph is live inline SVG (viewBox 1000x550, 60 image nodes); the slot uses a clean capture of the SVG alone: place it full-bleed at y 1911 (1440) behind the text column, scale = width 100%, height auto, nothing cropped
- copy: Body (verbatim): 'The Teamwork Graph connects knowledge, people, decisions, and relationships so agents can act with the context your organization has built.' Pill 'Explore Teamwork Graph →'

**Collections (tabbed)**
- summary: 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
- ground: #FFFFFF
- desktop: Heading 'Transform how your teams work' y 2863, centered 768px, 1 line, 48px. Intro 20px 2 lines y 2927. Tab track y 3029: 708x58, #F0F1F2, radius 40px, padding 8px, centered (x 366); five tabs 'Teamwork', 'Strategy', 'Service', 'Software', 'Product' (Charlie Text 18px/26px 500, padding 8px 32px, 42px tall; widths 154/138/126/143/131). Active tab: #101214 pill (radius 32px, absolutely positioned, slides) with #FFFFFF text; inactive #101214 text. Panel y 3135-3514, columns x 136 (568px) and x 736 (568px), 32px gap: wordmark SVG 32px tall (e.g. bold 'Teamwork' + light 'Collection') at y 3162; app row y 3218: 26.4px app icons, each followed 7.6px later by its label in Charlie Text 20px/31.2px 400 #292A2E (20px is the font size), about 32px between one label and the next icon, (Jira, Confluence, Loom, Rovo); h3 40px/48px 500 -0.4px, 2 lines, y 3281; body 16px/24.96px 2 lines y 3385; text link 'Explore Teamwork Collection →' 16px #1868DB y 3467. Right: product composite PNG 568x379 (3:2) at y 3135, no frame
- phone: Heading 32px 2 lines left-aligned at y 2444; intro 20px 3 lines at y 2526; chips row y 2668 (40px tall, padding 8px 20px, 16px Wix 600, gap 8px, first at x 40): active #101214 with white text, inactive #F0F1F2 with #101214 text, overflowing the right edge. Panel stacks: wordmark 24px tall at y 2748; app icons 2 per row at y 2798 and 2861; h3 24px/28.8px at y 2922; body y 2988; link y 3095; image 326x217 at y 3139 (ends 3356)
- at rest: Teamwork tab selected. Other tabs swap the panel (Strategy: Focus, Talent, Align, Rovo; Service: Jira Service Management, Customer Service Management, Assets, Rovo; Software: Rovo Dev, DX, Pipelines, Bitbucket; Product: Jira Product Discovery, Feedback, Rovo)
- anatomy:
  - Track ends fade with 24px gradients from #F0F1F2 to transparent at each side
  - Tab color transition 0.3s ease-in-out
- copy: Intro (verbatim): 'Discover collections—curated apps and AI agents on a secure, compliant, and reliable platform.' Panels (h3 / body / link), verbatim: Teamwork: 'The teamwork platform for the AI era' / 'Turn scattered tools into a seamless system for AI orchestration, planning, knowledge, and delivering work at scale.' / 'Explore Teamwork Collection'. Strategy: 'AI-native strategic portfolio management' / 'Make strategy actionable at every level, with context-aware insights of your priorities, resources, risks, and funds.' / 'Explore Strategy Collection'. Service: 'Shatter the service quo' / 'Connect teams to elevate employee and customer experiences, improve service resilience, and deliver value fast.' / 'Explore Service Collection'. Software: 'Deliver high quality software. Fast.' / 'Measure and improve productivity, quality, and speed with the AI-native SDLC for every software team.' / 'Explore Software Collection'. Product: 'Better product decisions in the age of AI' / 'Bring together customer insights, product prioritization, and delivery into one place so you can build with confidence.' / 'Explore Product Collection'

**Customer stories (carousel)**
- summary: 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
- ground: #FFFFFF
- desktop: Heading 'Where 350,000+ teams turn context into delivery' x 136, 768px, 2 lines, y 3610. Intro 20px 2 lines y 3729. Outline pill 'Explore customers’ stories →' 328x48 at y 3832. Arrows: two 60x60 #101214 circles with white arrows at x 1176 and 1244, y 3880; at rest 'Previous' renders light grey (start of track), 'Next' black. Cards from y 3996: 432x384, radius 20px, padding 48px 40px, 32px apart, first at x 136; three visible (third clipped at 1440). Card (stacked from the top, see components.story_card): logo box 193.6x32 at y 4044, stat at y 4116 (Atlassian Mono 96px 700 -3px, 82px box; suffix 64px, 35px wide, 21px lower), description (Charlie Display 24px 400 -0.24px, 352px wide; computed line-height 32.64px but the rendered block is 56px for 2 lines, 23px for 1) at y 4214, 'Read the story →' (Charlie Text 18px) at y 4309 (y 4277 after a 1-line description)
- phone: Heading 32px 3 lines ('Where 350,000+' / 'teams turn context' / 'into delivery') at y 3470, intro 20px 5 lines at y 3589, outline pill 271x40 at y 3785; no arrows. Cards from y 3849: 311x306.5, 24px apart, first at x 32, padding 32px, logo box 135.8x24 at y 3881, stat 60px + 32px suffix at y 3945, description 18px/24.48px at y 4022, link at y 4103; 9 dots (8x8, 16px pitch, #101214 active, #6C6F77 inactive) at y 4194, x 127-263
- cards: In order (ground / type): Cisco 40x #CFE1FD / #101214; Expedia 400 #C75300 / #FFFFFF; Sprout Social 360+ #D3F1A7 / #101214; Procore 75% #4C6B1F / #FFFFFF; Trivago 200+ #FFE48F / #101214; Datasite 500k #803FA5 / #FFFFFF; SpotOn 55% #EED7FC / #101214; Delivery Hero 69% #101214 / #FFFFFF; The Warehouse Group 25% #1868DB / #FFFFFF
- anatomy:
  - Light cards carry black logos and ink type; dark cards carry white logos and white type
  - Track starts on the 136px content edge and overflows the page to the right; no left bleed
  - Use the customers' own numbers or none: these are Atlassian's published claims
- copy: Intro (verbatim): 'From hyper-growth startups to the Fortune 500, see how connected context helps teams turn everyday collaboration into automated momentum.' Card stat + suffix / description, verbatim and in order: Cisco '40' + 'x' / 'acceleration in reporting with Rovo agents'; Expedia '400' (no suffix) / 'hours/month saved with Atlassian automations'; Sprout Social '360' + '+' / 'hours of work saved every year onboarding new hires.'; Procore '75' + '%' / 'reduction in time spent writing quarterly roadmaps'; Trivago '200' + '+' / 'hours saved by Legal each year with Rovo agents'; Datasite '500' + 'k' / 'in cost savings from reclaiming 4,000+ meetings in 5 months'; SpotOn '55' + '%' / 'questions deflected by Rovo agents'; Delivery Hero '69' + '%' / 'cost savings in first 3 years'; The Warehouse Group '25' + '%' / 'lower TCO'. Each ends with 'Read the story →'. These are Atlassian's published customer claims: use them exactly, never reword what a number measures

**Platform pillars**
- summary: Left 48px heading with an outline pill under it, then four equal columns: 88px line icon, 32px title, 16px body
- ground: #FFFFFF
- desktop: Heading 'Built for how modern teams work' y 4555 (95px after the cards), 1 line. Outline pill 'Explore our platform →' 275x48 at y 4651. Columns at y 4779: x 136 / 436 / 736 / 1036, 268px wide, 32px gaps. Icon 88x88 (black line icon SVG). Title Charlie Display 32px/39.68px 500 at y 4883 (line counts 3, 2, 2, 1). Body Charlie Text 16px/24.96px #292A2E 8px below the title, 3-4 lines
- phone: Heading 32px 2 lines at y 4335, pill 228x40 at y 4442. One 326px column at x 32: icon 88px at y 4546 / 4806 / 5042 / 5277; title (20px/24.8px) 16px below each icon at y 4650 / 4910 / 5146 / 5381 (first wraps to 2 lines, the others 1); body 16px 3 lines 8px below each title; 24px from each body to the next icon; last body ends y 5489
- anatomy:
  - Titles: 'Designed for humans and AI collaboration', 'Deep, connected context', 'Secure from the start', 'Proven ROI at scale'
  - Icons are 2.3px-stroke #101214 line drawings in a 74px box
- copy: Bodies (verbatim, in order): 'Orchestrate everyday collaboration and autonomous tasks seamlessly within the same system of work.' / 'Fuel smarter workflows with unmatched breadth and depth across your entire digital workplace.' / 'Protect your data and enforce compliance automatically through enterprise permissions that carry across every agent.' / 'Deliver better output, cut unnecessary compute overhead, and drive stronger returns from your AI investments.'

**Teamwork Lab (content carousel)**
- summary: 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
- ground: #FFFFFF
- desktop: Heading 'Fueled by Atlassian’s teamwork expertise and research' 768px, 2 lines, y 5245. Intro 20px 2 lines y 5364. Arrows 60x60 at x 1176/1244, y 5427. Cards from y 5543: 316x523, radius 20px, overflow hidden, 32px apart, first at x 136; four visible (fourth clipped). Card: image 316x316 (object-fit cover), panel 316x207 padding 24px: tag (a rectangle, radius 3px, 18px tall, padding 0 8px; Charlie Text 16px/18px 500 uppercase +0.3px; see components.lab_tag) at y 5883, title Charlie Display 24px/29.76px 500 #FFFFFF, 3 lines, at y 5917, link 'Read now →' 16px white at y 6022
- phone: Heading 32px 3 lines at y 5633, intro 20px 5 lines at y 5752. Cards from y 5932: 311x478, 24px apart, first at x 32; image 311x311; panel padding 16px: tag (12px/16px, 16px tall, radius 3) at y 6259, title 18px/22.32px at y 6291, link at y 6374; 7 dots (8px, 16px pitch, #101214 active / #6C6F77) at y 6449, x 143-247
- cards: In order (panel / tag ground / tag text): 'Blog post' #4C6B1F / #EFFFD6 / #4C6B1F; 'Report' #1558BC / #E9F2FE / #1558BC; 'Blog post' #803FA5 / #F8EEFE / #803FA5; 'Blog post' #4C6B1F / #EFFFD6 / #4C6B1F; 'Video' #C75300 / #FFF5D4 / #9E4C00 ('Watch now'); 'Blog post' #4C6B1F / #EFFFD6 / #4C6B1F; 'Blog post' #1558BC / #E9F2FE / #1558BC
- anatomy:
  - Images are illustrated/photo composites on black or pale grids with mono-type labels, one per card
  - Panel color repeats the tag hue family; tag ground is the pale tint of that hue
  - Tags are 3px-radius rectangles, never pills
- copy: Intro (verbatim): 'Discover research-backed practices and operating models designed to help your teams navigate complexity and work smarter in the AI era.' Cards (tag / title / link), verbatim and in order: 'BLOG POST' / 'The Teamwork Lab reveals how more context = ROI from AI' / 'Read now'; 'REPORT' / 'Leading with context: Lessons from Atlassian’s AI journey' / 'Read report'; 'BLOG POST' / 'Inside AI Builders Week: How teams work in the AI era' / 'Read now'; 'BLOG POST' / 'How Cursor is navigating the new shape of product craft' / 'Read now'; 'VIDEO' / 'Atlassian’s Chief AI officer on building products for humans and agents' / 'Watch now'; 'BLOG POST' / 'How AI is changing developer workflows' / 'Read now'; 'BLOG POST' / 'Why individual AI speed isn’t delivering the ROI CIOs expected' / 'Read now'

**Closing CTA (dark band)**
- summary: Full-bleed #1E1F21 band, a giant darker Atlassian A mark centered behind, white 64px two-line headline, 24px line, blue primary pill
- ground: #1E1F21 with a #111213 'A' mark
- desktop: Band y 6146-6699 (553px, padding 64px 25px; inner padding 64px 0). Headline Charlie Display 64px/66.56px 500 -1.28px #FFFFFF, centered in 735px (x 353), y 6274, exactly 2 lines: 'Stop searching. Start' / 'shipping.' (the break falls after 'Start', not after 'searching.'; there is no forced break in the source, so with the stand-in set the break explicitly to land here). Sub Charlie Display 24px/29.76px 400 #FFFFFF, y 6419, 2 lines: 'Join the 350,000+ teams where agents plan, triage, and deliver across' / 'the Atlassian platform.' Primary pill 'Get started with Jira' 250x48 centered at y 6523. A mark: cta-band-a-mark.svg as a background of the band, centered BOTH ways (background-position 50% 50%, background-size min(100%, 432px), background-origin content-box, no-repeat): 432x431 at x 504-936, y 6207-6638, i.e. 61px clear of the band top and 61px clear of the bottom. Never bottom-anchored, never touching an edge
- phone: Band y 6526-6954 (428px, padding 64px 25px). Headline 44px/45.76px in 276px, exactly 3 lines: 'Stop' / 'searching.' / 'Start shipping.' at y 6590; sub 18px/22.32px 3 lines at y 6740; pill 203x40 centered at y 6850. A mark background-size contain inside the content box (340x300): about 301x300 centered at x 45-346, y 6590-6890, 64px clear top and bottom
- anatomy:
  - Only band where the display face is used at 400 for a subline
  - No secondary action
  - The A sits wholly inside the band with equal space above and below it
- copy: Headline 'Stop searching.  Start shipping.' (two spaces, no forced break). Sub (verbatim): 'Join the 350,000+ teams where agents plan, triage, and deliver across the Atlassian platform.' Pill 'Get started with Jira'

**Footer**
- summary: 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
- ground: Panel #F8F8F8 on a #FFFFFF page; panel 1200x422 at x 120, y 6715 (16px below the CTA band), padding 24px, radius 0 0 24px 24px (square top, rounded bottom)
- anatomy:
  - Column 1 (x 144, 264px): 32x32 blue Atlassian A mark (#1868DB) at y 6739, then 8 bold links (Charlie Text 14px/14px 700 #101214, 33px pitch, from y 6803): 'Company', 'Careers', 'Events', 'Blogs', 'Investor Relations', 'Atlassian Foundation', 'Press kit', 'Contact us'
  - Column heads at y 6746 (Charlie Text 13px 700 uppercase #101214): 'PRODUCTS' x 440, 'RESOURCES' x 736, 'LEARN' x 1032
  - Products (8 + 1): 'Rovo', 'Jira', 'Jira Align', 'Jira Service Management', 'Confluence', 'Loom', 'Trello', 'Bitbucket', then 'See all products →'
  - Resources (7 + 1): 'Technical support', 'Purchasing & licensing', 'Templates', 'Atlassian Community', 'Knowledge base', 'Marketplace', 'My account', then 'Create support ticket →'
  - Learn (5 + 1): 'Partners', 'Training & certification', 'Documentation', 'Developer resources', 'Enterprise services', then 'See all resources →'
  - Column links: Charlie Display 14px/14px 400, +0.42px, #101214, 33px pitch; the trailing arrow link is 14px 500 #1C2B42, 21px below the list. Hover: underline
  - Legal row on white at y 7190: 'Copyright © 2026 Atlassian' (Charlie Text 14px/18px #505258) at x 144; right side from x 794: 'Privacy policy', 'Terms', 'Trust Center', 'Impressum' (14px #292A2E, 32px gaps), then a globe icon + 'English ▾' language selector (14px #42526E) at x 1230
  - Page ends at y 7261
- phone: Wrapper x 24, 342 wide; #F8F8F8 panel x 24-366 from y 6970 (16px below the CTA band), 1462 tall, radius 0 0 24px 24px; content at x 40: blue A mark 32px at y 6994, the 8 bold links from y 7058 (33px pitch), then PRODUCTS (y 7362), RESOURCES (y 7768), LEARN (y 8141) stacked as open lists (no accordions), heads 56px above their first link, same 33px pitch, each trailing arrow link 54px after the last item. Legal row on white: copyright y 8472, then 'Privacy policy', 'Terms', 'Trust Center', 'Impressum' one per line at y 8522-8612 (30px pitch), then globe + 'English ▾' at y 8656. Page ends at y 8726

**On dark grounds**
- ground: #1E1F21 (two bands: Teamwork Graph and closing CTA)
- type: #FFFFFF for headline, body and sub (rendered), never grey
- secondary button: transparent pill, 2px #FFFFFF ring, #FFFFFF text, arrow
- primary button: unchanged #1868DB pill with white text
- link: no text links on dark bands
- muted text: none measured; graph hairlines #505258 and #6C6F77
- hairline: #6C6F77 (graph label pill borders)
- logo variant: the band mark is a #111213 A drawn darker than the ground; no white logo on dark bands

## Components

- **button primary** (observed): fill #1868DB, text #FFFFFF, radius pill, height 48, padding x 26, font size 20, weight 450, border 2px solid transparent, phone 40px tall, padding 8px 22px, 16px. Charlie Text, sentence case, no arrow. Transition scale 0.15s cubic-bezier(0.4,0,0,1) and background-color 0.15s. Label weight 450 = Wix Madefor Text matched to Charlie Text 400 (never 400)
  - hover (observed): fill #123263, text #FFFFFF
- **button secondary** (observed): fill transparent, text #101214, ring #101214, ring px 2, radius pill, height 48, padding x 26, font size 20, weight 450, phone 40px tall, padding 8px 22px, 16px. Label followed by a → arrow icon. On #1E1F21 the ring and text are #FFFFFF. Label weight 450 = Wix Madefor Text matched to Charlie Text 400 (never 400). Arrow after the label is the same 11x8 filled arrow as the text links, 8px after the label
  - hover (observed): fill #100F0E at 6.3% alpha, text #101214
- **text link** (observed): text #1868DB, font size 16, weight 450. Label + 11x8 filled right arrow (#1868DB, same color as the label), no underline at rest; 16px links set Wix 450. Hero 'Contact us' is Charlie Text 20px 500 = Wix 600, -0.19px, 20px/31.2px. Nav labels hover to the same #1558BC
  - hover (observed): text #1558BC
- **footer link** (observed): text #101214, font size 14, weight 400
  - hover (observed): decoration underline
- **tab bar** (observed): fill #F0F1F2, radius 40, padding 8px, height 58, on #101214. Active pill #101214 radius 32px with #FFFFFF text; tabs 42px, padding 8px 32px, 18px 500; color transition 0.3s ease-in-out. Tab labels: Wix Madefor Text 600 (matches Charlie Text 500), never 400
- **carousel arrow** (observed): fill #101214, text #FFFFFF, radius pill, height 60. 60x60 #101214 circles, 8px apart (x 1176 and 1244 at 1440), padding 19.5px 15px. Icon: one FILLED arrow path, not a stroked chevron: viewBox 0 0 29 20 rendered 30x20.7 and centered, #FFFFFF. Geometry in viewBox units: shaft 4.5 thick (y 7.55 to 12.05) running from x 0 to x 21, rounded ends (2.25 radius); head = two 4.5-thick round-capped arms meeting at the tip x 28.8, y 9.8, each about 13.5 long at 45 degrees, reaching y 0 and y 19.8. Path: M20.5361 19.1287C19.6575 20.0074 18.2322 20.0074 17.3535 19.1287C16.4748 18.25 16.4748 16.8248 17.3535 15.9461L21.248 12.0525L2.25 12.0525C1.00754 12.0523 0 11.045 0 9.80254C0.000234604 8.56023 1.00769 7.55276 2.25 7.55254L21.0654 7.55254L17.3535 3.84063C16.475 2.96202 16.4751 1.53765 17.3535 0.658987C18.2322 -0.219692 19.6575 -0.219692 20.5361 0.658987L27.8291 7.95293C28.4154 8.35896 28.8006 9.03537 28.8008 9.80254C28.8008 10.2822 28.6493 10.7265 28.3936 11.0916C28.2867 11.3125 28.1433 11.5206 27.96 11.7039L20.5361 19.1287Z. Previous = the same arrow mirrored. Disabled (Previous at the start of the track) is the same #101214 button at opacity 0.3, which renders light grey on white; never a thin outline arrow. Phone swaps the arrows for 8px dots
- **story card** (observed): radius 20, padding 48px 40px, height 384. 432x384 at 1440, padding 48px 40px, content stacked from the top: logo box 193.6x32 at +48 (object-fit contain, left-aligned); mono stat 82px box 40px below the logo; description 16px below the stat; 'Read the story' + 11x8 arrow (Charlie Text 18px 400 = Wix 450) 40px below the description. Phone: 311x306.5, padding 32px; logo box 135.8x24; stat 61px box 40px below; description (18px/24.48px) 16px below; link 16px Wix 450 about 32px below; 24px between cards
- **lab card** (observed): radius 20, padding 24px (panel), height 523. 316x523 at 1440: image 316x316 (cover), then a 207px colored panel, padding 24px: tag at +24, title 16px below the 18px tag (3 lines at 29.76px), link 'Read now' / 'Read report' / 'Watch now' + arrow 16px below the title, 24px bottom padding. Phone: 311x478, image 311x311, panel padding 16px: tag 16px tall, title 16px below (18px/22.32px), link 16px below, 16px bottom
- **media frame** (observed): radius 20, ring #DDDEE1, ring px 1. hero video frame only; collection and Lab images have no frame
- **search button** (observed): fill #F8F8F8, radius pill, height 40, padding x 8, font size 13.33, weight 400. 40x40 circle at x 1284, y 14; 24x24 magnifier icon at 8px inset; icon-only (font values are the browser default)
- **pause button** (observed): fill #DDDEE1, text #101214, radius pill, height 40, padding x 12, font size 13.33, weight 400. 40x40 #DDDEE1 circle showing PAUSE (two bars), because the media plays at rest; never a play triangle. Icon 16x16 centered (12px inset): two #101214 rounded bars, each 5x14 with 2px corner radius, 2px apart: path M2 3a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm7 0a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2z (viewBox 0 0 16 16). Hero: inside the frame bottom-right, 6px from the video's right edge and 14px from its bottom (x 1257, y 1036 at 1440; phone x 344, y 908). Graph band: x 136, y 2643 at 1440; phone x 32, y 2256 (overlapping the graph's bottom-left). Same #DDDEE1 fill on white and on #1E1F21. Font values are the browser default for an icon-only button
- **lab tag** (observed): radius 3, height 18, padding 0 8px. A small RECTANGLE with 3px corners, never a capsule or pill: 18px tall, padding 0 8px, Charlie Text 16px/18px 500 (Wix 600) uppercase +0.3px; widths at 1440: BLOG POST 105, REPORT 79, VIDEO 66. Ground = pale tint, text = deep hue (#EFFFD6/#4C6B1F, #E9F2FE/#1558BC, #F8EEFE/#803FA5, #FFF5D4/#9E4C00). Phone: 16px tall, 12px/16px, padding 0 8px, radius 3
- **carousel dots** (observed): fill #6C6F77, on #101214, radius pill. Phone only: 8x8 circles on a 16px pitch, centered under the track (stories: 9 dots at y 4194; Lab: 7 dots at y 6449); active #101214, inactive #6C6F77

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| ease-in-out-bold | cubic-bezier(0.4, 0, 0, 1) |  | scaling modals, repositioning | published |
| ease-out-bold | cubic-bezier(0, 0.4, 0, 1) |  | elements arriving: panels, flags | published |
| practical-out | cubic-bezier(0.6, 0, 0.8, 0.6) |  | exits, getting out of the way | published |
| practical-in | cubic-bezier(0.4, 1, 0.6, 1) |  | everyday entrances: popups, hover background fades | published |
| list-item-hover |  | 50ms | hover and press interactions run 50-150ms | published |
| dropdown-enter |  | 150ms | dropdown entrance | published |
| modal-enter |  | 250ms | modal entrance; transitions run 150-400ms | published |
| button | cubic-bezier(0.4, 0, 0, 1) | 150ms | primary/secondary pill hover: background-color and scale | observed |
| tab | ease-in-out | 300ms | tab label color as the active pill slides | observed |
| card-shadow | ease | 250ms | box-shadow on Products-dropdown collection cards | observed |
| logo-marquee | linear | 90000ms | customer logo strip scrolls left forever (animation only; build it static) | observed |

## Icon tokens

Grid 16×16, stroke 1.5px (published).
| Name | Size | Use |
|---|---|---|
| small | 12px | sparingly: chevrons, validation, tags, secondary actions |
| medium | 16px | default |

## Signature moves

### The product is the hero image

Where: 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).
Do: centered H1 (Charlie Display 500, 64px at 1440, #101214), a centered subline, then a blue pill CTA beside a blue text link with an arrow; below them a wide product frame with a 1px light border and rounded corners showing real UI (columns, cards, avatars, Rovo button). Exact frame radius and size belong to the page-anatomy step. Once per page, in the hero.
Don't: replace the product with abstract stock imagery or a gradient blob; Atlassian shows the work itself.
Example: "Discover the power of knowing".

### Named people and agents in pill tags

Where: 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).
Do: a blue or dark rounded pill with a white name, sometimes an avatar or agent glyph, set beside a cursor arrow or a connector line; people and AI agents are labeled the same way, so they read as teammates. Sizes not measured. One cluster per image.
Don't: show an anonymous AI widget; agents get names and sit in the same team picture as people.
Example: "Ask Rovo", with "Rovo" set as color.

### App logos as colored tiles, colored by collection

Where: app logos everywhere (nav menus, collection tabs on the homepage, product pages).
Do: each app's glyph sits in a rounded-square tile whose color is its collection: blue for Teamwork (Jira, Confluence, Loom), dark tiles with orange for Strategy (Focus), yellow for Service (JSM, CSM), lime for Software (Bitbucket), purple for Product (JPD). Tile radius is the published radius.tile (25%) and must not be changed. Wherever apps are named.
Don't: re-round, recolor, nest in another container or add shadows to app tiles; the guide forbids all four.
Example: "Jira, Confluence, Loom".

### One blue pill, one blue arrow link

Where: hero and closing band on atlassian.com.
Do: primary: #1868DB pill, white Charlie Text 20px, 48px tall, padding 10px 26px (observed); secondary: a blue text link ending in a right arrow ('Contact us') beside it. One pair per band.
Don't: use title case, square buttons or a second filled button; the secondary action is a link.
Example: "Get started with Jira", with "Get started with Jira" set as color.

## Messaging: rules

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.

Why it works: Every band answers the same question (why connected context matters for teams and AI), so the page reads as an argument, not a catalog.

|  |  |
|---|---|
| Hero line | 4-6 words, sentence case |
| Collections | Teamwork, Strategy, Service, Software, Product |
| Customer count | 350,000+ teams (homepage, 2026-10-29) |

- Lead with the outcome for teams, then name the app
- Back claims with a number and a source line; footnote internal studies
- Name collections and apps exactly; apps are 'apps', not 'products'
- Close with a short imperative pair and the primary CTA
- Don't invent stats or drop the footnote
- Don't make Atlassian-branded claims for a third-party product

Real examples, to look at on Atlassian's own pages (not for reuse):
- Research tile: 'Leading with Context' report card, blueprint grid with named cursors: https://www.atlassian.com/
- Feature image: a Confluence plan, Loom video and Jira cards linked, with named collaborator pills: https://www.atlassian.com/

Sources: https://www.atlassian.com/, https://www.atlassian.com/company, https://www.atlassian.com/system-of-work, https://www.atlassian.com/platform/teamwork-graph

## Voice: rules

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.

Why it works: Tying tone to the user's state (confident admin versus confused trial user) keeps a cheerful brand from being glib in an error message.

|  |  |
|---|---|
| Traits | Bold; Optimistic; Practical, with a wink |
| Principles | Inform, Empower, Encourage, Motivate, Satisfy, Delight |
| Case | Sentence case |
| Spelling | US English (Merriam-Webster) |

- 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
- Don't use humor or cheek as 'delight'
- Don't write 'e.g.', 'etc.' or '&'
- Don't end headings with periods or question marks

Do and don't:
- Do: "We can't load this page". Present tense, contraction, 'we' owns the problem.
- Don't: "The Page Could Not Be Loaded.". Title case, passive voice and a period in a heading.
- Do: "Create work item". Action verb, sentence case, no article.
- Don't: "Create A New Work Item!". Title case, article and an exclamation in a button.

Real examples, to look at on Atlassian's own pages (not for reuse):
- Success flag: green tick, short past-tense heading: https://atlassian.design/foundations/content/designing-messages
- Empty state encouraging an admin to add people to a Jira project: https://atlassian.design/foundations/content/designing-messages

Sources: https://atlassian.design/foundations/content/voice-tone, https://atlassian.design/foundations/content/language-and-grammar, https://atlassian.design/foundations/content/designing-messages, https://atlassian.design/foundations/content/inclusive-writing, https://www.atlassian.com/

## Logo: rules

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.

Why it works: One mark family across 30+ apps: the tile shape says 'Atlassian app', the tile color says which collection, the glyph says what it does.

|  |  |
|---|---|
| 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% |

- 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

Do and don't:
- Do: "Logo in brand blue on white". Brand version on light grounds, clear space of one cap-height 'A'.
- Don't: "Logo with a drop shadow on a photo". No drop shadows, no complex backgrounds, no unapproved colors.

Real examples, to look at on Atlassian's own pages (not for reuse):
- Logo anatomy: logomark, wordmark and strapline: https://atlassian.design/foundations/logos
- The three color options: brand, inverse and neutral: https://atlassian.design/foundations/logos
- Minimum clearance, horizontal lockup: https://atlassian.design/foundations/logos
- App logomarks contained in collection-colored tiles: https://atlassian.design/foundations/logos
- Strapline lockup with app names centered under the logo: https://atlassian.design/foundations/logos

Sources: https://atlassian.design/foundations/logos, https://atlassian.design/components/logo/examples, https://www.atlassian.com/blog/developers/our-bold-new-brand, https://www.atlassian.com/legal/trademark

## Color: rules

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.

Why it works: Roles carry meaning across 30+ apps and both themes, so 'danger' is the same red everywhere and dark mode comes for free.

|  |  |
|---|---|
| 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 |

- 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

Not published: a marketing color ratio or proportion; the homepage heading color #101214 as a palette step.

Do and don't:
- Do: "Get started with Jira". One Blue700 pill per band for the primary action.
- Don't: "Get started". Purple is the discovery role (new features), not a second brand CTA color.
- Do: "Mostly white, near-black type". White surfaces, #292A2E text, blue only where you act.
- Don't: "A page flooded blue". Bold brand blue is a background for buttons and small moments, not whole pages.

Real examples, to look at on Atlassian's own pages (not for reuse):
- Color roles on buttons: brand, neutral, warning, danger: https://atlassian.design/foundations/color
- A Jira board mapped to the tokens that color it: https://atlassian.design/foundations/color
- Text emphasis levels: default, subtle, subtlest: https://atlassian.design/foundations/color
- Tags in the ten accent colors: https://atlassian.design/foundations/color/accents

Sources: https://atlassian.design/foundations/color, https://atlassian.design/foundations/color/color-palette, https://atlassian.design/components/tokens/all-tokens, https://atlassian.design/foundations/color/accents, https://atlassian.design/foundations/color/data-visualization-color, https://www.atlassian.com/

## Typography: rules

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.

Why it works: A characterful brand face for persuasion and a neutral, fast UI face for work keeps the apps calm and the marketing distinctive.

|  |  |
|---|---|
| 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._

- 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

Do and don't:
- Do: "Discover the power of knowing". Brand display face, medium weight, sentence case.
- Don't: "DISCOVER THE POWER OF KNOWING". All caps in the body face.

Real examples, to look at on Atlassian's own pages (not for reuse):
- Brand banner set in the brand face: 'Work smarter, not harder with AI': https://atlassian.design/foundations/typography
- App fonts: Atlassian Sans and Atlassian Mono: https://atlassian.design/foundations/typography
- Heading, body and code text styles: https://atlassian.design/foundations/typography

Sources: https://atlassian.design/foundations/typography, https://www.atlassian.com/, https://www.atlassian.com/blog/developers/our-bold-new-brand

## Iconography: rules

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.

Why it works: Rounded curves echo the type; square ends add boldness and keep strokes pixel-aligned.

|  |  |
|---|---|
| Grid | 16 x 16px |
| Stroke | 1.5px |
| Sizes | 16px default, 12px small |
| Caps | none (butt) |
| Corners | rounded outside, sharp inside |

- 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

Real examples, to look at on Atlassian's own pages (not for reuse):
- Icon sizes: 16px medium and 12px small: https://atlassian.design/foundations/iconography
- Keyline shapes in the icon template: https://atlassian.design/foundations/iconography
- Do: keep internal angles sharp: https://atlassian.design/foundations/iconography

Sources: https://atlassian.design/foundations/iconography

## Illustration: rules

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).

Why it works: Illustration explains or celebrates; it never decorates a work surface.

|  |  |
|---|---|
| Types | Spot, low-fidelity UI, ambient pattern; collage for marketing |
| Low-fi UI | basic shapes, sharp corners, mostly gray |

- 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

Real examples, to look at on Atlassian's own pages (not for reuse):
- Spot illustrations by job: clarify state, encourage action, inspire next steps, celebrate: https://atlassian.design/foundations/illustrations
- Low-fidelity UI in spotlight onboarding modals: https://atlassian.design/foundations/illustrations
- Ambient patterns behind messages: https://atlassian.design/foundations/illustrations
- Marketing collage: flat color shapes with hand-drawn line icons and a cursor (System of Work page): https://www.atlassian.com/system-of-work

Sources: https://atlassian.design/foundations/illustrations, https://www.atlassian.com/system-of-work

## Photography: rules

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.

Why it works: Showing the product and the team graph keeps the story on how work connects.

|  |  |
|---|---|
| Guide coverage | not published |

- 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

Not published: photography style, crops, color treatment.

Real examples, to look at on Atlassian's own pages (not for reuse):
- Teamwork Lab blog hero: tinted photo in a diamond crop, network lines, name pills: https://www.atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-context
- Homepage feature image built from product UI: https://www.atlassian.com/

Sources: https://www.atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-context, https://www.atlassian.com/

## Motion: rules

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.

Why it works: Fast, quiet motion for things seen dozens of times a day; expression saved for rare brand moments.

|  |  |
|---|---|
| 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) |

- 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

Real examples, to look at on Atlassian's own pages (not for reuse):
- A success moment with a celebratory brand animation: https://atlassian.design/foundations/motion

Sources: https://atlassian.design/foundations/motion

## Interface and layout: rules

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.

Why it works: One spacing and radius scale lets 30+ apps feel like one family and keeps density predictable.

|  |  |
|---|---|
| Base unit | 8px |
| Space scale | 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80px |
| Grid | 12 columns from 1024px; 6 at 480-1023; 2 at 320-479 |
| Gutters | 12px under 1024, 16px above |
| Margins | 16px under 1024, 32px above |
| Fixed-wide max | 1296px |
| Fixed-narrow max | 864px |
| Radius | 2 / 4 / 6 (buttons, inputs) / 8 (cards) / 12 (modals) / 16 (video) / 999 |
| Border width | 1px default, 2px selected and focused |
| Shadow raised | 0 1px 1px rgba(30,31,33,0.25), 0 0 1px rgba(30,31,33,0.31) |
| Shadow overlay | 0 8px 12px rgba(30,31,33,0.15), 0 0 1px rgba(30,31,33,0.31) |

_These are app (design-system) layout values; atlassian.com page anatomy is measured in a separate step._

- Group by similarity and proximity; use scale and whitespace for hierarchy
- Only top-level containers align to the grid; small elements use space tokens
- Fixed-wide for dashboards, fixed-narrow for long-form reading, fluid for boards
- Design for at least two breakpoints, always including mobile (xxs)
- Raised surfaces always with the raised shadow; overlays with the overlay shadow
- Focus ring 2px, offset 2px, radius +2px
- Don't let content overflow into gutters or margins
- Don't use raised cards just to group content
- Don't use sunken surfaces on raised or overlay elevations

Real examples, to look at on Atlassian's own pages (not for reuse):
- Grid across breakpoint ranges: https://atlassian.design/foundations/grid
- Content spanning 12, 6 or 4 columns: https://atlassian.design/foundations/grid
- The spacing scale, 0 to 80px: https://atlassian.design/foundations/spacing
- radius.medium on buttons, inputs, smart links and nav items: https://atlassian.design/foundations/radius

Sources: https://atlassian.design/foundations/spacing, https://atlassian.design/foundations/grid, https://atlassian.design/foundations/radius, https://atlassian.design/foundations/elevation, https://atlassian.design/foundations/border

## Rules: rules

The public rules are the design system's: tokens over raw values, accessibility minimums, sentence case, official logo files only. Atlassian's full brand guidelines, brand book and marketing voice live behind a login in its Orange Logic DAM (Mosaic).

Why it works: Publishing the product rules openly lets the whole ecosystem build consistent add-ons, while marketing brand law stays internal.

|  |  |
|---|---|
| Public | atlassian.design foundations, content and logo downloads |
| Gated | Atlassian Brand Guidelines, Brand Book, Templates and Toolkits, In-Product Illustration Guidelines, brand fonts |

- 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)
- Don't put an Atlassian trademark in a company or domain name

Sources: https://atlassian.design/foundations, https://atlassian.design/foundations/accessibility, https://www.atlassian.com/legal/trademark, https://orangedam.atlassian.com/

## Campaigns

### Our bold new brand: the 2017 identity (2017)

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.

How the system shows: The A logomark and Charlie Sans still anchor the brand; the 2025 app tiles extend the same family idea.
Why it works: One mark family built around teamwork lets any new app join without a new identity.
Channels: identity system, web, products. Source: https://www.atlassian.com/blog/developers/our-bold-new-brand

### App logos and collections (2025)

With the System of Work and collections framework, products became 'apps', with marks that symbolize function inside tiles colored by collection.

How the system shows: Homepage collection tabs show each collection's app tiles; tile color equals collection.
Why it works: Color now encodes portfolio structure, so a buyer can read the lineup at a glance.
Channels: logos, web, in-product. Source: https://atlassian.design/foundations/logos

### State of Teams 2025 (2025)

Survey of 12,000 knowledge workers and 200 executives; found leaders and teams waste 25% of their time searching for answers.

How the system shows: Research-led proof that feeds the context story on the homepage.
Why it works: Turns a product claim (context) into a measured industry problem.
Channels: research report, blog, PR. Source: https://www.atlassian.com/blog/state-of-teams-2025

### Teamwork Lab: give AI more context (2026)

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.

How the system shows: Dark hero with a tinted photo, network lines and name pills; stats as charts.
Why it works: Independent-feeling research from a named lab gives the homepage numbers a source.
Channels: blog, research. Source: https://www.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.

How the system shows: Homepage tile: 'AI' drawn as vector outlines on a blueprint grid with named cursor pills.
Why it works: Atlassian as its own case study: the brand practices what the product sells.
Channels: report, blog, homepage tile. Source: https://www.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.

How the system shows: Collage illustrations: flat color shapes with hand-drawn line icons and cursors.
Why it works: A philosophy that frames the app portfolio as one way of working.
Channels: landing page, keynote, practices. Source: https://www.atlassian.com/system-of-work

### State of Developer Experience 2025 (2025)

With Wakefield Research, a survey of 3,500 developers and managers on AI and developer friction.

How the system shows: Gated report page in the standard web system.
Why it works: Gives the Software collection its own research proof.
Channels: gated report. Source: https://www.atlassian.com/teams/software-development/state-of-developer-experience-2025

## Applications

| Format | What | 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. | https://www.atlassian.com/ |
| product UI | Jira, Confluence and the other apps, built from ADS tokens, Atlassian Sans and the logo component. | https://atlassian.design |
| blog | Teamwork Lab articles with tinted photo heroes, network lines and name pills. | https://www.atlassian.com/blog/ai-at-work/want-more-confidence-in-ai-give-it-more-context |
| report | Leading with Context reports and State of Teams. | https://www.atlassian.com/blog/guides-research/leading-with-context |
| press | Press kit: executive headshots, logo library, company overview. | https://www.atlassian.com/company/news/press-kit |
| landing page | System of Work and Teamwork Graph pages with collage illustration and product UI. | https://www.atlassian.com/system-of-work |

## By format

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. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | 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 | 2 | White slides, sentence-case headlines, one blue accent, product UI and named-collaborator imagery | one dark section divider |
| Proposal page | 2 | Calm white page, outcomes backed by numbers with sources, one blue pill for the next step | a product UI frame at the top |
| Ad | 3 | Attribution logo (context unclear), short sentence-case line, product UI | collage illustration |
| Social post | 4 | One stat or headline, brand blue or dark ground, named pills or collage | illustration style |
| Email | 1 | White, #292A2E text, one blue pill button | none |
| Error message | 0 | Practical tone: what happened, what to do next; present tense; no wink | none |

## Checks before anything ships

- **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.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Atlassian's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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.

Logos and reference images belong to Atlassian. Look at them on Atlassian's own pages; don't reuse them.