UI Sections
SectionsStylesIndustriesCompaniesAbout

Atlassian website design

Every section we captured from the Atlassian website, in page order, from the hero section down to the footer. Open any thumbnail to see it full size.

Visit atlassian.com (opens in a new tab)

Sections 8

In page order, top to bottom

  1. Atlassian hero section: huge centered TEAMWORK GRAPH headline with doodles, ringed by app icons and avatars linked by graph lines on dark
    01 Hero

    TEAMWORK GRAPH

  2. Atlassian features section: hub diagram linking app icons to a central graph on the left, stepped feature list on the right, dark grid
    02 Features

    Every signal from your work, in one place

  3. Atlassian stats section: four bordered cells with large monospaced counters and labels on a dark grid-line background
    03 Stats
  4. Atlassian integrations section: centered heading and copy above a curved row of connector app icons and a browse button on dark
    04 Integrations

    The more you connect, the smarter your AI gets

  5. Atlassian features section: MCP copy, button and agent chips on the left, chat UI window over a purple shape on the right, dark grid
    05 Features

    In your browser and desktop agents

  6. Atlassian stats section: heading and explanatory copy on the left with two percentage metrics on the right on a dark background
    06 Stats

    Results that speak for themselves

  7. Atlassian features section: centered heading, four selectable prompt cards and a project node graph in a dashed frame on dark
    07 Features

    Tour our demo or start exploring your own graph

  8. Atlassian footer section: Atlassian logo, legal links and four link columns with a language selector on a dark background
    08 Footer

Similar companies

All companies
Rogo13 sections Canopy29 sections Attio16 sections Zamp16 sections
    ↑↓ Navigate ↵ Open

    Section preview

    Website section