Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.

Back to Browse

Atlassian

Productivity

Atlassian's brand radiates collaborative optimism through vibrant geometric color blocks and the distinctive Charlie font family, creating an ecosystem that feels both professional and playfully human. The design balances enterprise credibility with approachable warmth, using bold orange as an energizing accent that suggests innovation and forward momentum.

(0)
0
Visit Website
Screenshot of Atlassian website

Design Identity

Signature Color

Atlassian Amber

#FF8B00

collaborative energy and innovation catalyst

Visual Identity

Vibrant geometric color blocking with abstract angular shapes creating dynamic movement patterns, combined with the distinctive Charlie typography system that mixes Display and Text variants for hierarchical clarity.

Component Style

Buttons feature generous rounded corners (approximately 6-8px radius) with solid fills and confident padding. The 'Register now' button demonstrates their signature orange with high contrast white text, while secondary actions use subtle styling. Components feel substantial but not heavy, with clean edges and purposeful spacing.

Spacing Philosophy

Generous breathing room between major content blocks creates visual clarity, while maintaining tight cohesion within component groups. The layout uses asymmetrical balance with content concentrated in defined zones, allowing colorful background elements to flow freely.

Design Principles

  • Color blocks use geometric angular shapes, never organic curves
  • Charlie Display for headlines at 70px with 80px line-height for maximum impact
  • Button text uses Charlie Text at 13.33px weight 400 for accessibility
  • Orange (#FF8B00) reserved for primary actions and energy moments
  • Shadows use consistent #091E42 base with varying opacity levels (29%, 26%, 40%)

Target Audience

Software development teams and project managers who need enterprise-grade tools but value human-centered design and collaborative workflows over sterile corporate interfaces

Mood

collaborativegeometricenergeticsystematicoptimisticangularvibrant

Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.

Design System

Typography Scale

ElementFontSizeWeightLine Height
body"Charlie Text"16px400normal
h1"Charlie Display"70px40080px
h2"Charlie Text"12px40020px
h3"Charlie Display"16px70016px
h5"Charlie Display"13.28px700normal
p"Charlie Display"12px400normal
a"Charlie Text"16px400normal
button"Charlie Text"13.3333px400normal
input"Charlie Text"14px400normal
nav"Charlie Text"16px400normal

Color Palette

#091e42

UI Elements

button-primary
button-secondary
button
input
a
nav

Similar Designs

Completely Different Designs

Discussion

Loading comments...