Atlassian DESIGN.md

Work coordination software with sharp enterprise clarity and bright blue structure. Atlassian's public site uses Charlie Display and Charlie Text, with white surfaces, pale blue support backgrounds, deep navy text, and a strong Atlassian blue anchored around #0052CC.

1. Visual Theme & Atmosphere

Overall Aesthetic

Atlassian feels like serious teamwork software expressed through crisp, modern, enterprise-friendly design. It is product-rich, confident, and structurally disciplined.

Mood & Feeling

• Structured and dependable
• Technical but approachable
• Enterprise-ready without heaviness
• Modular and product-driven
• Clear, fast, and pragmatic

Design Density

Medium density. Atlassian surfaces carry lots of product and use-case depth, but the system stays scannable through strong grouping, white space, and blue-led structure.

Visual Character

• White and pale blue foundation
• Clean product cards and feature grids
• Deep navy text and strong blue accents
• Minimal decorative softness
• Enterprise work tools framed with high clarity

2. Color Palette & Roles

Core Foundation

Support Tokens

3. Typography Rules

Font Stack

css--font-display: "Charlie Display", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Charlie Text", "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Typography Philosophy

Atlassian typography should feel precise, structured, and product-capable. It supports engineering, IT, project management, and enterprise browsing without visual fluff.

4. Component Stylings

Buttons

css.button-primary {
  background: #0052cc;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
}

.button-primary:hover {
  background: #2684ff;
}

.button-secondary {
  background: #ffffff;
  color: #172b4d;
  border: 1px solid #dfe1e6;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
}

Product Cards

css.product-card {
  background: #ffffff;
  border: 1px solid #dfe1e6;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(23, 43, 77, 0.06);
}

Inputs

css.input {
  background: #ffffff;
  color: #172b4d;
  border: 1px solid #dfe1e6;
  border-radius: 12px;
  min-height: 44px;
  padding: 12px 14px;
}

Component Notes

• Cards should feel crisp and systematic
• Blue is the structural brand cue, not a general page wash
• Product depth should always remain easy to browse

5. Layout Principles

Spacing Scale

Layout Behavior

• Group products by team, role, and workflow
• Keep feature depth organized into cards and columns
• Use blue tints sparingly to support structure
• Favor clean, enterprise-readable alignment over decorative asymmetry

Whitespace Philosophy

Whitespace should feel systematic and efficient, helping dense platform information stay legible and actionable.

6. Depth & Elevation

Elevation Strategy

Atlassian uses light enterprise elevation with clear card edges and restrained shadows.

css--shadow-soft: 0 8px 18px rgba(23, 43, 77, 0.05);
--shadow-card: 0 16px 30px rgba(23, 43, 77, 0.08);

Surface Hierarchy

• White canvas
• Light blue or gray background bands
• Elevated white product cards
• Strong blue CTA and navigation accents

7. Do's and Don'ts

Do

• Keep Atlassian interfaces sharp, structured, and product-clear
• Use blue to orient the experience
• Make complex workflows feel manageable through hierarchy
• Preserve enterprise credibility and technical readability

Don't

• Do not over-soften the design into consumer-app bubbly UI
• Do not oversaturate large surfaces with blue
• Do not hide platform breadth behind weak organization
• Do not use playful decoration where structure should lead

8. Responsive Behavior

Breakpoints

Responsive Rules

• Keep navigation and role-based browsing understandable on mobile
• Preserve card clarity and readable headings at all sizes
• Stack dense platform grids before compressing too far
• Maintain obvious CTA hierarchy across responsive states

9. Agent Prompt Guide

Quick Reference

• White and pale-blue enterprise foundation with Atlassian blue
• Charlie-style typography and crisp product cards
• Structured, role-based work-software browsing
• Technical clarity with modern enterprise polish

Prompt Template

textDesign this like Atlassian's current public website:
- white and light-blue enterprise foundation
- strong Atlassian-blue CTAs and structural accents
- Charlie-style typography with crisp, systematic product cards
- role-based and workflow-based platform browsing
- modern technical enterprise clarity without cold heaviness