Atlassian Teamwork Graph

Technical and bold with playful energy. Massive uppercase typography anchors the dark canvas, surrounded by a constellation of interconnected SaaS app nodes.

energetic

Visit site

Colour

Background#111213

Text#f0f1f2

Accent#ffffff

Surface#18191a

Muted#96999e

Typefaces

Display: Charlie Display
Body: Atlassian Sans
Mono: Atlassian Mono
Source: self_hosted
Scale: 12 · 13 · 14 · 16 · 20 · 24

Layout

Grid: —
Container: —
Spacing base: 4px
Radius: 8px

Capture

Category: tools
Sections: 1
Captured: 2026-08-29
Rhythm: dark

Type rules

hero headlines set in uppercase condensed sans
body text constrained to ~67 characters per line

Colour rules

deep charcoal dark mode background throughout
vibrant tool icon nodes provide localized color pops

Voice rules

action-oriented phrases
concise technical value claims

Holds it together

center heavy display titles enveloped by node networks
maintain high-contrast white typography on near-black backgrounds
use subtle pill badges for status tags and actions

Contrast

text on background16.6:1 AAA

muted text on background6.6:1 AA

text on surface15.6:1 AAA

accent on background18.8:1 AAA

background on accent18.8:1 AAA

Type, measured

Body: 14px / 1.71
Measure: 67 characters
Display: 32px / 1.2
Tracking: -0.02em display
Scale ratio: 1.23

Voice

Tone: direct, confident
Sentences: short
Person: second
Vocabulary: technical
Calls to action: see, browse, log

Built with

Builder: —
Framework: —
Motion: —
WebGL: —
Nav: top_bar, 2 items
Length: 1 screens

Mode

Sections in page order

00
hero
Strong
A high-contrast dark hero combining gigantic bold typography with playful scribbled interventions and a surrounding constellation of connected tool icons.
Mood
energetic + playful
Layout
1 col · centered · balanced
Open section →